mirror of https://github.com/RubaXa/Ply.git
RubaXa
11 years ago
commit
9d225a0ac8
14 changed files with 3466 additions and 0 deletions
@ -0,0 +1,6 @@
|
||||
temp |
||||
report |
||||
.DS_Store |
||||
node_modules |
||||
Ply.js |
||||
Ply.ui.js |
||||
@ -0,0 +1,66 @@
|
||||
'use strict'; |
||||
|
||||
module.exports = function (grunt){ |
||||
grunt.initConfig({ |
||||
pkg: grunt.file.readJSON('package.json'), |
||||
|
||||
es6transpiler: { |
||||
core: { |
||||
src: 'src/Ply.es6', |
||||
dest: 'Ply.js' |
||||
}, |
||||
ui: { |
||||
src: 'src/Ply.ui.es6', |
||||
dest: 'Ply.ui.js' |
||||
} |
||||
}, |
||||
|
||||
watch: { |
||||
scripts: { |
||||
files: 'src/*.es6', |
||||
tasks: ['es6transpiler'], |
||||
options: { interrupt: true } |
||||
} |
||||
}, |
||||
|
||||
qunit: { |
||||
all: ['tests/*.html'], |
||||
options: { |
||||
'--web-security': 'no', |
||||
coverage: { |
||||
src: ['Ply.js', 'Ply.ui.js'], |
||||
instrumentedFiles: 'temp/', |
||||
htmlReport: 'report/coverage', |
||||
coberturaReport: 'report/', |
||||
linesThresholdPct: 95, |
||||
statementsThresholdPct: 95, |
||||
functionsThresholdPct: 95, |
||||
branchesThresholdPct: 95 |
||||
} |
||||
} |
||||
}, |
||||
|
||||
uglify: { |
||||
options: { |
||||
banner: '/*! <%= pkg.exportName %> <%= pkg.version %> - <%= pkg.license %> | <%= pkg.repository.url %> */\n' |
||||
}, |
||||
dist: { |
||||
files: { |
||||
'<%= pkg.exportName %>.min.js': ['<%= pkg.exportName %>.js'] |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-watch'); |
||||
grunt.loadNpmTasks('grunt-qunit-istanbul'); |
||||
grunt.loadNpmTasks('grunt-es6-transpiler'); |
||||
grunt.loadNpmTasks('grunt-contrib-uglify'); |
||||
|
||||
|
||||
grunt.registerTask('es', ['es6transpiler']); |
||||
grunt.registerTask('build', ['es6transpiler', 'qunit']); |
||||
grunt.registerTask('min', ['build', 'uglify']); |
||||
grunt.registerTask('default', ['build']); |
||||
}; |
||||
|
After Width: | Height: | Size: 318 B |
@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>Ply — Amazing layer/modal/dialog system. Wow!</title> |
||||
|
||||
<meta name="keywords" content="ply, layer, modal, dialog, javascript, js, rubaxa"/> |
||||
<meta name="description" content=""/> |
||||
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon"/> |
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/> |
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/> |
||||
<link href='./st/app.css' rel='stylesheet' type='text/css'/> |
||||
<link href='./ply.css' rel='stylesheet' type='text/css'/> |
||||
|
||||
</head> |
||||
<body> |
||||
<h1 title="Try demo!"><u>Ply</u></h1> |
||||
|
||||
<div class="container"> |
||||
<div class="row"> |
||||
<h2>Alert</h2> |
||||
|
||||
<div class="col-left"> |
||||
<div class="ply-layer alert example"> |
||||
<div class="ply-content">Hello %username%!</div> |
||||
<div class="ply-footer"><button class="ply-ok">OK</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-right"> |
||||
<code> |
||||
Ply.dialog("alert", "Hello %username%!"); |
||||
</code> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<h2>Confirm</h2> |
||||
|
||||
<div class="col-left"> |
||||
<div class="ply-layer confirm example"> |
||||
<div class="ply-content">Continue?</div> |
||||
<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-right"> |
||||
<code> |
||||
Ply.dialog( |
||||
"confirm", |
||||
{ effect: "3d-sign" }, |
||||
"Continue?" |
||||
); |
||||
</code> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<h2>Prompt</h2> |
||||
|
||||
<div class="col-left"> |
||||
<div class="ply-layer prompt example"> |
||||
<div class="ply-header">Spam subscribe</div> |
||||
<div class="ply-content"> |
||||
<input class="ply-input" placeholder="E-mail"/> |
||||
</div> |
||||
<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-right"> |
||||
<code> |
||||
Ply.dialog("prompt", { |
||||
title: "Spam subscribe", |
||||
form: { email: "E-mail" } |
||||
}); |
||||
</code> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div style="height: 100px"></div> |
||||
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script> |
||||
|
||||
<script src="./Ply.js"></script> |
||||
<script src="./Ply.ui.js"></script> |
||||
|
||||
<script> |
||||
jQuery(function ($) { |
||||
hljs.configure({ classPrefix: '' }); |
||||
|
||||
|
||||
Ply.dialog({ |
||||
foo: { |
||||
data: 'Foo!', |
||||
next: 'bar', |
||||
nextEffect: 'inner' |
||||
}, |
||||
bar: { |
||||
data: { |
||||
text: 'Bar!', |
||||
ok: 'Wow!' |
||||
} |
||||
} |
||||
}); |
||||
|
||||
|
||||
$('.example') |
||||
.each(function () { |
||||
var $el = $(this); |
||||
var $code = $el.closest('.row').find('code'); |
||||
var code = $code.text().split('\n'); |
||||
var offset = code[1].match(/^\s+/)[0].length; |
||||
|
||||
$.each(code, function (i) { |
||||
code[i] = code[i].substr(offset); |
||||
}); |
||||
|
||||
code = code.slice(1).join('\n'); |
||||
$code.text(code); |
||||
$el.data('code', code); |
||||
|
||||
hljs.highlightBlock($code.wrap('<pre/>').parent().addClass('javascript')[0]) |
||||
}) |
||||
.on('click', function () { |
||||
Function($(this).data('code'))(); |
||||
return false; |
||||
}) |
||||
; |
||||
|
||||
|
||||
$('h1 u').click(function () { |
||||
Ply.dialog({ |
||||
'welcome': { |
||||
data: { |
||||
children: [{ |
||||
tag: 'img', |
||||
src: 'http://www.saintjn.org/wp-content/uploads/2013/07/welcome.png?1', |
||||
width: 400 |
||||
}], |
||||
ok: "Next" |
||||
}, |
||||
next: 'introduce', |
||||
nextEffect: '3d-flip[180,-180]' |
||||
}, |
||||
|
||||
'introduce': { |
||||
ui: 'prompt', |
||||
data: { |
||||
title: 'Your name?', |
||||
form: { name: '%username%' } |
||||
}, |
||||
back: 'welcome', |
||||
backEffect: '3d-flip[-180,180]', |
||||
next: 'hi', |
||||
nextEffect: 'scale' |
||||
}, |
||||
|
||||
'hi': { |
||||
data: { |
||||
text: 'Hi, {{name}}!', |
||||
ok: 'Next' |
||||
}, |
||||
prepare: function (data, dialogs) { |
||||
data.text = data.text.replace(/\{\{([^}]+)\}\}/g, function (_, name) { |
||||
return dialogs.introduce.val(name); |
||||
}); |
||||
}, |
||||
back: 'next', |
||||
next: 'question', |
||||
nextEffect: 'fall' |
||||
}, |
||||
|
||||
'question': { |
||||
ui: 'confirm', |
||||
data: { |
||||
text: 'You know Jonna Lee?', |
||||
ok: 'Yes', |
||||
cancel: 'No' |
||||
}, |
||||
back: 'Jonna', |
||||
next: 'Jonna-01', |
||||
nextEffect: '3d-sign' |
||||
}, |
||||
|
||||
'Jonna': { |
||||
data: 'Jonna Lee (born Jonna Emily Lee Nilsson, October 3, 1981) is a singer-songwriter from Linköping, Sweden, currently residing in Stockholm. Lee is best known for being the creator and artist of iamamiwhoami. Lee started her own label "To whom it may concern" in 2010.', |
||||
back: 'next', |
||||
next: 'Jonna-01', |
||||
nextEffect: 'fade' |
||||
}, |
||||
|
||||
'Jonna-01': { |
||||
data: { |
||||
title: 'Jonna Lee', |
||||
children: [{ |
||||
tag: 'img', |
||||
src: 'http://www.movieviral.com/wp-content/uploads/2010/03/jonnalee.jpg', |
||||
width: 400 |
||||
}], |
||||
ok: 'Next' |
||||
}, |
||||
next: 'Jonna-02', |
||||
nextEffect: '3d-flip[180,-180]' |
||||
}, |
||||
|
||||
'Jonna-02': { |
||||
data: { |
||||
title: 'Jonna Lee', |
||||
children: [{ |
||||
tag: 'img', |
||||
src: 'http://2020k.files.wordpress.com/2012/03/iamamiwhoami-good-worker.png', |
||||
width: 400 |
||||
}], |
||||
ok: 'Close', |
||||
cancel: 'Rewind' |
||||
}, |
||||
back: 'welcome' |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
|
||||
<!-- Background --> |
||||
<script> |
||||
(function () { |
||||
function setNoiseBackground(el, color, width, height, opacity) { |
||||
var canvas = document.createElement("canvas"); |
||||
var context = canvas.getContext("2d"); |
||||
|
||||
canvas.width = width; |
||||
canvas.height = height; |
||||
|
||||
for (var i = 0; i < width; i++) { |
||||
for (var j = 0; j < height; j++) { |
||||
var val = Math.floor(Math.random() * 255); |
||||
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")"; |
||||
context.fillRect(i, j, 1, 1); |
||||
} |
||||
} |
||||
|
||||
el.style.backgroundColor = color; |
||||
el.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")"; |
||||
} |
||||
|
||||
// Usage |
||||
setNoiseBackground(document.body, "trasparent", 50, 50, 0.02); |
||||
})(); |
||||
</script> |
||||
|
||||
<script> |
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
||||
|
||||
ga('create', 'UA-16483888-3', 'rubaxa.github.io'); |
||||
ga('send', 'pageview'); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,30 @@
|
||||
{ |
||||
"name": "ply", |
||||
"exportName": "Ply", |
||||
"version": "0.3.0", |
||||
"devDependencies": { |
||||
"grunt": "*", |
||||
"grunt-contrib-watch": "*", |
||||
"grunt-qunit-istanbul": "*", |
||||
"grunt-es6-transpiler": "*", |
||||
"grunt-contrib-uglify": "*" |
||||
}, |
||||
"description": "Ply — Amazing layer/modal/dialog system. Wow!", |
||||
"main": "Ply.js", |
||||
"scripts": { |
||||
"test": "grunt" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "git://github.com/rubaxa/Ply.git" |
||||
}, |
||||
"keywords": [ |
||||
"ply", |
||||
"layer", |
||||
"modal", |
||||
"dialog", |
||||
"lightbox" |
||||
], |
||||
"author": "Konstantin Lebedev <ibnRubaXa@gmail.com>", |
||||
"license": "MIT" |
||||
} |
||||
@ -0,0 +1,138 @@
|
||||
/* Loading */ |
||||
.ply-loading { |
||||
top: 50%; |
||||
left: 50%; |
||||
padding: 30px; |
||||
width: 60px; |
||||
height: 60px; |
||||
margin: -100px 0 0 -60px; |
||||
z-index: 100000; |
||||
position: fixed; |
||||
border-radius: 10%; |
||||
background-color: rgba(255,255,255,.5); |
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2); |
||||
} |
||||
|
||||
.ply-loading-spinner { |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: .9; |
||||
background: #fff; |
||||
border-radius: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
box-shadow: 0 1px 3px rgba(0,0,0,.6); |
||||
} |
||||
|
||||
.ply-loading-spinner::before { |
||||
content: ""; |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
background: #333; |
||||
max-height: 0; |
||||
-webkit-animation: loading 3s normal infinite; |
||||
animation: loading 3s normal infinite; |
||||
} |
||||
|
||||
@keyframes loading { |
||||
0% { max-height: 0; } |
||||
50% { max-height: 100%; top: 0; } |
||||
100% { max-height: 0; top: 120%; } |
||||
} |
||||
|
||||
@-webkit-keyframes loading { |
||||
0% { max-height: 0; } |
||||
50% { max-height: 100%; top: 0; } |
||||
100% { max-height: 0; top: 120%; } |
||||
} |
||||
|
||||
|
||||
/* Layer */ |
||||
.ply-layer { |
||||
color: #333; |
||||
min-width: 280px; |
||||
box-shadow: 0 0 3px rgba(0,0,0,.3); |
||||
background-color: #fff; |
||||
border-radius: 2px; |
||||
font-family: "Arial", Helvetica; |
||||
font-size: 16px; |
||||
} |
||||
.ply-layer.alert .ply-content, |
||||
.ply-layer.confirm .ply-content { |
||||
padding: 40px 30px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.ply-layer.alert .ply-footer, |
||||
.ply-layer.confirm .ply-footer, |
||||
.ply-layer.prompt .ply-footer { |
||||
text-align: center; |
||||
padding-bottom: 20px; |
||||
} |
||||
|
||||
|
||||
.ply-header { |
||||
padding: 10px 20px; |
||||
font-size: 18px; |
||||
background-color: #f1f1f1; |
||||
border-radius: 2px 2px 0 0; |
||||
} |
||||
|
||||
.ply-content { |
||||
padding: 20px; |
||||
} |
||||
|
||||
.ply-footer { |
||||
padding: 0 20px 15px; |
||||
} |
||||
.ply-footer button { |
||||
margin-left: 20px; |
||||
} |
||||
.ply-footer button:first-child { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
|
||||
/* Controls */ |
||||
.ply-ok, |
||||
.ply-cancel { |
||||
color: #fff; |
||||
cursor: pointer; |
||||
border: 0; |
||||
outline: 0; |
||||
padding: 5px 20px; |
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2); |
||||
background-color: #39C082; |
||||
border-radius: 3px; |
||||
font-size: 18px; |
||||
} |
||||
.ply-ok { |
||||
width: 100px; |
||||
} |
||||
|
||||
.ply-cancel { |
||||
background-color: #b2b2b2; |
||||
} |
||||
.ply-ok:focus, |
||||
.ply-cancel:focus { |
||||
box-shadow: 0 0 1px 2px rgba(255, 180, 0, .6); |
||||
} |
||||
|
||||
|
||||
/* Forms */ |
||||
.ply-input { |
||||
width: 100%; |
||||
border: 2px solid #ccc; |
||||
outline: 0; |
||||
padding: 5px 10px; |
||||
font-size: 16px; |
||||
font-family: "Arial", Helvetica; |
||||
box-sizing: border-box; |
||||
} |
||||
.ply-input:focus { |
||||
border-color: #39C082; |
||||
} |
||||
@ -0,0 +1,405 @@
|
||||
/*global define, Ply */ |
||||
((factory) => { |
||||
factory(Ply); |
||||
})((Ply) => { |
||||
'use strict'; |
||||
|
||||
|
||||
var _plyAttr = Ply.attrName, |
||||
noop = Ply.noop, |
||||
_each = Ply.each, |
||||
_extend = Ply.extend, |
||||
_promise = Ply.promise, |
||||
_buildDOM = Ply.dom.build, |
||||
_appendChild = Ply.dom.appendChild, |
||||
_lang = Ply.lang, |
||||
|
||||
_toBlock = (block, name) => { |
||||
if (block == null) { |
||||
return { skip: true }; |
||||
} |
||||
|
||||
if (typeof block === 'string') { |
||||
block = { text: block }; |
||||
} |
||||
|
||||
block.name = block.name || name; |
||||
|
||||
return block; |
||||
} |
||||
; |
||||
|
||||
|
||||
|
||||
/** |
||||
* Управление рендером UI |
||||
* @param {String} name |
||||
* @param {Object} [data] |
||||
* @param {String} [path] |
||||
* @returns {HTMLElement} |
||||
*/ |
||||
function ui(name, data, path) { |
||||
var fn = ui[name], el; |
||||
|
||||
if (!fn) { |
||||
name = name.split(/\s+/).slice(0, -1).join(' '); |
||||
fn = data && ( |
||||
ui[name + ' [name=' + data.name + ']'] |
||||
|| ui[name + ' [type=' + data.type + ']'] |
||||
) |
||||
|| ui[name + ' *'] |
||||
|| ui[':default']; |
||||
} |
||||
|
||||
el = _buildDOM(fn(data, path)); |
||||
if (data && data.name) { |
||||
el.setAttribute(_plyAttr + '-name', data.name); |
||||
} |
||||
el.className += ' ply-ui'; |
||||
|
||||
return el; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Назначение визуализатор |
||||
* @param {String} name имя фабрики |
||||
* @param {Function} renderer |
||||
* @param {Boolean} [simpleMode] |
||||
*/ |
||||
ui.factory = function (name, renderer, simpleMode) { |
||||
ui[name.trim().replace(/\s+/g, ' ')] = function (data, path) { |
||||
var fragment = document.createDocumentFragment(); |
||||
|
||||
if ((data != null) || name === ':root') { |
||||
data = simpleMode ? data : _toBlock(data); |
||||
|
||||
_each(simpleMode ? data : data.children, function (block, key) { |
||||
var abs = ((path || name) + ' ' + key).replace(/^:\w+\s+/, ''); |
||||
var el = ui(abs, _toBlock(block, key), abs); |
||||
|
||||
_appendChild(fragment, el); |
||||
}); |
||||
|
||||
if (!simpleMode) { |
||||
delete data.children; |
||||
} |
||||
|
||||
var result = renderer(data, fragment); |
||||
|
||||
/* istanbul ignore else */ |
||||
if (!result.appendChild) { |
||||
_extend(result, data); |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
|
||||
return fragment; |
||||
}; |
||||
}; |
||||
|
||||
|
||||
// Элемент по умолчанию |
||||
ui.factory(':default', (data, children) => { |
||||
data.children = children; |
||||
return data; |
||||
}); |
||||
|
||||
|
||||
// Ply-слой - корневой элемент |
||||
ui.factory(':root', function (data) { |
||||
return { |
||||
tag: 'form.ply-layer', |
||||
className: data.mod, |
||||
children: [ |
||||
ui(':header', data.header), |
||||
ui(':content', data.content), |
||||
data.ctrls && ui(':default', { |
||||
tag: 'div.ply-footer', |
||||
children: data.ctrls |
||||
}) |
||||
] |
||||
}; |
||||
}); |
||||
|
||||
|
||||
// «Заголовк» слоя |
||||
ui.factory(':header', function (data, children) { |
||||
return { tag: '.ply-header', text: data.text, children: children }; |
||||
}); |
||||
|
||||
|
||||
// «Содержимое» слоя |
||||
ui.factory(':content', function (data, children) { |
||||
return { tag: '.ply-content', children: children }; |
||||
}, true); |
||||
|
||||
|
||||
// Кнопка «ОК» |
||||
ui.factory('ok', function (data) { |
||||
return { |
||||
ply: ':ok', |
||||
tag: 'button.ply-ok', |
||||
text: data === true ? _lang.ok : data |
||||
}; |
||||
}); |
||||
|
||||
|
||||
// Кнопка «Отмена» |
||||
ui.factory('cancel', function (data) { |
||||
return { |
||||
ply: ':close', |
||||
tag: 'button.ply-cancel', |
||||
type: 'reset', |
||||
text: data === true ? _lang.cancel : data |
||||
}; |
||||
}); |
||||
|
||||
|
||||
/** |
||||
* Фабрика слоев |
||||
* @param {String} name |
||||
* @param {Function} renderer |
||||
*/ |
||||
function factory(name, renderer) { |
||||
factory['_' + name] = renderer; |
||||
|
||||
factory[name] = (options, data) => { |
||||
return _promise((resolve, reject) => { |
||||
renderer(options, data, resolve, reject); |
||||
}).then((el) => { |
||||
/* istanbul ignore else */ |
||||
if (!el.appendChild) { |
||||
el = ui(':root', el); |
||||
} |
||||
|
||||
return el; |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Использовать фабрику |
||||
* @param {String} name |
||||
* @param {Object} options |
||||
* @param {Object} data |
||||
* @param {Function} resolve |
||||
* @param {Function} [reject] |
||||
*/ |
||||
factory.use = (name, options, data, resolve, reject) => { |
||||
factory['_' + name](options, data, resolve, reject); |
||||
}; |
||||
|
||||
|
||||
/** |
||||
* Абстрактный диалог |
||||
* @param {String} mod |
||||
* @param {Object} options |
||||
* @param {Object} data |
||||
* @param {Object} defaults |
||||
* @returns {Object} |
||||
* @private |
||||
*/ |
||||
function _dialogFactory(mod, options, data, defaults) { |
||||
options.effect = options.effect || 'slide'; |
||||
|
||||
return { |
||||
mod: mod, |
||||
header: data.title, |
||||
content: data.form |
||||
? { 'dialog-form': { children: data.form } } |
||||
: { el: data.text || data }, |
||||
ctrls: { |
||||
ok: data.ok || defaults.ok, |
||||
cancel: data.cancel || defaults.cancel |
||||
} |
||||
}; |
||||
} |
||||
|
||||
|
||||
// Фабрика по умолчанию |
||||
factory('default', (options, data, resolve) => { |
||||
resolve(data || /* istanbul ignore next */ {}); |
||||
}); |
||||
|
||||
|
||||
// Диалог: «Предупреждение» |
||||
factory('alert', (options, data, resolve) => { |
||||
resolve(_dialogFactory('alert', options, data, { ok: true })); |
||||
}); |
||||
|
||||
|
||||
// Диалог: «Подтверждение» |
||||
factory('confirm', (options, data, resolve) => { |
||||
resolve(_dialogFactory('confirm', options, data, { |
||||
ok: true, |
||||
cancel: true |
||||
})); |
||||
}); |
||||
|
||||
|
||||
// Диалог: «Запросить данные» |
||||
factory('prompt', (options, data, resolve) => { |
||||
resolve(_dialogFactory('prompt', options, data, { |
||||
ok: true, |
||||
cancel: true |
||||
})); |
||||
}); |
||||
|
||||
|
||||
// Элемент формы |
||||
ui.factory('dialog-form *', (data) => { |
||||
return { |
||||
tag: 'input.ply-input', |
||||
name: data.name, |
||||
value: data.value, |
||||
required: true, |
||||
placeholder: data.hint || data.text |
||||
}; |
||||
}); |
||||
|
||||
|
||||
/** |
||||
* Создать Ply-слой на основе фабрики |
||||
* @param {String} name название фабрики |
||||
* @param {Object} [options] опции |
||||
* @param {Object} [data] данные для фабрики |
||||
* @returns {Promise} |
||||
*/ |
||||
Ply.create = (name, options, data) => { |
||||
if (!data) { |
||||
data = options; |
||||
options = {}; |
||||
} |
||||
|
||||
var renderer = (factory[name] || factory['default']); |
||||
return renderer(options, data).then((el) => { |
||||
return new Ply(_extend(options, { el: el })); |
||||
}); |
||||
}; |
||||
|
||||
|
||||
/** |
||||
* Открыть Ply-слой |
||||
* @param {String} name |
||||
* @param {Object} [options] |
||||
* @param {Object} [data] |
||||
* @returns {Promise} |
||||
*/ |
||||
Ply.open = (name, options, data) => { |
||||
return Ply.create(name, options, data).then((layer) => { |
||||
return layer.open(); |
||||
}); |
||||
}; |
||||
|
||||
|
||||
/** |
||||
* Создать диалог или систему диалогов |
||||
* @param {String|Object} name |
||||
* @param {Object} [options] |
||||
* @param {Object} [data] |
||||
* @returns {Promise} |
||||
*/ |
||||
Ply.dialog = (name, options, data) => { |
||||
if (name instanceof Object) { |
||||
options = options || /* istanbul ignore next */ {}; |
||||
|
||||
return _promise((resolve, reject) => { |
||||
var first = options.initState, |
||||
current, |
||||
rootLayer, |
||||
stack = name, |
||||
dialogs = {}, |
||||
|
||||
_progress = (ui, layer) => { |
||||
(options.progress || /* istanbul ignore next */ noop)(_extend({ |
||||
name: current.$name, |
||||
index: current.$index, |
||||
length: length, |
||||
stack: stack, |
||||
current: current, |
||||
layer: layer |
||||
}, ui), dialogs); |
||||
}, |
||||
|
||||
changeLayer = (spec, effect, callback) => { |
||||
// Клонирование данных |
||||
var data = JSON.parse(JSON.stringify(spec.data)); |
||||
|
||||
current = spec; |
||||
(spec.prepare || noop)(data, dialogs); |
||||
|
||||
Ply.create(spec.ui || 'alert', spec.options || {}, data).then((layer) => { |
||||
var promise; |
||||
|
||||
if (rootLayer) { |
||||
promise = rootLayer.swap(layer, effect); |
||||
} else { |
||||
promise = layer.open(); |
||||
rootLayer = layer; |
||||
} |
||||
|
||||
promise.then(() => { |
||||
dialogs[spec.$name].el = rootLayer.layerEl; |
||||
}); |
||||
|
||||
callback(layer); |
||||
}); |
||||
} |
||||
; |
||||
|
||||
|
||||
var length = 0; |
||||
_each(stack, (spec, key) => { |
||||
first = first || key; |
||||
spec.effects = spec.effects || {}; |
||||
spec.$name = key; |
||||
spec.$index = length++; |
||||
dialogs[key] = new Ply.Context(); |
||||
}); |
||||
stack.$length = length; |
||||
|
||||
|
||||
changeLayer(stack[first], null, (layer) => { |
||||
_progress({}, layer); |
||||
|
||||
//noinspection FunctionWithInconsistentReturnsJS |
||||
rootLayer.options.callback = (ui) => { |
||||
var isNext = ui.state || (current.back === 'next'), |
||||
swap = isNext ? stack[current.next] : stack[current.back] |
||||
; |
||||
|
||||
if (swap) { |
||||
changeLayer(swap, current[isNext ? 'nextEffect' : 'backEffect'], (layer) => { |
||||
_progress(ui, layer); |
||||
}); |
||||
|
||||
return false; |
||||
} else { |
||||
(ui.state ? resolve : /* istanbul ignore next */ reject)(ui, dialogs); |
||||
} |
||||
}; |
||||
}); |
||||
}); |
||||
} |
||||
else { |
||||
if (!data) { |
||||
data = options || {}; |
||||
options = {}; |
||||
} |
||||
|
||||
return Ply.open(name, options, data).then((layer) => { |
||||
return _promise((resolve) => { |
||||
layer.options.callback = resolve; |
||||
}); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
|
||||
// Export |
||||
Ply.ui = ui; |
||||
Ply.factory = factory; |
||||
}); |
||||
@ -0,0 +1,149 @@
|
||||
html { |
||||
background-color: #ac0; |
||||
} |
||||
|
||||
html, body { |
||||
height: 100%; |
||||
} |
||||
|
||||
.container { |
||||
margin: 0 auto; |
||||
width: 80%; |
||||
min-width: 600px; |
||||
max-width: 1200px; |
||||
} |
||||
|
||||
body, h1, h2 { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
h1, h2 { |
||||
color: #fff; |
||||
font-family: 'Lato', sans-serif; |
||||
font-weight: 300; |
||||
text-shadow: 0 1px 1px rgba(0,0,0,.2); |
||||
} |
||||
|
||||
|
||||
h1 { |
||||
text-shadow: 0 1px 3px rgba(0,0,0,.2); |
||||
font-size: 200px; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 50px; |
||||
} |
||||
h1 u { |
||||
cursor: pointer; |
||||
border-bottom: 8px dotted #fff; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 30px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
|
||||
.row { |
||||
margin-bottom: 30px; |
||||
} |
||||
.row:after { |
||||
clear: both; |
||||
content: ''; |
||||
display: block; |
||||
} |
||||
|
||||
.col-left { |
||||
float: left; |
||||
width: 35%; |
||||
padding: 0 20px; |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
.col-right { |
||||
float: left; |
||||
width: 55%; |
||||
margin-left: 5%; |
||||
} |
||||
|
||||
.example { |
||||
cursor: pointer; |
||||
opacity: 0.95; |
||||
position: relative; |
||||
} |
||||
.example:hover:after { |
||||
top: 50%; |
||||
left: 50%; |
||||
line-height: 0; |
||||
margin: -5px 0 0 -50px; |
||||
color: #333; |
||||
content: '►'; |
||||
font-size: 100px; |
||||
position: absolute; |
||||
display: block; |
||||
opacity: .7; |
||||
} |
||||
|
||||
.example:hover { |
||||
opacity: 1; |
||||
} |
||||
|
||||
pre code { |
||||
background-color: #fff; |
||||
box-shadow: 0 1px 1px rgba(0,0,0,.3); |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
/* Tomorrow Theme */ |
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ |
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */ |
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ |
||||
.tomorrow-comment, pre .comment, pre .title { |
||||
color: #8e908c; |
||||
} |
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { |
||||
color: #c82829; |
||||
} |
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { |
||||
color: #f5871f; |
||||
} |
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { |
||||
color: #eab700; |
||||
} |
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { |
||||
color: #718c00; |
||||
} |
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor { |
||||
color: #3e999f; |
||||
} |
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { |
||||
color: #4271ae; |
||||
} |
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function { |
||||
color: #8959a8; |
||||
} |
||||
|
||||
pre { |
||||
border: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
pre code { |
||||
display: block; |
||||
color: #4d4d4c; |
||||
font-size: 15px; |
||||
font-family: Menlo, Monaco, Consolas, monospace; |
||||
line-height: 1.5; |
||||
padding: 30px; |
||||
} |
||||
@ -0,0 +1,115 @@
|
||||
(function (Ply) { |
||||
module('Ply.dom'); |
||||
|
||||
|
||||
function elementEqual(actual, expected, msg) { |
||||
msg = msg || 'el'; |
||||
expected.tagName = (expected.tagName || 'div').toUpperCase(); |
||||
|
||||
Ply.each(expected, function (value, attr) { |
||||
equal(actual[attr] || actual.getAttribute(attr), value, msg + '.' + attr); |
||||
}); |
||||
} |
||||
|
||||
|
||||
test('build()', function () { |
||||
elementEqual(Ply.dom.build(), { }); |
||||
}); |
||||
|
||||
|
||||
test('build("string")', function () { |
||||
Ply.each({ |
||||
'div': { }, |
||||
'div#xxx': { id: 'xxx' }, |
||||
'div.foo': { className: ' foo' }, |
||||
'div#xxx.foo': { id: 'xxx', className: ' foo' }, |
||||
'b.foo.bar': { tagName: 'B', className: ' foo bar' }, |
||||
'span#xxx.foo.bar': { tagName: 'SPAN', id: 'xxx', className: ' foo bar' }, |
||||
'#xxx': { id: 'xxx' }, |
||||
'#xxx.foo': { id: 'xxx', className: ' foo' }, |
||||
'#xxx.foo.bar': { id: 'xxx', className: ' foo bar' } |
||||
}, function (data, selector) { |
||||
elementEqual(Ply.dom.build(selector), data, selector); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
test('build({ })', function () { |
||||
elementEqual(Ply.dom.build({ |
||||
id: 'baz', |
||||
tag: 'input.foo', |
||||
className: 'bar', |
||||
ply: 'baz', |
||||
'data-prop': 'qux' |
||||
}), { |
||||
id: 'baz', |
||||
tagName: 'INPUT', |
||||
className: 'bar foo', |
||||
'data-ply': 'baz', |
||||
'data-prop': 'qux' |
||||
}, '{}'); |
||||
|
||||
elementEqual(Ply.dom.build({ text: '<b>foo</b>' }), { innerHTML: '<b>foo</b>' }, 'text'); |
||||
elementEqual(Ply.dom.build({ html: '<b>bar</b>' }), { innerHTML: '<b>bar</b>' }, 'html'); |
||||
}); |
||||
|
||||
|
||||
test('build(element)', function () { |
||||
var el = Ply.dom.build(Ply.dom.build('b.foo')); |
||||
elementEqual(el, { tagName: 'b', className: ' foo' }); |
||||
}); |
||||
|
||||
|
||||
test('build({ children: {} })', function () { |
||||
var el = Ply.dom.build({ |
||||
tag: 'form', |
||||
children: { |
||||
'input': { |
||||
type: 'password' |
||||
}, |
||||
'hr': true, |
||||
'br': false, |
||||
'button': 'Enter' |
||||
} |
||||
}); |
||||
|
||||
equal(el.childNodes.length, 3); |
||||
|
||||
elementEqual(el, { tagName: 'form' }); |
||||
elementEqual(el.childNodes[0], { tagName: 'input', type: 'password' }); |
||||
elementEqual(el.childNodes[1], { tagName: 'hr' }); |
||||
elementEqual(el.childNodes[2], { tagName: 'button', innerHTML: 'Enter' }); |
||||
}); |
||||
|
||||
|
||||
test('build({ children: [] })', function () { |
||||
var el = Ply.dom.build({ |
||||
tag: 'form', |
||||
children: [ |
||||
{ |
||||
tag: 'input', |
||||
type: 'checkbox', |
||||
disabled: true |
||||
}, |
||||
{ tag: 'hr', skip: true }, |
||||
false && { tag: bar }, |
||||
{ tag: 'button', text: "Enter" } |
||||
] |
||||
}); |
||||
|
||||
equal(el.childNodes.length, 2); |
||||
|
||||
elementEqual(el, { tagName: 'form' }); |
||||
elementEqual(el.childNodes[0], { tagName: 'input', type: 'checkbox', disabled: true }); |
||||
elementEqual(el.childNodes[1], { tagName: 'button', innerHTML: 'Enter' }); |
||||
}); |
||||
|
||||
|
||||
test('build({ children: el })', function () { |
||||
var el = Ply.dom.build({ |
||||
children: Ply.dom.build({ tag: 'b', text: '!' }) |
||||
}); |
||||
|
||||
elementEqual(el, { innerHTML: '<b>!</b>' }); |
||||
}); |
||||
})(Ply); |
||||
@ -0,0 +1,237 @@
|
||||
(function (Ply) { |
||||
module('Ply.effects'); |
||||
|
||||
|
||||
test('core', function () { |
||||
Ply.effects.defaults = { duration: 300, open: {}, close: {} }; |
||||
|
||||
|
||||
deepEqual(Ply.effects.get(), { |
||||
open: { |
||||
layer: { duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}, 'def'); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get(['fade-in', 'fade-out']), { |
||||
open: { |
||||
layer: { name: 'fade-in', duration: 300 }, |
||||
overlay: { name: 'fade-in', duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'fade-out', duration: 300 }, |
||||
overlay: { name: 'fade-out', duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}, "['fade-in', 'fade-out']"); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get(['fade-in', 'fade-out:100']), { |
||||
open: { |
||||
layer: { name: 'fade-in', duration: 300 }, |
||||
overlay: { name: 'fade-in', duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'fade-out', duration: 100 }, |
||||
overlay: { name: 'fade-out', duration: 100 } |
||||
}, |
||||
duration: 300 |
||||
}, "['fade-in', 'fade-out:100']"); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get('fade:100'), { |
||||
open: { |
||||
layer: { name: 'fade-in', duration: 100 * 0.8 }, |
||||
overlay: { name: 'fade-in', duration: 100 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'fade-out', duration: 100 * 0.6 }, |
||||
overlay: { name: 'fade-out', duration: 100 * 0.6 } |
||||
}, |
||||
duration: 100 |
||||
}, 'fade:100'); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get({ |
||||
open: 'slide-in', |
||||
close: 'slide-out' |
||||
}), { |
||||
open: { |
||||
layer: { name: 'slide-in', duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'slide-out', duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}, 'slide-in-out'); |
||||
|
||||
|
||||
|
||||
Ply.effects.setup({ open: 'fade-in' }); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get(), { |
||||
open: { |
||||
layer: { name: 'fade-in', duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}, 'open.fade-in'); |
||||
|
||||
|
||||
Ply.effects.setup({ open: { overlay: 'fade-in' } }); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get({ |
||||
open: 'slide-in', |
||||
close: 'slide-out' |
||||
}), { |
||||
open: { |
||||
layer: { name: 'slide-in', duration: 300 }, |
||||
overlay: { name: 'fade-in', duration: 300 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'slide-out', duration: 300 }, |
||||
overlay: { duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}); |
||||
|
||||
|
||||
Ply.effects.setup('fade:400'); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get({ |
||||
open: 'slide-in', |
||||
close: 'slide-out' |
||||
}), { |
||||
open: { |
||||
layer: { name: 'slide-in', duration: 400 }, |
||||
overlay: { name: 'fade-in', duration: 400 } |
||||
}, |
||||
close: { |
||||
layer: { name: 'slide-out', duration: 400 }, |
||||
overlay: { name: 'fade-out', duration: 400 * 0.6 } |
||||
}, |
||||
duration: 400 |
||||
}, 'fade:400'); |
||||
}); |
||||
|
||||
|
||||
test('effects:args', function () { |
||||
Ply.effects.defaults = { duration: 300, open: {}, close: {} }; |
||||
|
||||
deepEqual(Ply.effects.get('scale[0.5,0.3]'), { |
||||
open: { |
||||
args: 0.5, |
||||
layer: { name: 'scale-in', duration: 300 }, |
||||
overlay: { name: 'fade-in', duration: 300 } |
||||
}, |
||||
close: { |
||||
args: 0.3, |
||||
layer: { name: 'scale-out', duration: 300 }, |
||||
overlay: { name: 'fade-out', duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}); |
||||
|
||||
|
||||
deepEqual(Ply.effects.get(['scale["foo"]', 'fall[{"bar":"baz"}]']), { |
||||
open: { |
||||
args: 'foo', |
||||
layer: { name: 'scale-in', duration: 300 }, |
||||
overlay: { name: 'fade-in', duration: 300 } |
||||
}, |
||||
close: { |
||||
args: {bar:'baz'}, |
||||
layer: { name: 'fall-out', duration: 300 }, |
||||
overlay: { name: 'fade-out', duration: 300 } |
||||
}, |
||||
duration: 300 |
||||
}); |
||||
}); |
||||
|
||||
|
||||
test('stress', function () { |
||||
try { |
||||
Ply.effects.get(null); |
||||
Ply.effects.get(void 0); |
||||
Ply.effects.get(Math.random()); |
||||
Ply.effects.get('---'); |
||||
Ply.effects.get(123); |
||||
Ply.effects.get('\n'); |
||||
Ply.effects.get([null, null]); |
||||
Ply.effects.get([void 0, void 0]); |
||||
Ply.effects.get(['\n', '\t']); |
||||
ok(true); |
||||
} catch (err) { |
||||
equal([err, err.stack], null); |
||||
} |
||||
}); |
||||
|
||||
|
||||
promiseTest('fade', function () { |
||||
var log = { open: [], close: [] }, |
||||
type = 'open', |
||||
pid, i, |
||||
layer = new Ply({ effect: 'fade' }) |
||||
; |
||||
|
||||
pid = setInterval(function () { |
||||
log[type].push( parseFloat(Ply.css(layer.overlayEl, 'opacity')) ); |
||||
}, 50); |
||||
|
||||
return layer.open().then(function () { |
||||
type = 'close'; |
||||
return layer.close(); |
||||
}).then(function () { |
||||
ok(log.open.length > 2, 'open'); |
||||
ok(log.close.length > 2, 'close'); |
||||
|
||||
for (i = 1; i < log.open.length; i++) { |
||||
if (log.open[i] < log.open[i-1]) { |
||||
equal(log.open, null, 'open: ' + i); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
for (i = 1; i < log.close.length; i++) { |
||||
if (log.close[i] > log.close[i-1]) { |
||||
equal(log.close, null, 'close: ' + i); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
clearInterval(pid); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('other', function () { |
||||
expect(0); |
||||
|
||||
var queue = Ply.promise(function (resolve) { resolve() }); |
||||
|
||||
Ply.each('scale fall slide 3d-flip 3d-sign'.split(' '), function (name) { |
||||
queue = queue.then(function () { |
||||
return new Ply({ effect: name + ':50' }).open().then(function (layer) { |
||||
return layer.close(); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
return queue; |
||||
}); |
||||
})(Ply); |
||||
@ -0,0 +1,250 @@
|
||||
(function () { |
||||
module('Ply'); |
||||
|
||||
var layer; |
||||
|
||||
test('core', function () { |
||||
equal(typeof Ply, 'function'); |
||||
ok(new Ply instanceof Ply); |
||||
}); |
||||
|
||||
|
||||
function sleep(fn, ms) { |
||||
return Ply.promise(function (resolve) { |
||||
setTimeout(function () { |
||||
fn(); |
||||
resolve(); |
||||
}, ms); |
||||
}); |
||||
} |
||||
|
||||
|
||||
function checkVisiblity(layer, state, msg) { |
||||
equal(!!layer.visible, state, '[' + msg + '] visible: ' + state); |
||||
equal(!!layer.wrapEl.parentNode, state, msg + ' -> parentNode is ' + (state ? '' : 'not') + 'exists'); |
||||
} |
||||
|
||||
|
||||
test('options', function () { |
||||
layer = new Ply(); |
||||
|
||||
for (var key in Ply.defaults.overlay) { |
||||
equal(layer.overlayEl.style[key], Ply.defaults.overlay[key], key); |
||||
} |
||||
equal(layer.bodyEl, document.body, 'body'); |
||||
|
||||
// Body
|
||||
layer = new Ply({ body: '#playground' }); |
||||
equal(layer.bodyEl, playground, '#playground'); |
||||
|
||||
// Overlay 1
|
||||
layer = new Ply({ overlay: { opacity: 1 } }); |
||||
equal(layer.overlayEl.style.opacity, 1, 'opacity: 1'); |
||||
equal(layer.overlayEl.style.backgroundColor, "", 'backgroundColor: ""'); |
||||
|
||||
// Overlay 2
|
||||
layer = new Ply({ overlay: { opacity: 1, backgroundColor: 'rgb(255, 0, 0)' } }); |
||||
equal(layer.overlayEl.style.opacity, 1, 'opacity: 1'); |
||||
equal(layer.overlayEl.style.backgroundColor, 'rgb(255, 0, 0)', 'backgroundColor: red'); |
||||
|
||||
// Overlay 3
|
||||
layer = new Ply({ overlay: null }); |
||||
notEqual(layer.overlayEl.style.position, 'fixed', 'overlay: null'); |
||||
|
||||
// Layer
|
||||
layer = new Ply({ layer: { textAlign: 'center' } }); |
||||
equal(layer.contentEl.style.textAlign, 'center', 'textAlign: center'); |
||||
}); |
||||
|
||||
|
||||
test('flags', function () { |
||||
layer = new Ply(); |
||||
for (var key in Ply.defaults.flags) { |
||||
equal(layer.options.flags[key], Ply.defaults.flags[key], key); |
||||
} |
||||
|
||||
|
||||
layer = new Ply({ flags: { bodyScroll: true } }); |
||||
for (var key in Ply.defaults.flags) { |
||||
equal(layer.options.flags[key], key == 'bodyScroll' ? true : Ply.defaults.flags[key], key); |
||||
} |
||||
}); |
||||
|
||||
|
||||
test('content', function () { |
||||
var content = document.createElement('b'); |
||||
content.innerHTML = '!'; |
||||
|
||||
equal(new Ply().contentEl.innerHTML, ''); |
||||
equal(new Ply({ el: 'Wow!' }).contentEl.innerHTML, 'Wow!'); |
||||
equal(new Ply({ el: content }).layerEl.innerHTML, '<b>!</b>'); |
||||
}); |
||||
|
||||
|
||||
promiseTest('open/close', function () { |
||||
layer = new Ply({ el: 'Wow!' }); |
||||
|
||||
ok(!layer.wrapEl.parentNode, '!parent - open'); |
||||
ok(!layer.visible, 'visible: false'); |
||||
|
||||
return layer.open().then(function () { |
||||
var ratio = layer.wrapEl.offsetHeight / (layer.layerEl.offsetTop + layer.layerEl.offsetHeight/2); |
||||
|
||||
ok(layer.visible, 'visible: true'); |
||||
ok(layer.wrapEl.offsetWidth > 0, 'offsetWidth > 0'); |
||||
ok(Math.abs(2 - ratio) < 0.1, ratio, 'delat(' + ratio + ') < 0.1'); |
||||
|
||||
layer.close().then(function () { |
||||
ok(!layer.visible, 'visible: false - close'); |
||||
ok(!layer.wrapEl.parentNode, '!parent - close'); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('closeByEsc', function () { |
||||
function open(msg, esc) { |
||||
var layer = new Ply({ flags: { closeByEsc: esc }, effect: { duration: 1 } }); |
||||
|
||||
checkVisiblity(layer, false, msg); |
||||
|
||||
return layer.open().then(function () { |
||||
checkVisiblity(layer, true, msg); |
||||
return layer; |
||||
}); |
||||
} |
||||
|
||||
|
||||
return open('1. esc: true', true).then(function (escTrue) { |
||||
return open('2. esc: false', false).then(function (escFalse) { |
||||
simulateEvent(document, 'keyup', { keyCode: Ply.keys.esc }); |
||||
|
||||
checkVisiblity(escTrue, true, '3. esc: true'); |
||||
checkVisiblity(escFalse, true, '4. esc: false'); |
||||
|
||||
return escFalse.close().then(function () { |
||||
checkVisiblity(escTrue, true, '5. esc: true'); |
||||
checkVisiblity(escFalse, false, '6. esc: false'); |
||||
|
||||
simulateEvent(document, 'keyup', { keyCode: Ply.keys.esc }); |
||||
|
||||
return sleep(function () { |
||||
checkVisiblity(escTrue, false, '7. esc: true'); |
||||
checkVisiblity(escFalse, false, '8. esc: false'); |
||||
}, 50); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('closeByOverlay', function () { |
||||
function test(msg, state, callback) { |
||||
var layer = new Ply({ flags: { closeByOverlay: state }, effect: { duration: 1 } }); |
||||
return layer.open().then(function () { |
||||
checkVisiblity(layer, true, msg); |
||||
simulateEvent(layer.overlayEl, 'click'); |
||||
|
||||
return sleep(function () { |
||||
callback(layer, msg); |
||||
}, 50); |
||||
}); |
||||
} |
||||
|
||||
|
||||
return test('closeByOverlay: true', true, function (layer, msg) { |
||||
checkVisiblity(layer, false, msg); |
||||
|
||||
return test('closeByOverlay: false', false, function (layer, msg) { |
||||
checkVisiblity(layer, true, msg); |
||||
return layer.close(); |
||||
}); |
||||
}) |
||||
}); |
||||
|
||||
|
||||
promiseTest('swap', function () { |
||||
return new Ply({ el: 1, effect: 'none:1' }).open().then(function (layer) { |
||||
return layer.swap({ el: 2 }).then(function () { |
||||
equal(layer.contentEl.innerHTML, 2); |
||||
|
||||
return layer.close().then(function () { |
||||
return layer.swap({ el: 3 }, 'none:2').then(function () { |
||||
equal(layer.contentEl.innerHTML, 3); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('destory', function () { |
||||
return new Ply({ effect: 'none:1' }).open().then(function (layer) { |
||||
checkVisiblity(layer, true, '#1'); |
||||
|
||||
layer.destroy(); |
||||
|
||||
checkVisiblity(layer, false, '#2'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('on/off', function () { |
||||
var log = [], |
||||
logMe = function (prefix, evt, el) { |
||||
log.push(prefix + ':' + el.tagName + '.' + evt.type + '->' + el.getAttribute('data-ply')); |
||||
}, |
||||
barHandle = function (evt, el) { |
||||
log.pop(); |
||||
logMe('bar', evt, el); |
||||
} |
||||
; |
||||
|
||||
return new Ply({ el: '<i data-ply="foo"><em>foo</em></i><b data-ply="bar"><em>bar</em></b>' }).open().then(function (layer) { |
||||
layer.on('click', function (evt, el) { |
||||
logMe('layer', evt, el); |
||||
}); |
||||
|
||||
layer.on('click', 'foo', function (evt, el) { |
||||
logMe('foo', evt, el); |
||||
}); |
||||
|
||||
layer.on('click', 'bar', barHandle); |
||||
|
||||
simulateEvent(layer.contentEl.getElementsByTagName('em')[0], 'click'); |
||||
simulateEvent(layer.contentEl.getElementsByTagName('em')[1], 'click'); |
||||
|
||||
layer.off('click', barHandle); |
||||
|
||||
simulateEvent(layer.contentEl.getElementsByTagName('em')[1], 'click'); |
||||
|
||||
layer.off('click', 'bar', barHandle); |
||||
|
||||
simulateEvent(layer.contentEl.getElementsByTagName('em')[1], 'click'); |
||||
|
||||
equal(log.join('\n'), [ |
||||
'layer:DIV.click->layer', |
||||
'foo:I.click->foo', |
||||
'bar:B.click->bar', |
||||
'bar:B.click->bar', |
||||
'layer:DIV.click->layer' |
||||
].join('\n')); |
||||
|
||||
return layer.close(); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
// if (/state=2/.test(location)) {
|
||||
// promiseTest('Promise', function () {
|
||||
// expect(0);
|
||||
//
|
||||
// return Ply.promise(function (resolve) {
|
||||
// window.resolveTest = function () {
|
||||
// resolve();
|
||||
// };
|
||||
// document.write('<iframe src="?state=2"></iframe>');
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
})(); |
||||
@ -0,0 +1,131 @@
|
||||
(function (Ply) { |
||||
module('Ply.ui'); |
||||
|
||||
|
||||
promiseTest('dialog("unknown")', function () { |
||||
setTimeout(function () { |
||||
simulateEvent(Ply.stack.last.overlayEl, 'click'); |
||||
}, 50); |
||||
|
||||
return Ply.dialog('unknown').then(function (ui) { |
||||
equal(ui.by, 'overlay', 'ui.by'); |
||||
equal(ui.state, false, 'ui.state'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('dialog("alert")', function () { |
||||
setTimeout(function () { |
||||
var el = Ply.stack.last.wrapEl; |
||||
simulateEvent(el.getElementsByTagName('button')[0], 'click'); |
||||
}, 50); |
||||
|
||||
return Ply.dialog('alert', { effect: 'none:1' }, 'msg').then(function (ui) { |
||||
equal(ui.by, 'submit', 'ui.by'); |
||||
equal(ui.state, true, 'ui.state'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('dialog("confirm")', function () { |
||||
setTimeout(function () { |
||||
var el = Ply.stack.last.wrapEl; |
||||
simulateEvent(el.getElementsByTagName('button')[1], 'click'); |
||||
}, 50); |
||||
|
||||
return Ply.dialog('confirm', { effect: 'none:1' }, { |
||||
title: "???", |
||||
text: "!!!" |
||||
}).then(function (ui) { |
||||
equal(ui.by, 'cancel', 'ui.by'); |
||||
equal(ui.state, false, 'ui.state'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('dialog("prompt")', function () { |
||||
setTimeout(function () { |
||||
var el = Ply.stack.last.wrapEl; |
||||
Ply.stack.last.context.val('email', 'xx@yy.zz'); |
||||
simulateEvent(el.getElementsByTagName('button')[0], 'click'); |
||||
}, 50); |
||||
|
||||
return Ply.dialog('prompt', { effect: 'none:1' }, { |
||||
title: "???", |
||||
form: { email: "E-mail" } |
||||
}).then(function (ui) { |
||||
equal(ui.by, 'submit', 'ui.by'); |
||||
equal(ui.state, true, 'ui.state'); |
||||
equal(ui.context.val('email'), 'xx@yy.zz'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('dialog("confirm") with YES/NO', function () { |
||||
setTimeout(function () { |
||||
var el = Ply.stack.last.wrapEl; |
||||
simulateEvent(el.getElementsByTagName('button')[0], 'click'); |
||||
}, 50); |
||||
|
||||
return Ply.dialog("confirm", { effect: 'none:1' }, { ok: 'YES', cancel: 'NO' }).then(function (ui) { |
||||
equal(ui.layer.layerEl.getElementsByTagName('button')[0].innerHTML, 'YES', 'ok'); |
||||
equal(ui.layer.layerEl.getElementsByTagName('button')[1].innerHTML, 'NO', 'cancel'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('dialog({ steps })', function () { |
||||
var log = []; |
||||
|
||||
return Ply.dialog({ |
||||
'foo': { |
||||
data: { text: 'foo' }, |
||||
options: { effect: 'none:1' }, |
||||
prepare: function (data) { |
||||
data.text += '!'; |
||||
}, |
||||
next: 'baz' |
||||
}, |
||||
'bar': { |
||||
data: { text: 'bar' } |
||||
}, |
||||
'baz': { |
||||
ui: 'confirm', |
||||
data: { text: 'baz' }, |
||||
back: 'bar' |
||||
} |
||||
}, { |
||||
progress: function (ui) { |
||||
log.push(ui.name + ':' + ui.state); |
||||
|
||||
setTimeout(function () { |
||||
simulateEvent( |
||||
ui.layer.layerEl.getElementsByTagName('button')[1] |
||||
|| ui.layer.layerEl.getElementsByTagName('button')[0], |
||||
'click'); |
||||
}, 10); |
||||
} |
||||
}).then(function () { |
||||
equal(log.join('\n'), [ |
||||
'foo:undefined', |
||||
'baz:true', |
||||
'bar:false' |
||||
].join('\n')); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
promiseTest('factory.use()', function () { |
||||
Ply.factory('test', function (options, data, resolve) { |
||||
Ply.factory.use('alert', options, { |
||||
text: '!?', |
||||
ok: 'Y' |
||||
}, resolve); |
||||
}); |
||||
|
||||
return Ply.create("test").then(function (layer) { |
||||
equal(layer.context.getEl('el').innerHTML, '!?'); |
||||
equal(layer.layerEl.getElementsByTagName('button')[0].innerHTML, 'Y'); |
||||
}); |
||||
}); |
||||
})(Ply); |
||||
@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html> |
||||
<html xmlns="http://www.w3.org/1999/html"> |
||||
<head> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
|
||||
<title>Ply :: Tests</title> |
||||
|
||||
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
||||
<script src="http://code.jquery.com/qunit/qunit-git.js"></script> |
||||
<link href="http://code.jquery.com/qunit/qunit-git.css" rel="stylesheet"/--> |
||||
|
||||
<script> |
||||
if (!window.jQuery) { |
||||
document.write('<script src="http://local.git/js/jquery.dev.js"><' + '/script>'); |
||||
document.write('<script src="http://local.git/js/qunit/qunit.js"><' + '/script>'); |
||||
document.write('<link href="http://local.git/js/qunit/qunit.css" rel="stylesheet"/>'); |
||||
} |
||||
|
||||
if (/state=2/.test(location)) { |
||||
// document.write('<script src="http://local.git/JSSDK/Promise/Promise.js"><' + '/script>'); |
||||
} |
||||
</script> |
||||
|
||||
<script> |
||||
(function () { |
||||
var defaultOptions = { |
||||
x: 0, |
||||
y: 0, |
||||
button: 0, |
||||
ctrlKey: false, |
||||
altKey: false, |
||||
shiftKey: false, |
||||
metaKey: false, |
||||
bubbles: true, |
||||
cancelable: true |
||||
}; |
||||
|
||||
|
||||
var eventMatchers = { |
||||
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|input|keydown|keyup|blur|resize|scroll)$/, |
||||
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/ |
||||
}; |
||||
|
||||
|
||||
window.isPhantomJS = /phantomjs/i.test(navigator.userAgent); |
||||
|
||||
window.simulateEvent = function (element, eventName, opts) { |
||||
var options = $.extend({}, defaultOptions, opts || {}); |
||||
var oEvent, eventType = null; |
||||
|
||||
for (var name in eventMatchers) { |
||||
if (eventMatchers[name].test(eventName)) { |
||||
eventType = name; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if (!eventType) { |
||||
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported'); |
||||
} |
||||
|
||||
if (document.createEvent) { |
||||
oEvent = document.createEvent(eventType); |
||||
if (eventType == 'HTMLEvents') { |
||||
oEvent.initEvent(eventName, options.bubbles, options.cancelable); |
||||
} |
||||
else { |
||||
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, window, |
||||
options.button, options.x, options.y, options.x, options.y, |
||||
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element); |
||||
} |
||||
$.extend(oEvent, options); |
||||
element.dispatchEvent(oEvent); |
||||
} |
||||
else { |
||||
options.clientX = options.x; |
||||
options.clientY = options.y; |
||||
var evt = document.createEventObject(); |
||||
oEvent = $.extend(evt, options); |
||||
element.fireEvent('on' + eventName, oEvent); |
||||
} |
||||
return element; |
||||
}; |
||||
|
||||
|
||||
window.promiseTest = function (name, promise) { |
||||
asyncTest(name, function () { |
||||
promise().then(function () { |
||||
start(); |
||||
}, function (err) { |
||||
equal([err, err.stack], null, 'fail'); |
||||
start(); |
||||
}); |
||||
}); |
||||
}; |
||||
})(); |
||||
</script> |
||||
|
||||
</head> |
||||
</body> |
||||
|
||||
<h1 id="qunit-header">Ply :: tests</h1> |
||||
<h2 id="qunit-banner"></h2> |
||||
<div id="qunit-testrunner-toolbar"></div> |
||||
<h2 id="qunit-userAgent"></h2> |
||||
<ol id="qunit-tests"></ol> |
||||
<div id="playground"></div> |
||||
|
||||
|
||||
<!-- lib:css --> |
||||
<link href="../ply.css" rel="stylesheet"/> |
||||
|
||||
<!-- lib:src --> |
||||
<script src="../Ply.js"></script> |
||||
<script src="../Ply.ui.js"></script> |
||||
|
||||
<!-- lib:tests --> |
||||
<script src="./Ply.tests.js"></script> |
||||
<script src="./Ply.dom.tests.js"></script> |
||||
<script src="./Ply.effects.tests.js"></script> |
||||
<script src="./Ply.ui.tests.js"></script> |
||||
|
||||
<script> |
||||
if (parent.resolveTest) { |
||||
test('end', function () { |
||||
expect(0); |
||||
parent.resolveTest(); |
||||
}); |
||||
} |
||||
</script> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue