Skip to content

Commit

Permalink
modification css
Browse files Browse the repository at this point in the history
  • Loading branch information
Daome committed Feb 18, 2012
1 parent b2fc6e7 commit 77f8b89
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 63 deletions.
33 changes: 19 additions & 14 deletions css/index.css
View file
@@ -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;
Expand Down Expand Up @@ -48,7 +54,6 @@ body{
font-size:13px;
padding:0;
margin:0;

}
canvas{
border: 1px solid #AAA;
Expand All @@ -59,10 +64,10 @@ canvas{
cursor: crosshair;
}
#target._16{
width:390px;
width:395px;
}
#target._32{
width:755px;
width:775px;
}
#colorSelector,#left{
width: 100px;
Expand All @@ -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");
}
11 changes: 8 additions & 3 deletions index.html
View file
@@ -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]>
Expand All @@ -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>
Expand All @@ -20,7 +20,12 @@ <h1>Favicon builder.
<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">
Expand Down
46 changes: 30 additions & 16 deletions js/faviconbuilder.coffee
View file
Expand Up @@ -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
Expand All @@ -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 []
Expand Down Expand Up @@ -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"),@)
Expand Down Expand Up @@ -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)
Expand All @@ -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)=>
Expand All @@ -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()
Expand Down
83 changes: 53 additions & 30 deletions js/faviconbuilder.js
View file
Expand Up @@ -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;

Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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();
};
Expand All @@ -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() {
Expand Down
Empty file added manifest
View file
Empty file.

0 comments on commit 77f8b89

Please sign in to comment.