diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 000000000..21cf7022f --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,12 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + targets: { + browsers: ['last 2 versions', 'ie >= 11'] + } + } + ] + ] +} diff --git a/.drone.yml b/.drone.yml index 012fdf734..a335ef668 100644 --- a/.drone.yml +++ b/.drone.yml @@ -90,6 +90,22 @@ pipeline: when: matrix: TESTS: php7.3 + eslint: + image: nextcloudci/jsunit:jsunit-5 + commands: + - npm install + - npm run lint + when: + matrix: + TESTS: eslint + vue-build: + image: nextcloudci/jsunit:jsunit-5 + commands: + - npm install + - npm run build + when: + matrix: + TESTS: vue-build matrix: include: - TESTS: signed-off-check @@ -97,5 +113,7 @@ matrix: - TESTS: php7.1 - TESTS: php7.2 - TESTS: php7.3 + - TESTS: eslint + - TESTS: vue-build branches: [ master, stable* ] diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..e2d285e70 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,66 @@ +module.exports = { + root: true, + env: { + browser: true, + es6: true, + node: true, + jest: true + }, + globals: { + t: true, + n: true, + OC: true, + OCA: true, + Vue: true + }, + parserOptions: { + parser: 'babel-eslint', + ecmaVersion: 6 + }, + extends: [ + 'eslint:recommended', + 'plugin:node/recommended', + 'plugin:vue/essential', + 'plugin:vue/recommended', + 'standard' + ], + plugins: ['vue', 'node'], + rules: { + // space before function () + 'space-before-function-paren': ['error', 'never'], + // curly braces always space + 'object-curly-spacing': ['error', 'always'], + // stay consistent with array brackets + 'array-bracket-newline': ['error', 'consistent'], + // 1tbs brace style + 'brace-style': 'error', + // tabs only + indent: ['error', 'tab'], + 'no-tabs': 0, + 'vue/html-indent': ['error', 'tab'], + // only debug console + 'no-console': ['error', { allow: ['error', 'warn', 'debug'] }], + // classes blocks + 'padded-blocks': ['error', { classes: 'always' }], + // always have the operator in front + 'operator-linebreak': ['error', 'before'], + // ternary on multiline + 'multiline-ternary': ['error', 'always-multiline'], + // es6 import/export and require + 'node/no-unpublished-require': ['off'], + 'node/no-unsupported-features/es-syntax': ['off'], + // space before self-closing elements + 'vue/html-closing-bracket-spacing': 'error', + // code spacing with attributes + 'vue/max-attributes-per-line': [ + 'error', + { + singleline: 3, + multiline: { + max: 3, + allowFirstLine: true + } + } + ] + } +} diff --git a/.gitignore b/.gitignore index 4cfd088ac..52e5b187c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ # test coverage /tests/coverage* /tests/clover.xml +node_modules/ +js/firstrunwizard.js +js/firstrunwizard.js.map diff --git a/Makefile b/Makefile new file mode 100644 index 000000000..74934115c --- /dev/null +++ b/Makefile @@ -0,0 +1,26 @@ +all: dev-setup build-js-production + +dev-setup: clean clean-dev npm-init + +npm-init: + npm install + +npm-update: + npm update + +build-js: + npm run dev + +build-js-production: + npm run build + +watch-js: + npm run watch + +clean: + rm -f js/firstrunwizard.js + rm -f js/firstrunwizard.js.map + +clean-dev: + rm -rf node_modules + diff --git a/css/colorbox.scss b/css/colorbox.scss deleted file mode 100644 index 93a46b3e6..000000000 --- a/css/colorbox.scss +++ /dev/null @@ -1,38 +0,0 @@ -/* - ColorBox Core Style: - The following CSS is consistent between example themes and should not be altered. -*/ -#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} -#cboxOverlay{position:fixed; width:100%; height:100%;} -#cboxMiddleLeft, #cboxBottomLeft{clear:left;} -#cboxContent{position:relative;} -#cboxLoadedContent{overflow:auto;} -#cboxTitle{margin:8;} -#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} -#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} -.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} -.cboxIframe{width:100%; height:100%; display:block; border:0;} -#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} - -/* - User Style: - Change the following styles to modify the appearance of ColorBox. They are - ordered & tabbed in a way that represents the nesting of the generated HTML. -*/ -#cboxOverlay{background:#000;} -#colorbox{} - #cboxContent{margin-top:20px;} - .cboxIframe{background:#fff;} - #cboxError{padding:50px; border:0px solid #ccc;} - #cboxLoadedContent{border:0px solid #555; background:#fff;border-radius: 5px;} - #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} - #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} - #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} - #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:none; width:28px; height:65px; text-indent:-9999px;} - #cboxPrevious:hover{background-position:bottom left;} - #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:none; width:28px; height:65px; text-indent:-9999px;} - #cboxNext:hover{background-position:bottom right;} - #cboxLoadingOverlay{background:#fff;} - #cboxLoadingGraphic{background:none;} - #cboxClose{position:absolute; top:5px; right:5px; display:block; background:none; width:38px; height:19px; text-indent:-9999px; border:none;} - #cboxClose:hover{background-position:bottom center;} diff --git a/css/firstrunwizard.scss b/css/firstrunwizard.scss deleted file mode 100644 index cbf9eedf4..000000000 --- a/css/firstrunwizard.scss +++ /dev/null @@ -1,283 +0,0 @@ -@import 'colorbox.scss'; - -#cboxLoadedContent { - border-radius: var(--border-radius-large); - overflow: hidden !important; -} - -#firstrunwizard .firstrunwizard-header { - padding: 20px 12px; - background-color: var(--color-primary); - background-image: var(--image-login-background); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - color: var(--color-primary-text); - text-align: center; -} -#firstrunwizard .firstrunwizard-header .logo { - background-image: var(--image-logo); - background-repeat: no-repeat; - background-size: contain; - background-position: center; - width: 175px; - height: 120px; - margin: 0 auto; -} - -#firstrunwizard h2 { - font-size: 40px; - color: var(--color-primary-text); - font-weight: 300; - line-height: 120%; - padding: 0 0 10px; -} - -#firstrunwizard h3 { - margin: 30px 0 10px; - line-height: 120%; - padding: 0; -} - -.clientslinks .appsmall { - height: 32px; - width: 32px; - position: relative; - opacity: .5; - vertical-align: middle; -} -.clientslinks .button { - display: inline-block; - padding: 8px; - font-weight: normal; - font-size: 14px; -} - -#firstrunwizard .page { - margin-bottom: 46px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - h3 { - margin: 0 0 10px 0; - } - .image { - padding: 20px; - max-width: calc(50% - 40px); - flex-grow: 1; - img { - width: 100%; - } - } - .content { - padding: 20px; - width: 100%; - } - p { - margin-bottom: 20px; - } - .description-block { - margin-bottom: 40px; - } - .description { - margin: 20px; - width: auto; - flex-grow: 1; - max-width: calc(50% - 40px); - } - ul { - margin: 10px; - li { - margin-left: 20px; - margin-bottom: 10px; - list-style-type: circle; - list-style-position: outside; - } - } - a:not(.button) { - &:hover, - &:focus { - text-decoration: underline; - } - } - .button { - display: inline-block; - - img { - width: 16px; - height: 16px; - opacity: .5; - margin-top: -3px; - vertical-align: middle; - } - } -} -#firstrunwizard { - - .page { - margin: 12px; - margin-bottom: 60px; - } - .page.intro { - margin: 0; - margin-bottom: -50px; - .content { - padding: 0; - background-image: url('../img/intro.png'); - background-position: center; - background-size: cover; - height: 50vh; - } - } - .content-clients { - width: 100%; - text-align: center; - a { - text-decoration: none; - display: inline-block; - } - } - .content-final { - h3 { - background-position: 0; - background-size: 16px 16px; - padding-left: 26px; - opacity: .7; - } - } -} - -.wizard-navigation { - display: flex; - position: absolute; - bottom: 0; - padding: 12px; - width: calc(100% - 24px); - .prev, .next { - flex-grow: 1; - flex-basis: 200px; - button { - padding: 12px; - } - } - .next { - text-align: right; - } - .position-indicator { - list-style-type: circle; - list-style-position: inside; - padding: 0; - margin: 12px 0 0; - color: var(--color-primary); - font-size: 120%; - li { - float:left; - &.active { - list-style-type: disc; - } - } - } -} -#firstrunwizard p a { - font-weight: bold; - color: var(--color-primary); -} -#firstrunwizard p a:hover, -#firstrunwizard p a:focus { - color: var(color-text-light); -} -#firstrunwizard .footnote { - margin-top: 40px; -} - -#firstrunwizard .close { - position: absolute; - top: 0; - right: 0; - padding: 10px; -} - -.clientslinks { - margin-top: 20px; - margin-bottom: 20px; -} - -#firstrunwizard .page #wizard-values { - list-style-type: none; - display: flex; - flex-wrap: wrap; - li { - display: block; - min-width: 250px; - width: 33%; - flex-grow: 1; - margin: 20px 0 20px 0; - span { - opacity: .7; - display: block; - height: 50px; - width: 50px; - background-size: 40px; - margin: auto; - } - h3 { - margin: 10px 0 10px 0; - font-size: 130%; - text-align: center; - } - } -} - -.details-link { - text-align: center; -} - -.icon-source { - background-image: url('../img/source.svg'); -} -.icon-world { - background-image: url('../img/world.svg'); -} - -@media only screen and (max-width: 680px) { - #firstrunwizard { - .firstrunwizard-header div.logo { - background-size: 120px; - } - h2 { - font-size: 20px; - } - .page > div { - max-width: 100% !important; - width: 100%; - } - .page #wizard-values li { - min-width: 100%; - overflow: hidden; - display: flex; - span { - min-width: 50px; - padding-right: 20px; - } - span, h3 { - font-size: 12px; - text-align: left; - } - } - .page .content { - padding: 0; - } - } -} - -@media only screen and (max-width: 768px) { - - .position-indicator { - display: none; - } - - #firstrunwizard .page #wizard-values li { - margin: 0; - } - -} diff --git a/img/intro.png b/img/intro.png index ebdc79e24..148ed94f1 100644 Binary files a/img/intro.png and b/img/intro.png differ diff --git a/img/world.svg b/img/world.svg deleted file mode 100644 index eeaef018d..000000000 --- a/img/world.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/js/about.js b/js/about.js new file mode 100644 index 000000000..efb3e87a1 --- /dev/null +++ b/js/about.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', function() { + document.querySelector('#expanddiv li[data-id="firstrunwizard-about"] a').addEventListener('click', function (event) { + event.stopPropagation(); + event.preventDefault(); + OCP.Loader.loadScript('firstrunwizard', 'firstrunwizard.js').then(function() { + OCA.FirstRunWizard.open(); + OC.hideMenus(function () { + return false; + }); + }); + return true; + }); +}); diff --git a/js/activate.js b/js/activate.js index 167757eb5..315030a28 100644 --- a/js/activate.js +++ b/js/activate.js @@ -1,3 +1,5 @@ -$(document).ready(function() { - OCA.FirstRunWizard.Wizard.showFirstRunWizard(); +document.addEventListener('DOMContentLoaded', function() { + window.OCP.Loader.loadScript('firstrunwizard', 'firstrunwizard.js').then(function() { + OCA.FirstRunWizard.open(); + }); }); diff --git a/js/firstrunwizard.js b/js/firstrunwizard.js deleted file mode 100644 index 8acb6e1a0..000000000 --- a/js/firstrunwizard.js +++ /dev/null @@ -1,158 +0,0 @@ -(function() { - if (!OCA.FirstRunWizard) { - OCA.FirstRunWizard = {}; - } - OCA.FirstRunWizard.Wizard = { - - initialize: function () { - - }, - getTotal: function() { - return this.$pages.length; - }, - getCurrent: function () { - return $('#firstrunwizard .page.active').index('#firstrunwizard .page'); - }, - isLast: function() { - return this.getCurrent() >= this.getTotal()-1; - }, - isFirst: function() { - return this.getCurrent() === 0; - }, - updateTitle: function() { - var active = $('#firstrunwizard .page.active'); - var header = this.$wizard.find('.firstrunwizard-header'); - header.find('h1').text(active.data('title')); - header.find('p').text(active.data('subtitle')); - }, - goNext: function() { - if (this.isLast()) { - return; - } - var active = $('#firstrunwizard .page.active'); - var next = active.next(); - this.$prev.show(); - if (this.getCurrent() < this.getTotal()-1) { - active.hide().removeClass('active'); - next.show().addClass('active'); - } - - this.$position.find('li').removeClass('active'); - this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active'); - - if (this.isLast()) { - this.$next.hide(); - this.$finish.show(); - } else { - this.$next.show(); - this.$finish.hide(); - } - this.updateTitle(); - $.colorbox.resize(); - }, - goPrevious: function() { - if (this.isFirst()) { - return; - } - var active = $('#firstrunwizard .page.active'); - var prev = active.prev(); - active.hide().removeClass('active'); - prev.show().addClass('active'); - this.$next.show(); - this.$finish.hide(); - if (!this.isFirst()) { - active.hide().removeClass('active'); - prev.show().addClass('active'); - } - - this.$position.find('li').removeClass('active'); - this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active'); - - if (this.isFirst()) { - this.$prev.hide(); - } else { - this.$prev.show(); - } - this.updateTitle(); - $.colorbox.resize(); - }, - handleKeydown: function(e) { - switch (e.keyCode) { - case 37: // arrow left - this.goPrevious(); - break; - case 13: - case 39: - this.goNext(); - break; - case 27: - this.closeWizard(); - break; - } - }, - onComplete: function() { - this.$wizard = $('#firstrunwizard'); - this.$finish = this.$wizard.find('#finish'); - this.$prev = this.$wizard.find('#prev'); - this.$next = this.$wizard.find('#next'); - this.$pages = this.$wizard.find('.page'); - this.$position = this.$wizard.find('.position-indicator'); - - this.$finish.hide(); - this.$pages.hide(); - this.$prev.hide(); - this.$pages.first().fadeIn().addClass('active'); - $.colorbox.resize(); - var self = this; - this.$pages.each(function() { - self.$position.append('
  • '); - }); - this.$position.find('>li:first-child').addClass('active'); - - this.$wizard.on('click', '#next', this.goNext.bind(this)); - this.$wizard.on('click', '#prev', this.goPrevious.bind(this)); - this.$wizard.on('click', '#finish', this.closeWizard.bind(this)); - this.$wizard.on('click', '#closeWizard', this.closeWizard.bind(this)); - $('body').off('keydown', this.handleKeydown).on('keydown', this.handleKeydown.bind(this)); - this.updateTitle(); - }, - closeWizard: function() { - $('body').off('keydown', this.handleKeydown); - $.colorbox.close(); - }, - - showFirstRunWizard: function(){ - var self = this; - $.colorbox({ - opacity: 0.7, - transition: 'elastic', - speed: 100, - width: '80%', - height: '80%', - maxWidth: '900px', - href: OC.generateUrl('/apps/firstrunwizard/wizard'), - onClosed : function() { - $.ajax({ - url: OC.generateUrl('/apps/firstrunwizard/wizard'), - type: 'delete' - }); - }, - onComplete: self.onComplete.bind(self), - }); - } - }; -})(); - -$(document).ready(function() { - $('#showWizard').on('click', function () { - OCA.FirstRunWizard.Wizard.showFirstRunWizard(); - }); - - $('#expanddiv li[data-id="firstrunwizard-about"] a').on('click', function () { - OCA.FirstRunWizard.Wizard.showFirstRunWizard(); - $(this).find('div').remove(); - $(this).find('img').show(); - OC.hideMenus(function(){return false;}); - return false; - }); -}); diff --git a/js/jquery.colorbox.js b/js/jquery.colorbox.js deleted file mode 100644 index 0b5925542..000000000 --- a/js/jquery.colorbox.js +++ /dev/null @@ -1,1105 +0,0 @@ -/*! - Colorbox 1.6.4 - license: MIT - http://www.jacklmoore.com/colorbox - */ -(function ($, document, window) { - var - // Default settings object. - // See http://jacklmoore.com/colorbox for details. - defaults = { - // data sources - html: false, - photo: false, - iframe: false, - inline: false, - - // behavior and appearance - transition: "elastic", - speed: 300, - fadeOut: 300, - width: false, - initialWidth: "600", - innerWidth: false, - maxWidth: false, - height: false, - initialHeight: "450", - innerHeight: false, - maxHeight: false, - scalePhotos: true, - scrolling: true, - opacity: 0.9, - preloading: true, - className: false, - overlayClose: true, - escKey: true, - arrowKey: true, - top: false, - bottom: false, - left: false, - right: false, - fixed: false, - data: undefined, - closeButton: true, - fastIframe: true, - open: false, - reposition: true, - loop: true, - slideshow: false, - slideshowAuto: true, - slideshowSpeed: 2500, - slideshowStart: "start slideshow", - slideshowStop: "stop slideshow", - photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i, - - // alternate image paths for high-res displays - retinaImage: false, - retinaUrl: false, - retinaSuffix: '@2x.$1', - - // internationalization - current: "image {current} of {total}", - previous: "previous", - next: "next", - close: "close", - xhrError: "This content failed to load.", - imgError: "This image failed to load.", - - // accessbility - returnFocus: true, - trapFocus: true, - - // callbacks - onOpen: false, - onLoad: false, - onComplete: false, - onCleanup: false, - onClosed: false, - - rel: function() { - return this.rel; - }, - href: function() { - // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container') - return $(this).attr('href'); - }, - title: function() { - return this.title; - }, - createImg: function() { - var img = new Image(); - var attrs = $(this).data('cbox-img-attrs'); - - if (typeof attrs === 'object') { - $.each(attrs, function(key, val){ - img[key] = val; - }); - } - - return img; - }, - createIframe: function() { - var iframe = document.createElement('iframe'); - var attrs = $(this).data('cbox-iframe-attrs'); - - if (typeof attrs === 'object') { - $.each(attrs, function(key, val){ - iframe[key] = val; - }); - } - - if ('frameBorder' in iframe) { - iframe.frameBorder = 0; - } - if ('allowTransparency' in iframe) { - iframe.allowTransparency = "true"; - } - iframe.name = (new Date()).getTime(); // give the iframe a unique name to prevent caching - iframe.allowFullscreen = true; - - return iframe; - } - }, - - // Abstracting the HTML and event identifiers for easy rebranding - colorbox = 'colorbox', - prefix = 'cbox', - boxElement = prefix + 'Element', - - // Events - event_open = prefix + '_open', - event_load = prefix + '_load', - event_complete = prefix + '_complete', - event_cleanup = prefix + '_cleanup', - event_closed = prefix + '_closed', - event_purge = prefix + '_purge', - - // Cached jQuery Object Variables - $overlay, - $box, - $wrap, - $content, - $topBorder, - $leftBorder, - $rightBorder, - $bottomBorder, - $related, - $window, - $loaded, - $loadingBay, - $loadingOverlay, - $title, - $current, - $slideshow, - $next, - $prev, - $close, - $groupControls, - $events = $(''), // $({}) would be prefered, but there is an issue with jQuery 1.4.2 - - // Variables for cached values or use across multiple functions - settings, - interfaceHeight, - interfaceWidth, - loadedHeight, - loadedWidth, - index, - photo, - open, - active, - closing, - loadingTimer, - publicMethod, - div = "div", - requests = 0, - previousCSS = {}, - init; - - // **************** - // HELPER FUNCTIONS - // **************** - - // Convenience function for creating new jQuery objects - function $tag(tag, id, css) { - var element = document.createElement(tag); - - if (id) { - element.id = prefix + id; - } - - if (css) { - element.style.cssText = css; - } - - return $(element); - } - - // Get the window height using innerHeight when available to avoid an issue with iOS - // http://bugs.jquery.com/ticket/6724 - function winheight() { - return window.innerHeight ? window.innerHeight : $(window).height(); - } - - function Settings(element, options) { - if (options !== Object(options)) { - options = {}; - } - - this.cache = {}; - this.el = element; - - this.value = function(key) { - var dataAttr; - - if (this.cache[key] === undefined) { - dataAttr = $(this.el).attr('data-cbox-'+key); - - if (dataAttr !== undefined) { - this.cache[key] = dataAttr; - } else if (options[key] !== undefined) { - this.cache[key] = options[key]; - } else if (defaults[key] !== undefined) { - this.cache[key] = defaults[key]; - } - } - - return this.cache[key]; - }; - - this.get = function(key) { - var value = this.value(key); - return $.isFunction(value) ? value.call(this.el, this) : value; - }; - } - - // Determine the next and previous members in a group. - function getIndex(increment) { - var - max = $related.length, - newIndex = (index + increment) % max; - - return (newIndex < 0) ? max + newIndex : newIndex; - } - - // Convert '%' and 'px' values to integers - function setSize(size, dimension) { - return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); - } - - // Checks an href to see if it is a photo. - // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex. - function isImage(settings, url) { - return settings.get('photo') || settings.get('photoRegex').test(url); - } - - function retinaUrl(settings, url) { - return settings.get('retinaUrl') && window.devicePixelRatio > 1 ? url.replace(settings.get('photoRegex'), settings.get('retinaSuffix')) : url; - } - - function trapFocus(e) { - if ('contains' in $box[0] && !$box[0].contains(e.target) && e.target !== $overlay[0]) { - e.stopPropagation(); - $box.focus(); - } - } - - function setClass(str) { - if (setClass.str !== str) { - $box.add($overlay).removeClass(setClass.str).addClass(str); - setClass.str = str; - } - } - - function getRelated(rel) { - index = 0; - - if (rel && rel !== false && rel !== 'nofollow') { - $related = $('.' + boxElement).filter(function () { - var options = $.data(this, colorbox); - var settings = new Settings(this, options); - return (settings.get('rel') === rel); - }); - index = $related.index(settings.el); - - // Check direct calls to Colorbox. - if (index === -1) { - $related = $related.add(settings.el); - index = $related.length - 1; - } - } else { - $related = $(settings.el); - } - } - - function trigger(event) { - // for external use - $(document).trigger(event); - // for internal use - $events.triggerHandler(event); - } - - var slideshow = (function(){ - var active, - className = prefix + "Slideshow_", - click = "click." + prefix, - timeOut; - - function clear () { - clearTimeout(timeOut); - } - - function set() { - if (settings.get('loop') || $related[index + 1]) { - clear(); - timeOut = setTimeout(publicMethod.next, settings.get('slideshowSpeed')); - } - } - - function start() { - $slideshow - .html(settings.get('slideshowStop')) - .unbind(click) - .one(click, stop); - - $events - .bind(event_complete, set) - .bind(event_load, clear); - - $box.removeClass(className + "off").addClass(className + "on"); - } - - function stop() { - clear(); - - $events - .unbind(event_complete, set) - .unbind(event_load, clear); - - $slideshow - .html(settings.get('slideshowStart')) - .unbind(click) - .one(click, function () { - publicMethod.next(); - start(); - }); - - $box.removeClass(className + "on").addClass(className + "off"); - } - - function reset() { - active = false; - $slideshow.hide(); - clear(); - $events - .unbind(event_complete, set) - .unbind(event_load, clear); - $box.removeClass(className + "off " + className + "on"); - } - - return function(){ - if (active) { - if (!settings.get('slideshow')) { - $events.unbind(event_cleanup, reset); - reset(); - } - } else { - if (settings.get('slideshow') && $related[1]) { - active = true; - $events.one(event_cleanup, reset); - if (settings.get('slideshowAuto')) { - start(); - } else { - stop(); - } - $slideshow.show(); - } - } - }; - - }()); - - - function launch(element) { - var options; - - if (!closing) { - - options = $(element).data(colorbox); - - settings = new Settings(element, options); - - getRelated(settings.get('rel')); - - if (!open) { - open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. - - setClass(settings.get('className')); - - // Show colorbox so the sizes can be calculated in older versions of jQuery - $box.css({visibility:'hidden', display:'block', opacity:''}); - - $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden'); - $content.css({width:'', height:''}).append($loaded); - - // Cache values needed for size calculations - interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height(); - interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width(); - loadedHeight = $loaded.outerHeight(true); - loadedWidth = $loaded.outerWidth(true); - - // Opens inital empty Colorbox prior to content being loaded. - var initialWidth = setSize(settings.get('initialWidth'), 'x'); - var initialHeight = setSize(settings.get('initialHeight'), 'y'); - var maxWidth = settings.get('maxWidth'); - var maxHeight = settings.get('maxHeight'); - - settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0); - settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0); - - $loaded.css({width:'', height:settings.h}); - publicMethod.position(); - - trigger(event_open); - settings.get('onOpen'); - - $groupControls.add($title).hide(); - - $box.focus(); - - if (settings.get('trapFocus')) { - // Confine focus to the modal - // Uses event capturing that is not supported in IE8- - if (document.addEventListener) { - - document.addEventListener('focus', trapFocus, true); - - $events.one(event_closed, function () { - document.removeEventListener('focus', trapFocus, true); - }); - } - } - - // Return focus on closing - if (settings.get('returnFocus')) { - $events.one(event_closed, function () { - $(settings.el).focus(); - }); - } - } - - var opacity = parseFloat(settings.get('opacity')); - $overlay.css({ - opacity: opacity === opacity ? opacity : '', - cursor: settings.get('overlayClose') ? 'pointer' : '', - visibility: 'visible' - }).show(); - - if (settings.get('closeButton')) { - $close.html(settings.get('close')).appendTo($content); - } else { - $close.appendTo('
    '); // replace with .detach() when dropping jQuery < 1.4 - } - - load(); - } - } - - // Colorbox's markup needs to be added to the DOM prior to being called - // so that the browser will go ahead and load the CSS background images. - function appendHTML() { - if (!$box) { - init = false; - $window = $(window); - $box = $tag(div).attr({ - id: colorbox, - 'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS. - role: 'dialog', - tabindex: '-1' - }).hide(); - $overlay = $tag(div, "Overlay").hide(); - $loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]); - $wrap = $tag(div, "Wrapper"); - $content = $tag(div, "Content").append( - $title = $tag(div, "Title"), - $current = $tag(div, "Current"), - $prev = $('