Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

slider 모듈 중간 적용

  • Loading branch information...
commit 27bfebb1a0af4fa42f12bc47440b90f09bdea1cb 1 parent a3ea7e5
@chorr chorr authored
Showing with 103 additions and 22 deletions.
  1. +26 −15 app.html
  2. +13 −4 static/dot.app.js
  3. +64 −3 static/dot.ui.js
View
41 app.html
@@ -15,30 +15,41 @@
<script src="./static/dot.ui.js" type="text/javascript"></script>
<style type="text/css">
#app {-webkit-tap-highlight-color:rgba(0,0,0,0);}
- .stage {width:320px;height:320px;margin:0 auto;}
+ .stage {width:320px;height:320px;}
- .ui-slider {}
+ .item-slider {width:auto;}
+ .ui-slider {float:left;}
.slider-less, .slider-more {float:left;width:32px;height:32px;}
- .slider-bar {float:left;position:relative;width:245px;height:22px;padding:5px;background-color:rgb(57,45,44);}
- .slider-point {left:0;top:0;width:22px;height:22px;background-color:#E7E9E1;}
+ .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;}
</style>
</head>
<body>
<div id="app">
- <div class="menu menu-top">
- <div class="menu-slider"></div>
+ <div class="menu line-bottom">
+ <div class="inner-wrap">
+ <div class="item item-slider"></div>
+ <div class="item item-spacer"></div>
+ <div class="item item-spacer"></div>
+ <div class="ico-config item"></div>
+ </div>
</div>
+
<div class="stage canvas"></div>
- <div class="menu menu-bottom">
- <div class="ico-pen item btn-draw item-selected"></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="ico-undo item btn-undo"></div>
- <div class="ico-redo item btn-redo"></div>
- <div class="ico-clear item btn-clear"></div>
- <div class="ico-save item"></div>
- <div class="ico-export item"></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="item item-spacer"></div>
+ <div class="ico-undo item btn-undo"></div>
+ <div class="ico-redo item btn-redo"></div>
+ <div class="item item-spacer"></div>
+ <div class="ico-clear item btn-clear"></div>
+ <div class="ico-export item"></div>
+ </div>
</div>
</div>
View
17 static/dot.app.js
@@ -43,10 +43,11 @@ dot.App = {
dot.App.canvas = this.canvas = new dot.CanvasView({ target: this.$canvas }).model;
new dot.UI.Slider({
- target: $(".menu-slider"),
+ target: $(".item-slider"),
handler: {
- minus: this.zoomOut,
- plus: this.zoomIn
+ move: _.bind(this.scale, this),
+ minus: _.bind(this.zoomOut, this),
+ plus: _.bind(this.zoomIn, this)
}
});
@@ -79,8 +80,16 @@ dot.App = {
this.canvas.clearPixel();
},
+ scale: function(val) {
+ this.canvas.scale(val);
+ },
+
zoomOut: function() {
-
+ this.canvas.scale(-3);
+ },
+
+ zoomIn: function() {
+ this.canvas.scale(3);
}
})
View
67 static/dot.ui.js
@@ -4,15 +4,34 @@ dot.UI = {};
/* slider 컴포넌트 */
dot.UI.Slider = Backbone.View.extend({
- template: '<div class="ui-slider"><button class="slider-less">-</button><div class="slider-bar"><div class="slider-point"></div></div><button class="slider-more">+</button></div>',
+ template: '<div class="ui-slider"><div class="ico-minus item"></div><div class="slider-bar"><div class="slider-point"></div></div><div class="ico-plus item"></div></div>',
events: {
- "click .slider-less": "minusHandler",
- "click .slider-more": "plusHandler"
+ "touchstart .slider-bar": "handle",
+ "touchmove .slider-bar": "handle",
+ "touchend .slider-bar": "handle",
+ "click .ico-minus": "minusHandler",
+ "click .ico-plus": "plusHandler"
},
+ hasTouchEvent: ("ontouchstart" in window),
+ hasHold: false,
+ hasMove: false,
+
initialize: function(options) {
this.$target = options.target;
this.handler = options.handler;
this.render();
+
+ this.$point = $(".slider-point", this.$el);
+
+ /* for PC Browser */
+ if (!this.hasTouchEvent) {
+ this.events["mousedown .slider-bar"] = "handle";
+ this.events["mousemove .slider-bar"] = "handle";
+ this.events["mouseup .slider-bar"] = "handle";
+ this.events["mouseout .slider-bar"] = "handle";
+ }
+ this.delegateEvents(this.events);
+
},
render: function() {
this.setElement(this.template);
@@ -24,5 +43,47 @@ dot.UI.Slider = Backbone.View.extend({
},
plusHandler: function() {
this.handler.plus();
+ },
+ handle: function(ev) {
+ var e = (ev.originalEvent.touches && ev.originalEvent.touches[0]) ?
+ ev.originalEvent.touches[0] : ev,
+ offset = $(".slider-bar").offset(),
+ x = (e.pageX || this.lastX) - offset.left,
+ y = (e.pageY || this.lastY) - offset.left;
+
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ switch (ev.type) {
+ case "touchstart":
+ case "mousedown":
+ this.hasHold = true;
+ this.hasMove = false;
+ this.lastX = x;
+ this.lastY = y;
+ break;
+
+ case "touchmove":
+ case "mousemove":
+ if (this.hasHold) {
+ this.hasMove = true;
+ console.log(this.$point)
+ this.$point.css({
+ left: x
+ });
+ }
+ this.lastX = x;
+ this.lastY = y;
+ break;
+
+ case "touchend":
+ case "mouseup":
+ case "mouseout":
+ this.hasHold = false;
+ this.hasMove = false;
+ break;
+
+ default: return;
+ }
}
});
Please sign in to comment.
Something went wrong with that request. Please try again.