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");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+="

"+this.options.title+"

",this.el.className+=" shepherd-has-title"),this.options.showCancelLink){var c=u("");o.appendChild(c),this.el.className+=" shepherd-has-cancel-link",this.bindCancelLink(c)}s(this.options.text)||!function(){var s=u("
"),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+="

"+n+"

"})),i.appendChild(s)}(),this.options.buttons&&!function(){var s=document.createElement("footer"),o=u("");n.options.buttons.map(function(i){var s=u("
  • "+i.text+"");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= 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