Browse files

modifications html et css

  • Loading branch information...
1 parent 23910a6 commit 9334267396c95121969da9e7e3434a4f006ad6f1 @Mparaiso committed Feb 18, 2012
Showing with 87 additions and 48 deletions.
  1. +33 −8 css/index.css
  2. +35 −26 index.html
  3. +8 −6 js/faviconbuilder.coffee
  4. +11 −8 js/faviconbuilder.js
View
41 css/index.css
@@ -1,10 +1,32 @@
/*
- Document : index
- Created on : 14 févr. 2012, 21:56:52
- Author : mark prades
- Description:
- Purpose of the stylesheet follows.
-*/
+Document : index
+Created on : 14 févr. 2012, 21:56:52
+Author : mark prades
+Description:
+Purpose of the stylesheet follows.
+ */
+#header{
+ margin:0;
+ padding:0;
+ height:70px;
+ color:#EEE;
+ background: #111;
+}
+#header h1{
+ width:90%;
+ height:50%;
+ padding-top:15px;
+ margin-top:0;
+ margin-bottom:auto;
+ margin-left:auto;
+ margin-right:auto;
+ font-variant:small-caps;
+}
+#wrapper{
+ margin-left:auto;
+ margin-right:auto;
+ width:90%;
+}
.nav{
width:160px;
}
@@ -22,13 +44,16 @@
width:150px;
}
body{
- font-family: sans-serif;
+ font-family:Helvetica,'Arial Narrow', sans-serif;
+ padding:0;
+ margin:0;
+
}
canvas{
border: 1px solid #AAA;
}
#target{
-
+
display: inline-block;
cursor: crosshair;
}
View
61 index.html
@@ -1,42 +1,51 @@
-<!--
-To change this template, choose Tools | Templates
-and open the template in the editor.
--->
<!DOCTYPE html>
<html>
<head>
- <title></title>
+ <title>Favicon builder</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/index.css" />
<!--[if IE]>
<script type="text/javascript" src="/lib/js/flashcanvas/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
- <h1>Favicon builder</h1>
- <h2>Cette application permet de designer des icons , puis de les sauvegarder au format png</h2>
- <div id="app">
- <div class="nav inline">
- <h3>Menu</h3>
- <div id="menu"> </div>
- <h3>Favicon preview</h3>
- <div id="canvasPreview"></div>
- h3{factorSelector}
- <div id="factorSelector"></div>
- </div>
- <div class="left inline">
- <h3>Favicon</h3>
- <div id="target" ></div>
- </div>
- <div class="right inline">
- <h3>Color picker</h3>
- <div id="colorSelector"></div>
- </div>
- <div class="inline">
+ <div id='header'>
+ <h1>Favicon 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>
+ </h1>
+ </div>
+ <div id='wrapper'>
+ <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>
+ <h6><a href="mailto:aikah@free.fr" style='color:inherit;'>Design : M.PARAISO</a></h6>
+ <div id="app">
+ <div class="nav inline">
+ <h3>Menu</h3>
+ <div id="menu"> </div>
+ <h3>Favicon preview</h3>
+ <div id="canvasPreview"></div>
+ <h3>factorSelector</h3>
+ <div id="factorSelector"></div>
+ </div>
+ <div class="left inline">
+ <h3>Favicon</h3>
+ <div id="target" ></div>
+ </div>
+ <div class="right inline">
+ <h3>Color picker</h3>
+ <div id="colorSelector"></div>
+ </div>
+ <div class="inline">
- </div>
+ </div>
</div>
+ <div style='clear:both;'>Designed by M.PARAISO</div>
+ </div>
<script type="text/javascript" src="js/faviconbuilder.js"></script>
</body>
</html>
View
14 js/faviconbuilder.coffee
@@ -127,7 +127,7 @@ class App.Models.CanvasPreview
constructor:(@targetId,@gridModel,@factor=4)->
class App.Models.FactorSelector
- constructor:(@targetId,@selectors=[1,2,3,4])->
+ constructor:(@targetId,@factor,@selectors=[1,2,3,4])->
class App.Models.Menu
constructor:(@items=[],@targetId)->
@@ -252,12 +252,13 @@ class App.Views.CanvasPreview
class App.Views.FactorSelector
constructor:(@model)->
render:->
- @el = ""
+ @el = "<p>Zoom preview by :</p>"
for i in @model.selectors
- @el+="<input type='radio' name='factor' value=#{i}/> x #{i} <br/>"
- @model.targetDiv?.innerHTML = @el
+ @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"
return this
-x #{i} <br/>"
class App.Views.Menu
constructor:(@model)->
@@ -304,7 +305,7 @@ class Main
@colorSelectorModel = new App.Models.ColorSelector()
@gridModel = new App.Models.Grid()
@canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview,@gridModel)
- @factorSelectorModel = new App.Models.FactorSelector($factorSelector)
+ @factorSelectorModel = new App.Models.FactorSelector($factorSelector,@canvasPreviewModel.factor)
@menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items,$menu)
App.Models.Application.favIconGridModel = @gridModel
### CONTROLLERS ###
@@ -321,6 +322,7 @@ class Main
@applicationView.addChild(@gridView)
@applicationView.addChild(@colorSelectorView)
@applicationView.addChild(@canvasPreviewView)
+ @applicationView.addChild(@factorSelectorView)
@applicationView.addChild(@menuView)
@applicationView.render() # render all child views
### EVENTS ###
View
19 js/faviconbuilder.js
@@ -258,8 +258,9 @@ App.Models.CanvasPreview = (function() {
App.Models.FactorSelector = (function() {
- function FactorSelector(targetId, selectors) {
+ function FactorSelector(targetId, factor, selectors) {
this.targetId = targetId;
+ this.factor = factor;
this.selectors = selectors != null ? selectors : [1, 2, 3, 4];
}
@@ -501,23 +502,24 @@ App.Views.FactorSelector = (function() {
}
FactorSelector.prototype.render = function() {
- var i, _i, _len, _ref, _ref2;
- this.el = "";
+ var i, _i, _len, _ref;
+ this.el = "<p>Zoom preview by :</p>";
_ref = this.model.selectors;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
i = _ref[_i];
- this.el += "<input type='radio' name='factor' value=" + i + "/> x " + i + " <br/>";
+ this.el += "<input type='radio' name='factor' " + (i === this.model.factor ? "checked" : void 0) + " value='" + i + "' /> x " + i + " <br/>";
}
- if ((_ref2 = this.model.targetDiv) != null) _ref2.innerHTML = this.el;
+ this.model.targetId.innerHTML = this.el;
+ this.model.targetId.onclick = function(e) {
+ return console.log(e.target, "factorSelector");
+ };
return this;
};
return FactorSelector;
})();
-x;
-
App.Views.Menu = (function() {
function Menu(model) {
@@ -600,7 +602,7 @@ Main = (function() {
this.colorSelectorModel = new App.Models.ColorSelector();
this.gridModel = new App.Models.Grid();
this.canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview, this.gridModel);
- this.factorSelectorModel = new App.Models.FactorSelector($factorSelector);
+ this.factorSelectorModel = new App.Models.FactorSelector($factorSelector, this.canvasPreviewModel.factor);
this.menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items, $menu);
App.Models.Application.favIconGridModel = this.gridModel;
/* CONTROLLERS
@@ -618,6 +620,7 @@ Main = (function() {
this.applicationView.addChild(this.gridView);
this.applicationView.addChild(this.colorSelectorView);
this.applicationView.addChild(this.canvasPreviewView);
+ this.applicationView.addChild(this.factorSelectorView);
this.applicationView.addChild(this.menuView);
this.applicationView.render();
/* EVENTS

0 comments on commit 9334267

Please sign in to comment.