Permalink
Browse files

thickbox

  • Loading branch information...
1 parent 949aa43 commit d0043f187b3fbaff72213341410e1d1eac411de5 @Mparaiso committed Feb 19, 2012
Showing with 313 additions and 71 deletions.
  1. +15 −0 css/gradient.css
  2. +24 −8 css/index.css
  3. +36 −0 css/messagebox.css
  4. BIN img/edit.png
  5. BIN img/messageboxbackground.png
  6. +55 −3 index.html
  7. +74 −32 js/faviconbuilder.coffee
  8. +109 −28 js/faviconbuilder.js
View
15 css/gradient.css
@@ -0,0 +1,15 @@
+/* un fond dégradé en CSS */
+ .gradient{
+/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
+/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
+ /* fallback (Opera) */
+ background: #000;
+ /* Mozilla: */
+ background: -moz-linear-gradient(top, #000, #444);
+ /* Chrome, Safari:*/
+ background: -webkit-gradient(linear,
+ left top, left bottom, from(#000), to(#444));
+ /* MSIE */
+ filter: progid:DXImageTransform.Microsoft.Gradient(
+ StartColorStr='#000000', EndColorStr='#444444', GradientType=0);
+}
View
32 css/index.css
@@ -1,9 +1,17 @@
/* ksuFAVICON BUILDER stylecheet */
+@import url('gradient.css'); /* fond dégradé */
+@import url('messagebox.css'); /* message box */
h1,h2,h3,h4,h5,h6,div,p,img{
border:none;
margin:0;
padding:0;
}
+body{
+ font-family:Helvetica,'Arial Narrow', sans-serif;
+ font-size:12px;
+ padding:0;
+ margin:0;
+}
h1,h2,h3,h4{
margin-top:10px;
margin-bottom: 5px;
@@ -17,7 +25,6 @@ margin-top: 6px;
padding:0;
height:70px;
color:#EEE;
- background: #111;
}
#header h1{
width:90%;
@@ -29,6 +36,19 @@ margin-top: 6px;
margin-right:auto;
font-variant:small-caps;
}
+span.tip{
+ font-weight:lighter;
+ font-size:0.8em;
+ display:inline-block;
+}
+#title{
+ cursor:pointer;
+ margin-right: 5px;
+
+}
+#title:focus{
+ cursor:auto;
+}
#wrapper{
margin-left:auto;
margin-right:auto;
@@ -50,19 +70,15 @@ margin-top: 6px;
border:1px solid #AAA;
width:150px;
}
-body{
- font-family:Helvetica,'Arial Narrow', sans-serif;
- font-size:13px;
- padding:0;
- margin:0;
-}
+
canvas{
border: 1px solid #AAA;
}
#target{
display: inline-block;
cursor: crosshair;
+ font-size: 13px;
}
#target._16{
width:395px;
@@ -105,5 +121,5 @@ canvas{
border: 1px dashed #AAA;
}
.emptyCell{
- background: url("../img/emptycell.gif") , url("/lib/img/faviconbuilder/emptycell.gif");
+ background:url("/lib/img/faviconbuilder/emptycell.gif");
}
View
36 css/messagebox.css
@@ -0,0 +1,36 @@
+.messagebox.background{
+ visibility:hidden;
+ position: fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ background: url('../img/messageboxbackground.png');
+ z-index: 1000;
+ display: block;
+}
+.messagebox .box{
+ position:relative;
+ width:800px;
+ height:100%;
+ z-index: 1001;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.messagebox .box .outer{
+ text-align: center;
+ z-index: 1002;
+ height:100%;
+}
+
+.messagebox .box .inner{
+
+ overflow:auto;
+ top:25%;
+ height:50%;
+ z-index: 1003;
+ background: #FFF;
+
+
+}
View
BIN img/edit.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/messageboxbackground.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
58 index.html
@@ -9,7 +9,7 @@
<![endif]-->
</head>
<body>
- <div id='header'>
+ <div id='header' class='gradient'>
<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">
@@ -39,8 +39,8 @@
<div id="canvasPreview"></div>
</div>
<div class="left inline">
- <h3>Favicon</h3>
- <div id="target" ></div>
+ <h3 title='Click on the current grid title to edit'>Favicon title: <span id="title"></span><img src='img/edit.png'/></h3>
+ <div id="target" title="Click on the grid to fill a cell"></div>
</div>
<div class="right inline">
<h3>Color picker</h3>
@@ -53,6 +53,58 @@
</div>
<div style='clear:both;'>Designed by M.PARAISO</div>
</div>
+ <div class="messagebox background">
+ <div class="box">
+ <div class="outer">
+ <div class="messagebox box inner">
+ this is a message box with many elements
+ <ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ </ul>
+ </div>
+
+ </div>
+ </div>
+ </div>
<script type="text/javascript" src="js/faviconbuilder.js"></script>
</body>
</html>
View
106 js/faviconbuilder.coffee
@@ -74,7 +74,7 @@ class App.Utils.EventDispatcher
this.listeners.push({"eventName":eventName,"listener":listener})
dispatch : (event,datas)->
#throw new Error("event should be an instance of Event") unless event instanceof Event
- event.target = event.currenTarget = this
+ event.target = event.currentTarget = @parent
event.datas = datas
for i in this.listeners
i.listener(event) unless event.type != i.eventName
@@ -83,12 +83,15 @@ class App.Utils.EventDispatcher
class App.Utils.DefaultMenu
items:[
- {label:"Empty grid",action:"emptygrid",title:"Help: \nCreate a new blank grid"}
- {label:"16x16 grid",action:"changegridsize",datas:{rows:16,columns:16}}
- {label:"32x32 grid",action:"changegridsize",datas:{rows:32,columns:32}}
- {label:"Export to png",action:"exporttopng",datas:{param:"whatever"}}
+ {label:"Undo",action:"undo",title:"Restore the grid to the previous state"}
+ {label:"Redo",action:"redo",title:"Restore the grid to the next state"}
+ {label:"Empty grid",action:"emptygrid",title:"Create a new blank grid"}
+ {label:"16x16 grid",action:"changegridsize",title:'Change grid size',datas:{rows:16,columns:16}}
+ {label:"32x32 grid",action:"changegridsize",title:'Change grid size',datas:{rows:32,columns:32}}
+ {label:"Export to png",action:"exporttopng",title:"Export image as png in a new window (not available in Internet explorer)",datas:{param:"whatever"}}
{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:{}}
+ {label:"Restore from local",action:"restorefromlocal",title:"Restore previously saved icon.",datas:{}}
+ {label:"thickbox test",action:"showthickbox",title:"Show thick box , just a javascript CSS test , no special functionalities"}
]
### MODELS ###
@@ -107,10 +110,9 @@ class App.Models.Cell
@alpha=1
class App.Models.Grid
- constructor:(@rows=16,@columns=16)-> # crée le modèle de grille
+ constructor:(@rows=16,@columns=16,@version,@title)-> # crée le modèle de grille
@grid = []
@fillGridBlank()
-
fillGridBlank:->
for i in [0...@rows]
@grid[i] ?= []
@@ -127,6 +129,9 @@ class App.Models.Grid
@grid[i][j].color = ""
@grid[i][j].alpha = 1
+class App.Models.Title
+ constructor:(@value,@targetId)->
+
class App.Models.ColorSelector
constructor:(@colors= new App.Utils.DefaultColors().colors)->
@@ -153,7 +158,6 @@ class App.Views.Grid
@eventDispatcher.addListener("drawmodechange",@setDrawMode)
@divTargetId.classes = @divTargetId.className
render:->
- console.log "App.Views.Grid.render()"
@divTargetId.innerHTML = ""
@divTargetId.className = " #{@divTargetId.classes } _#{@gridModel.columns}"
@el = ""
@@ -166,28 +170,27 @@ class App.Views.Grid
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)
- ###
@el += element
@divTargetId.innerHTML += @el
@divTargetId.onmouseup =(e)=>
@drawMode = false
+ @eventDispatcher.dispatch(new App.Utils.Event("renderpreview"),{})
@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")})
+ @eventDispatcher.dispatch(new App.Utils.Event("clickcell"),{element:e.target,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"),@)
+ fillCell:(e)-> # speed up the grid rendering when filling one cell
+ color = e.datas.color.color
+ if ["",undefined].indexOf(color) < 0
+ e.datas.element.style.backgroundColor = color
+ e.datas.element.className = ""
+ else
+ e.datas.element.style.backgroundColor = null
+ e.datas.element.className += " #{@emptyCellStyle}"
+
+
setDrawMode:(event)=>
@drawMode = event.datas
setPenColor:(color)=>
@@ -216,6 +219,31 @@ class App.Views.Color
@el.className+=" emptyCell "
return this
+class App.Views.Title
+ constructor:(@model)->
+ @eventDispatcher = new App.Utils.EventDispatcher(this)
+ render:->
+ @el= @model.value.italics()
+ @model.targetId.innerHTML = @el
+ @model.targetId.setAttribute("title","Click here to change the grid title")
+ @model.targetId.onclick = (e)=>
+ e.currentTarget.setAttribute("contenteditable",true)
+ e.currentTarget.style.border = "1px solid #00EEFF"
+ e.currentTarget.style.borderRadius = "2px"
+ e.currentTarget.style.padding= "2px 5px 2px 5px"
+ return false
+ @model.targetId.onblur =@model.targetId.onkeypress = (e)=>
+ if (e.type == "keypress" and e.which != 13)
+ return
+ e.currentTarget.setAttribute("contenteditable",false)
+ e.currentTarget.style.border = ""
+ @model.value = if e.currentTarget.innerText.trim() != "" then e.currentTarget.innerText.trim() else @model.value
+ @eventDispatcher.dispatch(new App.Utils.Event("titlechanged"),@model.value)
+ return false
+ @model.onkeypress
+ return this
+
+
class App.Views.ColorSelector
constructor:(@el,@model)->
if not @model instanceof App.Models.ColorSelector then throw new Error("model must be an instance of ColorSelector")
@@ -280,7 +308,7 @@ class App.Views.FactorSelector
class App.Views.Menu
constructor:(@model)->
- @eventDispatcher = new App.Utils.EventDispatcher()
+ @eventDispatcher = new App.Utils.EventDispatcher(this)
render:->
@model.targetId.innerHTML = ""
for i in [0...@model.items.length]
@@ -291,10 +319,6 @@ class App.Views.Menu
button.dataset?= {}
button.dataset.id = i
@model.targetId.appendChild(button)
- ###
- button.onclick = (e)=>
- @eventDispatcher.dispatch(new Event(@model.items[i].action),if @model.items[i].datas then @model.items[i].datas else null )
- ###
button.onclick = ((e)=>
action = @model.items[i].action
datas = @model.items[i].datas
@@ -311,21 +335,30 @@ class App.Controllers.Application
### MAIN ###
class Main
constructor:->
+ version = 0.1
$target = document.getElementById("target")
$canvasPreview = document.getElementById("canvasPreview")
$colorSelector = document.getElementById("colorSelector")
$menu = document.getElementById("menu")
$factorSelector = document.getElementById("factorSelector")
+ $title = document.getElementById "title"
title = "Fav icon builder"
defaultColor = "#000000"
### MODELS ###
@applicationModel = new App.Models.Application()
@colorSelectorModel = new App.Models.ColorSelector()
- @gridModel = new App.Models.Grid()
+ @gridModel = new App.Models.Grid(16,16,0.1,"new grid")
+ @titleModel = new App.Models.Title("new grid",$title)
@canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview,@gridModel)
@factorSelectorModel = new App.Models.FactorSelector($factorSelector,@canvasPreviewModel.factor)
@menuModel = new App.Models.Menu(new App.Utils.DefaultMenu().items,$menu)
- App.Models.Application.favIconGridModel = @gridModel
+ @applicationModel.colorSelectorModel = @colorSelectorModel
+ @applicationModel.gridModel = @gridModel
+ @applicationModel.titleModel = @titleModel
+ @applicationModel.canvasPreviewModel = @canvasPreviewModel
+ @applicationModel.factorSelectorModel = @factorSelectorModel
+ @applicationModel.menuModel = @menuModel
+ #App.Models.Application.favIconGridModel = @gridModel
### CONTROLLERS ###
### VIEWS ###
@applicationView = new App.Views.Application($target,@applicationModel)
@@ -334,9 +367,11 @@ class Main
@canvasPreviewView = new App.Views.CanvasPreview(@canvasPreviewModel)
@factorSelectorView = new App.Views.FactorSelector(@factorSelectorModel)
@gridView = new App.Views.Grid($target,@gridModel)
+ @titleView = new App.Views.Title(@titleModel)
@gridView.setPenColor(@applicationModel.currentColor)
@menuView = new App.Views.Menu(@menuModel)
@applicationView.addChild(@gridView)
+ @applicationView.addChild(@titleView)
@applicationView.addChild(@colorSelectorView)
@applicationView.addChild(@canvasPreviewView)
@applicationView.addChild(@factorSelectorView)
@@ -348,14 +383,18 @@ class Main
@menuView.eventDispatcher.addListener("emptygrid",@emptygrid)
@menuView.eventDispatcher.addListener("savetolocal",@savetolocal)
@menuView.eventDispatcher.addListener("restorefromlocal",@restoreFromLocal)
+ @menuView.eventDispatcher.addListener("showthickbox",@showThickbox)
@factorSelectorView.eventDispatcher.addListener("selectfactor",@selecFactor)
- @gridView.eventDispatcher.addListener("faviconrender",@renderCanvasPreview)
+ @gridView.eventDispatcher.addListener("renderpreview",@renderPreview) # rendercanvas preview
@gridView.eventDispatcher.addListener("updateviews",@updateViews)
- @gridView.eventDispatcher.addListener("clickcell",@clickcell)
+ @gridView.eventDispatcher.addListener("clickcell",@clickcell) # user draw on a cell in the grid
+ @titleView.eventDispatcher.addListener("titlechanged",@titleChange) # title of grid edited
clickcell:(e)=>
@gridModel.fillCell(e.datas)
+ @gridView.fillCell(e)
+ titleChange:(e)=>
@updateViews()
- renderCanvasPreview:(e)=>
+ renderPreview:(e)=>
@canvasPreviewView.render()
oncolorchange:(e)=>
console.log "oncolorchange" , e.datas.color , e.datas.title
@@ -380,11 +419,14 @@ class Main
@gridModel.grid = gridModel.grid
@gridModel.rows = gridModel.rows
@gridModel.columns = gridModel.columns
+ @gridModel.version = gridModel.version
@updateViews()
updateViews:=>
@applicationView.render()
selecFactor:(e)=>
@canvasPreviewModel.factor = parseInt(e.datas)
@updateViews()
+ showThickbox:(e)=>
+ console.log e,"show thickbox"
window?.onload = ->
window?.main = new Main()
View
137 js/faviconbuilder.js
@@ -79,7 +79,7 @@ App.Utils.EventDispatcher = (function() {
EventDispatcher.prototype.dispatch = function(event, datas) {
var i, _i, _len, _ref, _results;
- event.target = event.currenTarget = this;
+ event.target = event.currentTarget = this.parent;
event.datas = datas;
_ref = this.listeners;
_results = [];
@@ -111,26 +111,37 @@ App.Utils.DefaultMenu = (function() {
DefaultMenu.prototype.items = [
{
+ label: "Undo",
+ action: "undo",
+ title: "Restore the grid to the previous state"
+ }, {
+ label: "Redo",
+ action: "redo",
+ title: "Restore the grid to the next state"
+ }, {
label: "Empty grid",
action: "emptygrid",
- title: "Help: \nCreate a new blank grid"
+ title: "Create a new blank grid"
}, {
label: "16x16 grid",
action: "changegridsize",
+ title: 'Change grid size',
datas: {
rows: 16,
columns: 16
}
}, {
label: "32x32 grid",
action: "changegridsize",
+ title: 'Change grid size',
datas: {
rows: 32,
columns: 32
}
}, {
label: "Export to png",
action: "exporttopng",
+ title: "Export image as png in a new window (not available in Internet explorer)",
datas: {
param: "whatever"
}
@@ -141,8 +152,12 @@ App.Utils.DefaultMenu = (function() {
}, {
label: "Restore from local",
action: "restorefromlocal",
- title: "Info :\nRestore previously saved icon.",
+ title: "Restore previously saved icon.",
datas: {}
+ }, {
+ label: "thickbox test",
+ action: "showthickbox",
+ title: "Show thick box , just a javascript CSS test , no special functionalities"
}
];
@@ -192,9 +207,11 @@ App.Models.Cell = (function() {
App.Models.Grid = (function() {
- function Grid(rows, columns) {
+ function Grid(rows, columns, version, title) {
this.rows = rows != null ? rows : 16;
this.columns = columns != null ? columns : 16;
+ this.version = version;
+ this.title = title;
this.grid = [];
this.fillGridBlank();
}
@@ -244,6 +261,17 @@ App.Models.Grid = (function() {
})();
+App.Models.Title = (function() {
+
+ function Title(value, targetId) {
+ this.value = value;
+ this.targetId = targetId;
+ }
+
+ return Title;
+
+})();
+
App.Models.ColorSelector = (function() {
function ColorSelector(colors) {
@@ -327,7 +355,6 @@ App.Views.Grid = (function() {
Grid.prototype.render = function() {
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 = "";
@@ -341,26 +368,19 @@ App.Views.Grid = (function() {
}
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;
}
}
this.divTargetId.innerHTML += this.el;
this.divTargetId.onmouseup = function(e) {
- return _this.drawMode = false;
+ _this.drawMode = false;
+ return _this.eventDispatcher.dispatch(new App.Utils.Event("renderpreview"), {});
};
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"), {
+ element: e.target,
tool: "pen",
width: 2,
color: _this.pen.color,
@@ -374,8 +394,15 @@ App.Views.Grid = (function() {
};
Grid.prototype.fillCell = function(e) {
- this.gridModel.grid[parseInt(e.currentTarget.dataset.row)][parseInt(e.currentTarget.dataset.column)].color = this.pen.color.color;
- return this.eventDispatcher.dispatch(new App.Utils.Event("updateviews"), this);
+ var color;
+ color = e.datas.color.color;
+ if (["", void 0].indexOf(color) < 0) {
+ e.datas.element.style.backgroundColor = color;
+ return e.datas.element.className = "";
+ } else {
+ e.datas.element.style.backgroundColor = null;
+ return e.datas.element.className += " " + this.emptyCellStyle;
+ }
};
Grid.prototype.setDrawMode = function(event) {
@@ -443,6 +470,41 @@ App.Views.Color = (function() {
})();
+App.Views.Title = (function() {
+
+ function Title(model) {
+ this.model = model;
+ this.eventDispatcher = new App.Utils.EventDispatcher(this);
+ }
+
+ Title.prototype.render = function() {
+ var _this = this;
+ this.el = this.model.value.italics();
+ this.model.targetId.innerHTML = this.el;
+ this.model.targetId.setAttribute("title", "Click here to change the grid title");
+ this.model.targetId.onclick = function(e) {
+ e.currentTarget.setAttribute("contenteditable", true);
+ e.currentTarget.style.border = "1px solid #00EEFF";
+ e.currentTarget.style.borderRadius = "2px";
+ e.currentTarget.style.padding = "2px 5px 2px 5px";
+ return false;
+ };
+ this.model.targetId.onblur = this.model.targetId.onkeypress = function(e) {
+ if (e.type === "keypress" && e.which !== 13) return;
+ e.currentTarget.setAttribute("contenteditable", false);
+ e.currentTarget.style.border = "";
+ _this.model.value = e.currentTarget.innerText.trim() !== "" ? e.currentTarget.innerText.trim() : _this.model.value;
+ _this.eventDispatcher.dispatch(new App.Utils.Event("titlechanged"), _this.model.value);
+ return false;
+ };
+ this.model.onkeypress;
+ return this;
+ };
+
+ return Title;
+
+})();
+
App.Views.ColorSelector = (function() {
function ColorSelector(el, model) {
@@ -556,7 +618,7 @@ App.Views.Menu = (function() {
function Menu(model) {
this.model = model;
- this.eventDispatcher = new App.Utils.EventDispatcher();
+ this.eventDispatcher = new App.Utils.EventDispatcher(this);
}
Menu.prototype.render = function() {
@@ -571,10 +633,6 @@ App.Views.Menu = (function() {
if (button.dataset == null) button.dataset = {};
button.dataset.id = i;
this.model.targetId.appendChild(button);
- /*
- button.onclick = (e)=>
- @eventDispatcher.dispatch(new Event(@model.items[i].action),if @model.items[i].datas then @model.items[i].datas else null )
- */
button.onclick = (function(e) {
var action, datas;
action = _this.model.items[i].action;
@@ -611,6 +669,7 @@ App.Controllers.Application = (function() {
Main = (function() {
function Main() {
+ this.showThickbox = __bind(this.showThickbox, this);
this.selecFactor = __bind(this.selecFactor, this);
this.updateViews = __bind(this.updateViews, this);
this.restoreFromLocal = __bind(this.restoreFromLocal, this);
@@ -619,25 +678,34 @@ Main = (function() {
this.changegridsize = __bind(this.changegridsize, this);
this.exportCanvas = __bind(this.exportCanvas, this);
this.oncolorchange = __bind(this.oncolorchange, this);
- this.renderCanvasPreview = __bind(this.renderCanvasPreview, this);
+ this.renderPreview = __bind(this.renderPreview, this);
+ this.titleChange = __bind(this.titleChange, this);
this.clickcell = __bind(this.clickcell, this);
- var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, defaultColor, title;
+ var $canvasPreview, $colorSelector, $factorSelector, $menu, $target, $title, defaultColor, title, version;
+ version = 0.1;
$target = document.getElementById("target");
$canvasPreview = document.getElementById("canvasPreview");
$colorSelector = document.getElementById("colorSelector");
$menu = document.getElementById("menu");
$factorSelector = document.getElementById("factorSelector");
+ $title = document.getElementById("title");
title = "Fav icon builder";
defaultColor = "#000000";
/* MODELS
*/
this.applicationModel = new App.Models.Application();
this.colorSelectorModel = new App.Models.ColorSelector();
- this.gridModel = new App.Models.Grid();
+ this.gridModel = new App.Models.Grid(16, 16, 0.1, "new grid");
+ this.titleModel = new App.Models.Title("new grid", $title);
this.canvasPreviewModel = new App.Models.CanvasPreview($canvasPreview, this.gridModel);
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;
+ this.applicationModel.colorSelectorModel = this.colorSelectorModel;
+ this.applicationModel.gridModel = this.gridModel;
+ this.applicationModel.titleModel = this.titleModel;
+ this.applicationModel.canvasPreviewModel = this.canvasPreviewModel;
+ this.applicationModel.factorSelectorModel = this.factorSelectorModel;
+ this.applicationModel.menuModel = this.menuModel;
/* CONTROLLERS
*/
/* VIEWS
@@ -648,9 +716,11 @@ Main = (function() {
this.canvasPreviewView = new App.Views.CanvasPreview(this.canvasPreviewModel);
this.factorSelectorView = new App.Views.FactorSelector(this.factorSelectorModel);
this.gridView = new App.Views.Grid($target, this.gridModel);
+ this.titleView = new App.Views.Title(this.titleModel);
this.gridView.setPenColor(this.applicationModel.currentColor);
this.menuView = new App.Views.Menu(this.menuModel);
this.applicationView.addChild(this.gridView);
+ this.applicationView.addChild(this.titleView);
this.applicationView.addChild(this.colorSelectorView);
this.applicationView.addChild(this.canvasPreviewView);
this.applicationView.addChild(this.factorSelectorView);
@@ -663,18 +733,24 @@ Main = (function() {
this.menuView.eventDispatcher.addListener("emptygrid", this.emptygrid);
this.menuView.eventDispatcher.addListener("savetolocal", this.savetolocal);
this.menuView.eventDispatcher.addListener("restorefromlocal", this.restoreFromLocal);
+ this.menuView.eventDispatcher.addListener("showthickbox", this.showThickbox);
this.factorSelectorView.eventDispatcher.addListener("selectfactor", this.selecFactor);
- this.gridView.eventDispatcher.addListener("faviconrender", this.renderCanvasPreview);
+ this.gridView.eventDispatcher.addListener("renderpreview", this.renderPreview);
this.gridView.eventDispatcher.addListener("updateviews", this.updateViews);
this.gridView.eventDispatcher.addListener("clickcell", this.clickcell);
+ this.titleView.eventDispatcher.addListener("titlechanged", this.titleChange);
}
Main.prototype.clickcell = function(e) {
this.gridModel.fillCell(e.datas);
+ return this.gridView.fillCell(e);
+ };
+
+ Main.prototype.titleChange = function(e) {
return this.updateViews();
};
- Main.prototype.renderCanvasPreview = function(e) {
+ Main.prototype.renderPreview = function(e) {
return this.canvasPreviewView.render();
};
@@ -712,6 +788,7 @@ Main = (function() {
this.gridModel.grid = gridModel.grid;
this.gridModel.rows = gridModel.rows;
this.gridModel.columns = gridModel.columns;
+ this.gridModel.version = gridModel.version;
return this.updateViews();
}
};
@@ -725,6 +802,10 @@ Main = (function() {
return this.updateViews();
};
+ Main.prototype.showThickbox = function(e) {
+ return console.log(e, "show thickbox");
+ };
+
return Main;
})();

0 comments on commit d0043f1

Please sign in to comment.