From 50e4e89b6ca60f7d338cda1eab41cfec030a26ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Tue, 8 Jan 2019 11:05:28 +0100 Subject: [PATCH 01/16] Move firstrunwizard to vue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/colorbox.scss | 38 - css/firstrunwizard.scss | 283 - js/about.js | 21 + js/activate.js | 18 +- js/jquery.colorbox.js | 1105 ---- lib/AppInfo/Application.php | 4 +- lib/Controller/WizardController.php | 34 +- package-lock.json | 8114 +++++++++++++++++++++++++++ package.json | 40 + src/App.vue | 517 ++ src/main.js | 25 + webpack.common.js | 46 + webpack.dev.js | 17 + webpack.prod.js | 7 + 14 files changed, 8831 insertions(+), 1438 deletions(-) delete mode 100644 css/colorbox.scss delete mode 100644 css/firstrunwizard.scss create mode 100644 js/about.js delete mode 100644 js/jquery.colorbox.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/App.vue create mode 100644 src/main.js create mode 100644 webpack.common.js create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js 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/js/about.js b/js/about.js new file mode 100644 index 000000000..99d682f86 --- /dev/null +++ b/js/about.js @@ -0,0 +1,21 @@ +function ready(fn) { + if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } +} + +ready(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..d3d8f7bfd 100644 --- a/js/activate.js +++ b/js/activate.js @@ -1,3 +1,15 @@ -$(document).ready(function() { - OCA.FirstRunWizard.Wizard.showFirstRunWizard(); -}); +function ready(fn) { + if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } +} + +ready(function() { + setTimeout(function() { + OCP.Loader.loadScript('firstrunwizard', 'firstrunwizard.js').then(function() { + OCA.FirstRunWizard.open(); + }); + }, 100); +}) 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 = $('