Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function E(id) {return document.getElementById(id)}
- var swStep = 10, swInt = 10;
- function Menu(name, swipe) {
- // --- Class to make a swipy menu. The menu elements must be in the following format:
- // <div class="wrap"><div class="menu" id="menu_M">[content]</div></div>
- // where M is the menu name
- // swipe should be either "left" to swipe to the left or "down" to swipe downwards
- // CSS needed:
- // div.wrap {position: absolute; overflow: hidden; visibility: hidden;}
- // div.wrap div.menu {position: relative; visibility: visible }
- this.name = name;
- this.el = E('menu_' + name);
- this.opened = false;
- this.stage = 0;
- this.maxOp = .9; // opacity of menu when it is fully revealed
- this.swipe = swipe
- this.animate = function(action) {
- var t = this, opening = action == 'open', closing = action == 'close';
- if (this.ti != undefined) {
- clearInterval(this.ti);
- }
- this.ti = setInterval(function() {
- if (opening) t.stage += swStep;
- if (closing) t.stage -= swStep;
- if ((opening && t.stage >= 100) || (closing && t.stage <= 0)) {
- clearInterval(t.ti);
- t.ti = undefined;
- t.stage = opening ? 100 : 0;
- }
- t.draw();
- }, swInt);
- }
- this.draw = function() {
- if (this.swipe == 'left') {
- this.el.style.left = 100 - this.stage + '%';
- }
- else if (this.swipe == 'down') {
- this.el.style.bottom = (100 - this.stage) * this.el.offsetHeight / 100 + 'px';
- // (because % positioning doesn't work vertically)
- }
- setOpacity(this.el, this.maxOp * this.stage / 100);
- }
- this.el.style.display = 'block';
- this.draw();
- this.close = function () {
- this.opened = false;
- this.animate('close');
- document.body.onclick = null;
- this.el.onclick = null;
- }
- this.open = function() {
- var t = this;
- this.opened = true;
- this.animate('open');
- document.body.onclick = function() {t.close()}
- this.el.onclick = function(ev) {stopProp(ev)}
- }
- }
- // e.g.
- var myMenu = new Menu('options', 'left');
- E('openMenuButton').onclick = myMenu.open();
Advertisement
Add Comment
Please, Sign In to add comment