Browse files

modifications html et css

  • Loading branch information...
1 parent 9334267 commit b2fc6e7286a932a50b4ebee472eec420aab61cd5 @Mparaiso committed Feb 18, 2012
Showing with 54 additions and 30 deletions.
  1. +2 −1 css/index.css
  2. +4 −4 index.html
  3. +24 −17 js/faviconbuilder.coffee
  4. +24 −8 js/faviconbuilder.js
View
3 css/index.css
@@ -45,6 +45,7 @@ Purpose of the stylesheet follows.
}
body{
font-family:Helvetica,'Arial Narrow', sans-serif;
+ font-size:13px;
padding:0;
margin:0;
@@ -64,7 +65,7 @@ canvas{
width:755px;
}
#colorSelector,#left{
- width: 70px;
+ width: 100px;
display: inline-block;
}
#colorSelector .color{
View
8 index.html
@@ -26,10 +26,10 @@
<div class="nav inline">
<h3>Menu</h3>
<div id="menu"> </div>
+ <h3>factorSelector</h3>
+ <div id="factorSelector"></div>
<h3>Favicon preview</h3>
<div id="canvasPreview"></div>
- <h3>factorSelector</h3>
- <div id="factorSelector"></div>
</div>
<div class="left inline">
<h3>Favicon</h3>
@@ -43,9 +43,9 @@
</div>
+ </div>
+ <div style='clear:both;'>Designed by M.PARAISO</div>
</div>
- <div style='clear:both;'>Designed by M.PARAISO</div>
- </div>
<script type="text/javascript" src="js/faviconbuilder.js"></script>
</body>
</html>
View
41 js/faviconbuilder.coffee
@@ -34,31 +34,32 @@ class App.Utils.DefaultColors
constructor:->
@colors =
[
- new App.Models.Color()
+ new App.Models.Color("Eraser","")
new App.Models.Color("White","#FFF")
new App.Models.Color("Gray2","#DDD")
new App.Models.Color("Gray1","#AAA")
new App.Models.Color("Gray2","#777")
new App.Models.Color("Black","#000")
- new App.Models.Color("Red","#990000")
- new App.Models.Color("Red","#FF0000")
+ new App.Models.Color("Red","#900")
+ new App.Models.Color("Red","#F00")
new App.Models.Color("Red","#F99")
new App.Models.Color("Red","#FDD")
new App.Models.Color("Green","#090")
new App.Models.Color("Green","#0F0")
new App.Models.Color("Green","#9F9")
new App.Models.Color("Green","#DFD")
- new App.Models.Color("Blue","#000099")
- new App.Models.Color("Blue","#0000FF")
+ new App.Models.Color("Blue","#009")
+ new App.Models.Color("Blue","#00F")
new App.Models.Color("Blue","#99F")
new App.Models.Color("Blue","#DDF")
- new App.Models.Color("Yellow","#FFFF00")
+ new App.Models.Color("Yellow","#FF0")
new App.Models.Color("Yellow","#F90")
- new App.Models.Color("Cyan","#00FFFF")
+ new App.Models.Color("Cyan","#0FF")
new App.Models.Color("Cyan","#099")
- new App.Models.Color("Magenta","#FF00FF")
+ new App.Models.Color("Magenta","#F0F")
new App.Models.Color("Magenta","#909")
]
+ @colors.sort (a,b)-> a.color< b.color
class App.Utils.Event
constructor:(@type)->
@@ -207,20 +208,19 @@ class App.Views.ColorSelector
@eventDispatcher =new App.Utils.EventDispatcher()
render:->
@children = []
+ @currentColor = new App.Views.Color(App.Models.Application::currentColor)
@el.innerHTML = ""
+ @h4Element = document.createElement("h4")
+ @h4Element.innerHTML = "Current Color"
+ @el.appendChild(@h4Element)
+ @el.appendChild(@currentColor.render().el)
+ @el.innerHTML+="<h4>Color swatch</h4>"
for i in [0...@model.colors.length]
- @currentColor = new App.Views.Color(App.Models.Application::currentColor)
@children[i] = new App.Views.Color(@model.colors[i])
@el.appendChild(@children[i].render().el)
@children[i].el.onclick = (e)=>
@eventDispatcher.dispatch(new App.Utils.Event("colorchange"),{"color":e.target.style.backgroundColor,"title":e.target.title})
- #App.Models.Application::currentColor.color = e.target.style.backgroundColor
- #App.Models.Application::currentColor.title = e.target.title
@render()
- @h4Element = document.createElement("h4")
- @h4Element.innerHTML = "Current Color"
- @el.appendChild(@h4Element)
- @el.appendChild(@currentColor.render().el)
return this
class App.Views.CanvasPreview
@@ -251,13 +251,16 @@ class App.Views.CanvasPreview
class App.Views.FactorSelector
constructor:(@model)->
+ @eventDispatcher = new App.Utils.EventDispatcher(this)
render:->
@el = "<p>Zoom preview by :</p>"
for i in @model.selectors
@el+="<input type='radio' name='factor' #{"checked" unless i!= @model.factor} value='#{i}' /> x #{i} <br/>"
@model.targetId.innerHTML = @el
- @model.targetId.onclick = (e)->
- console.log e.target,"factorSelector"
+ @model.targetId.onclick = (e)=>
+ unless e.target.name != "factor"
+ @model.factor = parseInt(e.target.value)
+ @eventDispatcher.dispatch(new App.Utils.Event("selectfactor"),e.target.value )
return this
class App.Views.Menu
@@ -331,6 +334,7 @@ class Main
@menuView.eventDispatcher.addListener("emptygrid",@emptygrid)
@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)=>
@@ -365,5 +369,8 @@ class Main
@updateViews()
updateViews:=>
@applicationView.render()
+ selecFactor:(e)=>
+ @canvasPreviewModel.factor = parseInt(e.datas)
+ @updateViews()
window?.onload = ->
window?.main = new Main()
View
32 js/faviconbuilder.js
@@ -39,7 +39,10 @@ App = {
App.Utils.DefaultColors = (function() {
function DefaultColors() {
- this.colors = [new App.Models.Color(), new App.Models.Color("White", "#FFF"), new App.Models.Color("Gray2", "#DDD"), new App.Models.Color("Gray1", "#AAA"), new App.Models.Color("Gray2", "#777"), new App.Models.Color("Black", "#000"), new App.Models.Color("Red", "#990000"), new App.Models.Color("Red", "#FF0000"), new App.Models.Color("Red", "#F99"), new App.Models.Color("Red", "#FDD"), new App.Models.Color("Green", "#090"), new App.Models.Color("Green", "#0F0"), new App.Models.Color("Green", "#9F9"), new App.Models.Color("Green", "#DFD"), new App.Models.Color("Blue", "#000099"), new App.Models.Color("Blue", "#0000FF"), new App.Models.Color("Blue", "#99F"), new App.Models.Color("Blue", "#DDF"), new App.Models.Color("Yellow", "#FFFF00"), new App.Models.Color("Yellow", "#F90"), new App.Models.Color("Cyan", "#00FFFF"), new App.Models.Color("Cyan", "#099"), new App.Models.Color("Magenta", "#FF00FF"), new App.Models.Color("Magenta", "#909")];
+ this.colors = [new App.Models.Color("Eraser", ""), new App.Models.Color("White", "#FFF"), new App.Models.Color("Gray2", "#DDD"), new App.Models.Color("Gray1", "#AAA"), new App.Models.Color("Gray2", "#777"), new App.Models.Color("Black", "#000"), new App.Models.Color("Red", "#900"), new App.Models.Color("Red", "#F00"), new App.Models.Color("Red", "#F99"), new App.Models.Color("Red", "#FDD"), new App.Models.Color("Green", "#090"), new App.Models.Color("Green", "#0F0"), new App.Models.Color("Green", "#9F9"), new App.Models.Color("Green", "#DFD"), new App.Models.Color("Blue", "#009"), new App.Models.Color("Blue", "#00F"), new App.Models.Color("Blue", "#99F"), new App.Models.Color("Blue", "#DDF"), new App.Models.Color("Yellow", "#FF0"), new App.Models.Color("Yellow", "#F90"), new App.Models.Color("Cyan", "#0FF"), new App.Models.Color("Cyan", "#099"), new App.Models.Color("Magenta", "#F0F"), new App.Models.Color("Magenta", "#909")];
+ this.colors.sort(function(a, b) {
+ return a.color < b.color;
+ });
}
return DefaultColors;
@@ -433,9 +436,14 @@ App.Views.ColorSelector = (function() {
var i, _ref,
_this = this;
this.children = [];
+ this.currentColor = new App.Views.Color(App.Models.Application.prototype.currentColor);
this.el.innerHTML = "";
+ this.h4Element = document.createElement("h4");
+ this.h4Element.innerHTML = "Current Color";
+ this.el.appendChild(this.h4Element);
+ this.el.appendChild(this.currentColor.render().el);
+ this.el.innerHTML += "<h4>Color swatch</h4>";
for (i = 0, _ref = this.model.colors.length; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
- this.currentColor = new App.Views.Color(App.Models.Application.prototype.currentColor);
this.children[i] = new App.Views.Color(this.model.colors[i]);
this.el.appendChild(this.children[i].render().el);
this.children[i].el.onclick = function(e) {
@@ -446,10 +454,6 @@ App.Views.ColorSelector = (function() {
return _this.render();
};
}
- this.h4Element = document.createElement("h4");
- this.h4Element.innerHTML = "Current Color";
- this.el.appendChild(this.h4Element);
- this.el.appendChild(this.currentColor.render().el);
return this;
};
@@ -499,10 +503,12 @@ App.Views.FactorSelector = (function() {
function FactorSelector(model) {
this.model = model;
+ this.eventDispatcher = new App.Utils.EventDispatcher(this);
}
FactorSelector.prototype.render = function() {
- var i, _i, _len, _ref;
+ var i, _i, _len, _ref,
+ _this = this;
this.el = "<p>Zoom preview by :</p>";
_ref = this.model.selectors;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -511,7 +517,10 @@ App.Views.FactorSelector = (function() {
}
this.model.targetId.innerHTML = this.el;
this.model.targetId.onclick = function(e) {
- return console.log(e.target, "factorSelector");
+ if (e.target.name === "factor") {
+ _this.model.factor = parseInt(e.target.value);
+ return _this.eventDispatcher.dispatch(new App.Utils.Event("selectfactor"), e.target.value);
+ }
};
return this;
};
@@ -579,6 +588,7 @@ App.Controllers.Application = (function() {
Main = (function() {
function Main() {
+ this.selecFactor = __bind(this.selecFactor, this);
this.updateViews = __bind(this.updateViews, this);
this.restoreFromLocal = __bind(this.restoreFromLocal, this);
this.savetolocal = __bind(this.savetolocal, this);
@@ -630,6 +640,7 @@ Main = (function() {
this.menuView.eventDispatcher.addListener("emptygrid", this.emptygrid);
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);
};
@@ -686,6 +697,11 @@ Main = (function() {
return this.applicationView.render();
};
+ Main.prototype.selecFactor = function(e) {
+ this.canvasPreviewModel.factor = parseInt(e.datas);
+ return this.updateViews();
+ };
+
return Main;
})();

0 comments on commit b2fc6e7

Please sign in to comment.