Skip to content

Commit

Permalink
ColorPicker 적용 완료
Browse files Browse the repository at this point in the history
  • Loading branch information
@chorr
chorr committed Mar 5, 2012
1 parent 2c727e0 commit 9298d8a
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 17 deletions.
12 changes: 7 additions & 5 deletions app.html
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
67 changes: 56 additions & 11 deletions static/dot.app.js
View file
Expand Up @@ -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({
Expand All @@ -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();
},

Expand All @@ -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
});
}
})

};


Expand Down
7 changes: 6 additions & 1 deletion static/style.css
View file
Expand Up @@ -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;}
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 9298d8a

Please sign in to comment.