Initial reimplementation of off canvas and page surround

This commit is contained in:
Kevin DuCommun
2015-05-28 17:32:01 -05:00
parent 46ec4d5942
commit 713923342a
7 changed files with 198 additions and 165 deletions
+4 -4
View File
@@ -237,14 +237,14 @@ var Offcanvas = new prime({
_setTransition: function() {
var panel = this.panel[0];
panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
//panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
},
_translateXTo: function(x) {
var panel = this.panel[0];
this.offset.x.current = x;
panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
//panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
},
_bodyScroll: function() {
@@ -312,7 +312,7 @@ var Offcanvas = new prime({
overlayOpacity = mapNumber(Math.abs(translateX), 0, this.options.padding, 0, 1);
this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
//this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
this.overlay[0].style.opacity = overlayOpacity;
this.moved = true;
@@ -362,4 +362,4 @@ var Offcanvas = new prime({
}
});
module.exports = Offcanvas;
module.exports = Offcanvas;
+154 -139
View File
@@ -315,7 +315,7 @@ var Menu = new prime({
});
module.exports = Menu;
},{"../utils/dollar-extras":5,"domready":6,"elements/zen":35,"mout/function/bind":39,"mout/function/timeout":43,"prime":77,"prime-util/prime/bound":73,"prime-util/prime/options":74}],3:[function(require,module,exports){
},{"../utils/dollar-extras":5,"domready":6,"elements/zen":35,"mout/function/bind":39,"mout/function/timeout":43,"prime":84,"prime-util/prime/bound":80,"prime-util/prime/options":81}],3:[function(require,module,exports){
// Offcanvas slide with desktop, touch and all-in-one touch devices support that supports both left and right placement.
// Fast and optimized using CSS3 transitions
// Based on the awesome Slideout.js <https://mango.github.io/slideout/>
@@ -555,14 +555,14 @@ var Offcanvas = new prime({
_setTransition: function() {
var panel = this.panel[0];
panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
//panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
},
_translateXTo: function(x) {
var panel = this.panel[0];
this.offset.x.current = x;
panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
//panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
},
_bodyScroll: function() {
@@ -630,7 +630,7 @@ var Offcanvas = new prime({
overlayOpacity = mapNumber(Math.abs(translateX), 0, this.options.padding, 0, 1);
this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
//this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
this.overlay[0].style.opacity = overlayOpacity;
this.moved = true;
@@ -681,7 +681,8 @@ var Offcanvas = new prime({
});
module.exports = Offcanvas;
},{"../utils/decouple":4,"domready":6,"elements":11,"elements/zen":35,"mout/array/forEach":36,"mout/function/bind":39,"mout/function/timeout":43,"mout/math/clamp":48,"mout/math/map":50,"mout/string/trim":59,"prime":77,"prime-util/prime/bound":73,"prime-util/prime/options":74}],4:[function(require,module,exports){
},{"../utils/decouple":4,"domready":6,"elements":11,"elements/zen":35,"mout/array/forEach":36,"mout/function/bind":39,"mout/function/timeout":43,"mout/math/clamp":48,"mout/math/map":50,"mout/string/trim":59,"prime":84,"prime-util/prime/bound":80,"prime-util/prime/options":81}],4:[function(require,module,exports){
'use strict';
var rAF = (function() {
@@ -746,7 +747,7 @@ $.implement({
module.exports = $;
},{"elements":11,"mout/array/map":37,"slick":89}],6:[function(require,module,exports){
},{"elements":11,"mout/array/map":37,"slick":96}],6:[function(require,module,exports){
/*!
* domready (c) Dustin Diaz 2014 - License MIT
*/
@@ -1128,7 +1129,7 @@ var Elements = prime({
module.exports = $
},{"mout/array/every":13,"mout/array/filter":14,"mout/array/forEach":15,"mout/array/map":17,"mout/array/some":18,"prime":77}],9:[function(require,module,exports){
},{"mout/array/every":13,"mout/array/filter":14,"mout/array/forEach":15,"mout/array/map":17,"mout/array/some":18,"prime":84}],9:[function(require,module,exports){
/*
delegation
*/"use strict"
@@ -1211,7 +1212,7 @@ $.implement({
module.exports = $
},{"./events":10,"./traversal":34,"prime/map":78}],10:[function(require,module,exports){
},{"./events":10,"./traversal":34,"prime/map":85}],10:[function(require,module,exports){
/*
events
*/"use strict"
@@ -1291,7 +1292,7 @@ $.implement({
module.exports = $
},{"./base":8,"prime/emitter":76}],11:[function(require,module,exports){
},{"./base":8,"prime/emitter":83}],11:[function(require,module,exports){
/*
elements
*/"use strict"
@@ -2065,7 +2066,7 @@ $.implement({
module.exports = $
},{"./base":8,"mout/array/map":17,"slick":89}],35:[function(require,module,exports){
},{"./base":8,"mout/array/map":17,"slick":96}],35:[function(require,module,exports){
/*
zen
*/"use strict"
@@ -2123,7 +2124,7 @@ module.exports = function(expression, doc){
}
},{"./base":8,"mout/array/forEach":15,"mout/array/map":17,"slick/parser":90}],36:[function(require,module,exports){
},{"./base":8,"mout/array/forEach":15,"mout/array/map":17,"slick/parser":97}],36:[function(require,module,exports){
arguments[4][15][0].apply(exports,arguments)
},{"dup":15}],37:[function(require,module,exports){
arguments[4][17][0].apply(exports,arguments)
@@ -2499,6 +2500,128 @@ var forOwn = require('./forOwn');
},{"./forOwn":69}],73:[function(require,module,exports){
/*
prime
- prototypal inheritance
*/"use strict"
var hasOwn = require("mout/object/hasOwn"),
mixIn = require("mout/object/mixIn"),
create = require("mout/lang/createObject"),
kindOf = require("mout/lang/kindOf")
var hasDescriptors = true
try {
Object.defineProperty({}, "~", {})
Object.getOwnPropertyDescriptor({}, "~")
} catch (e){
hasDescriptors = false
}
// we only need to be able to implement "toString" and "valueOf" in IE < 9
var hasEnumBug = !({valueOf: 0}).propertyIsEnumerable("valueOf"),
buggy = ["toString", "valueOf"]
var verbs = /^constructor|inherits|mixin$/
var implement = function(proto){
var prototype = this.prototype
for (var key in proto){
if (key.match(verbs)) continue
if (hasDescriptors){
var descriptor = Object.getOwnPropertyDescriptor(proto, key)
if (descriptor){
Object.defineProperty(prototype, key, descriptor)
continue
}
}
prototype[key] = proto[key]
}
if (hasEnumBug) for (var i = 0; (key = buggy[i]); i++){
var value = proto[key]
if (value !== Object.prototype[key]) prototype[key] = value
}
return this
}
var prime = function(proto){
if (kindOf(proto) === "Function") proto = {constructor: proto}
var superprime = proto.inherits
// if our nice proto object has no own constructor property
// then we proceed using a ghosting constructor that all it does is
// call the parent's constructor if it has a superprime, else an empty constructor
// proto.constructor becomes the effective constructor
var constructor = (hasOwn(proto, "constructor")) ? proto.constructor : (superprime) ? function(){
return superprime.apply(this, arguments)
} : function(){}
if (superprime){
mixIn(constructor, superprime)
var superproto = superprime.prototype
// inherit from superprime
var cproto = constructor.prototype = create(superproto)
// setting constructor.parent to superprime.prototype
// because it's the shortest possible absolute reference
constructor.parent = superproto
cproto.constructor = constructor
}
if (!constructor.implement) constructor.implement = implement
var mixins = proto.mixin
if (mixins){
if (kindOf(mixins) !== "Array") mixins = [mixins]
for (var i = 0; i < mixins.length; i++) constructor.implement(create(mixins[i].prototype))
}
// implement proto and return constructor
return constructor.implement(proto)
}
module.exports = prime
},{"mout/lang/createObject":74,"mout/lang/kindOf":75,"mout/object/hasOwn":78,"mout/object/mixIn":79}],74:[function(require,module,exports){
var mixIn = require('../object/mixIn');
/**
* Create Object using prototypal inheritance and setting custom properties.
* - Mix between Douglas Crockford Prototypal Inheritance <http://javascript.crockford.com/prototypal.html> and the EcmaScript 5 `Object.create()` method.
* @param {object} parent Parent Object.
* @param {object} [props] Object properties.
* @return {object} Created object.
*/
function createObject(parent, props){
function F(){}
F.prototype = parent;
return mixIn(new F(), props);
}
module.exports = createObject;
},{"../object/mixIn":79}],75:[function(require,module,exports){
arguments[4][24][0].apply(exports,arguments)
},{"dup":24}],76:[function(require,module,exports){
arguments[4][27][0].apply(exports,arguments)
},{"./hasOwn":78,"dup":27}],77:[function(require,module,exports){
arguments[4][28][0].apply(exports,arguments)
},{"./forIn":76,"./hasOwn":78,"dup":28}],78:[function(require,module,exports){
arguments[4][29][0].apply(exports,arguments)
},{"dup":29}],79:[function(require,module,exports){
arguments[4][72][0].apply(exports,arguments)
},{"./forOwn":77,"dup":72}],80:[function(require,module,exports){
"use strict";
// credits to @cpojer's Class.Binds, released under the MIT license
@@ -2518,7 +2641,7 @@ var bound = prime({
module.exports = bound
},{"mout/function/bind":61,"prime":77}],74:[function(require,module,exports){
},{"mout/function/bind":61,"prime":73}],81:[function(require,module,exports){
"use strict";
var prime = require("prime")
@@ -2537,7 +2660,7 @@ var Options = prime({
module.exports = Options
},{"mout/object/merge":71,"prime":77}],75:[function(require,module,exports){
},{"mout/object/merge":71,"prime":73}],82:[function(require,module,exports){
(function (process,global){
/*
defer
@@ -2656,7 +2779,7 @@ module.exports = defer
}).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"_process":91,"mout/array/forEach":79,"mout/array/indexOf":80,"mout/lang/kindOf":82,"mout/time/now":87}],76:[function(require,module,exports){
},{"_process":98,"mout/array/forEach":86,"mout/array/indexOf":87,"mout/lang/kindOf":89,"mout/time/now":94}],83:[function(require,module,exports){
/*
Emitter
*/"use strict"
@@ -2722,99 +2845,9 @@ Emitter.EMIT_SYNC = {}
module.exports = Emitter
},{"./defer":75,"./index":77,"mout/array/forEach":79,"mout/array/indexOf":80}],77:[function(require,module,exports){
/*
prime
- prototypal inheritance
*/"use strict"
var hasOwn = require("mout/object/hasOwn"),
mixIn = require("mout/object/mixIn"),
create = require("mout/lang/createObject"),
kindOf = require("mout/lang/kindOf")
var hasDescriptors = true
try {
Object.defineProperty({}, "~", {})
Object.getOwnPropertyDescriptor({}, "~")
} catch (e){
hasDescriptors = false
}
// we only need to be able to implement "toString" and "valueOf" in IE < 9
var hasEnumBug = !({valueOf: 0}).propertyIsEnumerable("valueOf"),
buggy = ["toString", "valueOf"]
var verbs = /^constructor|inherits|mixin$/
var implement = function(proto){
var prototype = this.prototype
for (var key in proto){
if (key.match(verbs)) continue
if (hasDescriptors){
var descriptor = Object.getOwnPropertyDescriptor(proto, key)
if (descriptor){
Object.defineProperty(prototype, key, descriptor)
continue
}
}
prototype[key] = proto[key]
}
if (hasEnumBug) for (var i = 0; (key = buggy[i]); i++){
var value = proto[key]
if (value !== Object.prototype[key]) prototype[key] = value
}
return this
}
var prime = function(proto){
if (kindOf(proto) === "Function") proto = {constructor: proto}
var superprime = proto.inherits
// if our nice proto object has no own constructor property
// then we proceed using a ghosting constructor that all it does is
// call the parent's constructor if it has a superprime, else an empty constructor
// proto.constructor becomes the effective constructor
var constructor = (hasOwn(proto, "constructor")) ? proto.constructor : (superprime) ? function(){
return superprime.apply(this, arguments)
} : function(){}
if (superprime){
mixIn(constructor, superprime)
var superproto = superprime.prototype
// inherit from superprime
var cproto = constructor.prototype = create(superproto)
// setting constructor.parent to superprime.prototype
// because it's the shortest possible absolute reference
constructor.parent = superproto
cproto.constructor = constructor
}
if (!constructor.implement) constructor.implement = implement
var mixins = proto.mixin
if (mixins){
if (kindOf(mixins) !== "Array") mixins = [mixins]
for (var i = 0; i < mixins.length; i++) constructor.implement(create(mixins[i].prototype))
}
// implement proto and return constructor
return constructor.implement(proto)
}
module.exports = prime
},{"mout/lang/createObject":81,"mout/lang/kindOf":82,"mout/object/hasOwn":85,"mout/object/mixIn":86}],78:[function(require,module,exports){
},{"./defer":82,"./index":84,"mout/array/forEach":86,"mout/array/indexOf":87}],84:[function(require,module,exports){
arguments[4][73][0].apply(exports,arguments)
},{"dup":73,"mout/lang/createObject":88,"mout/lang/kindOf":89,"mout/object/hasOwn":92,"mout/object/mixIn":93}],85:[function(require,module,exports){
/*
Map
*/"use strict"
@@ -2940,41 +2973,23 @@ map.prototype = Map.prototype
module.exports = map
},{"./index":77,"mout/array/indexOf":80}],79:[function(require,module,exports){
},{"./index":84,"mout/array/indexOf":87}],86:[function(require,module,exports){
arguments[4][15][0].apply(exports,arguments)
},{"dup":15}],80:[function(require,module,exports){
},{"dup":15}],87:[function(require,module,exports){
arguments[4][16][0].apply(exports,arguments)
},{"dup":16}],81:[function(require,module,exports){
var mixIn = require('../object/mixIn');
/**
* Create Object using prototypal inheritance and setting custom properties.
* - Mix between Douglas Crockford Prototypal Inheritance <http://javascript.crockford.com/prototypal.html> and the EcmaScript 5 `Object.create()` method.
* @param {object} parent Parent Object.
* @param {object} [props] Object properties.
* @return {object} Created object.
*/
function createObject(parent, props){
function F(){}
F.prototype = parent;
return mixIn(new F(), props);
}
module.exports = createObject;
},{"../object/mixIn":86}],82:[function(require,module,exports){
},{"dup":16}],88:[function(require,module,exports){
arguments[4][74][0].apply(exports,arguments)
},{"../object/mixIn":93,"dup":74}],89:[function(require,module,exports){
arguments[4][24][0].apply(exports,arguments)
},{"dup":24}],83:[function(require,module,exports){
},{"dup":24}],90:[function(require,module,exports){
arguments[4][27][0].apply(exports,arguments)
},{"./hasOwn":85,"dup":27}],84:[function(require,module,exports){
},{"./hasOwn":92,"dup":27}],91:[function(require,module,exports){
arguments[4][28][0].apply(exports,arguments)
},{"./forIn":83,"./hasOwn":85,"dup":28}],85:[function(require,module,exports){
},{"./forIn":90,"./hasOwn":92,"dup":28}],92:[function(require,module,exports){
arguments[4][29][0].apply(exports,arguments)
},{"dup":29}],86:[function(require,module,exports){
},{"dup":29}],93:[function(require,module,exports){
arguments[4][72][0].apply(exports,arguments)
},{"./forOwn":84,"dup":72}],87:[function(require,module,exports){
},{"./forOwn":91,"dup":72}],94:[function(require,module,exports){
/**
@@ -2994,7 +3009,7 @@ arguments[4][72][0].apply(exports,arguments)
},{}],88:[function(require,module,exports){
},{}],95:[function(require,module,exports){
/*
Slick Finder
*/"use strict"
@@ -3825,7 +3840,7 @@ slick.parse = parse;
module.exports = slick
},{"./parser":90}],89:[function(require,module,exports){
},{"./parser":97}],96:[function(require,module,exports){
(function (global){
/*
slick
@@ -3835,7 +3850,7 @@ module.exports = "document" in global ? require("./finder") : { parse: require("
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./finder":88,"./parser":90}],90:[function(require,module,exports){
},{"./finder":95,"./parser":97}],97:[function(require,module,exports){
/*
Slick Parser
- originally created by the almighty Thomas Aylott <@subtlegradient> (http://subtlegradient.com)
@@ -4087,7 +4102,7 @@ var parse = function(expression){
module.exports = parse
},{}],91:[function(require,module,exports){
},{}],98:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
+2
View File
@@ -57,6 +57,8 @@ body {
#g-page-surround {
min-height: 100vh;
position: relative;
margin: 0;
}
article,
@@ -21,6 +21,8 @@ body {
#g-page-surround {
min-height: 100vh;
position: relative;
margin: 0;
}
article,
@@ -229,4 +231,4 @@ th {
background: #fff !important;
color: #000 !important;
}
}
}
@@ -5,7 +5,7 @@
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
overflow-y: auto;
text-align: left;
display: none;
}
@@ -37,7 +37,7 @@
opacity: 1;
height: 100%;
}
#g-offcanvas {
display: block;
}
@@ -56,4 +56,4 @@ body .g-offcanvas-hide {
left: inherit;
right: 0.7rem;
}
}
}
+14 -14
View File
@@ -15328,6 +15328,9 @@ var toString = require('../lang/toString');
};
var _each = function (arr, iterator) {
if (arr.forEach) {
return arr.forEach(iterator);
}
for (var i = 0; i < arr.length; i += 1) {
iterator(arr[i], i, arr);
}
@@ -16104,26 +16107,23 @@ var toString = require('../lang/toString');
pause: function () {
if (q.paused === true) { return; }
q.paused = true;
q.process();
},
resume: function () {
if (q.paused === false) { return; }
q.paused = false;
// Need to call q.process once per concurrent
// worker to preserve full concurrency after pause
for (var w = 1; w <= q.concurrency; w++) {
async.setImmediate(q.process);
}
q.process();
}
};
return q;
};
async.priorityQueue = function (worker, concurrency) {
function _compareTasks(a, b){
return a.priority - b.priority;
};
function _binarySearch(sequence, item, compare) {
var beg = -1,
end = sequence.length - 1;
@@ -16137,7 +16137,7 @@ var toString = require('../lang/toString');
}
return beg;
}
function _insert(q, data, priority, callback) {
if (!q.started){
q.started = true;
@@ -16159,7 +16159,7 @@ var toString = require('../lang/toString');
priority: priority,
callback: typeof callback === 'function' ? callback : null
};
q.tasks.splice(_binarySearch(q.tasks, item, _compareTasks) + 1, 0, item);
if (q.saturated && q.tasks.length === q.concurrency) {
@@ -16168,15 +16168,15 @@ var toString = require('../lang/toString');
async.setImmediate(q.process);
});
}
// Start with a normal queue
var q = async.queue(worker, concurrency);
// Override push to accept second parameter representing priority
q.push = function (data, priority, callback) {
_insert(q, data, priority, callback);
};
// Remove unshift function
delete q.unshift;
@@ -24581,7 +24581,7 @@ var pseudos = {
},
'not': function(expression){
return !slick.matches(this, expression)
return !slick.match(this, expression)
},
'contains': function(text){
@@ -30,7 +30,7 @@
color: $offcanvas-toggle-color;
}
// Mobile Menu
// Mobile Menu
#g-offcanvas {
#g-mobilemenu-container {
ul {
@@ -42,7 +42,7 @@
&:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) {
&:hover, &.active {
background: darken($accent-color-1, 4%);
> .g-menu-item-container {
color: $offcanvas-text-color;
}
@@ -65,7 +65,7 @@
}
.g-dropdown-column {
width: $offcanvas-width;
}
}
}
}
}
@@ -79,4 +79,18 @@
background: #fff !important;
color: #000 !important;
}
}
}
.g-offcanvas-open {
.g-offcanvas-left {
#g-page-surround {
margin-left: $offcanvas-width;
}
}
.g-offcanvas-right {
#g-page-surround {
margin-right: $offcanvas-width;
}
}
}