Jack Lukic
12 years ago
12 changed files with 785 additions and 104 deletions
Split View
Diff Options
-
2build/minified/collections/grid.min.css
-
4build/packaged/semantic.min.css
-
2build/packaged/semantic.min.js
-
2build/uncompressed/collections/grid.css
-
2node/src/files/components/semantic/collections/grid.css
-
28node/src/files/javascript/checkbox.js
-
529node/src/files/javascript/library/snap.js
-
23node/src/files/javascript/semantic.js
-
90node/src/files/stylesheets/library/snap.css
-
20node/src/files/stylesheets/semantic.css
-
185node/src/layouts/default.html.eco
-
2src/collections/grid.less
@ -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}} |
|||
.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}} |
|||
4
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/packaged/semantic.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -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) |
|||
; |
|||
@ -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); |
|||
@ -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; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save