[Client/Mobile] Improve: More simply drawer implementation

src/web/app/mobile/script.js

@@ -3,7 +3,6 @@
  */
 
 require('./tags.ls');
-require('./scripts/sp-slidemenu.js');
 const boot = require('../boot.js');
 const mixins = require('./mixins.ls');
 const route = require('./router.ls');

src/web/app/mobile/scripts/sp-slidemenu.js

@@ -1,839 +0,0 @@
-/**
- * sp-slidemenu.js
- *
- * @version  0.1.0
- * @url https://github.com/be-hase/sp-slidemenu
- *
- * Copyright 2013 be-hase.com, Inc.
- * Licensed under the MIT License:
- * http://www.opensource.org/licenses/mit-license.php
- */
-
-/**
- * CUSTOMIZED BY SYUILO
- */
-
-; (function(window, document, undefined) {
-	"use strict";
-	var div, PREFIX, support, gestureStart, EVENTS, ANIME_SPEED, SLIDE_STATUS, SCROLL_STATUS, THRESHOLD, EVENT_MOE_TIME, rclass, ITEM_CLICK_CLASS_NAME;
-	div = document.createElement('div');
-	PREFIX = ['webkit', 'moz', 'o', 'ms'];
-	support = SpSlidemenu.support = {};
-	support.transform3d = hasProp([
-		'perspectiveProperty',
-		'WebkitPerspective',
-		'MozPerspective',
-		'OPerspective',
-		'msPerspective'
-	]);
-	support.transform = hasProp([
-		'transformProperty',
-		'WebkitTransform',
-		'MozTransform',
-		'OTransform',
-		'msTransform'
-	]);
-	support.transition = hasProp([
-		'transitionProperty',
-		'WebkitTransitionProperty',
-		'MozTransitionProperty',
-		'OTransitionProperty',
-		'msTransitionProperty'
-	]);
-	support.addEventListener = 'addEventListener' in window;
-	support.msPointer = window.navigator.msPointerEnabled;
-	support.cssAnimation = (support.transform3d || support.transform) && support.transition;
-	support.touch = 'ontouchend' in window;
-	EVENTS = {
-		start: {
-			touch: 'touchstart',
-			mouse: 'mousedown'
-		},
-		move: {
-			touch: 'touchmove',
-			mouse: 'mousemove'
-		},
-		end: {
-			touch: 'touchend',
-			mouse: 'mouseup'
-		}
-	};
-	gestureStart = false;
-	if (support.addEventListener) {
-		document.addEventListener('gesturestart', function() {
-			gestureStart = true;
-		});
-		document.addEventListener('gestureend', function() {
-			gestureStart = false;
-		});
-	}
-	ANIME_SPEED = {
-		slider: 200,
-		scrollOverBack: 400
-	};
-	SLIDE_STATUS = {
-		close: 0,
-		open: 1,
-		progress: 2
-	};
-	THRESHOLD = 10;
-	EVENT_MOE_TIME = 50;
-	rclass = /[\t\r\n\f]/g;
-	ITEM_CLICK_CLASS_NAME = 'menu-item';
-	/*
-	[MEMO]
-	SpSlidemenu properties which is not function is ...
-	-- element --
-	element: main
-	element: slidemenu
-	element: button
-	element: slidemenuBody
-	element: slidemenuContent
-	element: slidemenuHeader
-	-- options --
-	bool: disableCssAnimation
-	bool: disabled3d
-	-- animation --
-	bool: useCssAnimation
-	bool: use3d
-	-- slide --
-	int: slideWidth
-	string: htmlOverflowX
-	string: bodyOverflowX
-	int: buttonStartPageX
-	int: buttonStartPageY
-	-- scroll --
-	bool: scrollTouchStarted
-	bool: scrollMoveReady
-	int: scrollStartPageX
-	int: scrollStartPageY
-	int: scrollBasePageY
-	int: scrollTimeForVelocity
-	int: scrollCurrentY
-	int: scrollMoveEventCnt
-	int: scrollAnimationTimer
-	int: scrollOverTimer
-	int: scrollMaxY
-	*/
-	function SpSlidemenu(main, slidemenu, button, options) {
-		if (this instanceof SpSlidemenu) {
-			return this.init(main, slidemenu, button, options);
-		} else {
-			return new SpSlidemenu(main, slidemenu, button, options);
-		}
-	}
-	SpSlidemenu.prototype.init = function(main, slidemenu, button, options) {
-		var _this = this;
-		// find and set element.
-		_this.setElement(main, slidemenu, button);
-		if (!_this.main || !_this.slidemenu || !_this.button || !_this.slidemenuBody || !_this.slidemenuContent) {
-			throw new Error('Element not found. Please set correctly.');
-		}
-		// options
-		options = options || {};
-		_this.disableCssAnimation = (options.disableCssAnimation === undefined) ? false : options.disableCssAnimation;
-		_this.disable3d = (options.disable3d === undefined) ? false : options.disable3d;
-		_this.direction = 'left';
-		if (options.direction === 'right') {
-			_this.direction = 'right';
-		}
-		// animation
-		_this.useCssAnimation = support.cssAnimation;
-		if (_this.disableCssAnimation === true) {
-			_this.useCssAnimation = false;
-		}
-		_this.use3d = support.transform3d;
-		if (_this.disable3d === true) {
-			_this.use3d = false;
-		}
-		// slide
-		_this.slideWidth = (getDimentions(_this.slidemenu)).width;
-		_this.main.SpSlidemenuStatus = SLIDE_STATUS.close;
-		_this.htmlOverflowX = '';
-		_this.bodyOverflowX = '';
-		// scroll
-		_this.scrollCurrentY = 0;
-		_this.scrollAnimationTimer = false;
-		_this.scrollOverTimer = false;
-		// set default style.
-		_this.setDefaultStyle();
-		// bind some method for callback.
-		_this.bindMethods();
-		// add event
-		addTouchEvent('start', _this.button, _this.buttonTouchStart, false);
-		addTouchEvent('move', _this.button, blockEvent, false);
-		addTouchEvent('end', _this.button, _this.buttonTouchEnd, false);
-		addTouchEvent('start', _this.slidemenuContent, _this.scrollTouchStart, false);
-		addTouchEvent('move', _this.slidemenuContent, _this.scrollTouchMove, false);
-		addTouchEvent('end', _this.slidemenuContent, _this.scrollTouchEnd, false);
-		_this.slidemenuContent.addEventListener('click', _this.itemClick, false);
-		// window size change
-		window.addEventListener('resize', debounce(_this.setHeight, 100), false);
-		return _this;
-	};
-	SpSlidemenu.prototype.bindMethods = function() {
-		var _this, funcs;
-		_this = this;
-		funcs = [
-			'setHeight',
-			'slideOpen', 'slideOpenEnd', 'slideClose', 'slideCloseEnd',
-			'buttonTouchStart', 'buttonTouchEnd', 'mainTouchStart',
-			'scrollTouchStart', 'scrollTouchMove', 'scrollTouchEnd', 'scrollInertiaMove', 'scrollOverBack', 'scrollOver',
-			'itemClick'
-		];
-		funcs.forEach(function(func) {
-			_this[func] = bind(_this[func], _this);
-		});
-	};
-	SpSlidemenu.prototype.setElement = function(main, slidemenu, button) {
-		var _this = this;
-		_this.main = main;
-		if (typeof main === 'string') {
-			_this.main = document.querySelector(main);
-		}
-		_this.slidemenu = slidemenu;
-		if (typeof slidemenu === 'string') {
-			_this.slidemenu = document.querySelector(slidemenu);
-		}
-		_this.button = button;
-		if (typeof button === 'string') {
-			_this.button = document.querySelector(button);
-		}
-		if (!_this.slidemenu) {
-			return;
-		}
-		_this.slidemenuBody = _this.slidemenu.querySelector('.body');
-		_this.slidemenuContent = _this.slidemenu.querySelector('.content');
-		_this.slidemenuHeader = _this.slidemenu.querySelector('.header');
-	};
-	SpSlidemenu.prototype.setDefaultStyle = function() {
-		var _this = this;
-		if (support.msPointer) {
-			_this.slidemenuContent.style.msTouchAction = 'none';
-		}
-		_this.setHeight();
-		if (_this.useCssAnimation) {
-			setStyles(_this.main, {
-				transitionProperty: getCSSName('transform'),
-				transitionTimingFunction: 'ease-in-out',
-				transitionDuration: ANIME_SPEED.slider + 'ms',
-				transitionDelay: '0ms',
-				transform: _this.getTranslateX(0)
-			});
-			setStyles(_this.slidemenu, {
-				transitionProperty: 'visibility',
-				transitionTimingFunction: 'linear',
-				transitionDuration: '0ms',
-				transitionDelay: ANIME_SPEED.slider + 'ms'
-			});
-			setStyles(_this.slidemenuContent, {
-				transitionProperty: getCSSName('transform'),
-				transitionTimingFunction: 'ease-in-out',
-				transitionDuration: '0ms',
-				transitionDelay: '0ms',
-				transform: _this.getTranslateY(0)
-			});
-		} else {
-			setStyles(_this.main, {
-				position: 'relative',
-				left: '0px'
-			});
-			setStyles(_this.slidemenuContent, {
-				top: '0px'
-			});
-		}
-	};
-	SpSlidemenu.prototype.setHeight = function(event) {
-		var _this, browserHeight;
-		_this = this;
-		browserHeight = getBrowserHeight();
-		setStyles(_this.main, {
-			minHeight: browserHeight + 'px'
-		});
-		setStyles(_this.slidemenu, {
-			height: browserHeight + 'px'
-		});
-	};
-	SpSlidemenu.prototype.buttonTouchStart = function(event) {
-		var _this = this;
-		event.preventDefault();
-		event.stopPropagation();
-		switch (_this.main.SpSlidemenuStatus) {
-			case SLIDE_STATUS.progress:
-				break;
-			case SLIDE_STATUS.open:
-			case SLIDE_STATUS.close:
-				_this.buttonStartPageX = getPage(event, 'pageX');
-				_this.buttonStartPageY = getPage(event, 'pageY');
-				break;
-		}
-	};
-	SpSlidemenu.prototype.buttonTouchEnd = function(event) {
-		var _this = this;
-		event.preventDefault();
-		event.stopPropagation();
-		if (_this.shouldTrigerNext(event)) {
-			switch (_this.main.SpSlidemenuStatus) {
-				case SLIDE_STATUS.progress:
-					break;
-				case SLIDE_STATUS.open:
-					_this.slideClose(event);
-					break;
-				case SLIDE_STATUS.close:
-					_this.slideOpen(event);
-					break;
-			}
-		}
-	};
-	SpSlidemenu.prototype.mainTouchStart = function(event) {
-		var _this = this;
-		event.preventDefault();
-		event.stopPropagation();
-		_this.slideClose(event);
-	};
-	SpSlidemenu.prototype.shouldTrigerNext = function(event) {
-		var _this = this,
-			buttonEndPageX = getPage(event, 'pageX'),
-			buttonEndPageY = getPage(event, 'pageY'),
-			deltaX = Math.abs(buttonEndPageX - _this.buttonStartPageX),
-			deltaY = Math.abs(buttonEndPageY - _this.buttonStartPageY);
-		return deltaX < 20 && deltaY < 20;
-	};
-	SpSlidemenu.prototype.slideOpen = function(event) {
-		var _this = this, toX;
-
-		/// Misskey Original
-		document.body.setAttribute('data-nav-open', 'true');
-
-		if (_this.direction === 'left') {
-			toX = _this.slideWidth;
-		} else {
-			toX = -_this.slideWidth;
-		}
-		_this.main.SpSlidemenuStatus = SLIDE_STATUS.progress;
-		//set event
-		addTouchEvent('move', document, blockEvent, false);
-		// change style
-		_this.htmlOverflowX = document.documentElement.style['overflowX'];
-		_this.bodyOverflowX = document.body.style['overflowX'];
-		document.documentElement.style['overflowX'] = document.body.style['overflowX'] = 'hidden';
-		if (_this.useCssAnimation) {
-			setStyles(_this.main, {
-				transform: _this.getTranslateX(toX)
-			});
-			setStyles(_this.slidemenu, {
-				transitionProperty: 'z-index',
-				visibility: 'visible',
-				zIndex: '1'
-			});
-		} else {
-			animate(_this.main, _this.direction, toX, ANIME_SPEED.slider);
-			setStyles(_this.slidemenu, {
-				visibility: 'visible'
-			});
-		}
-		// set callback
-		setTimeout(_this.slideOpenEnd, ANIME_SPEED.slider + EVENT_MOE_TIME);
-	};
-	SpSlidemenu.prototype.slideOpenEnd = function() {
-		var _this = this;
-		_this.main.SpSlidemenuStatus = SLIDE_STATUS.open;
-		// change style
-		if (_this.useCssAnimation) {
-		} else {
-			setStyles(_this.slidemenu, {
-				zIndex: '1'
-			});
-		}
-		// add event
-		addTouchEvent('start', _this.main, _this.mainTouchStart, false);
-	};
-	SpSlidemenu.prototype.slideClose = function(event) {
-		var _this = this;
-		_this.main.SpSlidemenuStatus = SLIDE_STATUS.progress;
-
-		/// Misskey Original
-		document.body.setAttribute('data-nav-open', 'false');
-
-		//event
-		removeTouchEvent('start', _this.main, _this.mainTouchStart, false);
-		// change style
-		if (_this.useCssAnimation) {
-			setStyles(_this.main, {
-				transform: _this.getTranslateX(0)
-			});
-			setStyles(_this.slidemenu, {
-				transitionProperty: 'visibility',
-				visibility: 'hidden',
-				zIndex: '-1'
-			});
-		} else {
-			animate(_this.main, _this.direction, 0, ANIME_SPEED.slider);
-			setStyles(_this.slidemenu, {
-				zIndex: '-1'
-			});
-		}
-		// set callback
-		setTimeout(_this.slideCloseEnd, ANIME_SPEED.slider + EVENT_MOE_TIME);
-	};
-	SpSlidemenu.prototype.slideCloseEnd = function() {
-		var _this = this;
-		_this.main.SpSlidemenuStatus = SLIDE_STATUS.close;
-		// change style
-		document.documentElement.style['overflowX'] = _this.htmlOverflowX;
-		document.body.style['overflowX'] = _this.bodyOverflowX;
-		if (_this.useCssAnimation) {
-		} else {
-			setStyles(_this.slidemenu, {
-				visibility: 'hidden'
-			});
-		}
-		// set event
-		removeTouchEvent('move', document, blockEvent, false);
-	};
-	SpSlidemenu.prototype.scrollTouchStart = function(event) {
-		var _this = this;
-		if (gestureStart) {
-			return;
-		}
-		if (_this.scrollOverTimer !== false) {
-			clearTimeout(_this.scrollOverTimer);
-		}
-		_this.scrollCurrentY = _this.getScrollCurrentY();
-		if (_this.useCssAnimation) {
-			setStyles(_this.slidemenuContent, {
-				transitionTimingFunction: 'ease-in-out',
-				transitionDuration: '0ms',
-				transform: _this.getTranslateY(_this.scrollCurrentY)
-			});
-		} else {
-			_this.stopScrollAnimate();
-			setStyles(_this.slidemenuContent, {
-				top: _this.scrollCurrentY + 'px'
-			});
-		}
-		_this.scrollOverTimer = false;
-		_this.scrollAnimationTimer = false;
-		_this.scrollTouchStarted = true;
-		_this.scrollMoveReady = false;
-		_this.scrollMoveEventCnt = 0;
-		_this.scrollMaxY = _this.calcMaxY();
-		_this.scrollStartPageX = getPage(event, 'pageX');
-		_this.scrollStartPageY = getPage(event, 'pageY');
-		_this.scrollBasePageY = _this.scrollStartPageY;
-		_this.scrollTimeForVelocity = event.timeStamp;
-		_this.scrollPageYForVelocity = _this.scrollStartPageY;
-		_this.slidemenuContent.removeEventListener('click', blockEvent, true);
-	};
-	SpSlidemenu.prototype.scrollTouchMove = function(event) {
-		var _this, pageX, pageY, distY, newY, deltaX, deltaY;
-		_this = this;
-		if (!_this.scrollTouchStarted || gestureStart) {
-			return;
-		}
-		pageX = getPage(event, 'pageX');
-		pageY = getPage(event, 'pageY');
-		if (_this.scrollMoveReady) {
-			event.preventDefault();
-			event.stopPropagation();
-			distY = pageY - _this.scrollBasePageY;
-			newY = _this.scrollCurrentY + distY;
-			if (newY > 0 || newY < _this.scrollMaxY) {
-				newY = Math.round(_this.scrollCurrentY + distY / 3);
-			}
-			_this.scrollSetY(newY);
-			if (_this.scrollMoveEventCnt % THRESHOLD === 0) {
-				_this.scrollPageYForVelocity = pageY;
-				_this.scrollTimeForVelocity = event.timeStamp;
-			}
-			_this.scrollMoveEventCnt++;
-		} else {
-			deltaX = Math.abs(pageX - _this.scrollStartPageX);
-			deltaY = Math.abs(pageY - _this.scrollStartPageY);
-			if (deltaX > 5 || deltaY > 5) {
-				_this.scrollMoveReady = true;
-				_this.slidemenuContent.addEventListener('click', blockEvent, true);
-			}
-		}
-		_this.scrollBasePageY = pageY;
-	};
-	SpSlidemenu.prototype.scrollTouchEnd = function(event) {
-		var _this, speed, deltaY, deltaTime;
-		_this = this;
-		if (!_this.scrollTouchStarted) {
-			return;
-		}
-		_this.scrollTouchStarted = false;
-		_this.scrollMaxY = _this.calcMaxY();
-		if (_this.scrollCurrentY > 0 || _this.scrollCurrentY < _this.scrollMaxY) {
-			_this.scrollOverBack();
-			return;
-		}
-		deltaY = getPage(event, 'pageY') - _this.scrollPageYForVelocity;
-		deltaTime = event.timeStamp - _this.scrollTimeForVelocity;
-		speed = deltaY / deltaTime;
-		if (Math.abs(speed) >= 0.01) {
-			_this.scrollInertia(speed);
-		}
-	};
-	SpSlidemenu.prototype.scrollInertia = function(speed) {
-		var _this, directionToTop, maxTo, distanceMaxTo, stopTime, canMove, to, duration, speedAtboundary, nextTo;
-		_this = this;
-		if (speed > 0) {
-			directionToTop = true;
-			maxTo = 0;
-		} else {
-			directionToTop = false;
-			maxTo = _this.scrollMaxY;
-		}
-		distanceMaxTo = Math.abs(_this.scrollCurrentY - maxTo);
-		speed = Math.abs(750 * speed);
-		if (speed > 1000) {
-			speed = 1000;
-		}
-		stopTime = speed / 500;
-		canMove = (speed * stopTime) - ((500 * Math.pow(stopTime, 2)) / 2);
-		if (canMove <= distanceMaxTo) {
-			if (directionToTop) {
-				to = _this.scrollCurrentY + canMove;
-			} else {
-				to = _this.scrollCurrentY - canMove;
-			}
-			duration = stopTime * 1000;
-			_this.scrollInertiaMove(to, duration, false);
-		} else {
-			to = maxTo;
-			speedAtboundary = Math.sqrt((2 * 500 * distanceMaxTo) + Math.pow(speed, 2));
-			duration = (speedAtboundary - speed) / 500 * 1000;
-			_this.scrollInertiaMove(to, duration, true, speedAtboundary, directionToTop);
-		}
-	};
-	SpSlidemenu.prototype.scrollInertiaMove = function(to, duration, isOver, speed, directionToTop) {
-		var _this = this, stopTime, canMove;
-		_this.scrollCurrentY = to;
-		if (_this.useCssAnimation) {
-			setStyles(_this.slidemenuContent, {
-				transitionTimingFunction: 'cubic-bezier(0.33, 0.66, 0.66, 1)',
-				transitionDuration: duration + 'ms',
-				transform: _this.getTranslateY(to)
-			});
-		} else {
-			_this.scrollAnimate(to, duration);
-		}
-		if (!isOver) {
-			return;
-		}
-		stopTime = speed / 7500;
-		canMove = (speed * stopTime) - ((7500 * Math.pow(stopTime, 2)) / 2);
-		if (directionToTop) {
-			to = _this.scrollCurrentY + canMove;
-		} else {
-			to = _this.scrollCurrentY - canMove;
-		}
-		duration = stopTime * 1000;
-		_this.scrollOver(to, duration);
-	};
-	SpSlidemenu.prototype.scrollOver = function(to, duration) {
-		var _this;
-		_this = this;
-		_this.scrollCurrentY = to;
-		if (_this.useCssAnimation) {
-			setStyles(_this.slidemenuContent, {
-				transitionTimingFunction: 'cubic-bezier(0.33, 0.66, 0.66, 1)',
-				transitionDuration: duration + 'ms',
-				transform: _this.getTranslateY(to)
-			});
-		} else {
-			_this.scrollAnimate(to, duration);
-		}
-		_this.scrollOverTimer = setTimeout(_this.scrollOverBack, duration);
-	};
-	SpSlidemenu.prototype.scrollOverBack = function() {
-		var _this, to;
-		_this = this;
-		if (_this.scrollCurrentY >= 0) {
-			to = 0;
-		} else {
-			to = _this.scrollMaxY;
-		}
-		_this.scrollCurrentY = to;
-		if (_this.useCssAnimation) {
-			setStyles(_this.slidemenuContent, {
-				transitionTimingFunction: 'ease-out',
-				transitionDuration: ANIME_SPEED.scrollOverBack + 'ms',
-				transform: _this.getTranslateY(to)
-			});
-		} else {
-			_this.scrollAnimate(to, ANIME_SPEED.scrollOverBack);
-		}
-	};
-	SpSlidemenu.prototype.scrollSetY = function(y) {
-		var _this = this;
-		_this.scrollCurrentY = y;
-		if (_this.useCssAnimation) {
-			setStyles(_this.slidemenuContent, {
-				transitionTimingFunction: 'ease-in-out',
-				transitionDuration: '0ms',
-				transform: _this.getTranslateY(y)
-			});
-		} else {
-			_this.slidemenuContent.style.top = y + 'px';
-		}
-	};
-	SpSlidemenu.prototype.scrollAnimate = function(to, transitionDuration) {
-		var _this = this;
-		_this.stopScrollAnimate();
-		_this.scrollAnimationTimer = animate(_this.slidemenuContent, 'top', to, transitionDuration);
-	};
-	SpSlidemenu.prototype.stopScrollAnimate = function() {
-		var _this = this;
-		if (_this.scrollAnimationTimer !== false) {
-			clearInterval(_this.scrollAnimationTimer);
-		}
-	};
-	SpSlidemenu.prototype.itemClick = function(event) {
-		var elem = event.target || event.srcElement;
-		if (hasClass(elem, ITEM_CLICK_CLASS_NAME)) {
-			this.slideClose();
-		}
-	};
-	SpSlidemenu.prototype.calcMaxY = function(x) {
-		var _this, contentHeight, bodyHeight, headerHeight;
-		_this = this;
-		contentHeight = _this.slidemenuContent.offsetHeight;
-		bodyHeight = _this.slidemenuBody.offsetHeight;
-		headerHeight = 0;
-		if (_this.slidemenuHeader) {
-			headerHeight = _this.slidemenuHeader.offsetHeight;
-		}
-		if (contentHeight > bodyHeight) {
-			return -(contentHeight - bodyHeight + headerHeight);
-		} else {
-			return 0;
-		}
-	};
-	SpSlidemenu.prototype.getScrollCurrentY = function() {
-		var ret = 0;
-		if (this.useCssAnimation) {
-			getStyle(window.getComputedStyle(this.slidemenuContent, ''), 'transform').split(',').forEach(function(value) {
-				var number = parseInt(value, 10);
-				if (!isNaN(number) && number !== 0 && number !== 1) {
-					ret = number;
-				}
-			});
-		} else {
-			var number = parseInt(getStyle(window.getComputedStyle(this.slidemenuContent, ''), 'top'), 10);
-			if (!isNaN(number) && number !== 0 && number !== 1) {
-				ret = number;
-			}
-		}
-		return ret;
-	};
-	SpSlidemenu.prototype.getTranslateX = function(x) {
-		var _this = this;
-		return _this.use3d ? 'translate3d(' + x + 'px, 0px, 0px)' : 'translate(' + x + 'px, 0px)';
-	};
-	SpSlidemenu.prototype.getTranslateY = function(y) {
-		var _this = this;
-		return _this.use3d ? 'translate3d(0px, ' + y + 'px, 0px)' : 'translate(0px, ' + y + 'px)';
-	};
-	//Utility Function
-	function hasProp(props) {
-		return some(props, function(prop) {
-			return div.style[prop] !== undefined;
-		});
-	}
-	function upperCaseFirst(str) {
-		return str.charAt(0).toUpperCase() + str.substr(1);
-	}
-	function some(ary, callback) {
-		var i, len;
-		for (i = 0, len = ary.length; i < len; i++) {
-			if (callback(ary[i], i)) {
-				return true;
-			}
-		}
-		return false;
-	}
-	function setStyle(elem, prop, val) {
-		var style = elem.style;
-		if (!setStyle.cache) {
-			setStyle.cache = {};
-		}
-		if (setStyle.cache[prop] !== undefined) {
-			style[setStyle.cache[prop]] = val;
-			return;
-		}
-		if (style[prop] !== undefined) {
-			setStyle.cache[prop] = prop;
-			style[prop] = val;
-			return;
-		}
-		some(PREFIX, function(_prefix) {
-			var _prop = upperCaseFirst(_prefix) + upperCaseFirst(prop);
-			if (style[_prop] !== undefined) {
-				//setStyle.cache[prop] = _prop;
-				style[_prop] = val;
-				return true;
-			}
-		});
-	}
-	function setStyles(elem, styles) {
-		var style, prop;
-		for (prop in styles) {
-			if (styles.hasOwnProperty(prop)) {
-				setStyle(elem, prop, styles[prop]);
-			}
-		}
-	}
-	function getStyle(style, prop) {
-		var ret;
-		if (style[prop] !== undefined) {
-			return style[prop];
-		}
-		some(PREFIX, function(_prefix) {
-			var _prop = upperCaseFirst(_prefix) + upperCaseFirst(prop);
-			if (style[_prop] !== undefined) {
-				ret = style[_prop];
-				return true;
-			}
-		});
-		return ret;
-	}
-	function getCSSName(prop) {
-		var ret;
-		if (!getCSSName.cache) {
-			getCSSName.cache = {};
-		}
-		if (getCSSName.cache[prop] !== undefined) {
-			return getCSSName.cache[prop];
-		}
-		if (div.style[prop] !== undefined) {
-			getCSSName.cache[prop] = prop;
-			return prop;
-		}
-		some(PREFIX, function(_prefix) {
-			var _prop = upperCaseFirst(_prefix) + upperCaseFirst(prop);
-			if (div.style[_prop] !== undefined) {
-				ret = '-' + _prefix + '-' + prop;
-				return true;
-			}
-		});
-		getCSSName.cache[prop] = ret;
-		return ret;
-	}
-	function bind(func, context) {
-		var nativeBind, slice, args;
-		nativeBind = Function.prototype.bind;
-		slice = Array.prototype.slice;
-		if (func.bind === nativeBind && nativeBind) {
-			return nativeBind.apply(func, slice.call(arguments, 1));
-		}
-		args = slice.call(arguments, 2);
-		return function() {
-			return func.apply(context, args.concat(slice.call(arguments)));
-		};
-	}
-	function blockEvent(event) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-	function getDimentions(element) {
-		var previous, key, properties, result;
-		previous = {};
-		properties = {
-			position: 'absolute',
-			visibility: 'hidden',
-			display: 'block'
-		};
-		for (key in properties) {
-			previous[key] = element.style[key];
-			element.style[key] = properties[key];
-		}
-		result = {
-			width: element.offsetWidth,
-			height: element.offsetHeight
-		};
-		for (key in properties) {
-			element.style[key] = previous[key];
-		}
-		return result;
-	}
-	function getPage(event, page) {
-		return event.changedTouches ? event.changedTouches[0][page] : event[page];
-	}
-	function addTouchEvent(eventType, element, listener, useCapture) {
-		useCapture = useCapture || false;
-		if (support.touch) {
-			element.addEventListener(EVENTS[eventType].touch, listener, { passive: useCapture });
-		} else {
-			element.addEventListener(EVENTS[eventType].mouse, listener, { passive: useCapture });
-		}
-	}
-	function removeTouchEvent(eventType, element, listener, useCapture) {
-		useCapture = useCapture || false;
-		if (support.touch) {
-			element.removeEventListener(EVENTS[eventType].touch, listener, useCapture);
-		} else {
-			element.removeEventListener(EVENTS[eventType].mouse, listener, useCapture);
-		}
-	}
-	function hasClass(elem, className) {
-		className = " " + className + " ";
-		if (elem.nodeType === 1 && (" " + elem.className + " ").replace(rclass, " ").indexOf(className) >= 0) {
-			return true;
-		}
-		return false;
-	}
-	function animate(elem, prop, to, transitionDuration) {
-		var begin, from, duration, easing, timer;
-		begin = +new Date();
-		from = parseInt(elem.style[prop], 10);
-		to = parseInt(to, 10);
-		duration = parseInt(transitionDuration, 10);
-		easing = function(time, duration) {
-			return -(time /= duration) * (time - 2);
-		};
-		timer = setInterval(function() {
-			var time, pos, now;
-			time = new Date() - begin;
-			if (time > duration) {
-				clearInterval(timer);
-				now = to;
-			} else {
-				pos = easing(time, duration);
-				now = pos * (to - from) + from;
-			}
-			elem.style[prop] = now + 'px';
-		}, 10);
-		return timer;
-	}
-	function getBrowserHeight() {
-		if (window.innerHeight) {
-			return window.innerHeight;
-		}
-		else if (document.documentElement && document.documentElement.clientHeight !== 0) {
-			return document.documentElement.clientHeight;
-		}
-		else if (document.body) {
-			return document.body.clientHeight;
-		}
-		return 0;
-	}
-	function debounce(func, wait, immediate) {
-		var timeout, result;
-		return function() {
-			var context = this, args = arguments;
-			var later = function() {
-				timeout = null;
-				if (!immediate) result = func.apply(context, args);
-			};
-			var callNow = immediate && !timeout;
-			clearTimeout(timeout);
-			timeout = setTimeout(later, wait);
-			if (callNow) result = func.apply(context, args);
-			return result;
-		};
-	}
-	window.SpSlidemenu = SpSlidemenu;
-})(window, window.document);

