patapata
Version:
Animation of dom, flipping its sections for showing and hiding the whole
233 lines (185 loc) • 6.35 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js">
(function ($) {
'use strict';
var defaultUnitDur = 400;
var defaultBgcolor = '#393F44';
var defaultChipClass = 'chipClass';
var flipTransform = 'rotate3d(1, -1, 0, -180deg)';
var wait = function (n) {
return new Promise(function (resolve) {
setTimeout(resolve, n);
});
};
<span id='InfoPane'> /**
</span> * InfoPane class handles the behaviours of info panes.
*
* @class InfoPane
*/
var InfoPane = function ($dom, m, n, width, height, unitDur, bgcolor, chipClass) {
this.$dom = $dom;
this.$content = $('*', $dom);
this.w = width || $dom.width();
this.h = height || $dom.height();
if (!this.w) {
console.log('error: dom width unavailable');
return null;
}
if (!this.h) {
console.log('error: dom width unavailable');
return null;
}
this.m = m;
this.n = n;
this.uw = this.w / m;
this.uh = this.h / n;
this.unitDur = unitDur;
this.diffDur = unitDur / (m + n);
this.bgcolor = bgcolor;
this.chipClass = chipClass || defaultChipClass;
};
var ipPt = InfoPane.prototype;
<span id='InfoPane-method-init'> /**
</span> * Initializes the info pane.
*
* @method init
* @private
*/
ipPt.init = function () {
this.$dom.width(this.w).height(this.h);
this.$content.css({opacity: 0, transitionDuration: this.unitDur + 'ms'});
this.chipGroups = [];
for (var i = 0; i < this.m; i++) {
for (var j = 0; j < this.n; j ++) {
var chip = this.createChip(i * this.uw, j * this.uh, this.uw, this.uh)
.prependTo(this.$dom).addClass(this.chipClass);
var group = i + j;
(this.chipGroups[group] = this.chipGroups[group] || []).push(chip);
}
}
return this;
};
<span id='InfoPane-method-createChip'> /**
</span> * Creates the pane's chip
*
* @method createChip
* @param {Number} left The left offset
* @param {Number} top The top offset
* @param {Number} w The width
* @param {Number} h The height
* @private
*/
ipPt.createChip = function (left, top, w, h) {
return $('<div />').css({
position: 'absolute',
left: left + 'px',
top: top + 'px',
width: w + 'px',
height: h + 'px',
backgroundColor: this.bgcolor,
transitionDuration: this.unitDur + 'ms',
transform: flipTransform,
backfaceVisibility: 'hidden'
});
};
<span id='InfoPane-method-show'> /**
</span> * Shows info pane.
*
* @method show
* @return {Promise}
*/
ipPt.show = function () {
this.init();
var that = this;
var p = wait();
this.chipGroups.forEach(function (group) {
p = p.then(function () {
group.forEach(function (chip) {
chip.css('transform', '');
});
return wait(that.diffDur);
});
});
return p.then(function () {
return wait(that.unitDur / 2);
}).then(function () {
that.$content.css('opacity', 1);
return wait(that.unitDur);
}).then(function () {
return that;
});
};
<span id='InfoPane-method-hide'> /**
</span> * Hides info pane.
*
* @method hide
* @return {Promise}
*/
ipPt.hide = function () {
var that = this;
this.$content.css('opacity', 0);
var p = wait(that.unitDur);
this.chipGroups.forEach(function (group) {
p = p.then(function () {
group.forEach(function (chip) {
chip.css('transform', flipTransform);
});
return wait(that.diffDur);
});
});
return p.then(function () {
wait(that.unitDur);
}).then(function () {
return that;
});
};
<span id='jQuery'> /**
</span> * @class jQuery
*/
<span id='jQuery-method-infoPane'> /**
</span> * Creates info pane.
*
* $('.main').infoPane(8, 4, {unitDur: 400}).show().then(function (ip) {
* ip.$dom.click(function () {
* ip.hide();
* });
* });
*
* @method infoPane
* @param {Number} n The horizontal partition number
* @param {Number} m The vertical partition number
* @param {Object} [opts] The options
* @param {Number} [opts.width=this.width()] The pane's width
* @param {Number} [opts.height=this.height()] The pane's height
* @param {Number} [opts.unitDur=400] The unit duration of flip of small chip inside the pane
* @param {String} [opts.bgcolor='#393F44'] The background color of the pane
* @param {Number} [opts.zIndex=undefined] The z-index of the pane
* @return {InfoPane} InfoPane object
*
*/
$.fn.infoPane = function (n, m, opts) {
opts = opts || {};
var ip = new InfoPane(this, n, m, opts.width, opts.height, opts.unitDur || defaultUnitDur, opts.bgcolor || defaultBgcolor, opts.zIndex);
return ip;
};
$.fn.patapata = $.fn.infoPane;
}(window.jQuery));
</pre>
</body>
</html>