From b042bb478e8a3f6c3952a8cd5967cae4e8f35468 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sun, 26 May 2013 03:17:42 -0400 Subject: [PATCH] swapping over sidebar to use touch events, no longer sidr lib Former-commit-id: 749e3e5b7df95187f3f8c466e94daf9228b8d697 Former-commit-id: 4aa7491bad5e7854a2dbd30d6f098123b8262866 --- build/minified/collections/grid.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/collections/grid.css | 2 +- .../components/semantic/collections/grid.css | 2 +- node/src/files/javascript/checkbox.js | 28 + node/src/files/javascript/library/snap.js | 529 ++++++++++++++++++ node/src/files/javascript/semantic.js | 23 +- node/src/files/stylesheets/library/snap.css | 90 +++ node/src/files/stylesheets/semantic.css | 20 +- node/src/layouts/default.html.eco | 185 +++--- src/collections/grid.less | 2 +- 12 files changed, 784 insertions(+), 103 deletions(-) create mode 100644 node/src/files/javascript/checkbox.js create mode 100644 node/src/files/javascript/library/snap.js create mode 100644 node/src/files/stylesheets/library/snap.css diff --git a/build/minified/collections/grid.min.css b/build/minified/collections/grid.min.css index 0ca0a49fa..2dc8186fc 100644 --- a/build/minified/collections/grid.min.css +++ b/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:1000px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{margin:0 3em 3em!important;display:block!important;width:auto!important;padding:0!important}} \ No newline at end of file +.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{margin:0 3em 3em!important;display:block!important;width:auto!important;padding:0!important}} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index f2d344f5a..199f082aa 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -e75bf7ffa09593e40b12859f50ddeb699467208e \ No newline at end of file +b7636b61e0eef29a12061b48a868a9e068c53e3e \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index 08202043a..535bbbbf0 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -c808201136dc12a5a851e59319c7719318b45b8b \ No newline at end of file +65eb06ab5a8c5e6faeff36c10aa62407d58263b8 \ No newline at end of file diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index 46f9e4d96..2bdca06f5 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -314,7 +314,7 @@ /*------------------- Folding --------------------*/ -@media only screen and (max-width: 1000px) { +@media only screen and (max-width: 960px) { .ui.stackable.grid { display: block !important; } diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css index 46f9e4d96..2bdca06f5 100644 --- a/node/src/files/components/semantic/collections/grid.css +++ b/node/src/files/components/semantic/collections/grid.css @@ -314,7 +314,7 @@ /*------------------- Folding --------------------*/ -@media only screen and (max-width: 1000px) { +@media only screen and (max-width: 960px) { .ui.stackable.grid { display: block !important; } diff --git a/node/src/files/javascript/checkbox.js b/node/src/files/javascript/checkbox.js new file mode 100644 index 000000000..47117e522 --- /dev/null +++ b/node/src/files/javascript/checkbox.js @@ -0,0 +1,28 @@ +semantic.dropdown = {}; + +// ready event +semantic.dropdown.ready = function() { + + // selector cache + var + $checkbox = $('.ui.checkbox'), + // alias + handler + ; + + // event handlers + handler = { + + }; + + $checkbox + .checkbox() + ; + +}; + + +// attach ready event +$(document) + .ready(semantic.dropdown.ready) +; \ No newline at end of file diff --git a/node/src/files/javascript/library/snap.js b/node/src/files/javascript/library/snap.js new file mode 100644 index 000000000..1a60300af --- /dev/null +++ b/node/src/files/javascript/library/snap.js @@ -0,0 +1,529 @@ +/* + * Snap.js + * + * Copyright 2013, Jacob Kelley - http://jakiestfu.com/ + * Released under the MIT Licence + * http://opensource.org/licenses/MIT + * + * Github: http://github.com/jakiestfu/Snap.js/ + * Version: 1.7.10 + */ +/*jslint browser: true*/ +/*global define, module, ender*/ +(function(win, doc) { + 'use strict'; + var Snap = Snap || function(userOpts) { + var settings = { + element: null, + disable: 'none', + addBodyClasses: true, + resistance: 0.5, + flickThreshold: 50, + transitionSpeed: 0.3, + easing: 'ease', + maxPosition: 266, + minPosition: -266, + tapToClose: true, + touchToDrag: true, + slideIntent: 40, // degrees + minDragDistance: 5 + }, + cache = { + simpleStates: { + opening: null, + towards: null, + hyperExtending: null, + halfway: null, + flick: null, + translation: { + absolute: 0, + relative: 0, + sinceDirectionChange: 0, + percentage: 0 + } + } + }, + eventList = {}, + utils = { + hasTouch: (doc.ontouchstart === null), + eventType: function(action) { + var eventTypes = { + down: (utils.hasTouch ? 'touchstart' : 'mousedown'), + move: (utils.hasTouch ? 'touchmove' : 'mousemove'), + up: (utils.hasTouch ? 'touchend' : 'mouseup'), + out: (utils.hasTouch ? 'touchcancel' : 'mouseout') + }; + return eventTypes[action]; + }, + page: function(t, e){ + return (utils.hasTouch && e.touches.length && e.touches[0]) ? e.touches[0]['page'+t] : e['page'+t]; + }, + klass: { + has: function(el, name){ + return (el.className).indexOf(name) !== -1; + }, + add: function(el, name){ + if(!utils.klass.has(el, name)){ + el.className += " "+name; + } + }, + remove: function(el, name){ + el.className = (el.className).replace(" "+name, ""); + } + }, + dispatchEvent: function(type) { + if (typeof eventList[type] === 'function') { + return eventList[type].call(); + } + }, + vendor: function(){ + var tmp = doc.createElement("div"), + prefixes = 'webkit Moz O ms'.split(' '), + i; + for (i in prefixes) { + if (typeof tmp.style[prefixes[i] + 'Transition'] !== 'undefined') { + return prefixes[i]; + } + } + }, + transitionCallback: function(){ + return (cache.vendor==='Moz' || cache.vendor=='ms') ? 'transitionend' : cache.vendor+'TransitionEnd'; + }, + canTransform: function(){ + return typeof settings.element.style[cache.vendor+'Transform'] !== 'undefined'; + }, + deepExtend: function(destination, source) { + var property; + for (property in source) { + if (source[property] && source[property].constructor && source[property].constructor === Object) { + destination[property] = destination[property] || {}; + utils.deepExtend(destination[property], source[property]); + } else { + destination[property] = source[property]; + } + } + return destination; + }, + angleOfDrag: function(x, y) { + var degrees, theta; + // Calc Theta + theta = Math.atan2(-(cache.startDragY - y), (cache.startDragX - x)); + if (theta < 0) { + theta += 2 * Math.PI; + } + // Calc Degrees + degrees = Math.floor(theta * (180 / Math.PI) - 180); + if (degrees < 0 && degrees > -180) { + degrees = 360 - Math.abs(degrees); + } + return Math.abs(degrees); + }, + events: { + addEvent: function addEvent(element, eventName, func) { + if (element.addEventListener) { + return element.addEventListener(eventName, func, false); + } else if (element.attachEvent) { + return element.attachEvent("on" + eventName, func); + } + }, + removeEvent: function addEvent(element, eventName, func) { + if (element.addEventListener) { + return element.removeEventListener(eventName, func, false); + } else if (element.attachEvent) { + return element.detachEvent("on" + eventName, func); + } + }, + prevent: function(e) { + if (e.preventDefault) { + e.preventDefault(); + } else { + e.returnValue = false; + } + } + }, + parentUntil: function(el, attr) { + while (el.parentNode) { + if (el.getAttribute && el.getAttribute(attr)){ + return el; + } + el = el.parentNode; + } + return null; + } + }, + action = { + translate: { + get: { + matrix: function(index) { + + if( !utils.canTransform() ){ + return parseInt(settings.element.style.left, 10); + } else { + var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/), + ieOffset = 8; + if (matrix) { + matrix = matrix[1].split(','); + if(matrix.length==16){ + index+=ieOffset; + } + return parseInt(matrix[index], 10); + } + return 0; + } + } + }, + easeCallback: function(){ + settings.element.style[cache.vendor+'Transition'] = ''; + cache.translation = action.translate.get.matrix(4); + cache.easing = false; + clearInterval(cache.animatingInterval); + + if(cache.easingTo===0){ + utils.klass.remove(doc.body, 'snapjs-right'); + utils.klass.remove(doc.body, 'snapjs-left'); + } + + utils.dispatchEvent('animated'); + utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); + }, + easeTo: function(n) { + + if( !utils.canTransform() ){ + cache.translation = n; + action.translate.x(n); + } else { + cache.easing = true; + cache.easingTo = n; + settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing; + cache.animatingInterval = setInterval(function() { + utils.dispatchEvent('animating'); + }, 1); + + utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback); + action.translate.x(n); + } + + }, + x: function(n) { + if( (settings.disable=='left' && n>0) || + (settings.disable=='right' && n<0) + ){ return; } + + n = parseInt(n, 10); + if(isNaN(n)){ + n = 0; + } + + if( utils.canTransform() ){ + var theTranslate = 'translate3d(' + n + 'px, 0,0)'; + settings.element.style[cache.vendor+'Transform'] = theTranslate; + } else { + settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px'; + + settings.element.style.left = n+'px'; + settings.element.style.right = ''; + } + } + }, + drag: { + listen: function() { + cache.translation = 0; + cache.easing = false; + utils.events.addEvent(settings.element, utils.eventType('down'), action.drag.startDrag); + utils.events.addEvent(settings.element, utils.eventType('move'), action.drag.dragging); + utils.events.addEvent(settings.element, utils.eventType('up'), action.drag.endDrag); + }, + stopListening: function() { + utils.events.removeEvent(settings.element, utils.eventType('down'), action.drag.startDrag); + utils.events.removeEvent(settings.element, utils.eventType('move'), action.drag.dragging); + utils.events.removeEvent(settings.element, utils.eventType('up'), action.drag.endDrag); + }, + startDrag: function(e) { + // No drag on ignored elements + var ignoreParent = utils.parentUntil(e.target ? e.target : e.srcElement, 'data-snap-ignore'); + + if (ignoreParent) { + utils.dispatchEvent('ignore'); + return; + } + + utils.dispatchEvent('start'); + settings.element.style[cache.vendor+'Transition'] = ''; + cache.isDragging = true; + cache.hasIntent = null; + cache.intentChecked = false; + cache.startDragX = utils.page('X', e); + cache.startDragY = utils.page('Y', e); + cache.dragWatchers = { + current: 0, + last: 0, + hold: 0, + state: '' + }; + cache.simpleStates = { + opening: null, + towards: null, + hyperExtending: null, + halfway: null, + flick: null, + translation: { + absolute: 0, + relative: 0, + sinceDirectionChange: 0, + percentage: 0 + } + }; + }, + dragging: function(e) { + if (cache.isDragging && settings.touchToDrag) { + + var thePageX = utils.page('X', e), + thePageY = utils.page('Y', e), + translated = cache.translation, + absoluteTranslation = action.translate.get.matrix(4), + whileDragX = thePageX - cache.startDragX, + openingLeft = absoluteTranslation > 0, + translateTo = whileDragX, + diff; + + // Shown no intent already + if((cache.intentChecked && !cache.hasIntent)){ + return; + } + + if(settings.addBodyClasses){ + if((absoluteTranslation)>0){ + utils.klass.add(doc.body, 'snapjs-left'); + utils.klass.remove(doc.body, 'snapjs-right'); + } else if((absoluteTranslation)<0){ + utils.klass.add(doc.body, 'snapjs-right'); + utils.klass.remove(doc.body, 'snapjs-left'); + } + } + + if (cache.hasIntent === false || cache.hasIntent === null) { + var deg = utils.angleOfDrag(thePageX, thePageY), + inRightRange = (deg >= 0 && deg <= settings.slideIntent) || (deg <= 360 && deg > (360 - settings.slideIntent)), + inLeftRange = (deg >= 180 && deg <= (180 + settings.slideIntent)) || (deg <= 180 && deg >= (180 - settings.slideIntent)); + if (!inLeftRange && !inRightRange) { + cache.hasIntent = false; + } else { + cache.hasIntent = true; + } + cache.intentChecked = true; + } + + if ( + (settings.minDragDistance>=Math.abs(thePageX-cache.startDragX)) && // Has user met minimum drag distance? + (cache.hasIntent === false) + ) { + return; + } + + utils.events.prevent(e); + utils.dispatchEvent('drag'); + + cache.dragWatchers.current = thePageX; + // Determine which direction we are going + if (cache.dragWatchers.last > thePageX) { + if (cache.dragWatchers.state !== 'left') { + cache.dragWatchers.state = 'left'; + cache.dragWatchers.hold = thePageX; + } + cache.dragWatchers.last = thePageX; + } else if (cache.dragWatchers.last < thePageX) { + if (cache.dragWatchers.state !== 'right') { + cache.dragWatchers.state = 'right'; + cache.dragWatchers.hold = thePageX; + } + cache.dragWatchers.last = thePageX; + } + if (openingLeft) { + // Pulling too far to the right + if (settings.maxPosition < absoluteTranslation) { + diff = (absoluteTranslation - settings.maxPosition) * settings.resistance; + translateTo = whileDragX - diff; + } + cache.simpleStates = { + opening: 'left', + towards: cache.dragWatchers.state, + hyperExtending: settings.maxPosition < absoluteTranslation, + halfway: absoluteTranslation > (settings.maxPosition / 2), + flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold, + translation: { + absolute: absoluteTranslation, + relative: whileDragX, + sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold), + percentage: (absoluteTranslation/settings.maxPosition)*100 + } + }; + } else { + // Pulling too far to the left + if (settings.minPosition > absoluteTranslation) { + diff = (absoluteTranslation - settings.minPosition) * settings.resistance; + translateTo = whileDragX - diff; + } + cache.simpleStates = { + opening: 'right', + towards: cache.dragWatchers.state, + hyperExtending: settings.minPosition > absoluteTranslation, + halfway: absoluteTranslation < (settings.minPosition / 2), + flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold, + translation: { + absolute: absoluteTranslation, + relative: whileDragX, + sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold), + percentage: (absoluteTranslation/settings.minPosition)*100 + } + }; + } + action.translate.x(translateTo + translated); + } + }, + endDrag: function(e) { + if (cache.isDragging) { + utils.dispatchEvent('end'); + var translated = action.translate.get.matrix(4); + + // Tap Close + if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) { + utils.events.prevent(e); + action.translate.easeTo(0); + cache.isDragging = false; + cache.startDragX = 0; + return; + } + + // Revealing Left + if (cache.simpleStates.opening === 'left') { + // Halfway, Flicking, or Too Far Out + if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) { + if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed + action.translate.easeTo(0); + } else if ( + (cache.simpleStates.flick && cache.simpleStates.towards === 'right') || // Flicking Open OR + (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending + ) { + action.translate.easeTo(settings.maxPosition); // Open Left + } + } else { + action.translate.easeTo(0); // Close Left + } + // Revealing Right + } else if (cache.simpleStates.opening === 'right') { + // Halfway, Flicking, or Too Far Out + if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) { + if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { // Flicking Closed + action.translate.easeTo(0); + } else if ( + (cache.simpleStates.flick && cache.simpleStates.towards === 'left') || // Flicking Open OR + (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending + ) { + action.translate.easeTo(settings.minPosition); // Open Right + } + } else { + action.translate.easeTo(0); // Close Right + } + } + cache.isDragging = false; + cache.startDragX = utils.page('X', e); + } + } + } + }, + init = function(opts) { + if (opts.element) { + utils.deepExtend(settings, opts); + cache.vendor = utils.vendor(); + action.drag.listen(); + } + }; + /* + * Public + */ + this.open = function(side) { + + utils.klass.remove(doc.body, 'snapjs-expand-left'); + utils.klass.remove(doc.body, 'snapjs-expand-right'); + + if (side === 'left') { + cache.simpleStates.opening = 'left'; + cache.simpleStates.towards = 'right'; + utils.klass.add(doc.body, 'snapjs-left'); + utils.klass.remove(doc.body, 'snapjs-right'); + action.translate.easeTo(settings.maxPosition); + } else if (side === 'right') { + cache.simpleStates.opening = 'right'; + cache.simpleStates.towards = 'left'; + utils.klass.remove(doc.body, 'snapjs-left'); + utils.klass.add(doc.body, 'snapjs-right'); + action.translate.easeTo(settings.minPosition); + } + }; + this.close = function() { + action.translate.easeTo(0); + }; + this.expand = function(side){ + var to = win.innerWidth || doc.documentElement.clientWidth; + + if(side==='left'){ + utils.klass.add(doc.body, 'snapjs-expand-left'); + utils.klass.remove(doc.body, 'snapjs-expand-right'); + } else { + utils.klass.add(doc.body, 'snapjs-expand-right'); + utils.klass.remove(doc.body, 'snapjs-expand-left'); + to *= -1; + } + action.translate.easeTo(to); + }; + + this.on = function(evt, fn) { + eventList[evt] = fn; + return this; + }; + this.off = function(evt) { + if (eventList[evt]) { + eventList[evt] = false; + } + }; + + this.enable = function() { + action.drag.listen(); + }; + this.disable = function() { + action.drag.stopListening(); + }; + + this.settings = function(opts){ + utils.deepExtend(settings, opts); + }; + + this.state = function() { + var state, + fromLeft = action.translate.get.matrix(4); + if (fromLeft === settings.maxPosition) { + state = 'left'; + } else if (fromLeft === settings.minPosition) { + state = 'right'; + } else { + state = 'closed'; + } + return { + state: state, + info: cache.simpleStates + }; + }; + init(userOpts); + }; + if ((typeof module !== 'undefined') && module.exports) { + module.exports = Snap; + } + if (typeof ender === 'undefined') { + this.Snap = Snap; + } + if ((typeof define === "function") && define.amd) { + define("snap", [], function() { + return Snap; + }); + } +}).call(this, window, document); \ No newline at end of file diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 1b998950c..e67c12a51 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -26,6 +26,7 @@ semantic.ready = function() { // selector cache var + $contents = $('#menu'), $ui = $('.ui').not('.hover, .down'), $swap = $('.theme.menu .item'), $menu = $('.sidebar'), @@ -49,7 +50,7 @@ semantic.ready = function() { $peekSubItem = $peek.find('.item .menu .item'), $code = $('div.code'), - // alias + sideMenu, handler ; @@ -205,6 +206,13 @@ semantic.ready = function() { }, movePeek: function() { + if( sideMenu.state().state=="left" ){ + sideMenu.close(); + } + else { + sideMenu.open('left'); + } + /* if( $('.stuck .peek').size() > 0 ) { $('.peek') .toggleClass('pushed') @@ -215,6 +223,8 @@ semantic.ready = function() { .removeClass('pushed') ; } + */ + }, menu: { @@ -409,10 +419,15 @@ semantic.ready = function() { }) ; + sideMenu = new Snap({ + element: document.getElementById('content'), + tapToClose: false, + disable: 'right', + maxPosition: 275, + minPosition: -275, + }); + $menu - .sidr({ - name: 'menu' - }) .filter('.button') .on('click', handler.movePeek) .on('mouseenter', handler.menu.mouseenter) diff --git a/node/src/files/stylesheets/library/snap.css b/node/src/files/stylesheets/library/snap.css new file mode 100644 index 000000000..8517f3545 --- /dev/null +++ b/node/src/files/stylesheets/library/snap.css @@ -0,0 +1,90 @@ +html, body { + font-family: sans-serif; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +body > .content > .page, +body > .content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; + z-index: 2; + -webkit-overflow-scrolling: touch; + + -webkit-transition: + all 0.3s ease + ; + -moz-transition: + all 0.3s ease + ; + -o-transition: + all 0.3s ease + ; + -ms-transition: + all 0.3s ease + ; + transition: + all 0.3s ease + ; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +body > .content > .page { + overflow: auto; +} + +.drawers { + position: absolute; + background-color: #333333; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; + +} + +.drawer { + position: absolute; + top: 0; + right: auto; + bottom: 0; + left: auto; + width: 275px; + height: auto; + overflow: auto; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-overflow-scrolling: touch; + -webkit-transition: width 0.3s ease; + -moz-transition: width 0.3s ease; + -ms-transition: width 0.3s ease; + -o-transition: width 0.3s ease; + transition: width 0.3s ease; +} + +.drawer.left { + left: 0; + z-index: 1; +} + +.drawer.right { + right: 0; + z-index: 1; +} diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 30e0607f3..bf339110a 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -124,10 +124,13 @@ body#example { font-family: "Neutraface", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background: #FCFCFC url(../images/bg.jpg) repeat; margin: 0px; - padding: 0px 0px 150px; + padding: 0px; color: #555555; text-rendering: optimizeLegibility; } +body > .content { +background: #FCFCFC url(../images/bg.jpg) repeat; +} /* @@ -228,7 +231,6 @@ a:hover { } #example #menu { - display: none; width: 275px; border-radius: 0px; @@ -250,6 +252,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ /* segment headers */ +#example > .content > .segment, #example > .segment { margin: 0px 0px 46px; padding-top: 65px; @@ -257,6 +260,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } +#example > .content > .segment .text, #example > .segment .text { width: 800px; margin: 0px auto; @@ -399,7 +403,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ #example .sidebar.button { position: fixed; - margin-top: 75px; + top: 75px; z-index: 500; width: 10px; } @@ -953,6 +957,16 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ } } +@media only screen and (max-width : 450px) { + #example .fixed .right.menu { + display: inline-block; + float: none; + } + #example .fixed .previous, + #example .fixed .next { + display: none; + } +} @media only screen and (max-width : 1050px) { #example .fixed .section, #example .fixed .title b { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index c3d0ce81b..f9da6237e 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -48,7 +48,7 @@ - + <%- @getBlock('scripts').toHTML() %> @@ -56,7 +56,7 @@ - + @@ -66,111 +66,116 @@ -