diff --git a/demo/lib/shepherd/shepherd.min.js b/demo/lib/shepherd/shepherd.min.js
deleted file mode 100755
index 3b446ec61c..0000000000
--- a/demo/lib/shepherd/shepherd.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(n,i){"function"==typeof define&&define.amd?define(["tether"],i):"object"==typeof exports?module.exports=i(require("tether")):n.Shepherd=i(n.Tether)}(this,function(Tether){"use strict";function n(n,i){if(!(n instanceof i))throw new TypeError("Cannot call a class as a function")}function i(n,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);n.prototype=Object.create(i&&i.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(n,i):n.__proto__=i)}function s(n){return"undefined"==typeof n}function o(n){return n&&n.constructor===Array}function c(n){return n&&n.constructor===Object}function a(n){return"object"==typeof n}function u(n){var i=document.createElement("div");return i.innerHTML=n,i.children[0]}function l(n,i){var o=void 0;return s(n.matches)?s(n.matchesSelector)?s(n.msMatchesSelector)?s(n.webkitMatchesSelector)?s(n.mozMatchesSelector)?s(n.oMatchesSelector)||(o=n.oMatchesSelector):o=n.mozMatchesSelector:o=n.webkitMatchesSelector:o=n.msMatchesSelector:o=n.matchesSelector:o=n.matches,o.call(n,i)}function p(n){if(a(n))return n.hasOwnProperty("element")&&n.hasOwnProperty("on")?n:null;var i=C.exec(n);if(!i)return null;var s=i[2];return"["===s[0]&&(s=s.substring(1,s.length-1)),{element:i[1],on:s}}function d(n,i){if(null===n||s(n))return n;if(a(n))return n;for(var o=n.split(" "),c={},u=i.length-1,l=o.length-1;l>=0;l--){if(0===u){c[i[u]]=o.slice(0,l+1).join(" ");break}c[i[u]]=o[l],u--}return c}var f=function(){function n(n,i){for(var s=0;s<i.length;s++){var o=i[s];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,o.key,o)}}return function(i,s,o){return s&&n(i.prototype,s),o&&n(i,o),i}}(),v=function(n,i,s){for(var o=!0;o;){var c=n,a=i,u=s;o=!1,null===c&&(c=Function.prototype);var l=Object.getOwnPropertyDescriptor(c,a);if(void 0!==l){if("value"in l)return l.value;var p=l.get;if(void 0===p)return;return p.call(u)}var d=Object.getPrototypeOf(c);if(null===d)return;n=d,i=a,s=u,o=!0,l=d=void 0}},m=Tether.Utils,y=m.Evented,g=m.addClass,b=m.extend,w=m.hasClass,k=m.removeClass,S=m.uniqueId,O=new y,x={top:"bottom center",left:"middle right",right:"middle left",bottom:"top center",center:"middle center"},C=/^(.+) (top|left|right|bottom|center|\[[a-z ]+\])$/,E=function(a){function m(i,s){return n(this,m),v(Object.getPrototypeOf(m.prototype),"constructor",this).call(this,i,s),this.tour=i,this.bindMethods(),this.setOptions(s),this}return i(m,a),f(m,[{key:"bindMethods",value:function(){var n=this,i=["_show","show","hide","isOpen","cancel","complete","scrollTo","destroy","render"];i.map(function(i){n[i]=n[i].bind(n)})}},{key:"setOptions",value:function(){var n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.options=n,this.destroy(),this.id=this.options.id||this.id||"step-"+S();var i=this.options.when;if(i)for(var a in i)if({}.hasOwnProperty.call(i,a)){var u=i[a];this.on(a,u,this)}var l=JSON.stringify(this.options.buttons),p=s(l)||"true"===l,d="{}"===l||"[]"===l||"null"===l||"false"===l,f=!p&&o(this.options.buttons),v=!p&&c(this.options.buttons);p?this.options.buttons=[{text:"Next",action:this.tour.next,classes:"btn"}]:!d&&v?this.options.buttons=[this.options.buttons]:(d||!f)&&(this.options.buttons=!1)}},{key:"getTour",value:function(){return this.tour}},{key:"bindAdvance",value:function(){var n=this,i=d(this.options.advanceOn,["selector","event"]),o=i.event,c=i.selector,a=function(e){n.isOpen()&&(s(c)?n.el&&e.target===n.el&&n.tour.next():l(e.target,c)&&n.tour.next())};document.body.addEventListener(o,a),this.on("destroy",function(){return document.body.removeEventListener(o,a)})}},{key:"getAttachTo",value:function(){var n=p(this.options.attachTo)||{},i=b({},n);return"string"==typeof n.element&&(i.element=document.querySelector(n.element),i.element||console.error("The element for this Shepherd step was not found "+n.element)),i}},{key:"setupTether",value:function(){if(s(Tether))throw new Error("Using the attachment feature of Shepherd requires the Tether library");var n=this.getAttachTo(),i=x[n.on||"right"]||n.on;s(n.element)&&(n.element="viewport",i="middle center");var o={classPrefix:"shepherd",element:this.el,constraints:[{to:"window",pin:!0,attachment:"together"}],target:n.element,offset:n.offset||"0 0",attachment:i};this.tether&&this.tether.destroy(),this.tether=new Tether(b(o,this.options.tetherOptions))}},{key:"show",value:function(){var n=this;if(!s(this.options.beforeShowPromise)){var i=this.options.beforeShowPromise();if(!s(i))return i.then(function(){return n._show()})}this._show()}},{key:"_show",value:function(){var n=this;this.trigger("before-show"),this.el||this.render(),g(this.el,"shepherd-open"),document.body.setAttribute("data-shepherd-step",this.id),this.setupTether(),this.options.scrollTo&&setTimeout(function(){n.scrollTo()}),this.trigger("show")}},{key:"hide",value:function(){this.trigger("before-hide"),k(this.el,"shepherd-open"),document.body.removeAttribute("data-shepherd-step"),this.tether&&this.tether.destroy(),this.tether=null,this.trigger("hide")}},{key:"isOpen",value:function(){return this.el&&w(this.el,"shepherd-open")}},{key:"cancel",value:function(){this.tour.cancel(),this.trigger("cancel")}},{key:"complete",value:function(){this.tour.complete(),this.trigger("complete")}},{key:"scrollTo",value:function(){var n=this.getAttachTo(),i=n.element;s(this.options.scrollToHandler)?s(i)||i.scrollIntoView():this.options.scrollToHandler(i)}},{key:"destroy",value:function(){!s(this.el)&&this.el.parentNode&&(this.el.parentNode.removeChild(this.el),delete this.el),this.tether&&this.tether.destroy(),this.tether=null,this.trigger("destroy")}},{key:"render",value:function(){var n=this;s(this.el)||this.destroy(),this.el=u("<div class='shepherd-step "+(this.options.classes||"")+"' data-id='"+this.id+"' "+(this.options.idAttribute?'id="'+this.options.idAttribute+'"':"")+"></div>");var i=document.createElement("div");i.className="shepherd-content",this.el.appendChild(i);var o=document.createElement("header");if(i.appendChild(o),this.options.title&&(o.innerHTML+="<h3 class='shepherd-title'>"+this.options.title+"</h3>",this.el.className+=" shepherd-has-title"),this.options.showCancelLink){var c=u("<a href class='shepherd-cancel-link'>✕</a>");o.appendChild(c),this.el.className+=" shepherd-has-cancel-link",this.bindCancelLink(c)}s(this.options.text)||!function(){var s=u("<div class='shepherd-text'></div>"),o=n.options.text;"function"==typeof o&&(o=o.call(n,s)),o instanceof HTMLElement?s.appendChild(o):("string"==typeof o&&(o=[o]),o.map(function(n){s.innerHTML+="<p>"+n+"</p>"})),i.appendChild(s)}(),this.options.buttons&&!function(){var s=document.createElement("footer"),o=u("<ul class='shepherd-buttons'></ul>");n.options.buttons.map(function(i){var s=u("<li><a class='shepherd-button "+(i.classes||"")+"'>"+i.text+"</a>");o.appendChild(s),n.bindButtonEvents(i,s.querySelector("a"))}),s.appendChild(o),i.appendChild(s)}(),document.body.appendChild(this.el),this.setupTether(),this.options.advanceOn&&this.bindAdvance()}},{key:"bindCancelLink",value:function(n){var i=this;n.addEventListener("click",function(e){e.preventDefault(),i.cancel()})}},{key:"bindButtonEvents",value:function(n,i){var o=this;n.events=n.events||{},s(n.action)||(n.events.click=n.action);for(var c in n.events)if({}.hasOwnProperty.call(n.events,c)){var a=n.events[c];"string"==typeof a&&!function(){var n=a;a=function(){return o.tour.show(n)}}(),i.addEventListener(c,a)}this.on("destroy",function(){for(var s in n.events)if({}.hasOwnProperty.call(n.events,s)){var o=n.events[s];i.removeEventListener(s,o)}})}}]),m}(y),M=function(o){function c(){var i=this,s=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];n(this,c),v(Object.getPrototypeOf(c.prototype),"constructor",this).call(this,s),this.bindMethods(),this.options=s,this.steps=this.options.steps||[];var o=["complete","cancel","hide","start","show","active","inactive"];return o.map(function(n){!function(e){i.on(e,function(n){n=n||{},n.tour=i,O.trigger(e,n)})}(n)}),this}return i(c,o),f(c,[{key:"bindMethods",value:function(){var n=this,i=["next","back","cancel","complete","hide"];i.map(function(i){n[i]=n[i].bind(n)})}},{key:"addStep",value:function(n,i){return s(i)&&(i=n),i instanceof E?i.tour=this:(("string"==typeof n||"number"==typeof n)&&(i.id=n.toString()),i=b({},this.options.defaults,i),i=new E(this,i)),this.steps.push(i),this}},{key:"removeStep",value:function(n){for(var i=this.getCurrentStep(),s=0;s<this.steps.length;++s){var o=this.steps[s];if(o.id===n){o.hide(),o.destroy(),this.steps.splice(s,1);break}}i&&i.id===n&&(this.currentStep=void 0,this.steps.length?this.show(0):this.hide())}},{key:"getById",value:function(n){for(var i=0;i<this.steps.length;++i){var s=this.steps[i];if(s.id===n)return s}}},{key:"getCurrentStep",value:function(){return this.currentStep}},{key:"next",value:function(){var n=this.steps.indexOf(this.currentStep);n===this.steps.length-1?(this.hide(n),this.trigger("complete"),this.done()):this.show(n+1,!0)}},{key:"back",value:function(){var n=this.steps.indexOf(this.currentStep);this.show(n-1,!1)}},{key:"cancel",value:function(){this.currentStep&&this.currentStep.hide(),this.trigger("cancel"),this.done()}},{key:"complete",value:function(){this.currentStep&&this.currentStep.hide(),this.trigger("complete"),this.done()}},{key:"hide",value:function(){this.currentStep&&this.currentStep.hide(),this.trigger("hide"),this.done()}},{key:"done",value:function(){O.activeTour=null,k(document.body,"shepherd-active"),this.trigger("inactive",{tour:this})}},{key:"show",value:function(){var n=arguments.length<=0||void 0===arguments[0]?0:arguments[0],i=arguments.length<=1||void 0===arguments[1]?!0:arguments[1];this.currentStep?this.currentStep.hide():(g(document.body,"shepherd-active"),this.trigger("active",{tour:this})),O.activeTour=this;var o=void 0;if(o="string"==typeof n?this.getById(n):this.steps[n])if(s(o.options.showOn)||o.options.showOn())this.trigger("show",{step:o,previous:this.currentStep}),this.currentStep&&this.currentStep.hide(),this.currentStep=o,o.show();else{var c=this.steps.indexOf(o),a=i?c+1:c-1;this.show(a,i)}}},{key:"start",value:function(){this.trigger("start"),this.currentStep=null,this.next()}}]),c}(y);return b(O,{Tour:M,Step:E,Evented:y}),O});
\ No newline at end of file
diff --git a/demo/lib/tether/tether.js b/demo/lib/tether/tether.js
deleted file mode 100755
index d5d026151a..0000000000
--- a/demo/lib/tether/tether.js
+++ /dev/null
@@ -1,1443 +0,0 @@
-/*! tether 0.6.5 */
-
-
-(function(root, factory) {
- if (typeof define === 'function' && define.amd) {
- define(factory);
- } else if (typeof exports === 'object') {
- module.exports = factory(require,exports,module);
- } else {
- root.Tether = factory();
- }
-}(this, function(require,exports,module) {
-
-(function() {
- var Evented, addClass, defer, deferred, extend, flush, getBounds, getOffsetParent, getOrigin, getScrollBarSize, getScrollParent, hasClass, node, removeClass, uniqueId, updateClasses, zeroPosCache,
- __hasProp = {}.hasOwnProperty,
- __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
- __slice = [].slice;
-
- if (this.Tether == null) {
- this.Tether = {
- modules: []
- };
- }
-
- getScrollParent = function(el) {
- var parent, position, scrollParent, style, _ref;
- position = getComputedStyle(el).position;
- if (position === 'fixed') {
- return el;
- }
- scrollParent = void 0;
- parent = el;
- while (parent = parent.parentNode) {
- try {
- style = getComputedStyle(parent);
- } catch (_error) {}
- if (style == null) {
- return parent;
- }
- if (/(auto|scroll)/.test(style['overflow'] + style['overflow-y'] + style['overflow-x'])) {
- if (position !== 'absolute' || ((_ref = style['position']) === 'relative' || _ref === 'absolute' || _ref === 'fixed')) {
- return parent;
- }
- }
- }
- return document.body;
- };
-
- uniqueId = (function() {
- var id;
- id = 0;
- return function() {
- return id++;
- };
- })();
-
- zeroPosCache = {};
-
- getOrigin = function(doc) {
- var id, k, node, v, _ref;
- node = doc._tetherZeroElement;
- if (node == null) {
- node = doc.createElement('div');
- node.setAttribute('data-tether-id', uniqueId());
- extend(node.style, {
- top: 0,
- left: 0,
- position: 'absolute'
- });
- doc.body.appendChild(node);
- doc._tetherZeroElement = node;
- }
- id = node.getAttribute('data-tether-id');
- if (zeroPosCache[id] == null) {
- zeroPosCache[id] = {};
- _ref = node.getBoundingClientRect();
- for (k in _ref) {
- v = _ref[k];
- zeroPosCache[id][k] = v;
- }
- defer(function() {
- return zeroPosCache[id] = void 0;
- });
- }
- return zeroPosCache[id];
- };
-
- node = null;
-
- getBounds = function(el) {
- var box, doc, docEl, k, origin, v, _ref;
- if (el === document) {
- doc = document;
- el = document.documentElement;
- } else {
- doc = el.ownerDocument;
- }
- docEl = doc.documentElement;
- box = {};
- _ref = el.getBoundingClientRect();
- for (k in _ref) {
- v = _ref[k];
- box[k] = v;
- }
- origin = getOrigin(doc);
- box.top -= origin.top;
- box.left -= origin.left;
- if (box.width == null) {
- box.width = document.body.scrollWidth - box.left - box.right;
- }
- if (box.height == null) {
- box.height = document.body.scrollHeight - box.top - box.bottom;
- }
- box.top = box.top - docEl.clientTop;
- box.left = box.left - docEl.clientLeft;
- box.right = doc.body.clientWidth - box.width - box.left;
- box.bottom = doc.body.clientHeight - box.height - box.top;
- return box;
- };
-
- getOffsetParent = function(el) {
- return el.offsetParent || document.documentElement;
- };
-
- getScrollBarSize = function() {
- var inner, outer, width, widthContained, widthScroll;
- inner = document.createElement('div');
- inner.style.width = '100%';
- inner.style.height = '200px';
- outer = document.createElement('div');
- extend(outer.style, {
- position: 'absolute',
- top: 0,
- left: 0,
- pointerEvents: 'none',
- visibility: 'hidden',
- width: '200px',
- height: '150px',
- overflow: 'hidden'
- });
- outer.appendChild(inner);
- document.body.appendChild(outer);
- widthContained = inner.offsetWidth;
- outer.style.overflow = 'scroll';
- widthScroll = inner.offsetWidth;
- if (widthContained === widthScroll) {
- widthScroll = outer.clientWidth;
- }
- document.body.removeChild(outer);
- width = widthContained - widthScroll;
- return {
- width: width,
- height: width
- };
- };
-
- extend = function(out) {
- var args, key, obj, val, _i, _len, _ref;
- if (out == null) {
- out = {};
- }
- args = [];
- Array.prototype.push.apply(args, arguments);
- _ref = args.slice(1);
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- obj = _ref[_i];
- if (obj) {
- for (key in obj) {
- if (!__hasProp.call(obj, key)) continue;
- val = obj[key];
- out[key] = val;
- }
- }
- }
- return out;
- };
-
- removeClass = function(el, name) {
- var cls, _i, _len, _ref, _results;
- if (el.classList != null) {
- _ref = name.split(' ');
- _results = [];
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- cls = _ref[_i];
- if (cls.trim()) {
- _results.push(el.classList.remove(cls));
- }
- }
- return _results;
- } else {
- return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ');
- }
- };
-
- addClass = function(el, name) {
- var cls, _i, _len, _ref, _results;
- if (el.classList != null) {
- _ref = name.split(' ');
- _results = [];
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- cls = _ref[_i];
- if (cls.trim()) {
- _results.push(el.classList.add(cls));
- }
- }
- return _results;
- } else {
- removeClass(el, name);
- return el.className += " " + name;
- }
- };
-
- hasClass = function(el, name) {
- if (el.classList != null) {
- return el.classList.contains(name);
- } else {
- return new RegExp("(^| )" + name + "( |$)", 'gi').test(el.className);
- }
- };
-
- updateClasses = function(el, add, all) {
- var cls, _i, _j, _len, _len1, _results;
- for (_i = 0, _len = all.length; _i < _len; _i++) {
- cls = all[_i];
- if (__indexOf.call(add, cls) < 0) {
- if (hasClass(el, cls)) {
- removeClass(el, cls);
- }
- }
- }
- _results = [];
- for (_j = 0, _len1 = add.length; _j < _len1; _j++) {
- cls = add[_j];
- if (!hasClass(el, cls)) {
- _results.push(addClass(el, cls));
- } else {
- _results.push(void 0);
- }
- }
- return _results;
- };
-
- deferred = [];
-
- defer = function(fn) {
- return deferred.push(fn);
- };
-
- flush = function() {
- var fn, _results;
- _results = [];
- while (fn = deferred.pop()) {
- _results.push(fn());
- }
- return _results;
- };
-
- Evented = (function() {
- function Evented() {}
-
- Evented.prototype.on = function(event, handler, ctx, once) {
- var _base;
- if (once == null) {
- once = false;
- }
- if (this.bindings == null) {
- this.bindings = {};
- }
- if ((_base = this.bindings)[event] == null) {
- _base[event] = [];
- }
- return this.bindings[event].push({
- handler: handler,
- ctx: ctx,
- once: once
- });
- };
-
- Evented.prototype.once = function(event, handler, ctx) {
- return this.on(event, handler, ctx, true);
- };
-
- Evented.prototype.off = function(event, handler) {
- var i, _ref, _results;
- if (((_ref = this.bindings) != null ? _ref[event] : void 0) == null) {
- return;
- }
- if (handler == null) {
- return delete this.bindings[event];
- } else {
- i = 0;
- _results = [];
- while (i < this.bindings[event].length) {
- if (this.bindings[event][i].handler === handler) {
- _results.push(this.bindings[event].splice(i, 1));
- } else {
- _results.push(i++);
- }
- }
- return _results;
- }
- };
-
- Evented.prototype.trigger = function() {
- var args, ctx, event, handler, i, once, _ref, _ref1, _results;
- event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
- if ((_ref = this.bindings) != null ? _ref[event] : void 0) {
- i = 0;
- _results = [];
- while (i < this.bindings[event].length) {
- _ref1 = this.bindings[event][i], handler = _ref1.handler, ctx = _ref1.ctx, once = _ref1.once;
- handler.apply(ctx != null ? ctx : this, args);
- if (once) {
- _results.push(this.bindings[event].splice(i, 1));
- } else {
- _results.push(i++);
- }
- }
- return _results;
- }
- };
-
- return Evented;
-
- })();
-
- this.Tether.Utils = {
- getScrollParent: getScrollParent,
- getBounds: getBounds,
- getOffsetParent: getOffsetParent,
- extend: extend,
- addClass: addClass,
- removeClass: removeClass,
- hasClass: hasClass,
- updateClasses: updateClasses,
- defer: defer,
- flush: flush,
- uniqueId: uniqueId,
- Evented: Evented,
- getScrollBarSize: getScrollBarSize
- };
-
-}).call(this);
-
-(function() {
- var MIRROR_LR, MIRROR_TB, OFFSET_MAP, Tether, addClass, addOffset, attachmentToOffset, autoToFixedAttachment, defer, extend, flush, getBounds, getOffsetParent, getOuterSize, getScrollBarSize, getScrollParent, getSize, now, offsetToPx, parseAttachment, parseOffset, position, removeClass, tethers, transformKey, updateClasses, within, _Tether, _ref,
- __slice = [].slice,
- __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
- if (this.Tether == null) {
- throw new Error("You must include the utils.js file before tether.js");
- }
-
- Tether = this.Tether;
-
- _ref = Tether.Utils, getScrollParent = _ref.getScrollParent, getSize = _ref.getSize, getOuterSize = _ref.getOuterSize, getBounds = _ref.getBounds, getOffsetParent = _ref.getOffsetParent, extend = _ref.extend, addClass = _ref.addClass, removeClass = _ref.removeClass, updateClasses = _ref.updateClasses, defer = _ref.defer, flush = _ref.flush, getScrollBarSize = _ref.getScrollBarSize;
-
- within = function(a, b, diff) {
- if (diff == null) {
- diff = 1;
- }
- return (a + diff >= b && b >= a - diff);
- };
-
- transformKey = (function() {
- var el, key, _i, _len, _ref1;
- el = document.createElement('div');
- _ref1 = ['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform'];
- for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
- key = _ref1[_i];
- if (el.style[key] !== void 0) {
- return key;
- }
- }
- })();
-
- tethers = [];
-
- position = function() {
- var tether, _i, _len;
- for (_i = 0, _len = tethers.length; _i < _len; _i++) {
- tether = tethers[_i];
- tether.position(false);
- }
- return flush();
- };
-
- now = function() {
- var _ref1;
- return (_ref1 = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref1 : +(new Date);
- };
-
- (function() {
- var event, lastCall, lastDuration, pendingTimeout, tick, _i, _len, _ref1, _results;
- lastCall = null;
- lastDuration = null;
- pendingTimeout = null;
- tick = function() {
- if ((lastDuration != null) && lastDuration > 16) {
- lastDuration = Math.min(lastDuration - 16, 250);
- pendingTimeout = setTimeout(tick, 250);
- return;
- }
- if ((lastCall != null) && (now() - lastCall) < 10) {
- return;
- }
- if (pendingTimeout != null) {
- clearTimeout(pendingTimeout);
- pendingTimeout = null;
- }
- lastCall = now();
- position();
- return lastDuration = now() - lastCall;
- };
- _ref1 = ['resize', 'scroll', 'touchmove'];
- _results = [];
- for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
- event = _ref1[_i];
- _results.push(window.addEventListener(event, tick));
- }
- return _results;
- })();
-
- MIRROR_LR = {
- center: 'center',
- left: 'right',
- right: 'left'
- };
-
- MIRROR_TB = {
- middle: 'middle',
- top: 'bottom',
- bottom: 'top'
- };
-
- OFFSET_MAP = {
- top: 0,
- left: 0,
- middle: '50%',
- center: '50%',
- bottom: '100%',
- right: '100%'
- };
-
- autoToFixedAttachment = function(attachment, relativeToAttachment) {
- var left, top;
- left = attachment.left, top = attachment.top;
- if (left === 'auto') {
- left = MIRROR_LR[relativeToAttachment.left];
- }
- if (top === 'auto') {
- top = MIRROR_TB[relativeToAttachment.top];
- }
- return {
- left: left,
- top: top
- };
- };
-
- attachmentToOffset = function(attachment) {
- var _ref1, _ref2;
- return {
- left: (_ref1 = OFFSET_MAP[attachment.left]) != null ? _ref1 : attachment.left,
- top: (_ref2 = OFFSET_MAP[attachment.top]) != null ? _ref2 : attachment.top
- };
- };
-
- addOffset = function() {
- var left, offsets, out, top, _i, _len, _ref1;
- offsets = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
- out = {
- top: 0,
- left: 0
- };
- for (_i = 0, _len = offsets.length; _i < _len; _i++) {
- _ref1 = offsets[_i], top = _ref1.top, left = _ref1.left;
- if (typeof top === 'string') {
- top = parseFloat(top, 10);
- }
- if (typeof left === 'string') {
- left = parseFloat(left, 10);
- }
- out.top += top;
- out.left += left;
- }
- return out;
- };
-
- offsetToPx = function(offset, size) {
- if (typeof offset.left === 'string' && offset.left.indexOf('%') !== -1) {
- offset.left = parseFloat(offset.left, 10) / 100 * size.width;
- }
- if (typeof offset.top === 'string' && offset.top.indexOf('%') !== -1) {
- offset.top = parseFloat(offset.top, 10) / 100 * size.height;
- }
- return offset;
- };
-
- parseAttachment = parseOffset = function(value) {
- var left, top, _ref1;
- _ref1 = value.split(' '), top = _ref1[0], left = _ref1[1];
- return {
- top: top,
- left: left
- };
- };
-
- _Tether = (function() {
- _Tether.modules = [];
-
- function _Tether(options) {
- this.position = __bind(this.position, this);
- var module, _i, _len, _ref1, _ref2;
- tethers.push(this);
- this.history = [];
- this.setOptions(options, false);
- _ref1 = Tether.modules;
- for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
- module = _ref1[_i];
- if ((_ref2 = module.initialize) != null) {
- _ref2.call(this);
- }
- }
- this.position();
- }
-
- _Tether.prototype.getClass = function(key) {
- var _ref1, _ref2;
- if ((_ref1 = this.options.classes) != null ? _ref1[key] : void 0) {
- return this.options.classes[key];
- } else if (((_ref2 = this.options.classes) != null ? _ref2[key] : void 0) !== false) {
- if (this.options.classPrefix) {
- return "" + this.options.classPrefix + "-" + key;
- } else {
- return key;
- }
- } else {
- return '';
- }
- };
-
- _Tether.prototype.setOptions = function(options, position) {
- var defaults, key, _i, _len, _ref1, _ref2;
- this.options = options;
- if (position == null) {
- position = true;
- }
- defaults = {
- offset: '0 0',
- targetOffset: '0 0',
- targetAttachment: 'auto auto',
- classPrefix: 'tether'
- };
- this.options = extend(defaults, this.options);
- _ref1 = this.options, this.element = _ref1.element, this.target = _ref1.target, this.targetModifier = _ref1.targetModifier;
- if (this.target === 'viewport') {
- this.target = document.body;
- this.targetModifier = 'visible';
- } else if (this.target === 'scroll-handle') {
- this.target = document.body;
- this.targetModifier = 'scroll-handle';
- }
- _ref2 = ['element', 'target'];
- for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
- key = _ref2[_i];
- if (this[key] == null) {
- throw new Error("Tether Error: Both element and target must be defined");
- }
- if (this[key].jquery != null) {
- this[key] = this[key][0];
- } else if (typeof this[key] === 'string') {
- this[key] = document.querySelector(this[key]);
- }
- }
- addClass(this.element, this.getClass('element'));
- addClass(this.target, this.getClass('target'));
- if (!this.options.attachment) {
- throw new Error("Tether Error: You must provide an attachment");
- }
- this.targetAttachment = parseAttachment(this.options.targetAttachment);
- this.attachment = parseAttachment(this.options.attachment);
- this.offset = parseOffset(this.options.offset);
- this.targetOffset = parseOffset(this.options.targetOffset);
- if (this.scrollParent != null) {
- this.disable();
- }
- if (this.targetModifier === 'scroll-handle') {
- this.scrollParent = this.target;
- } else {
- this.scrollParent = getScrollParent(this.target);
- }
- if (this.options.enabled !== false) {
- return this.enable(position);
- }
- };
-
- _Tether.prototype.getTargetBounds = function() {
- var bounds, fitAdj, hasBottomScroll, height, out, scrollBottom, scrollPercentage, style, target;
- if (this.targetModifier != null) {
- switch (this.targetModifier) {
- case 'visible':
- if (this.target === document.body) {
- return {
- top: pageYOffset,
- left: pageXOffset,
- height: innerHeight,
- width: innerWidth
- };
- } else {
- bounds = getBounds(this.target);
- out = {
- height: bounds.height,
- width: bounds.width,
- top: bounds.top,
- left: bounds.left
- };
- out.height = Math.min(out.height, bounds.height - (pageYOffset - bounds.top));
- out.height = Math.min(out.height, bounds.height - ((bounds.top + bounds.height) - (pageYOffset + innerHeight)));
- out.height = Math.min(innerHeight, out.height);
- out.height -= 2;
- out.width = Math.min(out.width, bounds.width - (pageXOffset - bounds.left));
- out.width = Math.min(out.width, bounds.width - ((bounds.left + bounds.width) - (pageXOffset + innerWidth)));
- out.width = Math.min(innerWidth, out.width);
- out.width -= 2;
- if (out.top < pageYOffset) {
- out.top = pageYOffset;
- }
- if (out.left < pageXOffset) {
- out.left = pageXOffset;
- }
- return out;
- }
- break;
- case 'scroll-handle':
- target = this.target;
- if (target === document.body) {
- target = document.documentElement;
- bounds = {
- left: pageXOffset,
- top: pageYOffset,
- height: innerHeight,
- width: innerWidth
- };
- } else {
- bounds = getBounds(target);
- }
- style = getComputedStyle(target);
- hasBottomScroll = target.scrollWidth > target.clientWidth || 'scroll' === [style.overflow, style.overflowX] || this.target !== document.body;
- scrollBottom = 0;
- if (hasBottomScroll) {
- scrollBottom = 15;
- }
- height = bounds.height - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth) - scrollBottom;
- out = {
- width: 15,
- height: height * 0.975 * (height / target.scrollHeight),
- left: bounds.left + bounds.width - parseFloat(style.borderLeftWidth) - 15
- };
- fitAdj = 0;
- if (height < 408 && this.target === document.body) {
- fitAdj = -0.00011 * Math.pow(height, 2) - 0.00727 * height + 22.58;
- }
- if (this.target !== document.body) {
- out.height = Math.max(out.height, 24);
- }
- scrollPercentage = this.target.scrollTop / (target.scrollHeight - height);
- out.top = scrollPercentage * (height - out.height - fitAdj) + bounds.top + parseFloat(style.borderTopWidth);
- if (this.target === document.body) {
- out.height = Math.max(out.height, 24);
- }
- return out;
- }
- } else {
- return getBounds(this.target);
- }
- };
-
- _Tether.prototype.clearCache = function() {
- return this._cache = {};
- };
-
- _Tether.prototype.cache = function(k, getter) {
- if (this._cache == null) {
- this._cache = {};
- }
- if (this._cache[k] == null) {
- this._cache[k] = getter.call(this);
- }
- return this._cache[k];
- };
-
- _Tether.prototype.enable = function(position) {
- if (position == null) {
- position = true;
- }
- addClass(this.target, this.getClass('enabled'));
- addClass(this.element, this.getClass('enabled'));
- this.enabled = true;
- if (this.scrollParent !== document) {
- this.scrollParent.addEventListener('scroll', this.position);
- }
- if (position) {
- return this.position();
- }
- };
-
- _Tether.prototype.disable = function() {
- removeClass(this.target, this.getClass('enabled'));
- removeClass(this.element, this.getClass('enabled'));
- this.enabled = false;
- if (this.scrollParent != null) {
- return this.scrollParent.removeEventListener('scroll', this.position);
- }
- };
-
- _Tether.prototype.destroy = function() {
- var i, tether, _i, _len, _results;
- this.disable();
- _results = [];
- for (i = _i = 0, _len = tethers.length; _i < _len; i = ++_i) {
- tether = tethers[i];
- if (tether === this) {
- tethers.splice(i, 1);
- break;
- } else {
- _results.push(void 0);
- }
- }
- return _results;
- };
-
- _Tether.prototype.updateAttachClasses = function(elementAttach, targetAttach) {
- var add, all, side, sides, _i, _j, _len, _len1, _ref1,
- _this = this;
- if (elementAttach == null) {
- elementAttach = this.attachment;
- }
- if (targetAttach == null) {
- targetAttach = this.targetAttachment;
- }
- sides = ['left', 'top', 'bottom', 'right', 'middle', 'center'];
- if ((_ref1 = this._addAttachClasses) != null ? _ref1.length : void 0) {
- this._addAttachClasses.splice(0, this._addAttachClasses.length);
- }
- add = this._addAttachClasses != null ? this._addAttachClasses : this._addAttachClasses = [];
- if (elementAttach.top) {
- add.push("" + (this.getClass('element-attached')) + "-" + elementAttach.top);
- }
- if (elementAttach.left) {
- add.push("" + (this.getClass('element-attached')) + "-" + elementAttach.left);
- }
- if (targetAttach.top) {
- add.push("" + (this.getClass('target-attached')) + "-" + targetAttach.top);
- }
- if (targetAttach.left) {
- add.push("" + (this.getClass('target-attached')) + "-" + targetAttach.left);
- }
- all = [];
- for (_i = 0, _len = sides.length; _i < _len; _i++) {
- side = sides[_i];
- all.push("" + (this.getClass('element-attached')) + "-" + side);
- }
- for (_j = 0, _len1 = sides.length; _j < _len1; _j++) {
- side = sides[_j];
- all.push("" + (this.getClass('target-attached')) + "-" + side);
- }
- return defer(function() {
- if (_this._addAttachClasses == null) {
- return;
- }
- updateClasses(_this.element, _this._addAttachClasses, all);
- updateClasses(_this.target, _this._addAttachClasses, all);
- return _this._addAttachClasses = void 0;
- });
- };
-
- _Tether.prototype.position = function(flushChanges) {
- var elementPos, elementStyle, height, left, manualOffset, manualTargetOffset, module, next, offset, offsetBorder, offsetParent, offsetParentSize, offsetParentStyle, offsetPosition, ret, scrollLeft, scrollTop, scrollbarSize, side, targetAttachment, targetOffset, targetPos, targetSize, top, width, _i, _j, _len, _len1, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6,
- _this = this;
- if (flushChanges == null) {
- flushChanges = true;
- }
- if (!this.enabled) {
- return;
- }
- this.clearCache();
- targetAttachment = autoToFixedAttachment(this.targetAttachment, this.attachment);
- this.updateAttachClasses(this.attachment, targetAttachment);
- elementPos = this.cache('element-bounds', function() {
- return getBounds(_this.element);
- });
- width = elementPos.width, height = elementPos.height;
- if (width === 0 && height === 0 && (this.lastSize != null)) {
- _ref1 = this.lastSize, width = _ref1.width, height = _ref1.height;
- } else {
- this.lastSize = {
- width: width,
- height: height
- };
- }
- targetSize = targetPos = this.cache('target-bounds', function() {
- return _this.getTargetBounds();
- });
- offset = offsetToPx(attachmentToOffset(this.attachment), {
- width: width,
- height: height
- });
- targetOffset = offsetToPx(attachmentToOffset(targetAttachment), targetSize);
- manualOffset = offsetToPx(this.offset, {
- width: width,
- height: height
- });
- manualTargetOffset = offsetToPx(this.targetOffset, targetSize);
- offset = addOffset(offset, manualOffset);
- targetOffset = addOffset(targetOffset, manualTargetOffset);
- left = targetPos.left + targetOffset.left - offset.left;
- top = targetPos.top + targetOffset.top - offset.top;
- _ref2 = Tether.modules;
- for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
- module = _ref2[_i];
- ret = module.position.call(this, {
- left: left,
- top: top,
- targetAttachment: targetAttachment,
- targetPos: targetPos,
- attachment: this.attachment,
- elementPos: elementPos,
- offset: offset,
- targetOffset: targetOffset,
- manualOffset: manualOffset,
- manualTargetOffset: manualTargetOffset,
- scrollbarSize: scrollbarSize
- });
- if ((ret == null) || typeof ret !== 'object') {
- continue;
- } else if (ret === false) {
- return false;
- } else {
- top = ret.top, left = ret.left;
- }
- }
- next = {
- page: {
- top: top,
- left: left
- },
- viewport: {
- top: top - pageYOffset,
- bottom: pageYOffset - top - height + innerHeight,
- left: left - pageXOffset,
- right: pageXOffset - left - width + innerWidth
- }
- };
- if (document.body.scrollWidth > window.innerWidth) {
- scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
- next.viewport.bottom -= scrollbarSize.height;
- }
- if (document.body.scrollHeight > window.innerHeight) {
- scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
- next.viewport.right -= scrollbarSize.width;
- }
- if (((_ref3 = document.body.style.position) !== '' && _ref3 !== 'static') || ((_ref4 = document.body.parentElement.style.position) !== '' && _ref4 !== 'static')) {
- next.page.bottom = document.body.scrollHeight - top - height;
- next.page.right = document.body.scrollWidth - left - width;
- }
- if (((_ref5 = this.options.optimizations) != null ? _ref5.moveElement : void 0) !== false && (this.targetModifier == null)) {
- offsetParent = this.cache('target-offsetparent', function() {
- return getOffsetParent(_this.target);
- });
- offsetPosition = this.cache('target-offsetparent-bounds', function() {
- return getBounds(offsetParent);
- });
- offsetParentStyle = getComputedStyle(offsetParent);
- elementStyle = getComputedStyle(this.element);
- offsetParentSize = offsetPosition;
- offsetBorder = {};
- _ref6 = ['Top', 'Left', 'Bottom', 'Right'];
- for (_j = 0, _len1 = _ref6.length; _j < _len1; _j++) {
- side = _ref6[_j];
- offsetBorder[side.toLowerCase()] = parseFloat(offsetParentStyle["border" + side + "Width"]);
- }
- offsetPosition.right = document.body.scrollWidth - offsetPosition.left - offsetParentSize.width + offsetBorder.right;
- offsetPosition.bottom = document.body.scrollHeight - offsetPosition.top - offsetParentSize.height + offsetBorder.bottom;
- if (next.page.top >= (offsetPosition.top + offsetBorder.top) && next.page.bottom >= offsetPosition.bottom) {
- if (next.page.left >= (offsetPosition.left + offsetBorder.left) && next.page.right >= offsetPosition.right) {
- scrollTop = offsetParent.scrollTop;
- scrollLeft = offsetParent.scrollLeft;
- next.offset = {
- top: next.page.top - offsetPosition.top + scrollTop - offsetBorder.top,
- left: next.page.left - offsetPosition.left + scrollLeft - offsetBorder.left
- };
- }
- }
- }
- this.move(next);
- this.history.unshift(next);
- if (this.history.length > 3) {
- this.history.pop();
- }
- if (flushChanges) {
- flush();
- }
- return true;
- };
-
- _Tether.prototype.move = function(position) {
- var css, elVal, found, key, moved, offsetParent, point, same, transcribe, type, val, write, writeCSS, _i, _len, _ref1, _ref2,
- _this = this;
- if (this.element.parentNode == null) {
- return;
- }
- same = {};
- for (type in position) {
- same[type] = {};
- for (key in position[type]) {
- found = false;
- _ref1 = this.history;
- for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
- point = _ref1[_i];
- if (!within((_ref2 = point[type]) != null ? _ref2[key] : void 0, position[type][key])) {
- found = true;
- break;
- }
- }
- if (!found) {
- same[type][key] = true;
- }
- }
- }
- css = {
- top: '',
- left: '',
- right: '',
- bottom: ''
- };
- transcribe = function(same, pos) {
- var xPos, yPos, _ref3;
- if (((_ref3 = _this.options.optimizations) != null ? _ref3.gpu : void 0) !== false) {
- if (same.top) {
- css.top = 0;
- yPos = pos.top;
- } else {
- css.bottom = 0;
- yPos = -pos.bottom;
- }
- if (same.left) {
- css.left = 0;
- xPos = pos.left;
- } else {
- css.right = 0;
- xPos = -pos.right;
- }
- css[transformKey] = "translateX(" + (Math.round(xPos)) + "px) translateY(" + (Math.round(yPos)) + "px)";
- if (transformKey !== 'msTransform') {
- return css[transformKey] += " translateZ(0)";
- }
- } else {
- if (same.top) {
- css.top = "" + pos.top + "px";
- } else {
- css.bottom = "" + pos.bottom + "px";
- }
- if (same.left) {
- return css.left = "" + pos.left + "px";
- } else {
- return css.right = "" + pos.right + "px";
- }
- }
- };
- moved = false;
- if ((same.page.top || same.page.bottom) && (same.page.left || same.page.right)) {
- css.position = 'absolute';
- transcribe(same.page, position.page);
- } else if ((same.viewport.top || same.viewport.bottom) && (same.viewport.left || same.viewport.right)) {
- css.position = 'fixed';
- transcribe(same.viewport, position.viewport);
- } else if ((same.offset != null) && same.offset.top && same.offset.left) {
- css.position = 'absolute';
- offsetParent = this.cache('target-offsetparent', function() {
- return getOffsetParent(_this.target);
- });
- if (getOffsetParent(this.element) !== offsetParent) {
- defer(function() {
- _this.element.parentNode.removeChild(_this.element);
- return offsetParent.appendChild(_this.element);
- });
- }
- transcribe(same.offset, position.offset);
- moved = true;
- } else {
- css.position = 'absolute';
- transcribe({
- top: true,
- left: true
- }, position.page);
- }
- if (!moved && this.element.parentNode.tagName !== 'BODY') {
- this.element.parentNode.removeChild(this.element);
- document.body.appendChild(this.element);
- }
- writeCSS = {};
- write = false;
- for (key in css) {
- val = css[key];
- elVal = this.element.style[key];
- if (elVal !== '' && val !== '' && (key === 'top' || key === 'left' || key === 'bottom' || key === 'right')) {
- elVal = parseFloat(elVal);
- val = parseFloat(val);
- }
- if (elVal !== val) {
- write = true;
- writeCSS[key] = css[key];
- }
- }
- if (write) {
- return defer(function() {
- return extend(_this.element.style, writeCSS);
- });
- }
- };
-
- return _Tether;
-
- })();
-
- Tether.position = position;
-
- this.Tether = extend(_Tether, Tether);
-
-}).call(this);
-
-(function() {
- var BOUNDS_FORMAT, MIRROR_ATTACH, defer, extend, getBoundingRect, getBounds, getOuterSize, getSize, updateClasses, _ref,
- __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
-
- _ref = this.Tether.Utils, getOuterSize = _ref.getOuterSize, getBounds = _ref.getBounds, getSize = _ref.getSize, extend = _ref.extend, updateClasses = _ref.updateClasses, defer = _ref.defer;
-
- MIRROR_ATTACH = {
- left: 'right',
- right: 'left',
- top: 'bottom',
- bottom: 'top',
- middle: 'middle'
- };
-
- BOUNDS_FORMAT = ['left', 'top', 'right', 'bottom'];
-
- getBoundingRect = function(tether, to) {
- var i, pos, side, size, style, _i, _len;
- if (to === 'scrollParent') {
- to = tether.scrollParent;
- } else if (to === 'window') {
- to = [pageXOffset, pageYOffset, innerWidth + pageXOffset, innerHeight + pageYOffset];
- }
- if (to === document) {
- to = to.documentElement;
- }
- if (to.nodeType != null) {
- pos = size = getBounds(to);
- style = getComputedStyle(to);
- to = [pos.left, pos.top, size.width + pos.left, size.height + pos.top];
- for (i = _i = 0, _len = BOUNDS_FORMAT.length; _i < _len; i = ++_i) {
- side = BOUNDS_FORMAT[i];
- side = side[0].toUpperCase() + side.substr(1);
- if (side === 'Top' || side === 'Left') {
- to[i] += parseFloat(style["border" + side + "Width"]);
- } else {
- to[i] -= parseFloat(style["border" + side + "Width"]);
- }
- }
- }
- return to;
- };
-
- this.Tether.modules.push({
- position: function(_arg) {
- var addClasses, allClasses, attachment, bounds, changeAttachX, changeAttachY, cls, constraint, eAttachment, height, left, oob, oobClass, p, pin, pinned, pinnedClass, removeClass, side, tAttachment, targetAttachment, targetHeight, targetSize, targetWidth, to, top, width, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _len5, _m, _n, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8,
- _this = this;
- top = _arg.top, left = _arg.left, targetAttachment = _arg.targetAttachment;
- if (!this.options.constraints) {
- return true;
- }
- removeClass = function(prefix) {
- var side, _i, _len, _results;
- _this.removeClass(prefix);
- _results = [];
- for (_i = 0, _len = BOUNDS_FORMAT.length; _i < _len; _i++) {
- side = BOUNDS_FORMAT[_i];
- _results.push(_this.removeClass("" + prefix + "-" + side));
- }
- return _results;
- };
- _ref1 = this.cache('element-bounds', function() {
- return getBounds(_this.element);
- }), height = _ref1.height, width = _ref1.width;
- if (width === 0 && height === 0 && (this.lastSize != null)) {
- _ref2 = this.lastSize, width = _ref2.width, height = _ref2.height;
- }
- targetSize = this.cache('target-bounds', function() {
- return _this.getTargetBounds();
- });
- targetHeight = targetSize.height;
- targetWidth = targetSize.width;
- tAttachment = {};
- eAttachment = {};
- allClasses = [this.getClass('pinned'), this.getClass('out-of-bounds')];
- _ref3 = this.options.constraints;
- for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
- constraint = _ref3[_i];
- if (constraint.outOfBoundsClass) {
- allClasses.push(constraint.outOfBoundsClass);
- }
- if (constraint.pinnedClass) {
- allClasses.push(constraint.pinnedClass);
- }
- }
- for (_j = 0, _len1 = allClasses.length; _j < _len1; _j++) {
- cls = allClasses[_j];
- _ref4 = ['left', 'top', 'right', 'bottom'];
- for (_k = 0, _len2 = _ref4.length; _k < _len2; _k++) {
- side = _ref4[_k];
- allClasses.push("" + cls + "-" + side);
- }
- }
- addClasses = [];
- tAttachment = extend({}, targetAttachment);
- eAttachment = extend({}, this.attachment);
- _ref5 = this.options.constraints;
- for (_l = 0, _len3 = _ref5.length; _l < _len3; _l++) {
- constraint = _ref5[_l];
- to = constraint.to, attachment = constraint.attachment, pin = constraint.pin;
- if (attachment == null) {
- attachment = '';
- }
- if (__indexOf.call(attachment, ' ') >= 0) {
- _ref6 = attachment.split(' '), changeAttachY = _ref6[0], changeAttachX = _ref6[1];
- } else {
- changeAttachX = changeAttachY = attachment;
- }
- bounds = getBoundingRect(this, to);
- if (changeAttachY === 'target' || changeAttachY === 'both') {
- if (top < bounds[1] && tAttachment.top === 'top') {
- top += targetHeight;
- tAttachment.top = 'bottom';
- }
- if (top + height > bounds[3] && tAttachment.top === 'bottom') {
- top -= targetHeight;
- tAttachment.top = 'top';
- }
- }
- if (changeAttachY === 'together') {
- if (top < bounds[1] && tAttachment.top === 'top') {
- if (eAttachment.top === 'bottom') {
- top += targetHeight;
- tAttachment.top = 'bottom';
- top += height;
- eAttachment.top = 'top';
- } else if (eAttachment.top === 'top') {
- top += targetHeight;
- tAttachment.top = 'bottom';
- top -= height;
- eAttachment.top = 'bottom';
- }
- }
- if (top + height > bounds[3] && tAttachment.top === 'bottom') {
- if (eAttachment.top === 'top') {
- top -= targetHeight;
- tAttachment.top = 'top';
- top -= height;
- eAttachment.top = 'bottom';
- } else if (eAttachment.top === 'bottom') {
- top -= targetHeight;
- tAttachment.top = 'top';
- top += height;
- eAttachment.top = 'top';
- }
- }
- if (tAttachment.top === 'middle') {
- if (top + height > bounds[3] && eAttachment.top === 'top') {
- top -= height;
- eAttachment.top = 'bottom';
- } else if (top < bounds[1] && eAttachment.top === 'bottom') {
- top += height;
- eAttachment.top = 'top';
- }
- }
- }
- if (changeAttachX === 'target' || changeAttachX === 'both') {
- if (left < bounds[0] && tAttachment.left === 'left') {
- left += targetWidth;
- tAttachment.left = 'right';
- }
- if (left + width > bounds[2] && tAttachment.left === 'right') {
- left -= targetWidth;
- tAttachment.left = 'left';
- }
- }
- if (changeAttachX === 'together') {
- if (left < bounds[0] && tAttachment.left === 'left') {
- if (eAttachment.left === 'right') {
- left += targetWidth;
- tAttachment.left = 'right';
- left += width;
- eAttachment.left = 'left';
- } else if (eAttachment.left === 'left') {
- left += targetWidth;
- tAttachment.left = 'right';
- left -= width;
- eAttachment.left = 'right';
- }
- } else if (left + width > bounds[2] && tAttachment.left === 'right') {
- if (eAttachment.left === 'left') {
- left -= targetWidth;
- tAttachment.left = 'left';
- left -= width;
- eAttachment.left = 'right';
- } else if (eAttachment.left === 'right') {
- left -= targetWidth;
- tAttachment.left = 'left';
- left += width;
- eAttachment.left = 'left';
- }
- } else if (tAttachment.left === 'center') {
- if (left + width > bounds[2] && eAttachment.left === 'left') {
- left -= width;
- eAttachment.left = 'right';
- } else if (left < bounds[0] && eAttachment.left === 'right') {
- left += width;
- eAttachment.left = 'left';
- }
- }
- }
- if (changeAttachY === 'element' || changeAttachY === 'both') {
- if (top < bounds[1] && eAttachment.top === 'bottom') {
- top += height;
- eAttachment.top = 'top';
- }
- if (top + height > bounds[3] && eAttachment.top === 'top') {
- top -= height;
- eAttachment.top = 'bottom';
- }
- }
- if (changeAttachX === 'element' || changeAttachX === 'both') {
- if (left < bounds[0] && eAttachment.left === 'right') {
- left += width;
- eAttachment.left = 'left';
- }
- if (left + width > bounds[2] && eAttachment.left === 'left') {
- left -= width;
- eAttachment.left = 'right';
- }
- }
- if (typeof pin === 'string') {
- pin = (function() {
- var _len4, _m, _ref7, _results;
- _ref7 = pin.split(',');
- _results = [];
- for (_m = 0, _len4 = _ref7.length; _m < _len4; _m++) {
- p = _ref7[_m];
- _results.push(p.trim());
- }
- return _results;
- })();
- } else if (pin === true) {
- pin = ['top', 'left', 'right', 'bottom'];
- }
- pin || (pin = []);
- pinned = [];
- oob = [];
- if (top < bounds[1]) {
- if (__indexOf.call(pin, 'top') >= 0) {
- top = bounds[1];
- pinned.push('top');
- } else {
- oob.push('top');
- }
- }
- if (top + height > bounds[3]) {
- if (__indexOf.call(pin, 'bottom') >= 0) {
- top = bounds[3] - height;
- pinned.push('bottom');
- } else {
- oob.push('bottom');
- }
- }
- if (left < bounds[0]) {
- if (__indexOf.call(pin, 'left') >= 0) {
- left = bounds[0];
- pinned.push('left');
- } else {
- oob.push('left');
- }
- }
- if (left + width > bounds[2]) {
- if (__indexOf.call(pin, 'right') >= 0) {
- left = bounds[2] - width;
- pinned.push('right');
- } else {
- oob.push('right');
- }
- }
- if (pinned.length) {
- pinnedClass = (_ref7 = this.options.pinnedClass) != null ? _ref7 : this.getClass('pinned');
- addClasses.push(pinnedClass);
- for (_m = 0, _len4 = pinned.length; _m < _len4; _m++) {
- side = pinned[_m];
- addClasses.push("" + pinnedClass + "-" + side);
- }
- }
- if (oob.length) {
- oobClass = (_ref8 = this.options.outOfBoundsClass) != null ? _ref8 : this.getClass('out-of-bounds');
- addClasses.push(oobClass);
- for (_n = 0, _len5 = oob.length; _n < _len5; _n++) {
- side = oob[_n];
- addClasses.push("" + oobClass + "-" + side);
- }
- }
- if (__indexOf.call(pinned, 'left') >= 0 || __indexOf.call(pinned, 'right') >= 0) {
- eAttachment.left = tAttachment.left = false;
- }
- if (__indexOf.call(pinned, 'top') >= 0 || __indexOf.call(pinned, 'bottom') >= 0) {
- eAttachment.top = tAttachment.top = false;
- }
- if (tAttachment.top !== targetAttachment.top || tAttachment.left !== targetAttachment.left || eAttachment.top !== this.attachment.top || eAttachment.left !== this.attachment.left) {
- this.updateAttachClasses(eAttachment, tAttachment);
- }
- }
- defer(function() {
- updateClasses(_this.target, addClasses, allClasses);
- return updateClasses(_this.element, addClasses, allClasses);
- });
- return {
- top: top,
- left: left
- };
- }
- });
-
-}).call(this);
-
-(function() {
- var defer, getBounds, updateClasses, _ref;
-
- _ref = this.Tether.Utils, getBounds = _ref.getBounds, updateClasses = _ref.updateClasses, defer = _ref.defer;
-
- this.Tether.modules.push({
- position: function(_arg) {
- var abutted, addClasses, allClasses, bottom, height, left, right, side, sides, targetPos, top, width, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref1, _ref2, _ref3, _ref4, _ref5,
- _this = this;
- top = _arg.top, left = _arg.left;
- _ref1 = this.cache('element-bounds', function() {
- return getBounds(_this.element);
- }), height = _ref1.height, width = _ref1.width;
- targetPos = this.getTargetBounds();
- bottom = top + height;
- right = left + width;
- abutted = [];
- if (top <= targetPos.bottom && bottom >= targetPos.top) {
- _ref2 = ['left', 'right'];
- for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
- side = _ref2[_i];
- if ((_ref3 = targetPos[side]) === left || _ref3 === right) {
- abutted.push(side);
- }
- }
- }
- if (left <= targetPos.right && right >= targetPos.left) {
- _ref4 = ['top', 'bottom'];
- for (_j = 0, _len1 = _ref4.length; _j < _len1; _j++) {
- side = _ref4[_j];
- if ((_ref5 = targetPos[side]) === top || _ref5 === bottom) {
- abutted.push(side);
- }
- }
- }
- allClasses = [];
- addClasses = [];
- sides = ['left', 'top', 'right', 'bottom'];
- allClasses.push(this.getClass('abutted'));
- for (_k = 0, _len2 = sides.length; _k < _len2; _k++) {
- side = sides[_k];
- allClasses.push("" + (this.getClass('abutted')) + "-" + side);
- }
- if (abutted.length) {
- addClasses.push(this.getClass('abutted'));
- }
- for (_l = 0, _len3 = abutted.length; _l < _len3; _l++) {
- side = abutted[_l];
- addClasses.push("" + (this.getClass('abutted')) + "-" + side);
- }
- defer(function() {
- updateClasses(_this.target, addClasses, allClasses);
- return updateClasses(_this.element, addClasses, allClasses);
- });
- return true;
- }
- });
-
-}).call(this);
-
-(function() {
- this.Tether.modules.push({
- position: function(_arg) {
- var left, result, shift, shiftLeft, shiftTop, top, _ref;
- top = _arg.top, left = _arg.left;
- if (!this.options.shift) {
- return;
- }
- result = function(val) {
- if (typeof val === 'function') {
- return val.call(this, {
- top: top,
- left: left
- });
- } else {
- return val;
- }
- };
- shift = result(this.options.shift);
- if (typeof shift === 'string') {
- shift = shift.split(' ');
- shift[1] || (shift[1] = shift[0]);
- shiftTop = shift[0], shiftLeft = shift[1];
- shiftTop = parseFloat(shiftTop, 10);
- shiftLeft = parseFloat(shiftLeft, 10);
- } else {
- _ref = [shift.top, shift.left], shiftTop = _ref[0], shiftLeft = _ref[1];
- }
- top += shiftTop;
- left += shiftLeft;
- return {
- top: top,
- left: left
- };
- }
- });
-
-}).call(this);
-
-return this.Tether;
-
-}));
diff --git a/demo/res/css/hopscotch.css b/demo/res/css/hopscotch.css
new file mode 100755
index 0000000000..bf8e6971c5
--- /dev/null
+++ b/demo/res/css/hopscotch.css
@@ -0,0 +1,519 @@
+/**! hopscotch - v0.2.5
+*
+* Copyright 2015 LinkedIn Corp. All rights reserved.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+/**
+ * This fade animation is based on Dan Eden's animate.css (http://daneden.me/animate/), under the terms of the MIT license.
+ *
+ * Copyright 2013 Dan Eden.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+.animated {
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ -ms-animation-fill-mode: both;
+ -o-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -ms-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+}
+@-webkit-keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ }
+}
+@-moz-keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -moz-transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -moz-transform: translateY(0);
+ }
+}
+@-o-keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -o-transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -o-transform: translateY(0);
+ }
+}
+@keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.fade-in-up {
+ -webkit-animation-name: fadeInUp;
+ -moz-animation-name: fadeInUp;
+ -o-animation-name: fadeInUp;
+ animation-name: fadeInUp;
+}
+@-webkit-keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ }
+}
+@-moz-keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -moz-transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -moz-transform: translateY(0);
+ }
+}
+@-o-keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -ms-transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-transform: translateY(0);
+ }
+}
+@keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.fade-in-down {
+ -webkit-animation-name: fadeInDown;
+ -moz-animation-name: fadeInDown;
+ -o-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+}
+@-webkit-keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ }
+}
+@-moz-keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -moz-transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -moz-transform: translateX(0);
+ }
+}
+@-o-keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -o-transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -o-transform: translateX(0);
+ }
+}
+@keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+.fade-in-right {
+ -webkit-animation-name: fadeInRight;
+ -moz-animation-name: fadeInRight;
+ -o-animation-name: fadeInRight;
+ animation-name: fadeInRight;
+}
+@-webkit-keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ }
+}
+@-moz-keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -moz-transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ -moz-transform: translateX(0);
+ }
+}
+@-o-keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -o-transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ -o-transform: translateX(0);
+ }
+}
+@keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+.fade-in-left {
+ -webkit-animation-name: fadeInLeft;
+ -moz-animation-name: fadeInLeft;
+ -o-animation-name: fadeInLeft;
+ animation-name: fadeInLeft;
+}
+div.hopscotch-bubble .hopscotch-nav-button {
+ /* borrowed from katy styles */
+ font-weight: bold;
+ border-width: 1px;
+ border-style: solid;
+ cursor: pointer;
+ margin: 0;
+ overflow: visible;
+ text-decoration: none !important;
+ width: auto;
+ padding: 0 10px;
+ height: 26px;
+ line-height: 24px;
+ font-size: 12px;
+ *zoom: 1;
+ white-space: nowrap;
+ display: -moz-inline-stack;
+ display: inline-block;
+ *vertical-align: auto;
+ zoom: 1;
+ *display: inline;
+ vertical-align: middle;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+div.hopscotch-bubble .hopscotch-nav-button:hover {
+ *zoom: 1;
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+div.hopscotch-bubble .hopscotch-nav-button:active {
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
+}
+div.hopscotch-bubble .hopscotch-nav-button.next {
+ border-color: #1b5480;
+ color: #fff;
+ margin: 0 0 0 10px;
+ /* HS specific*/
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
+ background-color: #287bbc;
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#287bbc', endColorstr='#23639a');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #287bbc), color-stop(100%, #23639a));
+ background-image: -webkit-linear-gradient(top, #287bbc 0%, #23639a 100%);
+ background-image: -moz-linear-gradient(top, #287bbc 0%, #23639a 100%);
+ background-image: -o-linear-gradient(top, #287bbc 0%, #23639a 100%);
+ background-image: linear-gradient(top, #287bbc 0%, #23639a 100%);
+}
+div.hopscotch-bubble .hopscotch-nav-button.next:hover {
+ background-color: #2672ae;
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#2672ae', endColorstr='#1e4f7e');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2672ae), color-stop(100%, #1e4f7e));
+ background-image: -webkit-linear-gradient(top, #2672ae 0%, #1e4f7e 100%);
+ background-image: -moz-linear-gradient(top, #2672ae 0%, #1e4f7e 100%);
+ background-image: -o-linear-gradient(top, #2672ae 0%, #1e4f7e 100%);
+ background-image: linear-gradient(top, #2672ae 0%, #1e4f7e 100%);
+}
+div.hopscotch-bubble .hopscotch-nav-button.prev {
+ border-color: #a7a7a7;
+ color: #444;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ background-color: #f2f2f2;
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#e9e9e9');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e9e9e9));
+ background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
+ background-image: -moz-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
+ background-image: -o-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
+ background-image: linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%);
+}
+div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
+ background-color: #e8e8e8;
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE8E8E8', endColorstr='#FFA9A9A9');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(13%, #e3e3e3), color-stop(32%, #d7d7d7), color-stop(71%, #b9b9b9), color-stop(100%, #a9a9a9));
+ background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
+ background-image: -moz-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
+ background-image: -o-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
+ background-image: linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
+}
+div.hopscotch-bubble {
+ background-color: #ffffff;
+ border: 5px solid #000000;
+ /* default */
+ border: 5px solid rgba(0, 0, 0, 0.5);
+ /* transparent, if supported */
+ color: #333;
+ font-family: Helvetica, Arial;
+ font-size: 13px;
+ position: absolute;
+ z-index: 999999;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ -moz-background-clip: padding;
+ /* for Mozilla browsers*/
+ -webkit-background-clip: padding;
+ /* Webkit */
+ background-clip: padding-box;
+ /* browsers with full support */
+}
+div.hopscotch-bubble * {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+div.hopscotch-bubble.animate {
+ -moz-transition-property: top, left;
+ -moz-transition-duration: 1s;
+ -moz-transition-timing-function: ease-in-out;
+ -ms-transition-property: top, left;
+ -ms-transition-duration: 1s;
+ -ms-transition-timing-function: ease-in-out;
+ -o-transition-property: top, left;
+ -o-transition-duration: 1s;
+ -o-transition-timing-function: ease-in-out;
+ -webkit-transition-property: top, left;
+ -webkit-transition-duration: 1s;
+ -webkit-transition-timing-function: ease-in-out;
+ transition-property: top, left;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
+}
+div.hopscotch-bubble.invisible {
+ opacity: 0;
+}
+div.hopscotch-bubble.hide,
+div.hopscotch-bubble .hide,
+div.hopscotch-bubble .hide-all {
+ display: none;
+}
+div.hopscotch-bubble h3 {
+ color: #000;
+ font-family: Helvetica, Arial;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 19px;
+ margin: -1px 15px 0 0;
+ padding: 0;
+}
+div.hopscotch-bubble .hopscotch-bubble-container {
+ padding: 15px;
+ position: relative;
+ text-align: left;
+ -webkit-font-smoothing: antialiased;
+ /* to fix text flickering */
+}
+div.hopscotch-bubble .hopscotch-content {
+ font-family: Helvetica, Arial;
+ font-weight: normal;
+ line-height: 17px;
+ margin: -5px 0 11px;
+ padding-top: 8px;
+}
+div.hopscotch-bubble .hopscotch-bubble-content {
+ margin: 0 0 0 40px;
+}
+div.hopscotch-bubble.no-number .hopscotch-bubble-content {
+ margin: 0;
+}
+div.hopscotch-bubble .hopscotch-bubble-close {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: 0;
+ color: #000;
+ background: transparent url(../img/sprite-green.png) -192px -92px no-repeat;
+ display: block;
+ padding: 8px;
+ position: absolute;
+ text-decoration: none;
+ text-indent: -9999px;
+ width: 8px;
+ height: 8px;
+ top: 0;
+ right: 0;
+}
+div.hopscotch-bubble .hopscotch-bubble-close.hide,
+div.hopscotch-bubble .hopscotch-bubble-close.hide-all {
+ display: none;
+}
+div.hopscotch-bubble .hopscotch-bubble-number {
+ background: transparent url(../img/sprite-green.png) 0 0 no-repeat;
+ color: #fff;
+ display: block;
+ float: left;
+ font-size: 17px;
+ font-weight: bold;
+ line-height: 31px;
+ padding: 0 10px 0 0;
+ text-align: center;
+ width: 30px;
+ height: 30px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container {
+ position: absolute;
+ width: 34px;
+ height: 34px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,
+div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border {
+ width: 0;
+ height: 0;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.up {
+ top: -22px;
+ left: 10px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
+ border-bottom: 17px solid #ffffff;
+ border-left: 17px solid transparent;
+ border-right: 17px solid transparent;
+ position: relative;
+ top: -10px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
+ border-bottom: 17px solid #000000;
+ border-bottom: 17px solid rgba(0, 0, 0, 0.5);
+ border-left: 17px solid transparent;
+ border-right: 17px solid transparent;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.down {
+ bottom: -39px;
+ left: 10px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
+ border-top: 17px solid #ffffff;
+ border-left: 17px solid transparent;
+ border-right: 17px solid transparent;
+ position: relative;
+ top: -24px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
+ border-top: 17px solid #000000;
+ border-top: 17px solid rgba(0, 0, 0, 0.5);
+ border-left: 17px solid transparent;
+ border-right: 17px solid transparent;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.left {
+ top: 10px;
+ left: -22px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
+ border-bottom: 17px solid transparent;
+ border-right: 17px solid #ffffff;
+ border-top: 17px solid transparent;
+ position: relative;
+ left: 7px;
+ top: -34px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
+ border-right: 17px solid #000000;
+ border-right: 17px solid rgba(0, 0, 0, 0.5);
+ border-bottom: 17px solid transparent;
+ border-top: 17px solid transparent;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.right {
+ top: 10px;
+ right: -39px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
+ border-bottom: 17px solid transparent;
+ border-left: 17px solid #ffffff;
+ border-top: 17px solid transparent;
+ position: relative;
+ left: -7px;
+ top: -34px;
+}
+div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
+ border-left: 17px solid #000000;
+ border-left: 17px solid rgba(0, 0, 0, 0.5);
+ border-bottom: 17px solid transparent;
+ border-top: 17px solid transparent;
+}
+div.hopscotch-bubble .hopscotch-actions {
+ margin: 10px 0 0;
+ text-align: right;
+}
diff --git a/demo/res/css/shepherd-theme-arrows.css b/demo/res/css/shepherd-theme-arrows.css
new file mode 100755
index 0000000000..fde90a713d
--- /dev/null
+++ b/demo/res/css/shepherd-theme-arrows.css
@@ -0,0 +1,195 @@
+.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
+ box-sizing: border-box; }
+
+.shepherd-element {
+ position: absolute;
+ display: none; }
+ .shepherd-element.shepherd-open {
+ display: block; }
+
+.shepherd-element.shepherd-theme-arrows {
+ max-width: 100%;
+ max-height: 100%; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content {
+ border-radius: 5px;
+ position: relative;
+ font-family: inherit;
+ background: #fff;
+ color: #444;
+ padding: 1em;
+ font-size: 1.1em;
+ line-height: 1.5em;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+ filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content:before {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-width: 16px;
+ border-style: solid;
+ pointer-events: none; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
+ margin-bottom: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
+ top: 100%;
+ left: 50%;
+ margin-left: -16px;
+ border-top-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
+ margin-top: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
+ bottom: 100%;
+ left: 50%;
+ margin-left: -16px;
+ border-bottom-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
+ margin-right: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
+ left: 100%;
+ top: 50%;
+ margin-top: -16px;
+ border-left-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
+ margin-left: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
+ right: 100%;
+ top: 50%;
+ margin-top: -16px;
+ border-right-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
+ margin-top: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
+ bottom: 100%;
+ left: 16px;
+ border-bottom-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
+ margin-top: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
+ bottom: 100%;
+ right: 16px;
+ border-bottom-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
+ margin-bottom: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
+ top: 100%;
+ left: 16px;
+ border-top-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
+ margin-bottom: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
+ top: 100%;
+ right: 16px;
+ border-top-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
+ margin-right: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
+ top: 16px;
+ left: 100%;
+ border-left-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
+ margin-left: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
+ top: 16px;
+ right: 100%;
+ border-right-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
+ margin-right: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
+ bottom: 16px;
+ left: 100%;
+ border-left-color: #fff; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
+ margin-left: 16px; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
+ bottom: 16px;
+ right: 100%;
+ border-right-color: #fff; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
+ border-bottom-color: #eee; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
+ background: #eee;
+ padding: 1em; }
+ .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
+ padding: 0;
+ margin-bottom: 0; }
+
+.shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 {
+ float: left; }
+
+.shepherd-element.shepherd-theme-arrows .shepherd-content {
+ padding: 0; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content * {
+ font-size: inherit; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content header {
+ *zoom: 1;
+ border-radius: 5px 5px 0 0; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content header:after {
+ content: "";
+ display: table;
+ clear: both; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content header h3 {
+ margin: 0;
+ line-height: 1;
+ font-weight: normal; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link {
+ float: right;
+ text-decoration: none;
+ font-size: 1.25em;
+ line-height: .8em;
+ font-weight: normal;
+ color: rgba(0, 0, 0, 0.5);
+ opacity: 0.25;
+ position: relative;
+ top: .1em;
+ padding: .8em;
+ margin-bottom: -.8em; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover {
+ opacity: 1; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text {
+ padding: 1em; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p {
+ margin: 0 0 .5em 0;
+ line-height: 1.3em; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p:last-child {
+ margin-bottom: 0; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer {
+ padding: 0 1em 1em; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons {
+ text-align: right;
+ list-style: none;
+ padding: 0;
+ margin: 0; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li {
+ display: inline;
+ padding: 0;
+ margin: 0; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
+ display: inline-block;
+ vertical-align: middle;
+ *vertical-align: auto;
+ *zoom: 1;
+ *display: inline;
+ border-radius: 3px;
+ cursor: pointer;
+ border: 0;
+ margin: 0 .5em 0 0;
+ font-family: inherit;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ font-size: .8em;
+ line-height: 1em;
+ padding: .75em 2em;
+ background: #3288e6;
+ color: #fff; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
+ background: #eee;
+ color: #888; }
+ .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
+ margin-right: 0; }
diff --git a/demo/res/css/tour.css b/demo/res/css/tour.css
new file mode 100644
index 0000000000..85aef6d560
--- /dev/null
+++ b/demo/res/css/tour.css
@@ -0,0 +1,3 @@
+.mct-tour {
+ z-index: 100;
+}
\ No newline at end of file