src/web/app/mobile/tags/ui-header.tag

@@ -3,7 +3,7 @@
 	<div class="main">
 		<div class="backdrop"></div>
 		<div class="content">
-			<button class="nav" id="hamburger"><i class="fa fa-bars"></i></button>
+			<button class="nav" onclick={ parent.toggleDrawer }><i class="fa fa-bars"></i></button>
 			<h1 ref="title">Misskey</h1>
 			<button class="post" onclick={ post }><i class="fa fa-pencil"></i></button>
 		</div>

src/web/app/mobile/tags/ui-nav.tag

@@ -1,49 +1,52 @@
 <mk-ui-nav>
+	<div class="backdrop" onclick={ parent.toggleDrawer }></div>
 	<div class="body">
-		<div class="content"><a class="me" if={ SIGNIN } href={ CONFIG.url + '/' + I.username }><img class="avatar" src={ I.avatar_url + '?thumbnail&size=128' } alt="avatar"/>
+		<a class="me" if={ SIGNIN } href={ CONFIG.url + '/' + I.username }>
-				<p class="name">{ I.name }</p></a>
+			<img class="avatar" src={ I.avatar_url + '?thumbnail&size=128' } alt="avatar"/>
-			<div class="links">
+			<p class="name">{ I.name }</p>
-				<ul>
+		</a>
-					<li class="post"><a href="/i/post"><i class="icon fa fa-pencil-square-o"></i>新規投稿<i class="angle fa fa-angle-right"></i></a></li>
+		<div class="links">
-				</ul>
+			<ul>
-				<ul>
+				<li class="home"><a href="/"><i class="icon fa fa-home"></i>ホーム<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="home"><a href="/"><i class="icon fa fa-home"></i>ホーム<i class="angle fa fa-angle-right"></i></a></li>
+				<li class="mentions"><a href="/i/mentions"><i class="icon fa fa-at"></i>あなた宛て<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="mentions"><a href="/i/mentions"><i class="icon fa fa-at"></i>あなた宛て<i class="angle fa fa-angle-right"></i></a></li>
+				<li class="notifications"><a href="/i/notifications"><i class="icon fa fa-bell-o"></i>通知<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="notifications"><a href="/i/notifications"><i class="icon fa fa-bell-o"></i>通知<i class="angle fa fa-angle-right"></i></a></li>
+				<li class="messaging"><a><i class="icon fa fa-comments-o"></i>メッセージ<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="messaging"><a><i class="icon fa fa-comments-o"></i>メッセージ<i class="angle fa fa-angle-right"></i></a></li>
+			</ul>
-				</ul>
+			<ul>
-				<ul>
+				<li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>検索<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>検索<i class="angle fa fa-angle-right"></i></a></li>
+			</ul>
-				</ul>
+			<ul>
-				<ul>
+				<li class="settings"><a href="/i/drive"><i class="icon fa fa-cloud"></i>ドライブ<i class="angle fa fa-angle-right"></i></a></li>
-					<li class="settings"><a href="/i/drive"><i class="icon fa fa-cloud"></i>ドライブ<i class="angle fa fa-angle-right"></i></a></li>
+			</ul>
-					<li class="settings"><a href="/i/upload"><i class="icon fa fa-upload"></i>アップロード<i class="angle fa fa-angle-right"></i></a></li>
+			<ul>
-				</ul>
+				<li class="settings"><a href="/i/settings"><i class="icon fa fa-cog"></i>設定<i class="angle fa fa-angle-right"></i></a></li>
-				<ul>
+			</ul>
-					<li class="settings"><a href="/i/settings"><i class="icon fa fa-cog"></i>設定<i class="angle fa fa-angle-right"></i></a></li>
-				</ul>
-			</div>
-			<p class="about"><a>Misskeyについて</a></p>
 		</div>
