mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-30 14:43:08 +02:00
[Client/Mobile] Improve: More simply drawer implementation
This commit is contained in:
syuilo
parent
b158af745e
commit
19b721f92a
5 changed files with 47 additions and 884 deletions
|
|
@ -3,7 +3,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
require('./tags.ls');
|
require('./tags.ls');
|
||||||
require('./scripts/sp-slidemenu.js');
|
|
||||||
const boot = require('../boot.js');
|
const boot = require('../boot.js');
|
||||||
const mixins = require('./mixins.ls');
|
const mixins = require('./mixins.ls');
|
||||||
const route = require('./router.ls');
|
const route = require('./router.ls');
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="backdrop"></div>
|
<div class="backdrop"></div>
|
||||||
<div class="content">
|
<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>
|
<h1 ref="title">Misskey</h1>
|
||||||
<button class="post" onclick={ post }><i class="fa fa-pencil"></i></button>
|
<button class="post" onclick={ post }><i class="fa fa-pencil"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<mk-ui-nav>
|
<mk-ui-nav>
|
||||||
|
<div class="backdrop" onclick={ parent.toggleDrawer }></div>
|
||||||
<div class="body">
|
<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"/>
|
||||||
|
<p class="name">{ I.name }</p>
|
||||||
|
</a>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<ul>
|
|
||||||
<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>
|
|
||||||
</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>
|
||||||
|
|
@ -17,33 +17,36 @@
|
||||||
</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>
|
||||||
<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>
|
||||||
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<p class="about"><a>Misskeyについて</a></p>
|
<p class="about" href={ CONFIG.urls.about }><a>Misskeyについて</a></p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<style type="stylus">
|
<style type="stylus">
|
||||||
:scope
|
:scope
|
||||||
display block
|
display none
|
||||||
|
|
||||||
|
.backdrop
|
||||||
position fixed
|
position fixed
|
||||||
top 0
|
top 0
|
||||||
left 0
|
left 0
|
||||||
z-index -1
|
z-index 1025
|
||||||
width 240px
|
width 100%
|
||||||
color #777
|
height 100%
|
||||||
background #fff
|
background rgba(0, 0, 0, 0.2)
|
||||||
visibility hidden
|
|
||||||
|
|
||||||
.body
|
.body
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
z-index 1026
|
||||||
|
width 240px
|
||||||
height 100%
|
height 100%
|
||||||
overflow hidden
|
overflow auto
|
||||||
|
color #777
|
||||||
.content
|
background #fff
|
||||||
min-height 100%
|
|
||||||
|
|
||||||
.me
|
.me
|
||||||
display block
|
display block
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,12 @@
|
||||||
> .global
|
> .global
|
||||||
> .content
|
> .content
|
||||||
background #fff
|
background #fff
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
@mixin \stream
|
@mixin \stream
|
||||||
|
|
||||||
@ready-count = 0
|
@ready-count = 0
|
||||||
|
@is-drawer-opening = false
|
||||||
|
|
||||||
#@ui.on \notification (text) ~>
|
#@ui.on \notification (text) ~>
|
||||||
# alert text
|
# alert text
|
||||||
|
|
@ -28,20 +28,20 @@
|
||||||
|
|
||||||
@on \unmount ~>
|
@on \unmount ~>
|
||||||
@stream.off \notification @on-stream-notification
|
@stream.off \notification @on-stream-notification
|
||||||
@slide.slide-close!
|
|
||||||
|
|
||||||
@ready = ~>
|
@ready = ~>
|
||||||
@ready-count++
|
@ready-count++
|
||||||
|
|
||||||
if @ready-count == 2
|
if @ready-count == 2
|
||||||
@slide = SpSlidemenu @refs.main, @refs.nav.root, \#hamburger {direction: \left}
|
|
||||||
@init-view-position!
|
@init-view-position!
|
||||||
|
|
||||||
@init-view-position = ~>
|
@init-view-position = ~>
|
||||||
top = @refs.header.root.offset-height
|
top = @refs.header.root.offset-height
|
||||||
@refs.main.style.padding-top = top + \px
|
@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) ~>
|
@on-stream-notification = (notification) ~>
|
||||||
el = document.body.append-child document.create-element \mk-notify
|
el = document.body.append-child document.create-element \mk-notify
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue