Permalink
Browse files

ColorPicker 적용 완료

  • Loading branch information...
1 parent 2c727e0 commit 9298d8afa376159adb9308d77e949ec6dfcbca7c @chorr chorr committed Mar 5, 2012
Showing with 69 additions and 17 deletions.
  1. +7 −5 app.html
  2. +56 −11 static/dot.app.js
  3. +6 −1 static/style.css
View
@@ -22,6 +22,8 @@
.slider-less, .slider-more {float:left;width:32px;height:32px;}
.slider-bar {float:left;position:relative;width:90px;height:22px;background-color:#392D2C;border:5px solid #392D2C;}
.slider-point {position:absolute;left:0;top:0;width:22px;height:22px;background-color:#E7E9E1;}
+
+ .color-wrap {position:relative;}
</style>
</head>
<body>
@@ -37,15 +39,15 @@
</div>
<div class="stage canvas"></div>
+ <div class="color-wrap"></div>
<div class="menu line-top">
<div class="inner-wrap">
- <div class="ico-pen item btn-draw" style="display:none;"></div>
- <div class="ico-move item btn-move"></div>
- <div class="ico-color item"><span><span style="background-color:#fff;"></span></span></div>
+ <div class="mode-toggle ico-move item btn-move"></div>
+ <div class="ico-color item btn-color"><span><span class="current-color" style="background-color:#000;box-shadow:inset 0 0 1px rgba(255,255,255,0.7);"></span></span></div>
<div class="item item-spacer"></div>
- <div class="ico-undo item btn-undo"></div>
- <div class="ico-redo item btn-redo"></div>
+ <div class="ico-undo item btn-undo disabled"></div>
+ <div class="ico-redo item btn-redo disabled"></div>
<div class="item item-spacer"></div>
<div class="ico-clear item btn-clear"></div>
<div class="ico-export item"></div>
View
@@ -31,13 +31,18 @@ dot.App = {
_view: Backbone.View.extend({
el: "#app",
events: {
- "click .btn-draw": "selectDraw",
- "click .btn-move": "selectMove",
+ "click .mode-toggle": "toggleMode",
+ "click .btn-color": "toggleColor",
"click .btn-undo": "undo",
"click .btn-redo": "redo",
"click .btn-clear": "clear"
},
+ $canvas: null,
+ canvas: null,
+ slider: null,
+ colorPicker: null,
+
initialize: function() {
this.$canvas = $(".canvas");
dot.App.canvas = this.canvas = new dot.CanvasView({
@@ -46,34 +51,67 @@ dot.App = {
height: 48
}).model;
+ this.initInterface();
+ this.initUndoEvent();
+ this.scrollTop();
+ $(window).bind("orientationchange", this.scrollTop);
+ },
+
+ initInterface: function() {
this.slider = new dot.UI.Slider({
target: $(".item-slider"),
max: 128,
value: 64
}).on("change", $.proxy(this.scale, this));
- this.scrollTop();
- $(window).bind("orientationchange", this.scrollTop);
+ this.colorPicker = new dot.UI.ColorPicker($(".stage")[0], 15);
+ this.colorPicker.$canvas
+ .attr({
+ width:this.$canvas.width(),
+ height:this.$canvas.width() * 0.5
+ })
+ .addClass("color-picker hide");
+ this.colorPicker.render(this.$canvas.width(), this.$canvas.width() * 0.5);
+ $(this.colorPicker).on("selected", $.proxy(this.selectColor, this));
},
scrollTop: function() {
setTimeout(window.scrollTo, 0, 0, 1);
},
+ toggleMode: function(ev) {
+ var $el = $(ev.target);
+ if ($el.hasClass("btn-move")) {
+ $el.removeClass("btn-move").removeClass("ico-move")
+ .addClass("btn-draw").addClass("ico-pen");
+ this.canvas.setHandMode(true);
+ } else {
+ $el.removeClass("btn-draw").removeClass("ico-pen")
+ .addClass("btn-move").addClass("ico-move");
+ this.canvas.setHandMode(false);
+ }
+ },
- selectDraw: function() {
- this.canvas.setHandMode(false);
+ toggleColor: function(ev) {
+ this.colorPicker.$canvas.toggleClass("hide");
},
- selectMove: function() {
- this.canvas.setHandMode(true);
+ initUndoEvent: function() {
+ this.canvas.on("canvas:undo", function(isDisable) {
+ $(".btn-undo").toggleClass("disabled", isDisable);
+ });
+ this.canvas.on("canvas:redo", function(isDisable) {
+ $(".btn-redo").toggleClass("disabled", isDisable);
+ });
},
- undo: function() {
+ undo: function(ev) {
+ if ($(ev.target).hasClass("disabled")) return;
this.canvas.undo();
},
- redo: function() {
+ redo: function(ev) {
+ if ($(ev.target).hasClass("disabled")) return;
this.canvas.redo();
},
@@ -83,9 +121,16 @@ dot.App = {
scale: function(val, diff) {
this.canvas.scale(diff);
+ },
+
+ selectColor: function(ev, color) {
+ this.colorPicker.$canvas.toggleClass("hide");
+ this.canvas.setColor(color);
+ $(".current-color", this.$el).css({
+ backgroundColor: color
+ });
}
})
-
};
View
@@ -5,6 +5,8 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
body {-webkit-text-size-adjust:none;}
+.hide {display:none !important;}
+
.ico-clear {background:url('../images/btn_clear.png') no-repeat center center;}
.ico-cloud {background:url('../images/btn_cloud.png') no-repeat center center;}
.ico-config {background:url('../images/btn_config.png') no-repeat center center;}
@@ -35,15 +37,18 @@ body {-webkit-text-size-adjust:none;}
.ico-color span {position:absolute;left:13px;top:13px;width:16px;height:16px;background-color:#000;}
.ico-color span span {left:2px;top:2px;width:12px;height:12px;background-color:#fff;}
-.stage {clear:both;border-top:1px solid #c6c7c2;border-bottom:1px solid #c6c7c2;background:#fff;}
+.stage {clear:both;position:relative;margin:0 auto;border-top:1px solid #c6c7c2;border-bottom:1px solid #c6c7c2;background:#fff;}
+.stage canvas {vertical-align:top;}
.menu {background:#e7e9e1;}
.menu .inner-wrap {overflow:hidden;clear:both;width:294px;height:42px;margin:0 auto;}
+.menu .disabled {opacity:0.3;cursor:default;}
.line-bottom {border-bottom:1px solid #abaca7;}
.line-top {border-top:1px solid #abaca7;}
.item {overflow:hidden;float:left;width:42px;height:42px;cursor:pointer;}
.item-selected {background-color:#b8b9b3;}
.item-spacer {width:21px;cursor:default;}
.item-slider {width:126px;}
+.color-picker {position:absolute;bottom:0;left:0;background-color:#fff;}
/* for iphone */
@media

0 comments on commit 9298d8a

Please sign in to comment.