+		<p class="about" href={ CONFIG.urls.about }><a>Misskeyについて</a></p>
 	</div>
 	<style type="stylus">
 		:scope
-			display block
+			display none
-			position fixed
-			top 0
-			left 0
-			z-index -1
-			width 240px
-			color #777
-			background #fff
-			visibility hidden
 
-			.body
+			.backdrop
+				position fixed
+				top 0
+				left 0
+				z-index 1025
+				width 100%
 				height 100%
-				overflow hidden
+				background rgba(0, 0, 0, 0.2)
-
+			
-			.content
+			.body
-				min-height 100%
+				position fixed
+				top 0
+				left 0
+				z-index 1026
+				width 240px
+				height 100%
+				overflow auto
+				color #777
+				background #fff
 
 			.me
 				display block

src/web/app/mobile/tags/ui.tag

@@ -12,12 +12,12 @@
 			> .global
 				> .content
 					background #fff
-
 	</style>
 	<script>
 		@mixin \stream
 
 		@ready-count = 0
+		@is-drawer-opening = false
 
 		#@ui.on \notification (text) ~>
 		#	alert text
@@ -28,20 +28,20 @@
 
 		@on \unmount ~>
 			@stream.off \notification @on-stream-notification
-			@slide.slide-close!
 
 		@ready = ~>
 			@ready-count++
 
 			if @ready-count == 2
-				@slide = SpSlidemenu @refs.main, @refs.nav.root, \#hamburger {direction: \left}
 				@init-view-position!
 
 		@init-view-position = ~>
 			top = @refs.header.root.offset-height
 			@refs.main.style.padding-top = top + \px
-			@refs.nav.root.style.margin-top = top + \px
+
-			@refs.nav.root.query-selector '.body > .content' .style.padding-bottom = top + \px
+		@toggle-drawer = ~>
+			@is-drawer-opening = !@is-drawer-opening
+			@refs.nav.root.style.display = if @is-drawer-opening then \block else \none
 
 		@on-stream-notification = (notification) ~>
 			el = document.body.append-child document.create-element \mk-notify