Skip to content
Browse files

modification css

  • Loading branch information...
1 parent b2fc6e7 commit 77f8b896c32690bd8cae25555d73db3b34afd0f5 @Mparaiso committed Feb 18, 2012
Showing with 110 additions and 63 deletions.
  1. +19 −14 css/index.css
  2. +8 −3 index.html
  3. +30 −16 js/faviconbuilder.coffee
  4. +53 −30 js/faviconbuilder.js
  5. 0 manifest
View
33 css/index.css
@@ -1,10 +1,16 @@
-/*
-Document : index
-Created on : 14 févr. 2012, 21:56:52
-Author : mark prades
-Description:
-Purpose of the stylesheet follows.
- */
+/* ksuFAVICON BUILDER stylecheet */
+h1,h2,h3,h4,h5,h6,div,p{
+margin:0;
+padding:0;
+}
+h1,h2,h3,h4{
+ margin-top:10px;
+ margin-bottom: 5px;
+}
+h5,h6{
+margin-top: 6px;
+
+}
#header{
margin:0;
padding:0;
@@ -48,7 +54,6 @@ body{
font-size:13px;
padding:0;
margin:0;
-
}
canvas{
border: 1px solid #AAA;
@@ -59,10 +64,10 @@ canvas{
cursor: crosshair;
}
#target._16{
- width:390px;
+ width:395px;
}
#target._32{
- width:755px;
+ width:775px;
}
#colorSelector,#left{
width: 100px;
@@ -86,18 +91,18 @@ canvas{
margin-right:20px;
padding:0;
}
-.cell{
+#target div{
width:20px;
height:20px;
- margin:-3px 1px 0px 0px;
+ margin:-2px -2px 0px 0px;
padding: 0;
line-height: 0;
display: inline-block;
border:1px solid #DDD;
}
-.cell:hover{
+#target div:hover{
border: 1px dashed #AAA;
}
.emptyCell{
- background:url("/lib/img/faviconbuilder/emptycell.gif") ;
+ background:url("/lib/img/faviconbuilder/emptycell.gif"), url("../img/emptycell.gif");
}
View
11 index.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>Favicon builder</title>
+ <title>KsuFavicon builder</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/index.css" />
<!--[if IE]>
@@ -10,7 +10,7 @@
</head>
<body>
<div id='header'>
- <h1>Favicon builder.
+ <h1>KsuFavicon builder.
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-graphics-storage.png" height="35" alt="HTML5 Powered with Graphics, 3D &amp; Effects, and Offline &amp; Storage" title="HTML5 Powered with Graphics, 3D &amp; Effects, and Offline &amp; Storage">
</a>
@@ -20,7 +20,12 @@
<noscript>
<h1> This page requires Javascript to be activated</h1>
</noscript>
- <h2>Cette application permet de designer des icons , puis de les sauvegarder au format png</h2>
+ <h4>
+ EN : This app helps designer create sprites ,favicons ,or pixel art graphics online or offline and save them in the browser local storage or export them as png files
+ <br/>FR : Cette application permet de designer des icons , puis de les sauvegarder au format png
+ </h4>
+ <h5>Version 0.1</h5>
+
<h6><a href="mailto:aikah@free.fr" style='color:inherit;'>Design : M.PARAISO</a></h6>
<div id="app">
<div class="nav inline">
View
46 js/faviconbuilder.coffee
@@ -90,12 +90,15 @@ class App.Utils.DefaultMenu
{label:"Save to local",action:"savetolocal",title:"Save icon to local storage (not available in all browers !!) \n Click on restore to load the saved icon."}
{label:"Restore from local",action:"restorefromlocal",title:"Info :\nRestore previously saved icon.",datas:{}}
]
+
### MODELS ###
class App.Models.Color
constructor:(@title="Eraser",@color=null,@alpha=1)->
class App.Models.Application
- currentColor : new App.Models.Color("Black","#000000")
+ constructor:->
+ @children=[]
+ currentColor : new App.Models.Color("Black","#000000",1)
favIconGridModel : null
class App.Models.Cell
@@ -114,6 +117,9 @@ class App.Models.Grid
for j in [0... @columns]
console.log @grid[i][j]
@grid[i][j]?= new App.Models.Cell()
+ fillCell:(params)->
+ @grid[params.row][params.column].color = params.color.color
+ @grid[params.row][params.column].alpha = 1
emptyGrid:->
for i in [0...@rows]
@grid.push []
@@ -150,26 +156,35 @@ class App.Views.Grid
console.log "App.Views.Grid.render()"
@divTargetId.innerHTML = ""
@divTargetId.className = " #{@divTargetId.classes } _#{@gridModel.columns}"
+ @el = ""
for row in [0...@gridModel.rows]
for column in [0...@gridModel.columns]
- cell = document.createElement("div")
- cell.className+=" #{@cellStyle}"
+ element = " <div name='cell' "
if @gridModel.grid[row][column].color != null and @gridModel.grid[row][column].color != ""
- cell.style.backgroundColor = @gridModel.grid[row][column].color
+ element+= " style='background-color:#{@gridModel.grid[row][column].color}' "
else
- cell.className+=" #{@emptyCellStyle}"
- cell.dataset?= {}
- cell.dataset.row = row
- cell.dataset.column = column
- @divTargetId.appendChild(cell)
+ element+= " class='#{@emptyCellStyle}' "
+ element+= " data-row='#{row}' data-column='#{column}' "
+ element+= " ></div> "
+ ###
cell.onmouseover = (e)=>
if @drawMode == true
@fillCell(e)
cell.onclick = (e)=>
@fillCell(e)
cell.onmousedown = (e)=>
@fillCell(e)
- @eventDispatcher.dispatch(new App.Utils.Event("faviconrender"),@)
+ ###
+ @el += element
+ @divTargetId.innerHTML += @el
+ @divTargetId.onmouseup =(e)=>
+ @drawMode = false
+ @divTargetId.onmousemove = @divTargetId.onmousedown = (e)=>
+ if e.type == "mousedown" then @drawMode = true
+ if e.target.getAttribute("name")=="cell" and @drawMode == true
+ @eventDispatcher.dispatch(new App.Utils.Event("clickcell"),{tool:"pen",width:2,color:@pen.color,row:e.target.getAttribute("data-row"),column:e.target.getAttribute("data-column")})
+ return false
+ return this
fillCell:(e)->
@gridModel.grid[parseInt(e.currentTarget.dataset.row)][parseInt(e.currentTarget.dataset.column)].color = @pen.color.color # App.Models.Application::currentColor.color
@eventDispatcher.dispatch(new App.Utils.Event("updateviews"),@)
@@ -312,7 +327,6 @@ class Main
@menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items,$menu)
App.Models.Application.favIconGridModel = @gridModel
### CONTROLLERS ###
- #@applicationController = new App.Controllers.Application(@applicationModel)
### VIEWS ###
@applicationView = new App.Views.Application($target,@applicationModel)
@colorSelectorView = new App.Views.ColorSelector($colorSelector,@colorSelectorModel)
@@ -335,12 +349,12 @@ class Main
@menuView.eventDispatcher.addListener("savetolocal",@savetolocal)
@menuView.eventDispatcher.addListener("restorefromlocal",@restoreFromLocal)
@factorSelectorView.eventDispatcher.addListener("selectfactor",@selecFactor)
- @gridView.divTargetId.onmousedown = (e)=>
- @gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"),true)
- @gridView.divTargetId.onmouseup = (e)=>
- @gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"),false)
@gridView.eventDispatcher.addListener("faviconrender",@renderCanvasPreview)
@gridView.eventDispatcher.addListener("updateviews",@updateViews)
+ @gridView.eventDispatcher.addListener("clickcell",@clickcell)
+ clickcell:(e)=>
+ @gridModel.fillCell(e.datas)
+ @updateViews()
renderCanvasPreview:(e)=>
@canvasPreviewView.render()
oncolorchange:(e)=>
@@ -354,7 +368,7 @@ class Main
@gridModel.rows = e.datas.rows
@gridModel.columns= e.datas.columns
@gridModel.fillGridBlank()
- @gridView.render()
+ @applicationView.render()
emptygrid:=>
@gridModel.emptyGrid()
@gridView.render()
View
83 js/faviconbuilder.js
@@ -167,9 +167,11 @@ App.Models.Color = (function() {
App.Models.Application = (function() {
- function Application() {}
+ function Application() {
+ this.children = [];
+ }
- Application.prototype.currentColor = new App.Models.Color("Black", "#000000");
+ Application.prototype.currentColor = new App.Models.Color("Black", "#000000", 1);
Application.prototype.favIconGridModel = null;
@@ -215,6 +217,11 @@ App.Models.Grid = (function() {
return _results;
};
+ Grid.prototype.fillCell = function(params) {
+ this.grid[params.row][params.column].color = params.color.color;
+ return this.grid[params.row][params.column].alpha = 1;
+ };
+
Grid.prototype.emptyGrid = function() {
var i, j, _ref, _results;
_results = [];
@@ -318,36 +325,52 @@ App.Views.Grid = (function() {
}
Grid.prototype.render = function() {
- var cell, column, row, _ref, _ref2,
+ var column, element, row, _ref, _ref2,
_this = this;
console.log("App.Views.Grid.render()");
this.divTargetId.innerHTML = "";
this.divTargetId.className = " " + this.divTargetId.classes + " _" + this.gridModel.columns;
+ this.el = "";
for (row = 0, _ref = this.gridModel.rows; 0 <= _ref ? row < _ref : row > _ref; 0 <= _ref ? row++ : row--) {
for (column = 0, _ref2 = this.gridModel.columns; 0 <= _ref2 ? column < _ref2 : column > _ref2; 0 <= _ref2 ? column++ : column--) {
- cell = document.createElement("div");
- cell.className += " " + this.cellStyle;
+ element = " <div name='cell' ";
if (this.gridModel.grid[row][column].color !== null && this.gridModel.grid[row][column].color !== "") {
- cell.style.backgroundColor = this.gridModel.grid[row][column].color;
+ element += " style='background-color:" + this.gridModel.grid[row][column].color + "' ";
} else {
- cell.className += " " + this.emptyCellStyle;
+ element += " class='" + this.emptyCellStyle + "' ";
}
- if (cell.dataset == null) cell.dataset = {};
- cell.dataset.row = row;
- cell.dataset.column = column;
- this.divTargetId.appendChild(cell);
- cell.onmouseover = function(e) {
- if (_this.drawMode === true) return _this.fillCell(e);
- };
- cell.onclick = function(e) {
- return _this.fillCell(e);
- };
- cell.onmousedown = function(e) {
- return _this.fillCell(e);
- };
+ element += " data-row='" + row + "' data-column='" + column + "' ";
+ element += " ></div> ";
+ /*
+ cell.onmouseover = (e)=>
+ if @drawMode == true
+ @fillCell(e)
+ cell.onclick = (e)=>
+ @fillCell(e)
+ cell.onmousedown = (e)=>
+ @fillCell(e)
+ */
+ this.el += element;
}
}
- return this.eventDispatcher.dispatch(new App.Utils.Event("faviconrender"), this);
+ this.divTargetId.innerHTML += this.el;
+ this.divTargetId.onmouseup = function(e) {
+ return _this.drawMode = false;
+ };
+ this.divTargetId.onmousemove = this.divTargetId.onmousedown = function(e) {
+ if (e.type === "mousedown") _this.drawMode = true;
+ if (e.target.getAttribute("name") === "cell" && _this.drawMode === true) {
+ _this.eventDispatcher.dispatch(new App.Utils.Event("clickcell"), {
+ tool: "pen",
+ width: 2,
+ color: _this.pen.color,
+ row: e.target.getAttribute("data-row"),
+ column: e.target.getAttribute("data-column")
+ });
+ }
+ return false;
+ };
+ return this;
};
Grid.prototype.fillCell = function(e) {
@@ -597,8 +620,8 @@ Main = (function() {
this.exportCanvas = __bind(this.exportCanvas, this);
this.oncolorchange = __bind(this.oncolorchange, this);
this.renderCanvasPreview = __bind(this.renderCanvasPreview, this);
- var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, defaultColor, title,
- _this = this;
+ this.clickcell = __bind(this.clickcell, this);
+ var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, defaultColor, title;
$target = document.getElementById("target");
$canvasPreview = document.getElementById("canvasPreview");
$colorSelector = document.getElementById("colorSelector");
@@ -641,16 +664,16 @@ Main = (function() {
this.menuView.eventDispatcher.addListener("savetolocal", this.savetolocal);
this.menuView.eventDispatcher.addListener("restorefromlocal", this.restoreFromLocal);
this.factorSelectorView.eventDispatcher.addListener("selectfactor", this.selecFactor);
- this.gridView.divTargetId.onmousedown = function(e) {
- return _this.gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"), true);
- };
- this.gridView.divTargetId.onmouseup = function(e) {
- return _this.gridView.eventDispatcher.dispatch(new App.Utils.Event("drawmodechange"), false);
- };
this.gridView.eventDispatcher.addListener("faviconrender", this.renderCanvasPreview);
this.gridView.eventDispatcher.addListener("updateviews", this.updateViews);
+ this.gridView.eventDispatcher.addListener("clickcell", this.clickcell);
}
+ Main.prototype.clickcell = function(e) {
+ this.gridModel.fillCell(e.datas);
+ return this.updateViews();
+ };
+
Main.prototype.renderCanvasPreview = function(e) {
return this.canvasPreviewView.render();
};
@@ -670,7 +693,7 @@ Main = (function() {
this.gridModel.rows = e.datas.rows;
this.gridModel.columns = e.datas.columns;
this.gridModel.fillGridBlank();
- return this.gridView.render();
+ return this.applicationView.render();
};
Main.prototype.emptygrid = function() {
View
0 manifest
No changes.

0 comments on commit 77f8b89

Please sign in to comment.
Something went wrong with that request. Please try again.