mirror of https://github.com/RubaXa/Ply.git
RubaXa
11 years ago
19 changed files with 1588 additions and 1065 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,74 @@ |
|||||||
|
// |
||||||
|
// Ply-контекст |
||||||
|
// |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* @class Ply.Context |
||||||
|
* @param {HTMLElement} el |
||||||
|
*/ |
||||||
|
function Context(el) { |
||||||
|
/** |
||||||
|
* Корневой элемент |
||||||
|
* @type {HTMLElement} |
||||||
|
*/ |
||||||
|
this.el = el; |
||||||
|
} |
||||||
|
|
||||||
|
Context.fn = Context.prototype = /** @lends Ply.Context */{ |
||||||
|
constructor: Context, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Получить элемент по имени |
||||||
|
* @param {String} name |
||||||
|
* @returns {HTMLElement|undefined} |
||||||
|
*/ |
||||||
|
getEl: function (name) { |
||||||
|
if (this.el) { |
||||||
|
return _querySelector('[' + _plyAttr + '-name="' + name + '"]', this.el); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Получить или установить значение по имени |
||||||
|
* @param {String} name |
||||||
|
* @param {String} [value] |
||||||
|
* @returns {String} |
||||||
|
*/ |
||||||
|
val: function (name, value) { |
||||||
|
var el = typeof name === 'string' ? this.getEl(name) : name; |
||||||
|
|
||||||
|
if (el && (el.value == null)) { |
||||||
|
el = _getElementsByTagName(el, 'input')[0] |
||||||
|
|| _getElementsByTagName(el, 'textarea')[0] |
||||||
|
|| _getElementsByTagName(el, 'select')[0] |
||||||
|
; |
||||||
|
} |
||||||
|
|
||||||
|
if (el && value != null) { |
||||||
|
el.value = value; |
||||||
|
} |
||||||
|
|
||||||
|
return el && el.value || ""; |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Получить JSON |
||||||
|
* @returns {Object} |
||||||
|
*/ |
||||||
|
toJSON: function () { |
||||||
|
var items = this.el.querySelectorAll('[' + _plyAttr + '-name]'), |
||||||
|
json = {}, |
||||||
|
el, |
||||||
|
i = items.length |
||||||
|
; |
||||||
|
while (i--) { |
||||||
|
el = items[i]; |
||||||
|
json[el.getAttribute(_plyAttr + '-name')] = this.val(el); |
||||||
|
} |
||||||
|
return json; |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
/*global support, document*/ |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Хуки для css |
||||||
|
* @type {Object} |
||||||
|
*/ |
||||||
|
var _cssHooks = { |
||||||
|
opacity: !support.opacity && function (style, value) { |
||||||
|
style.zoom = 1; |
||||||
|
style.filter = 'alpha(opacity=' + (value * 100) + ')'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Установка или получение css свойства |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @param {Object|String} prop |
||||||
|
* @param {String} [val] |
||||||
|
* @returns {*} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _css(el, prop, val) { |
||||||
|
if (el && el.style && prop) { |
||||||
|
if (prop instanceof Object) { |
||||||
|
for (var name in prop) { |
||||||
|
_css(el, name, prop[name]); |
||||||
|
} |
||||||
|
} |
||||||
|
else if (val === void 0) { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (document.defaultView && document.defaultView.getComputedStyle) { |
||||||
|
val = document.defaultView.getComputedStyle(el, ''); |
||||||
|
} |
||||||
|
else if (el.currentStyle) { |
||||||
|
val = el.currentStyle; |
||||||
|
} |
||||||
|
|
||||||
|
return prop === void 0 ? val : val[prop]; |
||||||
|
} else if (_cssHooks[prop]) { |
||||||
|
_cssHooks[prop](el.style, val); |
||||||
|
} else { |
||||||
|
el.style[support[prop] || prop] = val; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
module.exports = { |
||||||
|
zIndex: 10000, |
||||||
|
|
||||||
|
layer: {}, // css |
||||||
|
|
||||||
|
overlay: { |
||||||
|
opacity: .6, |
||||||
|
backgroundColor: 'rgb(0, 0, 0)' |
||||||
|
}, |
||||||
|
|
||||||
|
flags: { |
||||||
|
closeBtn: true, |
||||||
|
bodyScroll: false, |
||||||
|
closeByEsc: true, |
||||||
|
closeByOverlay: true, |
||||||
|
hideLayerInStack: true, |
||||||
|
visibleOverlayInStack: false |
||||||
|
}, |
||||||
|
|
||||||
|
baseHtml: true, |
||||||
|
|
||||||
|
// Callback's |
||||||
|
init: noop, |
||||||
|
open: noop, |
||||||
|
close: noop, |
||||||
|
destroy: noop, |
||||||
|
callback: noop |
||||||
|
}; |
||||||
@ -0,0 +1,312 @@ |
|||||||
|
// |
||||||
|
// Работа с DOM |
||||||
|
// |
||||||
|
|
||||||
|
|
||||||
|
var $ = require('jquery'); |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Разбор строки "tag#id.foo.bar" |
||||||
|
* @const {RegExp} |
||||||
|
*/ |
||||||
|
var R_SELECTOR = /^(\w+)?(#\w+)?((?:\.[\w_-]+)*)/i; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Выбрать элементы по заданному селектору |
||||||
|
* @param {String} selector |
||||||
|
* @param {HTMLElement} [ctx] |
||||||
|
* @returns {HTMLElement} |
||||||
|
*/ |
||||||
|
function _querySelector(selector, ctx) { |
||||||
|
try { |
||||||
|
return (ctx || document).querySelector(selector); |
||||||
|
} catch (err) { |
||||||
|
/* istanbul ignore next */ |
||||||
|
return $(selector, ctx)[0]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Найти элементы по имени |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @param {String} name |
||||||
|
* @returns {NodeList} |
||||||
|
*/ |
||||||
|
function _getElementsByTagName(el, name) { |
||||||
|
return el.getElementsByTagName(name); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Присоединить элемент |
||||||
|
* @param {HTMLElement} parent |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _appendChild(parent, el) { |
||||||
|
try { |
||||||
|
parent && el && parent.appendChild(el); |
||||||
|
} catch (e) {} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Удалить элемент |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _removeElement(el) { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (el && el.parentNode) { |
||||||
|
el.parentNode.removeChild(el); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Добавить слуашетеля |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @param {String} name |
||||||
|
* @param {Function} fn |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _addEvent(el, name, fn) { |
||||||
|
var handle = fn.handle = fn.handle || ((evt) => { |
||||||
|
/* istanbul ignore if */ |
||||||
|
if (!evt.target) { |
||||||
|
evt.target = evt.srcElement || document; |
||||||
|
} |
||||||
|
|
||||||
|
/* istanbul ignore if */ |
||||||
|
if (evt.target.nodeType === 3) { |
||||||
|
evt.target = evt.target.parentNode; |
||||||
|
} |
||||||
|
|
||||||
|
/* istanbul ignore if */ |
||||||
|
if (!evt.preventDefault) { |
||||||
|
evt.preventDefault = () => { |
||||||
|
evt.returnValue = false; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/* istanbul ignore if */ |
||||||
|
if (!evt.stopPropagation) { |
||||||
|
evt.stopPropagation = () => { |
||||||
|
evt.cancelBubble = true; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
fn.call(el, evt); |
||||||
|
}); |
||||||
|
|
||||||
|
/* istanbul ignore else */ |
||||||
|
if (el.addEventListener) { |
||||||
|
el.addEventListener(name, handle, false); |
||||||
|
} else { |
||||||
|
el.attachEvent('on' + name, handle); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Удалить слуашетеля |
||||||
|
* @param {HTMLElement} el |
||||||
|
* @param {String} name |
||||||
|
* @param {Function} fn |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _removeEvent(el, name, fn) { |
||||||
|
var handle = fn.handle; |
||||||
|
if (handle) { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (el.removeEventListener) { |
||||||
|
el.removeEventListener(name, handle, false); |
||||||
|
} else { |
||||||
|
el.detachEvent('on' + name, handle); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Создание DOM структуры по спецификации |
||||||
|
* @param {String|Object|HTMLElement} [spec] |
||||||
|
* @returns {HTMLElement} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _buildDOM(spec) { |
||||||
|
if (spec == null) { |
||||||
|
spec = 'div'; |
||||||
|
} |
||||||
|
|
||||||
|
if (spec.appendChild) { |
||||||
|
return spec; |
||||||
|
} |
||||||
|
else if (spec.skip) { |
||||||
|
return document.createDocumentFragment(); |
||||||
|
} |
||||||
|
|
||||||
|
if (typeof spec === 'string') { // selector |
||||||
|
spec = { tag: spec }; |
||||||
|
} |
||||||
|
|
||||||
|
var el, |
||||||
|
children = spec.children, |
||||||
|
selector = R_SELECTOR.exec(spec.tag || '') |
||||||
|
; |
||||||
|
|
||||||
|
// Это нам больше не нужно |
||||||
|
delete spec.children; |
||||||
|
|
||||||
|
// Разбираем селектор |
||||||
|
spec.tag = selector[1] || 'div'; |
||||||
|
spec.id = spec.id || (selector[2] || '').substr(1); |
||||||
|
|
||||||
|
// Собираем className |
||||||
|
selector = (selector[3] || '').split('.'); |
||||||
|
selector[0] = (spec.className || ''); |
||||||
|
spec.className = selector.join(' '); |
||||||
|
|
||||||
|
// Создаем элемент, теперь можно |
||||||
|
el = document.createElement(spec.tag); |
||||||
|
delete spec.tag; |
||||||
|
|
||||||
|
// Определяем свойсва |
||||||
|
_each(spec, (value, name) => { |
||||||
|
if (value) { |
||||||
|
if (name === 'css') { |
||||||
|
// Определяем CSS свойства |
||||||
|
_css(el, spec.css); |
||||||
|
} |
||||||
|
else if (name === 'text') { |
||||||
|
(value != null) && _appendChild(el, document.createTextNode(value)); |
||||||
|
} |
||||||
|
else if (name === 'html') { |
||||||
|
(value != null) && (el.innerHTML = value); |
||||||
|
} |
||||||
|
else if (name === 'ply') { |
||||||
|
// Ply-аттрибут |
||||||
|
el.setAttribute(_plyAttr, value); |
||||||
|
} |
||||||
|
else if (name in el) { |
||||||
|
try { |
||||||
|
el[name] = value; |
||||||
|
} catch (e) { |
||||||
|
el.setAttribute(name, value); |
||||||
|
} |
||||||
|
} |
||||||
|
else if (/^data-/.test(name)) { |
||||||
|
el.setAttribute(name, value); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Детишки |
||||||
|
if (children && children.appendChild) { |
||||||
|
_appendChild(el, children); |
||||||
|
} |
||||||
|
else { |
||||||
|
_each(children, (spec, selector) => { |
||||||
|
if (spec) { |
||||||
|
if (typeof spec === 'string') { |
||||||
|
spec = { text: spec }; |
||||||
|
} |
||||||
|
else if (typeof spec !== 'object') { |
||||||
|
spec = {}; |
||||||
|
} |
||||||
|
|
||||||
|
/* istanbul ignore else */ |
||||||
|
if (typeof selector === 'string') { |
||||||
|
spec.tag = spec.tag || selector; |
||||||
|
} |
||||||
|
|
||||||
|
_appendChild(el, _buildDOM(spec)); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return el; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Выбрать первый не заполненый элемент |
||||||
|
* @param {HTMLElement} parentNode |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _autoFocus(parentNode) { |
||||||
|
var items = _getElementsByTagName(parentNode, 'input'), |
||||||
|
i = 0, |
||||||
|
n = items.length, |
||||||
|
el, |
||||||
|
element |
||||||
|
; |
||||||
|
|
||||||
|
for (; i < n; i++) { |
||||||
|
el = items[i]; |
||||||
|
|
||||||
|
/* istanbul ignore else */ |
||||||
|
if (el.type === 'submit') { |
||||||
|
!element && (element = el); |
||||||
|
} |
||||||
|
else if (!/hidden|check|radio/.test(el.type) && el.value == '') { |
||||||
|
element = el; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (!element) { |
||||||
|
element = _getElementsByTagName(parentNode, 'button')[0]; |
||||||
|
} |
||||||
|
|
||||||
|
try { element.focus(); } catch (err) { } |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Предзагрузить все изображения |
||||||
|
* @param {HTMLElement} parentNode |
||||||
|
* @returns {Promise} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _preloadImage(parentNode) { |
||||||
|
_loading(true); |
||||||
|
|
||||||
|
return _promise((resolve) => { |
||||||
|
var items = _getElementsByTagName(parentNode, 'img'), |
||||||
|
i = items.length, |
||||||
|
queue = i, |
||||||
|
img, |
||||||
|
complete = () => { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (--queue <= 0) { |
||||||
|
i = items.length; |
||||||
|
while (i--) { |
||||||
|
img = items[i]; |
||||||
|
_removeEvent(img, 'load', complete); |
||||||
|
_removeEvent(img, 'error', complete); |
||||||
|
} |
||||||
|
_loading(false); |
||||||
|
resolve(); |
||||||
|
} |
||||||
|
} |
||||||
|
; |
||||||
|
|
||||||
|
while (i--) { |
||||||
|
img = items[i]; |
||||||
|
if (img.complete) { |
||||||
|
queue--; |
||||||
|
} else { |
||||||
|
_addEvent(img, 'load', complete); |
||||||
|
_addEvent(img, 'error', complete); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
!queue && complete(); |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
module.exports = { |
||||||
|
// Установки по умолчанию |
||||||
|
defaults: { |
||||||
|
duration: 300, |
||||||
|
|
||||||
|
open: { |
||||||
|
layer: null, |
||||||
|
overlay: null |
||||||
|
}, |
||||||
|
|
||||||
|
close: { |
||||||
|
layer: null, |
||||||
|
overlay: null |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Настройти эффекты по умолчанию |
||||||
|
* @static |
||||||
|
* @param {Object} options |
||||||
|
*/ |
||||||
|
setup: function (options) { |
||||||
|
this.defaults = this.get(options); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
set: function (desc) { |
||||||
|
_extend(this, desc); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Получить опции на основе переданных и по умолчанию |
||||||
|
* @static |
||||||
|
* @param {Object} options опции |
||||||
|
* @returns {Object} |
||||||
|
*/ |
||||||
|
get: function (options) { |
||||||
|
var defaults = _deepClone(this.defaults); |
||||||
|
|
||||||
|
// Функция разбора выражения `name:duration[args]` |
||||||
|
function parseKey(key) { |
||||||
|
var match = /^([\w_-]+)(?::(\d+%?))?(\[[^\]]+\])?/.exec(key) || []; |
||||||
|
return { |
||||||
|
name: match[1] || key, |
||||||
|
duration: match[2] || null, |
||||||
|
args: JSON.parse(match[3] || 'null') || {} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function toObj(obj, key, def) { |
||||||
|
var fx = parseKey(key), |
||||||
|
val = (obj[fx.name] || def || {}), |
||||||
|
duration = (fx.duration || val.duration || obj.duration || options.duration) |
||||||
|
; |
||||||
|
|
||||||
|
if (typeof val === 'string') { |
||||||
|
val = parseKey(val); |
||||||
|
delete val.args; |
||||||
|
} |
||||||
|
|
||||||
|
if (/%/.test(val.duration)) { |
||||||
|
val.duration = parseInt(val.duration, 10) / 100 * duration; |
||||||
|
} |
||||||
|
|
||||||
|
val.duration = (val.duration || duration) | 0; |
||||||
|
|
||||||
|
return val; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
if (typeof options === 'string') { |
||||||
|
var fx = parseKey(options); |
||||||
|
options = _deepClone(this[fx.name] || { open: {}, close: {} }); |
||||||
|
options.duration = fx.duration || options.duration; |
||||||
|
options.open.args = fx.args[0]; |
||||||
|
options.close.args = fx.args[1]; |
||||||
|
} |
||||||
|
else if (options instanceof Array) { |
||||||
|
var openFx = parseKey(options[0]), |
||||||
|
closeFx = parseKey(options[1]), |
||||||
|
open = this[openFx.name], |
||||||
|
close = this[closeFx.name] |
||||||
|
; |
||||||
|
|
||||||
|
options = { |
||||||
|
open: _deepClone(open && open.open || { layer: options[0], overlay: options[0] }), |
||||||
|
close: _deepClone(close && close.close || { layer: options[1], overlay: options[1] }) |
||||||
|
}; |
||||||
|
|
||||||
|
options.open.args = openFx.args[0]; |
||||||
|
options.close.args = closeFx.args[0]; |
||||||
|
} |
||||||
|
else if (!(options instanceof Object)) { |
||||||
|
options = {}; |
||||||
|
} |
||||||
|
|
||||||
|
options.duration = (options.duration || defaults.duration) | 0; |
||||||
|
|
||||||
|
for (var key in {open: 0, close: 0}) { |
||||||
|
var val = options[key] || defaults[key] || {}; |
||||||
|
if (typeof val === 'string') { |
||||||
|
// если это строка, то только layer |
||||||
|
val = { layer: val }; |
||||||
|
} |
||||||
|
val.layer = toObj(val, 'layer', defaults[key].layer); |
||||||
|
val.overlay = toObj(val, 'overlay', defaults[key].overlay); |
||||||
|
|
||||||
|
if(val.args === void 0){ |
||||||
|
// clean |
||||||
|
delete val.args; |
||||||
|
} |
||||||
|
|
||||||
|
options[key] = val; |
||||||
|
} |
||||||
|
|
||||||
|
return options; |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Применить эффекты |
||||||
|
* @static |
||||||
|
* @param {HTMLElement} el элемент, к которому нужно применить эффект |
||||||
|
* @param {String} name название эффекта |
||||||
|
* @returns {Promise|undefined} |
||||||
|
*/ |
||||||
|
apply: function (el, name) { |
||||||
|
name = name.split('.'); |
||||||
|
|
||||||
|
var effects = this[name[0]], // эффекты open/close |
||||||
|
firstEl = el.firstChild, |
||||||
|
oldStyle = [el.getAttribute('style'), firstEl && firstEl.getAttribute('style')], |
||||||
|
fx, |
||||||
|
effect |
||||||
|
; |
||||||
|
|
||||||
|
|
||||||
|
if (support.transition && effects && (effect = effects[name[1]]) && (fx = Ply.effects[effect.name])) { |
||||||
|
if (fx['to'] || fx['from']) { |
||||||
|
// Клонируем |
||||||
|
fx = _deepClone(fx); |
||||||
|
|
||||||
|
// Выключаем анимацию |
||||||
|
_css(el, 'transition', 'none'); |
||||||
|
_css(firstEl, 'transition', 'none'); |
||||||
|
|
||||||
|
// Определяем текущее css-значения |
||||||
|
_each(fx['to'], (val, key, target) => { |
||||||
|
if (val === '&') { |
||||||
|
target[key] = _css(el, key); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Выставляем initied значения |
||||||
|
if (isFn(fx['from'])) { |
||||||
|
fx['from'](el, effects.args); |
||||||
|
} else if (fx['from']) { |
||||||
|
_css(el, fx['from']); |
||||||
|
} |
||||||
|
|
||||||
|
return _promise((resolve) => { |
||||||
|
// Принудительный repaint/reflow |
||||||
|
fx.width = el.offsetWidth; |
||||||
|
|
||||||
|
// Включаем анимацию |
||||||
|
_css(el, 'transition', 'all ' + effect.duration + 'ms'); |
||||||
|
_css(firstEl, 'transition', 'all ' + effect.duration + 'ms'); |
||||||
|
|
||||||
|
// Изменяем css |
||||||
|
if (isFn(fx['to'])) { |
||||||
|
fx['to'](el, effects.args); |
||||||
|
} |
||||||
|
else { |
||||||
|
_css(el, fx['to']); |
||||||
|
} |
||||||
|
|
||||||
|
// Ждем завершения анимации |
||||||
|
setTimeout(resolve, effect.duration); |
||||||
|
}).then(() => { |
||||||
|
el.setAttribute('style', oldStyle[0]); |
||||||
|
firstEl && firstEl.setAttribute('style', oldStyle[1]); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return _resolvePromise(); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,137 @@ |
|||||||
|
module.exports = { |
||||||
|
// |
||||||
|
// Комбинированный эффекты |
||||||
|
// |
||||||
|
|
||||||
|
'fade': { |
||||||
|
open: { layer: 'fade-in:80%', overlay: 'fade-in:100%' }, |
||||||
|
close: { layer: 'fade-out:60%', overlay: 'fade-out:60%' } |
||||||
|
}, |
||||||
|
|
||||||
|
'scale': { |
||||||
|
open: { layer: 'scale-in', overlay: 'fade-in' }, |
||||||
|
close: { layer: 'scale-out', overlay: 'fade-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
'fall': { |
||||||
|
open: { layer: 'fall-in', overlay: 'fade-in' }, |
||||||
|
close: { layer: 'fall-out', overlay: 'fade-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
'slide': { |
||||||
|
open: { layer: 'slide-in', overlay: 'fade-in' }, |
||||||
|
close: { layer: 'slide-out', overlay: 'fade-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-flip': { |
||||||
|
open: { layer: '3d-flip-in', overlay: 'fade-in' }, |
||||||
|
close: { layer: '3d-flip-out', overlay: 'fade-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-sign': { |
||||||
|
open: { layer: '3d-sign-in', overlay: 'fade-in' }, |
||||||
|
close: { layer: '3d-sign-out', overlay: 'fade-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
'inner': { |
||||||
|
open: { layer: 'inner-in' }, |
||||||
|
close: { layer: 'inner-out' } |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Описание эффекта |
||||||
|
// |
||||||
|
|
||||||
|
'fade-in': { |
||||||
|
'from': { opacity: 0 }, |
||||||
|
'to': { opacity: '&' } |
||||||
|
}, |
||||||
|
|
||||||
|
'fade-out': { |
||||||
|
'to': { opacity: 0 } |
||||||
|
}, |
||||||
|
|
||||||
|
'slide-in': { |
||||||
|
'from': { opacity: 0, transform: 'translateY(20%)' }, |
||||||
|
'to': { opacity: '&', transform: 'translateY(0)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'slide-out': { |
||||||
|
'to': { opacity: 0, transform: 'translateY(20%)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'fall-in': { |
||||||
|
'from': { opacity: 0, transform: 'scale(1.3)' }, |
||||||
|
'to': { opacity: '&', transform: 'scale(1)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'fall-out': { |
||||||
|
'to': { opacity: 0, transform: 'scale(1.3)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'scale-in': { |
||||||
|
'from': { opacity: 0, transform: 'scale(0.7)' }, |
||||||
|
'to': { opacity: '&', transform: 'scale(1)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'scale-out': { |
||||||
|
'to': { opacity: 0, 'transform': 'scale(0.7)' } |
||||||
|
}, |
||||||
|
|
||||||
|
'rotate3d': (el, opacity, axis, deg, origin) => { |
||||||
|
_css(el, { perspective: '1300px' }); |
||||||
|
_css(el.firstChild, { |
||||||
|
opacity: opacity, |
||||||
|
transform: 'rotate' + axis + '(' + deg + 'deg)', |
||||||
|
transformStyle: 'preserve-3d', |
||||||
|
transformOrigin: origin ? '50% 0' : '50%' |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-sign-in': { |
||||||
|
'from': (el) => { |
||||||
|
Ply.effects.rotate3d(el, 0, 'X', -60, '50% 0'); |
||||||
|
}, |
||||||
|
'to': (el) => { |
||||||
|
_css(el.firstChild, { opacity: 1, transform: 'rotateX(0)' }); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-sign-out': { |
||||||
|
'from': (el) => { |
||||||
|
Ply.effects.rotate3d(el, 1, 'X', 0, '50% 0'); |
||||||
|
}, |
||||||
|
'to': (el) => { |
||||||
|
_css(el.firstChild, { opacity: 0, transform: 'rotateX(-60deg)' }); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-flip-in': { |
||||||
|
'from': (el, args) => { |
||||||
|
Ply.effects.rotate3d(el, 0, 'Y', args || -70); |
||||||
|
}, |
||||||
|
'to': (el) => { |
||||||
|
_css(el.firstChild, { opacity: 1, transform: 'rotateY(0)' }); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
'3d-flip-out': { |
||||||
|
'from': (el) => { |
||||||
|
Ply.effects.rotate3d(el, 1, 'Y', 0); |
||||||
|
}, |
||||||
|
'to': (el, args) => { |
||||||
|
_css(el.firstChild, { opacity: 0, transform: 'rotateY(' + (args || 70) + 'deg)' }); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
'inner-in': { |
||||||
|
'from': (el) => { _css(el, 'transform', 'translateX(100%)'); }, |
||||||
|
'to': (el) => { _css(el, 'transform', 'translateX(0%)'); } |
||||||
|
}, |
||||||
|
|
||||||
|
'inner-out': { |
||||||
|
'from': (el) => { _css(el, 'transform', 'translateX(0%)'); }, |
||||||
|
'to': (el) => { _css(el, 'transform', 'translateX(-100%)'); } |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = window.jQuery |
||||||
|
|| /* istanbul ignore next */ window.Zepto |
||||||
|
|| /* istanbul ignore next */ window.ender |
||||||
|
|| /* istanbul ignore next */ window.$ |
||||||
|
; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/** |
||||||
|
* Коды кнопок |
||||||
|
* @type {Object} |
||||||
|
*/ |
||||||
|
module.exports = { |
||||||
|
esc: 27 |
||||||
|
}; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
ok: 'OK', |
||||||
|
cancel: 'Cancel', |
||||||
|
cross: '✖' |
||||||
|
}; |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
var array_core = [], |
||||||
|
array_push = array_core.push, |
||||||
|
array_splice = array_core.splice |
||||||
|
; |
||||||
|
|
||||||
|
|
||||||
|
Ply.stack = { |
||||||
|
_idx: {}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Последний Ply в стеке |
||||||
|
* @type {Ply} |
||||||
|
*/ |
||||||
|
last: null, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Длинна стека |
||||||
|
* @type {Number} |
||||||
|
*/ |
||||||
|
length: 0, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Удаить последний ply-слой из стека |
||||||
|
* @param {Event} evt |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
_pop: function (evt) { |
||||||
|
var layer = Ply.stack.last; |
||||||
|
|
||||||
|
if (evt.keyCode === keys.esc && layer.hasFlag('closeByEsc')) { |
||||||
|
layer.closeBy('esc'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Добавить ply в стек |
||||||
|
* @param {Ply} layer |
||||||
|
*/ |
||||||
|
add: function (layer) { |
||||||
|
var idx = array_push.call(this, layer); |
||||||
|
|
||||||
|
this.last = layer; |
||||||
|
this._idx[layer.cid] = idx - 1; |
||||||
|
|
||||||
|
if (idx === 1) { |
||||||
|
_addEvent(document, 'keyup', this._pop); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Удалить ply из стека |
||||||
|
* @param {Ply} layer |
||||||
|
*/ |
||||||
|
remove: function (layer) { |
||||||
|
var idx = this._idx[layer.cid]; |
||||||
|
|
||||||
|
if (idx >= 0) { |
||||||
|
array_splice.call(this, idx, 1); |
||||||
|
|
||||||
|
delete this._idx[layer.cid]; |
||||||
|
this.last = this[this.length-1]; |
||||||
|
|
||||||
|
if (!this.last) { |
||||||
|
_removeEvent(document, 'keyup', this._pop); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/*global _buildDOM*/ |
||||||
|
module.exports = (() => { |
||||||
|
var props = {}, |
||||||
|
style = document.createElement('div').style, |
||||||
|
names = 'opacity transition transform perspective transformStyle transformOrigin backfaceVisibility'.split(' '), |
||||||
|
prefix = ['Webkit', 'Moz', 'O', 'MS'] |
||||||
|
; |
||||||
|
|
||||||
|
_each(names, (name, i) => { |
||||||
|
props[name] = (name in style) && /* istanbul ignore next */ name; |
||||||
|
|
||||||
|
/* istanbul ignore else */ |
||||||
|
if (!props[name]) { |
||||||
|
for (i = 0; i < 4; i++) { |
||||||
|
var pname = prefix[i] + name.charAt(0).toUpperCase() + name.substr(1); |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (props[name] = (pname in style) && pname) { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return props; |
||||||
|
})(); |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
// |
||||||
|
// Вспомогательные методы |
||||||
|
// |
||||||
|
|
||||||
|
var Promise = Deferred || window.Promise; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Функция? |
||||||
|
* @param {*} fn |
||||||
|
* @returns {Boolean} |
||||||
|
*/ |
||||||
|
function isFn(fn) { |
||||||
|
return typeof fn === 'function'; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Создать «Обещание» |
||||||
|
* @param {Function} executor |
||||||
|
* @returns {Promise} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _promise(executor) { |
||||||
|
/* istanbul ignore if */ |
||||||
|
if (Promise) { |
||||||
|
return new Promise(executor); |
||||||
|
} else { |
||||||
|
var dfd = $.Deferred(); |
||||||
|
executor(dfd.resolve, dfd.reject); |
||||||
|
return dfd; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Дождаться разрешения всех «Обещаний» |
||||||
|
* @param {Promise[]} iterable |
||||||
|
* @returns {Promise} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _promiseAll(iterable) { |
||||||
|
return Promise |
||||||
|
? /* istanbul ignore next */ Promise.all(iterable) |
||||||
|
: $.when.apply($, iterable); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Вернуть разрешенное «Обещание» |
||||||
|
* @param {*} [value] |
||||||
|
* @returns {Promise} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _resolvePromise(value) { |
||||||
|
return _promise((resolve) => resolve(value)); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Привести значение к «Обещанию» |
||||||
|
* @param {*} value |
||||||
|
* @returns {Promise} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _cast(value) { |
||||||
|
return value && value.then ? value : _resolvePromise(value); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Object iterator |
||||||
|
* @param {Object|Array} obj |
||||||
|
* @param {Function} iterator |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _each(obj, iterator) { |
||||||
|
if (obj) { |
||||||
|
for (var key in obj) { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (obj.hasOwnProperty(key)) { |
||||||
|
iterator(obj[key], key, obj); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Глубокое клонирование |
||||||
|
* @param {*} obj |
||||||
|
* @returns {*} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _deepClone(obj) { |
||||||
|
var result = {}; |
||||||
|
|
||||||
|
_each(obj, (val, key) => { |
||||||
|
if (isFn(val)) { |
||||||
|
result[key] = val; |
||||||
|
} |
||||||
|
else if (val instanceof Object) { |
||||||
|
result[key] = _deepClone(val); |
||||||
|
} |
||||||
|
else { |
||||||
|
result[key] = val; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Перенос свойств одного объект к другому |
||||||
|
* @param {Object} dst |
||||||
|
* @param {...Object} src |
||||||
|
* @returns {Object} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
function _extend(dst, ...src) { |
||||||
|
var i = 0, n = src.length; |
||||||
|
for (; i < n; i++) { |
||||||
|
_each(src[i], (val, key) => { |
||||||
|
dst[key] = val; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return dst; |
||||||
|
} |
||||||
Loading…
Reference in new issue