-
-
Save romeoh/5054364 to your computer and use it in GitHub Desktop.
css, animate, drag 기본 css로 작동하는 마지막 버전
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************** | |
| * mpui.js | |
| * morpheus UI Framework | |
| * Author : 백국경 ([email protected]) | |
| * Copyright © 2013 Uracle Co., Ltd. | |
| * 166 Samseong-dong, Gangnam-gu, Seoul, 135-090, Korea All Rights Reserved. | |
| * 베타버전입니다. 버그는 [email protected]로 보고해주세요. | |
| *******************************************/ | |
| (function(g, d, w, undefined) { | |
| var version = "Morpheus UI 0.0.1" | |
| ,tmr = new Date().getTime() | |
| ,tmrs = [] | |
| ,hasTouch = 'ontouchstart' in w || false | |
| ,startEvt = hasTouch ? 'touchstart' : 'mousedown' | |
| ,moveEvt = hasTouch ? 'touchmove' : 'mousemove' | |
| ,endEvt = hasTouch ? 'touchend' : 'mouseup' | |
| ,cancelEvt = hasTouch ? 'touchcancel' : 'mouseup' | |
| Mui = function(_selector) { | |
| return new Mui.fn.init(_selector); | |
| } | |
| Mui.fn = Mui.prototype = { | |
| /* 초기화 */ | |
| init: function(_selector) { | |
| if (!_selector) return this; | |
| if (typeof _selector === "string") { | |
| this.selector = d.querySelectorAll(_selector); | |
| Mui.selector = _selector; | |
| Mui.that = this; | |
| return this; | |
| } | |
| if (typeof _selector === "object") { | |
| this.selector = d.querySelectorAll(_selector.nodeName); | |
| Mui.that = this; | |
| return this; | |
| } | |
| }, | |
| /* add class */ | |
| addClass: function(_className) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| if (_className != '') { | |
| if (!selector[i].classList) { | |
| selector[i].className = selector[i].className + ' ' + _className; | |
| return this; | |
| } | |
| selector[i].classList.add(_className); | |
| } | |
| } | |
| return this; | |
| }, | |
| /* remove class */ | |
| removeClass: function(_className) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| if (_className != '') { | |
| if (!selector[i].classList) { | |
| selector[i].className = selector[i].className.replace(_className, ''); | |
| return this; | |
| } | |
| selector[i].classList.remove(_className); | |
| } | |
| } | |
| return this; | |
| }, | |
| /* toggleClass */ | |
| toggleClass: function(_className) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| if (_className != '') { | |
| selector[i].classList.toggle(_className); | |
| } | |
| } | |
| return this; | |
| }, | |
| /* hasClass */ | |
| hasClass: function(_className) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| if (_className != '') { | |
| if (!selector[i].classList) { | |
| if (selector[i].className.indexOf(_className) == '-1') { | |
| return false; | |
| } else { | |
| return true; | |
| } | |
| } | |
| return selector[i].classList.contains(_className); | |
| } | |
| } | |
| }, | |
| /* CSS */ | |
| css: function(_key, _value) { | |
| selector = this.selector; | |
| if (_value === undefined) { | |
| if (_key == 'clientWidth') { | |
| return selector[0].clientWidth; | |
| } else if (_key == 'clientHeight') { | |
| return selector[0].clientHeight; | |
| } else { | |
| return eval("document.defaultView.getComputedStyle(selector[0], null)."+_key); | |
| } | |
| } else { | |
| for (var i=0; i<selector.length; i++) { | |
| if (_key == 'scale' || _key == 'rotate') { | |
| selector[i].style.webkitTransform = _key+'('+_value+')'; | |
| } else { | |
| styleText = _key + "='" + _value + "'"; | |
| eval("selector[i].style." + styleText); | |
| } | |
| } | |
| return this; | |
| } | |
| }, | |
| /* get/set attributes */ | |
| attr: function(_key, _value) { | |
| selector = this.selector; | |
| if (_value == undefined) { | |
| if (_key == 'checked') { | |
| return selector[0].checked; | |
| }else { | |
| return selector[0].getAttribute(_key); | |
| } | |
| } else { | |
| for (var i=0; i<selector.length; i++) { | |
| if (typeof _value == 'boolean') { | |
| eval("selector[i]."+_key+" = "+_value); | |
| } else if (_key == 'checked') { | |
| selector[i].checked = _value; | |
| } else { | |
| selector[i].setAttribute(_key, _value); | |
| } | |
| } | |
| } | |
| return this; | |
| }, | |
| /* remove attributes */ | |
| removeAttr: function(_key) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].removeAttribute(_key); | |
| } | |
| return this; | |
| }, | |
| /* get/set attributes */ | |
| val: function(_value) { | |
| selector = this.selector; | |
| if (_value == undefined) { | |
| return selector[0].value; | |
| } else { | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].value = _value; | |
| } | |
| } | |
| return this; | |
| }, | |
| /* get/set data */ | |
| data:function(_key, _value) { | |
| selector = this.selector; | |
| if (_value == undefined) { | |
| return selector[0].getAttribute("data-"+_key); | |
| } else { | |
| if (typeof _value === "object") { | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].setAttribute("data-"+_key, JSON.stringify(_value)); | |
| } | |
| } else if (typeof _value === "string" || typeof _value === "number") { | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].setAttribute("data-"+_key, _value); | |
| } | |
| } | |
| } | |
| return this; | |
| }, | |
| /* innerHTML */ | |
| html: function(_value) { | |
| selector = this.selector; | |
| if (_value == undefined) { | |
| return selector[0].innerHTML; | |
| } else { | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].innerHTML = _value; | |
| } | |
| } | |
| return this; | |
| }, | |
| /* text */ | |
| text: function(_value) { | |
| selector = this.selector; | |
| if (_value == undefined) { | |
| return selector[0].textContent; | |
| } else { | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].textContent = _value; | |
| } | |
| } | |
| return this; | |
| }, | |
| /* animation */ | |
| animate: function(_option, _callback) { | |
| var styleText = "" | |
| ,time = _option.time || "1s" | |
| ,delay = _option.delay || "0s" | |
| ,callBack = _callback || "" | |
| ,selector = this.selector | |
| ,obj | |
| ,prefix = mpui.browser().prefix; | |
| for (var i=0; i<selector.length; i++) { | |
| for (var _key in _option) { | |
| var _value = eval("_option." + _key); | |
| switch (_key) { | |
| case 'scale': | |
| styleText += '-webkit-transform: scale('+_value+'); '; | |
| break; | |
| case 'rotate': | |
| styleText += '-webkit-transform: rotate('+_value+'); '; | |
| break; | |
| case 'time': case 'delay': | |
| break; | |
| default: | |
| styleText += _key + ":" + _value + "; "; | |
| break; | |
| } | |
| } | |
| styleText += "-webkit-transition:all " + time + " linear " + delay + "; "; | |
| selector[i].style.cssText += styleText; | |
| if( eval("document.defaultView.getComputedStyle(this.selector["+i+"], null).position") == "static" ){ | |
| this.selector[i].style.position = "relative"; | |
| } | |
| selector[i].addEventListener("webkitTransitionEnd", function(event) { | |
| if (!obj) { | |
| obj = event; | |
| obj.currentTarget.style.webkitTransition = ""; | |
| if (callBack !== "") { | |
| id = "id" + Math.floor(Math.random()*1000000000) || ''; | |
| event.currentTarget.setAttribute('data-id', id); | |
| eval(callBack)(event, M('[data-id="' + id + '"]')); | |
| event.target.removeAttribute('data-id'); | |
| } | |
| } | |
| }, false); | |
| } | |
| return this; | |
| }, | |
| /* click 이벤트 * // iOS에서 click 이벤트 0.3초 딜레이 되는 현상있음.* | |
| click: function(_callback, _bubble) { | |
| selector = this.selector; | |
| bubble = _bubble || false; | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].that = this; | |
| selector[i].addEventListener("click", function(evt) { | |
| if (evt.currentTarget.id != '') { | |
| eval(_callback)(evt, evt.currentTarget.that); | |
| } else { | |
| id = "id" + Math.floor(Math.random()*1000000000) || ''; | |
| evt.currentTarget.dataset.id = id; | |
| eval(_callback)(evt, M('[data-id="' + id + '"]')); | |
| //evt.target.removeAttribute('data-id'); | |
| } | |
| }, bubble); | |
| } | |
| return this; | |
| }, | |
| /**/ | |
| /* click 이벤트 */ | |
| click: function(_callback, _bubble) { | |
| selector = this.selector; | |
| bubble = _bubble || false; | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].that = this; | |
| selector[i].bubble = bubble; | |
| if (!selector[i].callback) { | |
| selector[i].callback = [] | |
| } | |
| selector[i].callback.push(_callback); | |
| if ( M.browser().device == 'pc' ) { | |
| selector[i].addEventListener("mousedown", Mui.prototype.clickHandler, bubble); | |
| } else { | |
| selector[i].addEventListener("touchstart", Mui.prototype.clickHandler, bubble); | |
| } | |
| } | |
| return this; | |
| }, | |
| clickHandler: function(evt){ | |
| var id | |
| switch(evt.type){ | |
| case 'mousedown': case 'touchstart': | |
| WNSetVariableToStorage('timestamp', evt.timeStamp); | |
| if ( M.browser().device == 'pc' ) { | |
| evt.currentTarget.addEventListener("mouseup", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| evt.currentTarget.addEventListener("mousemove", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } else { | |
| evt.currentTarget.addEventListener("touchend", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| evt.currentTarget.addEventListener("touchmove", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } | |
| id = "id" + Math.floor(Math.random() * 1000000000) || ''; | |
| evt.currentTarget.setAttribute('data-click-event-id', id) | |
| this.muiSelector = '[data-click-event-id="' + id + '"]'; | |
| this.start = []; | |
| if ( M.browser().device == 'pc' ) { | |
| this.start = [evt.pageX, evt.pageY]; | |
| } else { | |
| this.start = [evt.touches[0].pageX, evt.touches[0].pageY]; | |
| } | |
| break; | |
| case 'mousemove': case 'touchmove': | |
| if ( M.browser().device == 'pc' ) { | |
| evt.currentTarget.removeEventListener("mouseup", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } else { | |
| evt.currentTarget.removeEventListener("touchend", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } | |
| break; | |
| case 'mouseup': case 'touchend': | |
| if ( M.browser().device == 'pc' ) { | |
| evt.currentTarget.removeEventListener("mouseup", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } else { | |
| evt.currentTarget.removeEventListener("touchend", Mui.prototype.clickHandler, evt.currentTarget.bubble); | |
| } | |
| this.end = []; | |
| try { | |
| this.end = [evt.touches[0].pageX, evt.touches[0].pageY]; | |
| } catch(err) { | |
| this.end = [evt.pageX, evt.pageY]; | |
| } | |
| //for (var i=0; i<evt.currentTarget.callback.length; i++) { | |
| eval(evt.currentTarget.callback[0]) (evt, Mui(this.muiSelector)); | |
| //} | |
| evt.currentTarget.removeAttribute('data-click-event-id'); | |
| break; | |
| } | |
| }, | |
| /**/ | |
| /* event bind */ | |
| on: function(_event, _callback, _bubble) { | |
| var selector = this.selector | |
| ,events = [] | |
| ,bubble = _bubble || false | |
| ,id | |
| for (var i=0; i<selector.length; i++) { | |
| if (selector[i].getAttribute('data-eventid') == undefined) { | |
| id = "id" + Math.floor(Math.random()*1000000000) || ''; | |
| selector[i].setAttribute('data-eventid', id); | |
| } | |
| selector[i].addEventListener(_event, ids = function(evt) { | |
| WNSetVariableToStorage('timestamp', evt.timeStamp); | |
| eval(_callback)(evt, M('[data-eventid="'+evt.currentTarget.getAttribute('data-eventid')+'"]')); | |
| }, bubble); | |
| if (Mui.eventListener[id] == undefined) { | |
| Mui.eventListener[id] = {}; | |
| } | |
| Mui.eventListener[id][_event] = []; | |
| Mui.eventListener[id][_event].push(ids, bubble); | |
| } | |
| return this; | |
| }, | |
| /* event unbind */ | |
| off: function(_event) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| if (Mui.eventListener[selector[i].getAttribute('data-eventid')] != undefined) { | |
| selector[i].removeEventListener( | |
| _event, | |
| Mui.eventListener[selector[i].getAttribute('data-eventid')][_event][0], | |
| Mui.eventListener[selector[i].getAttribute('data-eventid')][_event][1] | |
| ); | |
| delete Mui.eventListener[selector[i].getAttribute('data-eventid')]; | |
| selector[i].removeAttribute('data-eventid') | |
| } | |
| } | |
| return this; | |
| }, | |
| /* focus / blur */ | |
| focus: function(_callback) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].focus(); | |
| if (_callback) { | |
| eval(_callback)(); | |
| } | |
| } | |
| return this; | |
| }, | |
| /* focus */ | |
| blur: function(_callback) { | |
| selector = this.selector; | |
| for (var i=0; i<selector.length; i++) { | |
| selector[i].blur(); | |
| if (_callback) { | |
| eval(_callback)(); | |
| } | |
| } | |
| return this; | |
| }, | |
| /* Traversal */ | |
| children: function() { | |
| var childNodes = this.selector[0].childNodes | |
| ,nodes = ''; | |
| for (var i=0; i<childNodes.length; i++) { | |
| if (childNodes[i].nodeType == '1') { | |
| nodes = nodes + ', ' + Mui.selector +" "+ childNodes[i].nodeName; | |
| } | |
| } | |
| nodes = nodes.replace(',', ''); | |
| return Mui( nodes ); | |
| }, | |
| parent: function() { | |
| return Mui.prototype.traversal(this.selector[0].parentNode); | |
| }, | |
| first: function(){ | |
| return Mui.prototype.traversal(this.selector[0].firstElementChild); | |
| }, | |
| next: function() { | |
| return Mui.prototype.traversal(this.selector[0].nextElementSibling); | |
| }, | |
| last: function(){ | |
| return Mui.prototype.traversal(this.selector[0].lastElementChild); | |
| }, | |
| prev: function() { | |
| return Mui.prototype.traversal(this.selector[0].previousElementSibling); | |
| }, | |
| find: function(_elem) { | |
| this.selector = this.selector[0].querySelectorAll(_elem); | |
| Mui.selector = _elem; | |
| Mui.that = this; | |
| return this; | |
| }, | |
| traversal: function(_childNodes) { | |
| if (_childNodes.id == '') { | |
| id = "id" + Math.floor(Math.random()*1000000000) || '' | |
| _childNodes.setAttribute('data-traversalid', id); | |
| setTimeout(function(){ | |
| _childNodes.removeAttribute('data-traversalid'); | |
| }, 0); | |
| return Mui( '[data-traversalid="'+id+'"]' ); | |
| } else { | |
| return Mui( '#'+_childNodes.id ); | |
| } | |
| }, | |
| // DOM Insertion | |
| append: function(_elem, _option){ | |
| var elem = Mui(Mui.selector) | |
| ,appendEle = d.createElement(_elem) | |
| elem.selector[0].appendChild(Mui.prototype.createElement(_elem, _option)); | |
| return this; | |
| }, | |
| prepend: function(_elem, _option){ | |
| var elem = Mui(Mui.selector) | |
| ,appendEle = d.createElement(_elem) | |
| elem.selector[0].insertBefore(Mui.prototype.createElement(_elem, _option), elem.selector[0].childNodes[0]); | |
| return this; | |
| }, | |
| before: function(_elem, _option){ | |
| var elem = Mui(Mui.selector) | |
| ,parentEle = elem.selector[0].parentElement | |
| ,appendEle = d.createElement(_elem) | |
| parentEle.insertBefore(Mui.prototype.createElement(_elem, _option), elem.selector[0]); | |
| return this; | |
| }, | |
| after: function(_elem, _option){ | |
| var elem = Mui(Mui.selector) | |
| ,parentEle = elem.selector[0].parentElement | |
| parentEle.insertBefore(Mui.prototype.createElement(_elem, _option), elem.selector[0].nextSibling); | |
| return this; | |
| }, | |
| insertAfter: function(_elem){ | |
| var elem = Mui(Mui.selector) | |
| ,parentEle = elem.selector[0].parentElement | |
| parentEle.insertBefore(d.querySelector(Mui.selector), d.querySelector(_elem).nextSibling); | |
| return this; | |
| }, | |
| insertBefore: function(_elem){ | |
| var elem = Mui(Mui.selector) | |
| ,parentEle = elem.selector[0].parentElement | |
| parentEle.insertBefore(d.querySelector(Mui.selector), d.querySelector(_elem)); | |
| return this; | |
| }, | |
| createElement : function(_elem, _option){ | |
| var appendEle = d.createElement(_elem); | |
| for(var name in _option){ | |
| if(name == 'text'){ | |
| text = d.createTextNode( _option[name] ); | |
| appendEle.appendChild(text); | |
| } else if( name.indexOf('data') == 0){ | |
| appendEle.dataset[name.replace('data-', '')] = _option[name]; | |
| } else { | |
| appendEle[name] = _option[name]; | |
| } | |
| } | |
| return appendEle; | |
| }, | |
| remove: function(){ | |
| var elem = Mui(Mui.selector) | |
| ,selector = this.selector | |
| ,childNodes = elem.selector[0].parentNode | |
| for (var i=0; i<selector.length; i++) { | |
| childNodes.removeChild(selector[i]); | |
| } | |
| return this; | |
| }, | |
| /* drag and drop */ | |
| drag: function(_option) { | |
| var selector = this.selector | |
| ,dragOption = {} | |
| if (!d.dragOption) { | |
| d.dragOption = {} | |
| } | |
| if (!_option) { | |
| _option = {}; | |
| } | |
| dragOption.handler = _option.handler == undefined ? selector : d.querySelectorAll(_option.handler); | |
| Mui.dragInit.mpSelector = this; | |
| if ( M.browser().device == 'pc' ) { | |
| for(var i=0; i<dragOption.handler.length; i++){ | |
| dragOption.handler[i].addEventListener('mousedown', Mui.dragInit, false); | |
| dragOption.handler[i].dragOption = this.drag.arguments[0]; | |
| } | |
| } else { | |
| for(var i=0; i<dragOption.handler.length; i++){ | |
| dragOption.handler[i].addEventListener('touchstart', Mui.dragInit, false); | |
| dragOption.handler[i].dragOption = this.drag.arguments[0]; | |
| } | |
| } | |
| return this; | |
| }, | |
| /* drag and drop */ | |
| stopDrag: function() { | |
| var selector = this.selector | |
| if ( M.browser().device == 'pc' ) { | |
| selector[0].removeEventListener('mousedown', Mui.dragInit, false); | |
| } else { | |
| selector[0].removeEventListener('touchstart', Mui.dragInit, false); | |
| } | |
| return this; | |
| } | |
| } | |
| Mui.eventListener = {} | |
| Mui.dragInit = function(evt){ | |
| var point = hasTouch ? evt.touches[0] : evt | |
| ,scroller = Mui.dragInit.mpSelector | |
| switch (evt.type) { | |
| case 'mousedown': case 'touchstart': | |
| d.dragOption = {} | |
| if (!evt.currentTarget.dragOption) { | |
| evt.currentTarget.dragOption = {} | |
| } | |
| d.dragOption.vertical = evt.currentTarget.dragOption.vertical == undefined ? true : evt.currentTarget.dragOption.vertical; | |
| d.dragOption.horizon = evt.currentTarget.dragOption.horizon == undefined ? true : evt.currentTarget.dragOption.horizon; | |
| d.dragOption.scale = evt.currentTarget.dragOption.scale == undefined ? 1 : evt.currentTarget.dragOption.scale; | |
| d.dragOption.opacity = evt.currentTarget.dragOption.opacity == undefined ? 1 : evt.currentTarget.dragOption.opacity; | |
| d.dragOption.css = evt.currentTarget.dragOption.css == undefined ? null : evt.currentTarget.dragOption.css; | |
| d.dragOption.oneway = evt.currentTarget.dragOption.oneway == undefined ? false: evt.currentTarget.dragOption.oneway; | |
| d.dragOption.left = evt.currentTarget.dragOption.left == undefined ? null : evt.currentTarget.dragOption.left; | |
| d.dragOption.right = evt.currentTarget.dragOption.right == undefined ? null : evt.currentTarget.dragOption.right; | |
| d.dragOption.top = evt.currentTarget.dragOption.top == undefined ? null : evt.currentTarget.dragOption.top; | |
| d.dragOption.bottom = evt.currentTarget.dragOption.bottom == undefined ? null : evt.currentTarget.dragOption.bottom; | |
| d.dragOption.onStart = evt.currentTarget.dragOption.onStart == undefined ? null : evt.currentTarget.dragOption.onStart; | |
| d.dragOption.onMove = evt.currentTarget.dragOption.onMove == undefined ? null : evt.currentTarget.dragOption.onMove; | |
| d.dragOption.onEnd = evt.currentTarget.dragOption.onEnd == undefined ? null : evt.currentTarget.dragOption.onEnd; | |
| d.dragOption.onCancel = evt.currentTarget.dragOption.onCancel == undefined ? null : evt.currentTarget.dragOption.onCancel; | |
| Mui.dragInit.target = evt.currentTarget || evt.cuTarget | |
| scroller.length = 0; | |
| scroller[0] = Mui.dragInit.target | |
| scroller.selector = [] | |
| scroller.selector[0] = Mui.dragInit.target | |
| Mui.dragInit.startPos = []; // [objPos, mousePos] | |
| Mui.dragInit.endPos = []; | |
| Mui.dragInit.centerPos = []; // [가로, 세로] | |
| Mui.dragInit.firstDirection = null; | |
| w.direction = 0; | |
| w.updown = 0; | |
| if (scroller.css('position') == 'static') { | |
| scroller.css('position', 'relative') | |
| } | |
| d.addEventListener(moveEvt, Mui.dragInit, false); | |
| d.addEventListener(endEvt, Mui.dragInit, false); | |
| Mui.dragInit.startPos[1] = [point.pageX, point.pageY]; | |
| Mui.dragInit.startPos[0] = [parseFloat(scroller.css('left'))||0, parseFloat(scroller.css('top'))||0]; | |
| Mui.dragInit.centerPos[0] = [Mui.dragInit.startPos[0][0] - Mui.dragInit.startPos[1][0]]; | |
| Mui.dragInit.centerPos[1] = [Mui.dragInit.startPos[0][1] - Mui.dragInit.startPos[1][1]]; | |
| // scale | |
| if (d.dragOption.scale != 1) { | |
| scroller.css('scale', d.dragOption.scale); | |
| } | |
| // opacity | |
| if (d.dragOption.opacity != 1) { | |
| scroller.css('opacity', d.dragOption.opacity); | |
| } | |
| // css | |
| if (d.dragOption.css) { | |
| scroller.addClass(d.dragOption.css); | |
| } | |
| // 콜백 | |
| if (d.dragOption.onStart) { | |
| eval(d.dragOption.onStart)(point, scroller); | |
| } | |
| break; | |
| case 'mousemove': case 'touchmove': | |
| //tmr = new Date().getTime() | |
| Mui.dragInit.endPos[0] = [parseFloat(scroller.css('left'))||0, parseFloat(scroller.css('top'))||0]; | |
| Mui.dragInit.endPos[1] = [point.pageX, point.pageY]; | |
| if( !Mui.dragInit.firstDirection ){ | |
| if(Math.abs(Mui.dragInit.endPos[1][1] - Mui.dragInit.startPos[1][1]) > Math.abs(Mui.dragInit.endPos[1][0] - Mui.dragInit.startPos[1][0])){ | |
| Mui.dragInit.firstDirection = 'horizon'; | |
| }else { | |
| Mui.dragInit.firstDirection = 'vertical'; | |
| } | |
| if (d.dragOption.vertical && d.dragOption.horizon && !d.dragOption.oneway) { | |
| Mui.dragInit.firstDirection = 'all'; | |
| } | |
| } | |
| // oneway option | |
| if (d.dragOption.oneway){ | |
| if (Mui.dragInit.firstDirection == 'vertical'){ | |
| evt.preventDefault(); | |
| w.updown = 1; | |
| var left = parseFloat(point.pageX) + parseFloat(Mui.dragInit.centerPos[0]) | |
| // limit | |
| if (d.dragOption.left && d.dragOption.right) { | |
| if ( parseFloat(d.dragOption.left) < left && parseFloat(d.dragOption.right) > left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else if (d.dragOption.left) { | |
| if ( parseFloat(d.dragOption.left) < left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else if (d.dragOption.right) { | |
| if ( parseFloat(d.dragOption.right) > left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else if (Mui.dragInit.firstDirection == 'horizon'){ | |
| evt.preventDefault(); | |
| w.direction = 1; | |
| var top = parseFloat(point.pageY) + parseFloat(Mui.dragInit.centerPos[1]) | |
| // limit | |
| if (d.dragOption.top && d.dragOption.bottom) { | |
| if ( parseFloat(d.dragOption.top) < top && parseFloat(d.dragOption.bottom) > top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else if (d.dragOption.top) { | |
| if ( parseFloat(d.dragOption.top) < top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else if (d.dragOption.bottom) { | |
| if ( parseFloat(d.dragOption.bottom) > top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } | |
| } else { | |
| if (d.dragOption.vertical){ | |
| if (Mui.dragInit.firstDirection == 'vertical') { | |
| Mui.dragEnd(evt); | |
| } else { | |
| // console.log('세로'); | |
| evt.preventDefault(); | |
| w.updown = 1; | |
| var top = parseFloat(point.pageY) + parseFloat(Mui.dragInit.centerPos[1]) | |
| // limit | |
| if (d.dragOption.top && d.dragOption.bottom) { | |
| if ( parseFloat(d.dragOption.top) < top && parseFloat(d.dragOption.bottom) > top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else if (d.dragOption.top) { | |
| if ( parseFloat(d.dragOption.top) < top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else if (d.dragOption.bottom) { | |
| if ( parseFloat(d.dragOption.bottom) > top ) { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } else { | |
| Mui.dragInit.target.style.top = top + "px"; | |
| } | |
| } | |
| } | |
| if (d.dragOption.horizon){ | |
| if (Mui.dragInit.firstDirection == 'horizon') { | |
| Mui.dragEnd(evt); | |
| } else { | |
| // console.log('가로') | |
| evt.preventDefault(); | |
| w.direction = 1; | |
| var left = parseFloat(point.pageX) + parseFloat(Mui.dragInit.centerPos[0]) | |
| // limit | |
| if (d.dragOption.left && d.dragOption.right) { | |
| if ( parseFloat(d.dragOption.left) < left && parseFloat(d.dragOption.right) > left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else if (d.dragOption.left) { | |
| if ( parseFloat(d.dragOption.left) < left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else if (d.dragOption.right) { | |
| if ( parseFloat(d.dragOption.right) > left ) { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } else { | |
| Mui.dragInit.target.style.left = left + "px"; | |
| } | |
| } | |
| } | |
| } | |
| //Mui.dragInit.target.style['transform'] = 'translate(' + Mui.dragInit.newX + 'px,' + Mui.dragInit.newY + 'px)'; | |
| if (d.dragOption.onMove) { | |
| eval(d.dragOption.onMove)(evt, scroller); | |
| } | |
| /*if (new Date().getTime() - tmr < 100) { | |
| tmrs.push(new Date().getTime() - tmr) | |
| } | |
| WNLog('-romeoh-', new Date().getTime() - tmr)*/ | |
| break; | |
| case 'mouseup': case 'touchend': | |
| /*var avg = 0 | |
| for(var i=0; i<tmrs.length; i++){ | |
| avg += tmrs[i] | |
| } | |
| WNLog('-avg-', avg/tmrs.length)*/ | |
| //Mui.dragEnd(); | |
| if ( M.browser().device == 'pc' ) { | |
| d.removeEventListener('mousemove', Mui.dragInit, false); | |
| d.removeEventListener('mouseup', Mui.dragInit, false); | |
| } else { | |
| d.removeEventListener('touchmove', Mui.dragInit, false); | |
| d.removeEventListener('touchend', Mui.dragInit, false); | |
| } | |
| // reset | |
| if (d.dragOption.scale != 1) { | |
| scroller.css('scale', 1); | |
| } | |
| if (d.dragOption.opacity != 1) { | |
| scroller.css('opacity', 1); | |
| } | |
| // css | |
| if (d.dragOption.css != 1) { | |
| scroller.removeClass(d.dragOption.css); | |
| } | |
| if (Mui.dragInit.endPos.length == 0) { | |
| w.direction = 0; | |
| w.updown = 0; | |
| } else { | |
| if ( Mui.dragInit.firstDirection == 'vertical' ) { | |
| w.updown = 0; | |
| } else { | |
| if (Mui.dragInit.endPos[1][1] - Mui.dragInit.startPos[1][1] > 0) { | |
| //console.log('->'); | |
| w.updown = -1; | |
| } else if(Mui.dragInit.endPos[1][1] - Mui.dragInit.startPos[1][1] < 0) { | |
| //console.log('<-'); | |
| w.updown = 1; | |
| } | |
| } | |
| if ( Mui.dragInit.firstDirection == 'horizon' ) { | |
| w.direction = 0; | |
| } else { | |
| if (Mui.dragInit.endPos[1][0] - Mui.dragInit.startPos[1][0] > 0) { | |
| //console.log('->'); | |
| w.direction = -1; | |
| } else if (Mui.dragInit.endPos[1][0] - Mui.dragInit.startPos[1][0] < 0) { | |
| //console.log('<-'); | |
| w.direction = 1; | |
| } | |
| } | |
| } | |
| if (d.dragOption.onEnd) { | |
| //console.log(Mui.dragInit.mpSelector.selector[0]) | |
| eval(d.dragOption.onEnd)(evt, scroller); | |
| } | |
| break; | |
| } | |
| } | |
| Mui.dragEnd = function(evt){ | |
| d.removeEventListener(moveEvt, Mui.dragInit, false); | |
| d.removeEventListener(endEvt, Mui.dragInit, false); | |
| // reset | |
| if (d.dragOption.scale != 1) { | |
| scroller.css('scale', 1); | |
| } | |
| if (d.dragOption.opacity != 1) { | |
| scroller.css('opacity', 1); | |
| } | |
| // css | |
| if (d.dragOption.css) { | |
| scroller.removeClass(d.dragOption.css); | |
| } | |
| if (d.dragOption.onCancel) { | |
| eval(d.dragOption.onCancel)(evt, scroller); | |
| } | |
| } | |
| /* Ajax */ | |
| Mui.ajax = function(_option) { | |
| var xhr = new XMLHttpRequest() | |
| ,url = _option.url || '' | |
| ,async = _option.async || false | |
| ,type = _option.type || 'GET' | |
| ,beforeSend = _option.beforeSend || null | |
| ,complete = _option.complete || null | |
| ,success = _option.success || null | |
| ,error = _option.error || null | |
| //,data = _option.data || '' | |
| //,cache = _option.cache || '' | |
| // 접속시도 | |
| if(beforeSend){ | |
| eval(beforeSend)(); | |
| } | |
| xhr.open(type, url, async); | |
| xhr.onreadystatechange = function(){ | |
| if (xhr.readyState == 4) { | |
| eval (success) (xhr.responseText); | |
| // 접속 완료 | |
| if(complete){ | |
| eval(complete)(); | |
| } | |
| } | |
| } | |
| xhr.send(); | |
| return this | |
| } | |
| Mui.done = function() { | |
| //console.log('cccc') | |
| return this | |
| } | |
| /* check browser */ | |
| Mui.browser = function() { | |
| var ua = navigator.userAgent | |
| ,browserName = (/chrome/gi).test(ua) ? "chrome" : | |
| (/safari/gi).test(ua) ? "safari" : | |
| (/simulator/gi).test(ua) ? "ios simulator" : | |
| (/presto/gi).test(ua) ? "opera" : | |
| (/firefox/gi).test(ua) ? "firefox" : | |
| (/triden/gi).test(ua) ? "ie" : "other" | |
| ,device = (/iphone|ipad|ipod|android/gi).test(ua) ? "mobile" : "pc" | |
| ,os = (/iphone|ipad|ipod/gi).test(ua) ? "ios" : | |
| (/android/gi).test(ua) ? "android" : | |
| (/mac/gi).test(ua) ? "macOS" : | |
| (/windows/gi).test(ua) ? "Windows" : "other" | |
| ,prefix = (/presto/gi).test(ua) ? "-o-" : | |
| (/webkit/gi).test(ua) ? "-webkit-" : | |
| (/firefox/gi).test(ua) ? "-moz-" : | |
| (/triden/gi).test(ua) ? "-ms-" : "" | |
| ,androidVersion | |
| ,androidName; | |
| switch(browserName) { | |
| case "opera": case "safari": | |
| try{ | |
| browserVer = ua.match(/version\/([0-9.]+)/ig).toString().split("/")[1]; | |
| }catch(err) { | |
| browserVer = undefined; | |
| } | |
| break; | |
| case "chrome": | |
| browserVer = ua.match(/chrome\/([0-9.]+)/ig).toString().split("/")[1]; | |
| break; | |
| case "firefox": | |
| browserVer = ua.match(/firefox\/([0-9.]+)/ig).toString().split("/")[1]; | |
| break; | |
| case "ie": | |
| browserVer = ua.match(/MSIE ([0-9.]+)/ig).toString().split(" ")[1]; | |
| break; | |
| default: | |
| browserVer = undefined; | |
| break; | |
| } | |
| if (os == "android") { | |
| androidVersion = ua.match(/android ([0-9.]+)/ig).toString().split(" ")[1]; | |
| switch(androidVersion) { | |
| case "1.0": | |
| androidName = "applepie"; | |
| break; | |
| case "1.1": | |
| androidName = "bananabread"; | |
| break; | |
| case "1.5": | |
| androidName = "cupcake"; | |
| break; | |
| case "1.6": | |
| androidName = "donut"; | |
| break; | |
| case "2.0": case "2.0.1": case "2.1": | |
| androidName = "eclair"; | |
| break; | |
| case "2.2": case "2.2.1": case "2.2.2": | |
| androidName = "Froyo"; | |
| break; | |
| case "2.3": case "2.3.2": case "2.3.3": case "2.3.4": case "2.3.5": case "2.3.6": case "2.3.7": | |
| androidName = "gingerbread"; | |
| break; | |
| case "3.0": case "3.1": case "3.2": | |
| androidName = "honeycomb"; | |
| break; | |
| case "4.0": case "4.0.1": case "4.0.2": case "4.0.3": case "4.0.4": | |
| androidName = "icecreamsandwich"; | |
| break; | |
| case "4.1": | |
| androidName = "jellybean"; | |
| break; | |
| default: | |
| androidName = undefined; | |
| break; | |
| } | |
| } | |
| return { | |
| "device":device | |
| ,"os":os | |
| ,"browser":browserName | |
| ,"browserVer":browserVer | |
| ,"androidName":androidName | |
| ,"androidVersion":androidVersion | |
| ,"prefix":prefix | |
| } | |
| } | |
| Mui.screen = function() { | |
| return {"width": w.innerWidth, "height": w.innerHeight}; | |
| } | |
| Mui.json = function(_value, _type) { | |
| if (_type == 0) { | |
| return JSON.stringify(_value); | |
| } | |
| if (_type == 1) { | |
| if (_value != ''){ | |
| return JSON.parse(_value); | |
| } else { | |
| return {} | |
| } | |
| } | |
| if (typeof _value === 'object') { | |
| return JSON.stringify(_value); | |
| } else { | |
| if (_value != ''){ | |
| return JSON.parse(_value); | |
| } else { | |
| return {} | |
| } | |
| } | |
| } | |
| /* version */ | |
| Mui.version = function() { | |
| console.log(version); | |
| } | |
| /* String utils */ | |
| Mui.trim = function(_value) { | |
| return _value.replace(/^\s+|\s+$/g,""); | |
| } | |
| Mui.leftTrim = function(_value) { | |
| return _value.replace(/^\s+/,""); | |
| } | |
| Mui.rightTrim = function(_value) { | |
| return _value.replace(/\s+$/,""); | |
| }, | |
| Mui.isNumber = function(_value) { | |
| return !isNaN(parseFloat(_value)) && isFinite(_value); | |
| } | |
| camelize = function(_value) { | |
| return _value.replace (/(?:^|[-_])(\w)/g, function (_, c) { | |
| return c ? c.toUpperCase () : ''; | |
| }) | |
| } | |
| decamelize = function(_value) { | |
| return _value.replace(/([a-z])([A-Z])/g,'$1-$2').toLowerCase(); | |
| } | |
| Mui.toCurrency = function(_value) { | |
| if ( isNaN(_value) ) return ''; | |
| if ( _value == '' ) return ''; | |
| _value = ''+_value; | |
| var unit | |
| ,point = _value.split('.')[1] | |
| ,amountStr | |
| if( !Mui.isNumber(_value.substr(0, 1)) ) { | |
| unit = _value.substr(0, 1); | |
| _value = parseFloat(_value.replace(unit, '')); | |
| } | |
| amountStr = String(_value); | |
| amountArray = amountStr.split("."); | |
| var currencyArray = new Array(); | |
| var start, end = amountArray[0].length; | |
| while(end > 0) { | |
| start = Math.max(end - 3, 0); | |
| currencyArray.unshift( amountArray[0].slice(start, end) ); | |
| end = start; | |
| } | |
| amountArray[0] = currencyArray.join(","); | |
| if (unit != undefined) { | |
| amountArray[0] = unit + amountArray[0]; | |
| } | |
| if (point != undefined) { | |
| amountArray[0] = amountArray[0] + "." + point; | |
| } | |
| return amountArray[0]; | |
| } | |
| Mui.toNumber = function(_value) { | |
| var amountArray = new Array(); | |
| var currencyArray = new Array(); | |
| for (var i=0; i<_value.toString().length; i++) { | |
| amountArray[i] = _value.toString().substr(i, 1); | |
| if (amountArray[i] == ",") amountArray.splice(i); | |
| if (amountArray[i] == ".") amountArray.splice(i); | |
| if (amountArray[i] != undefined) currencyArray.push(amountArray[i]); | |
| } | |
| return currencyArray.join("") | |
| } | |
| Mui.format = function(_value, _format) { | |
| var str = '' | |
| ,j = 0 | |
| for(var i=0; i<_format.length; i++){ | |
| if( _format.substr(i, 1) == "0") { | |
| str += _value.substr(j, 1); | |
| j++; | |
| } else { | |
| str += _format.substr(i, 1); | |
| } | |
| } | |
| return str; | |
| } | |
| Mui.scroll = function(vscroll, hscroll){ | |
| if (arguments.length == 1) { | |
| w.scrollTo(w.pageXOffset, vscroll); | |
| } else if (arguments.length == 2) { | |
| w.scrollTo(hscroll, vscroll); | |
| } else if (arguments.length == 0) { | |
| return {y: w.pageYOffset, x: w.pageXOffset}; | |
| } | |
| } | |
| Mui.getUrl = function(){ | |
| return d.URL.split('/html/')[1].split('?')[0]; | |
| } | |
| /* parameter from url */ | |
| Mui.getParameter = function(_key) { | |
| address = location.href; | |
| if (address.indexOf("?") != -1) { | |
| parameters = address.slice(address.indexOf("?")+1, address.length).split("&"); | |
| for (var i=0; i<parameters.length; i++) { | |
| key = parameters[i].split("=")[0]; | |
| if (key == _key) { | |
| return decodeURIComponent(parameters[i].split("=")[1]); | |
| } else { | |
| return undefined; | |
| } | |
| } | |
| } else { | |
| return undefined; | |
| } | |
| } | |
| Mui.extend = function(_pName, _option) { | |
| } | |
| /* 전역변수 할당 */ | |
| Mui.fn.init.prototype = Mui.fn; | |
| w.mpui = w.M = Mui; | |
| })(this, document, window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment