Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
requirebin sketch
// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var insertCSS = require('insert-css')
var domify = require('domify')
var css = "body {width: 100%;height: 100%;} .slideout-menu {position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: 0;width: 256px;overflow-y: auto;-webkit-overflow-scrolling: touch;display: none;} .slideout-panel {position:relative;z-index: 1;} .slideout-open, .slideout-open body, .slideout-open .slideout-panel {overflow: hidden;} .slideout-open .slideout-menu {display: block;}";
var html = '<nav id="menu"><header><h2>Menu</h2></header></nav><main id="panel"><header><h2>Panel</h2></header></main>';
// inserts new <style> tag into the <head>
insertCSS(css)
// append the html elements that domify returns to the <body>
document.body.appendChild(domify(html))
var Slideout = require('slideout');
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(callback){window.setTimeout(callback,1e3/60)}}();function decouple(node,event,fn){var eve,tracking=false;function captureEvent(e){eve=e;track()}function track(){if(!tracking){requestAnimFrame(update);tracking=true}}function update(){fn.call(node,eve);tracking=false}node.addEventListener(event,captureEvent,false)}module.exports=decouple},{}],slideout:[function(require,module,exports){"use strict";var decouple=require("decouple");var scrollTimeout;var scrolling=false;var doc=window.document;var html=doc.documentElement;var msPointerSupported=window.navigator.msPointerEnabled;var touch={start:msPointerSupported?"MSPointerDown":"touchstart",move:msPointerSupported?"MSPointerMove":"touchmove",end:msPointerSupported?"MSPointerUp":"touchend"};var prefix=function prefix(){var regex=/^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/;var styleDeclaration=doc.getElementsByTagName("script")[0].style;for(var prop in styleDeclaration){if(regex.test(prop)){return"-"+prop.match(regex)[0].toLowerCase()+"-"}}if("WebkitOpacity"in styleDeclaration){return"-webkit-"}if("KhtmlOpacity"in styleDeclaration){return"-khtml-"}return""}();function Slideout(options){options=options||{};this._startOffsetX=0;this._currentOffsetX=0;this._opening=false;this._moved=false;this._opened=false;this._preventOpen=false;this.panel=options.panel;this.menu=options.menu;this.panel.className+=" slideout-panel";this.menu.className+=" slideout-menu";this._fx=options.fx||"ease";this._duration=parseInt(options.duration,10)||300;this._tolerance=parseInt(options.tolerance,10)||70;this._padding=parseInt(options.padding,10)||256;this._initTouchEvents()}Slideout.prototype.open=function(){var self=this;if(html.className.search("slideout-open")===-1){html.className+=" slideout-open"}this._setTransition();this._translateXTo(this._padding);this._opened=true;setTimeout(function(){self.panel.style.transition=self.panel.style["-webkit-transition"]=""},this._duration+50);return this};Slideout.prototype.close=function(){var self=this;if(!this.isOpen()&&!this._opening){return this}this._setTransition();this._translateXTo(0);this._opened=false;setTimeout(function(){html.className=html.className.replace(/ slideout-open/,"");self.panel.style.transition=self.panel.style["-webkit-transition"]=""},this._duration+50);return this};Slideout.prototype.toggle=function(){return this.isOpen()?this.close():this.open()};Slideout.prototype.isOpen=function(){return this._opened};Slideout.prototype._translateXTo=function(translateX){this._currentOffsetX=translateX;this.panel.style[prefix+"transform"]=this.panel.style.transform="translate3d("+translateX+"px, 0, 0)"};Slideout.prototype._setTransition=function(){this.panel.style[prefix+"transition"]=this.panel.style.transition=prefix+"transform "+this._duration+"ms "+this._fx};Slideout.prototype._initTouchEvents=function(){var self=this;decouple(doc,"scroll",function(){if(!self._moved){clearTimeout(scrollTimeout);scrolling=true;scrollTimeout=setTimeout(function(){scrolling=false},250)}});doc.addEventListener(touch.move,function(eve){if(self._moved){eve.preventDefault()}});this.panel.addEventListener(touch.start,function(eve){self._moved=false;self._opening=false;self._startOffsetX=eve.touches[0].pageX;self._preventOpen=!self.isOpen()&&self.menu.clientWidth!==0});this.panel.addEventListener("touchcancel",function(){self._moved=false;self._opening=false});this.panel.addEventListener(touch.end,function(){if(self._moved){self._opening&&Math.abs(self._currentOffsetX)>self._tolerance?self.open():self.close()}self._moved=false});this.panel.addEventListener(touch.move,function(eve){if(scrolling||self._preventOpen){return}var dif_x=eve.touches[0].clientX-self._startOffsetX;var translateX=self._currentOffsetX=dif_x;if(Math.abs(translateX)>self._padding){return}if(Math.abs(dif_x)>20){self._opening=true;if(self._opened&&dif_x>0||!self._opened&&dif_x<0){return}if(!self._moved&&html.className.search("slideout-open")===-1){html.className+=" slideout-open"}if(dif_x<=0){translateX=dif_x+self._padding;self._opening=false}self.panel.style[prefix+"transform"]=self.panel.style.transform="translate3d("+translateX+"px, 0, 0)";self._moved=true}})};module.exports=Slideout},{decouple:1}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"insert-css":[function(require,module,exports){var inserted={};module.exports=function(css,options){if(inserted[css])return;inserted[css]=true;var elem=document.createElement("style");elem.setAttribute("type","text/css");if("textContent"in elem){elem.textContent=css}else{elem.styleSheet.cssText=css}var head=document.getElementsByTagName("head")[0];if(options&&options.prepend){head.insertBefore(elem,head.childNodes[0])}else{head.appendChild(elem)}}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({domify:[function(require,module,exports){module.exports=parse;var div=document.createElement("div");div.innerHTML=' <link/><table></table><a href="/a">a</a><input type="checkbox"/>';var innerHTMLBug=!div.getElementsByTagName("link").length;div=undefined;var map={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:innerHTMLBug?[1,"X<div>","</div>"]:[0,"",""]};map.td=map.th=[3,"<table><tbody><tr>","</tr></tbody></table>"];map.option=map.optgroup=[1,'<select multiple="multiple">',"</select>"];map.thead=map.tbody=map.colgroup=map.caption=map.tfoot=[1,"<table>","</table>"];map.polyline=map.ellipse=map.polygon=map.circle=map.text=map.line=map.path=map.rect=map.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"];function parse(html,doc){if("string"!=typeof html)throw new TypeError("String expected");if(!doc)doc=document;var m=/<([\w:]+)/.exec(html);if(!m)return doc.createTextNode(html);html=html.replace(/^\s+|\s+$/g,"");var tag=m[1];if(tag=="body"){var el=doc.createElement("html");el.innerHTML=html;return el.removeChild(el.lastChild)}var wrap=map[tag]||map._default;var depth=wrap[0];var prefix=wrap[1];var suffix=wrap[2];var el=doc.createElement("div");el.innerHTML=prefix+html+suffix;while(depth--)el=el.lastChild;if(el.firstChild==el.lastChild){return el.removeChild(el.firstChild)}var fragment=doc.createDocumentFragment();while(el.firstChild){fragment.appendChild(el.removeChild(el.firstChild))}return fragment}},{}]},{},[]);var insertCSS=require("insert-css");var domify=require("domify");var css="body {width: 100%;height: 100%;} .slideout-menu {position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: 0;width: 256px;overflow-y: auto;-webkit-overflow-scrolling: touch;display: none;} .slideout-panel {position:relative;z-index: 1;} .slideout-open, .slideout-open body, .slideout-open .slideout-panel {overflow: hidden;} .slideout-open .slideout-menu {display: block;}";var html='<nav id="menu"><header><h2>Menu</h2></header></nav><main id="panel"><header><h2>Panel</h2></header></main>';insertCSS(css);document.body.appendChild(domify(html));var Slideout=require("slideout");var slideout=new Slideout({panel:document.getElementById("panel"),menu:document.getElementById("menu"),padding:256,tolerance:70});
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"slideout": "0.1.5",
"insert-css": "0.2.0",
"domify": "1.3.2"
}
}
<!-- contents of this file will be placed inside the <body> -->
<!-- contents of this file will be placed inside the <head> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.