SHOW:
|
|
- or go back to the newest paste.
| 1 | function E(id) {return document.getElementById(id)}
| |
| 2 | ||
| 3 | function Menu(name, swipe) {
| |
| 4 | // --- Class to make a swipy menu. The menu elements must be in the following format: | |
| 5 | // <div class="wrap" id="wrap_M"><div class="menu" id="menu_M">[content]</div></div> | |
| 6 | // where M is the menu name | |
| 7 | // swipe should be either "left" to swipe to the left or "down" to swipe downwards | |
| 8 | // CSS needed: | |
| 9 | // div.wrap {position: absolute; overflow: hidden; visibility: hidden;}
| |
| 10 | - | // .wrap div.menu {position: relative; }
|
| 10 | + | // div.wrap div.menu {position: relative; visibility: visible }
|
| 11 | ||
| 12 | this.name = name; | |
| 13 | this.el = E('menu_' + name);
| |
| 14 | this.wrap = E('wrap_' + name);
| |
| 15 | this.closeButton = this.el.getElementsByClassName('close')[0];
| |
| 16 | this.init = function() {
| |
| 17 | var t = this; | |
| 18 | this.closeButton.onclick = function() {t.close()}
| |
| 19 | this.getSize(); | |
| 20 | } | |
| 21 | this.opened = false; | |
| 22 | this.stage = 0; | |
| 23 | this.maxOp = .9; // opacity of menu when it is fully revealed | |
| 24 | this.swipe = swipe | |
| 25 | this.getSize = function() {
| |
| 26 | // --- Briefly display the menu in order to measure its dimensions | |
| 27 | // (this needs to be rerun at the start and whenever the user resizes) | |
| 28 | var disp = this.el.style.display; | |
| 29 | if (disp != 'block') this.el.style.display = 'block'; | |
| 30 | this.width = this.el.offsetWidth; | |
| 31 | this.height = this.el.offsetHeight; | |
| 32 | if (disp != 'block') this.el.style.display = disp; | |
| 33 | } | |
| 34 | this.init(); | |
| 35 | this.animate = function(action) {
| |
| 36 | var t = this, opening = action == 'open', closing = action == 'close'; | |
| 37 | if (this.ti != undefined) {
| |
| 38 | clearInterval(this.ti); | |
| 39 | } | |
| 40 | this.ti = setInterval(function() {
| |
| 41 | if (opening) t.stage += swStep; | |
| 42 | if (closing) t.stage -= swStep; | |
| 43 | if ((opening && t.stage >= 100) || (closing && t.stage <= 0)) {
| |
| 44 | clearInterval(t.ti); | |
| 45 | t.ti = undefined; | |
| 46 | t.stage = opening ? 100 : 0; | |
| 47 | } | |
| 48 | t.draw(); | |
| 49 | }, swInt); | |
| 50 | } | |
| 51 | this.draw = function() {
| |
| 52 | if (this.swipe == 'left') {
| |
| 53 | this.el.style.left = 100 - this.stage + '%'; | |
| 54 | } | |
| 55 | else if (this.swipe == 'down') {
| |
| 56 | this.el.style.bottom = (100 - this.stage) * this.el.offsetHeight / 100 + 'px'; | |
| 57 | // (because % positioning doesn't work vertically) | |
| 58 | } | |
| 59 | setOpacity(this.el, this.maxOp * this.stage / 100); | |
| 60 | } | |
| 61 | this.el.style.display = 'block'; | |
| 62 | this.draw(); | |
| 63 | this.close = function () {
| |
| 64 | console.log('menu close', this);
| |
| 65 | removeClass('pushed', E('command_' + this.name));
| |
| 66 | this.opened = false; | |
| 67 | this.animate('close');
| |
| 68 | document.body.onclick = null; | |
| 69 | this.el.onclick = null; | |
| 70 | } | |
| 71 | this.open = function() {
| |
| 72 | var t = this; | |
| 73 | addClass('pushed', E('command_' + this.name));
| |
| 74 | this.opened = true; | |
| 75 | this.animate('open');
| |
| 76 | document.body.onclick = function() {t.close()}
| |
| 77 | this.el.onclick = function(ev) {stopProp(ev)}
| |
| 78 | } | |
| 79 | } |
