From d9f44af36ae733adb63a5963d9aa4a1a5645e116 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 16 Jun 2022 17:46:59 +0200 Subject: [PATCH] wait #4210 @1 --- .../Admin/FluidbookThemePreviewController.php | 5 +++ app/Jobs/GenerateThemePreview.php | 1 + config/backpack/base.php | 2 + .../featherlight/featherlight.gallery.min.css | 8 ++++ .../featherlight/featherlight.gallery.min.js | 7 +++ .../packages/fluidbook/toolbox/css/style.less | 15 +++++++ resources/js/theme_preview/theme_preview.js | 24 +++++----- .../fields/fluidbook_theme_selector.blade.php | 45 +++++++++++-------- routes/web.php | 1 + 9 files changed, 80 insertions(+), 28 deletions(-) create mode 100644 public/packages/featherlight/featherlight.gallery.min.css create mode 100644 public/packages/featherlight/featherlight.gallery.min.js diff --git a/app/Http/Controllers/Admin/FluidbookThemePreviewController.php b/app/Http/Controllers/Admin/FluidbookThemePreviewController.php index 1f8643b22..0c736d48d 100644 --- a/app/Http/Controllers/Admin/FluidbookThemePreviewController.php +++ b/app/Http/Controllers/Admin/FluidbookThemePreviewController.php @@ -26,6 +26,11 @@ class FluidbookThemePreviewController extends XSendFileController return $this->preview($id, 'menu'); } + public function previewBurger($id) + { + return $this->preview($id, 'burger'); + } + public function previewLoader($id) { return $this->preview($id, 'loader'); diff --git a/app/Jobs/GenerateThemePreview.php b/app/Jobs/GenerateThemePreview.php index 1ebfbb227..ef41c8ea0 100644 --- a/app/Jobs/GenerateThemePreview.php +++ b/app/Jobs/GenerateThemePreview.php @@ -43,6 +43,7 @@ class GenerateThemePreview extends Base $cl->setArg('dest', self::getPreviewPath($this->theme->getIdValue())); $cl->setArg('destmenu', self::getPreviewPath($this->theme->getIdValue(), 'menu')); $cl->setArg('destloader', self::getPreviewPath($this->theme->getIdValue(), 'loader')); + $cl->setArg('destburger', self::getPreviewPath($this->theme->getIdValue(), 'burger')); $cl->setArg('page', 2); $url = $this->theme->getPreviewURL(['shortLoading' => 1, 'transition' => 1]); $cl->setArg('url', $url); diff --git a/config/backpack/base.php b/config/backpack/base.php index b0dc32ae4..c6441b97b 100644 --- a/config/backpack/base.php +++ b/config/backpack/base.php @@ -45,6 +45,7 @@ return [ 'styles' => [ 'packages/backpack/base/css/bundle.css', 'packages/featherlight/featherlight.min.css', + 'packages/featherlight/featherlight.gallery.min.css', 'packages/fluidbook/toolbox/css/style.css', // Here's what's inside the bundle: @@ -126,6 +127,7 @@ return [ // Backstrap includes jQuery, Bootstrap, CoreUI, PNotify, Popper 'packages/backpack/base/js/bundle.js', 'packages/featherlight/featherlight.min.js', + 'packages/featherlight/featherlight.gallery.min.js', 'packages/fluidbook/toolbox/js/bundle.js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js', diff --git a/public/packages/featherlight/featherlight.gallery.min.css b/public/packages/featherlight/featherlight.gallery.min.css new file mode 100644 index 000000000..5fc842138 --- /dev/null +++ b/public/packages/featherlight/featherlight.gallery.min.css @@ -0,0 +1,8 @@ +/** + * Featherlight Gallery – an extension for the ultra slim jQuery lightbox + * Version 1.7.14 - http://noelboss.github.io/featherlight/ + * + * Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com) + * MIT Licensed. +**/ +.featherlight-next,.featherlight-previous{display:block;position:absolute;top:25px;right:25px;bottom:0;left:80%;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(0,0,0,0)}.featherlight-previous{left:25px;right:80%}.featherlight-next:hover,.featherlight-previous:hover{background:rgba(255,255,255,.25)}.featherlight-next span,.featherlight-previous span{display:none;position:absolute;top:50%;left:5%;width:82%;text-align:center;font-size:80px;line-height:80px;margin-top:-40px;text-shadow:0 0 5px #fff;color:#fff;font-style:normal;font-weight:400}.featherlight-next span{right:5%;left:auto}.featherlight-next:hover span,.featherlight-previous:hover span{display:inline-block}.featherlight-first-slide.featherlight-last-slide .featherlight-next,.featherlight-first-slide.featherlight-last-slide .featherlight-previous,.featherlight-loading .featherlight-next,.featherlight-loading .featherlight-previous,.featherlight-swipe-aware .featherlight-next,.featherlight-swipe-aware .featherlight-previous{display:none}@media only screen and (max-device-width:1024px){.featherlight-next:hover,.featherlight-previous:hover{background:0 0}.featherlight-next span,.featherlight-previous span{display:block}}@media only screen and (max-width:1024px){.featherlight-next,.featherlight-previous{top:10px;right:10px;left:85%}.featherlight-previous{left:10px;right:85%}.featherlight-next span,.featherlight-previous span{margin-top:-30px;font-size:40px}} diff --git a/public/packages/featherlight/featherlight.gallery.min.js b/public/packages/featherlight/featherlight.gallery.min.js new file mode 100644 index 000000000..a67ce1f0e --- /dev/null +++ b/public/packages/featherlight/featherlight.gallery.min.js @@ -0,0 +1,7 @@ +/** + * Featherlight Gallery – an extension for the ultra slim jQuery lightbox + * Version 1.7.14 - http://noelboss.github.io/featherlight/ + * + * Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com) + * MIT Licensed. + **/!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof module&&module.exports?module.exports=function(b,c){return void 0===c&&(c="undefined"!=typeof window?require("jquery"):require("jquery")(b)),a(c),c}:a(jQuery)}(function(a){"use strict";function b(c,d){if(!(this instanceof b)){var e=new b(a.extend({$source:c,$currentTarget:c.first()},d));return e.open(),e}a.featherlight.apply(this,arguments),this.chainCallbacks(h)}var c=function(a){window.console&&window.console.warn&&window.console.warn("FeatherlightGallery: "+a)};if("undefined"==typeof a)return c("Too much lightness, Featherlight needs jQuery.");if(!a.featherlight)return c("Load the featherlight plugin before the gallery plugin");var d="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,e=a.event&&a.event.special.swipeleft&&a,f=window.Hammer&&function(a){var b=new window.Hammer.Manager(a[0]);return b.add(new window.Hammer.Swipe),b},g=d&&(e||f);d&&!g&&c("No compatible swipe library detected; one must be included before featherlightGallery for swipe motions to navigate the galleries.");var h={afterClose:function(a,b){var c=this;return c.$instance.off("next."+c.namespace+" previous."+c.namespace),c._swiper&&(c._swiper.off("swipeleft",c._swipeleft).off("swiperight",c._swiperight),c._swiper=null),a(b)},beforeOpen:function(a,b){var c=this;return c.$instance.on("next."+c.namespace+" previous."+c.namespace,function(a){var b="next"===a.type?1:-1;c.navigateTo(c.currentNavigation()+b)}),g&&(c._swiper=g(c.$instance).on("swipeleft",c._swipeleft=function(){c.$instance.trigger("next")}).on("swiperight",c._swiperight=function(){c.$instance.trigger("previous")}),c.$instance.addClass(this.namespace+"-swipe-aware",g)),c.$instance.find("."+c.namespace+"-content").append(c.createNavigation("previous")).append(c.createNavigation("next")),a(b)},beforeContent:function(a,b){var c=this.currentNavigation(),d=this.slides().length;return this.$instance.toggleClass(this.namespace+"-first-slide",0===c).toggleClass(this.namespace+"-last-slide",c===d-1),a(b)},onKeyUp:function(a,b){var c={37:"previous",39:"next"}[b.keyCode];return c?(this.$instance.trigger(c),!1):a(b)}};a.featherlight.extend(b,{autoBind:"[data-featherlight-gallery]"}),a.extend(b.prototype,{previousIcon:"◀",nextIcon:"▶",galleryFadeIn:100,galleryFadeOut:300,slides:function(){return this.filter?this.$source.find(this.filter):this.$source},images:function(){return c("images is deprecated, please use slides instead"),this.slides()},currentNavigation:function(){return this.slides().index(this.$currentTarget)},navigateTo:function(b){var c=this,d=c.slides(),e=d.length,f=c.$instance.find("."+c.namespace+"-inner");return b=(b%e+e)%e,this.$instance.addClass(this.namespace+"-loading"),c.$currentTarget=d.eq(b),c.beforeContent(),a.when(c.getContent(),f.fadeTo(c.galleryFadeOut,.2)).always(function(a){c.setContent(a),c.afterContent(),a.fadeTo(c.galleryFadeIn,1)})},createNavigation:function(b){var c=this;return a(''+this[b+"Icon"]+"").click(function(d){a(this).trigger(b+"."+c.namespace),d.preventDefault()})}}),a.featherlightGallery=b,a.fn.featherlightGallery=function(a){return b.attach(this,a),this},a(document).ready(function(){b._onReady()})}); diff --git a/public/packages/fluidbook/toolbox/css/style.less b/public/packages/fluidbook/toolbox/css/style.less index da2d4dabe..726bdfb25 100644 --- a/public/packages/fluidbook/toolbox/css/style.less +++ b/public/packages/fluidbook/toolbox/css/style.less @@ -427,3 +427,18 @@ body.embeded { //} @import "tools"; +.featherlight-next, .featherlight-previous { + top: 0; + right: 0; + left: 80%; + + &:hover { + background-color: rgba(0, 0, 0, 0.25); + } +} + +.featherlight-previous { + left: 0px; + right: 80%; +} + diff --git a/resources/js/theme_preview/theme_preview.js b/resources/js/theme_preview/theme_preview.js index 858f6249a..bc9bd0786 100644 --- a/resources/js/theme_preview/theme_preview.js +++ b/resources/js/theme_preview/theme_preview.js @@ -1,16 +1,13 @@ const puppeteer = require('puppeteer'); const commandLineArgs = require('command-line-args'); const optionDefinitions = [{name: 'url', type: String}, {name: 'dest', type: String}, { - name: 'destmenu', - type: String + name: 'destmenu', type: String +}, { + name: 'destburger', type: String }, {name: 'destloader', type: String}, {name: 'delay', type: Number, defaultOption: 10}, { - name: 'scale', - type: Number, - defaultOption: 1 + name: 'scale', type: Number, defaultOption: 1 }, {name: 'width', type: Number, defaultOption: 1920}, { - name: 'height', - type: Number, - defaultOption: 1080 + name: 'height', type: Number, defaultOption: 1080 }, {name: 'page', type: Number, defaultOption: 2}]; (async () => { @@ -40,11 +37,18 @@ const optionDefinitions = [{name: 'url', type: String}, {name: 'dest', type: Str await new Promise(r => setTimeout(r, 1000)); await page.screenshot({path: options.dest, type: 'jpeg', quality: 95}); - // // Open share menu and take a screenshot + // Open print menu and take a screenshot + await page.evaluate(() => fluidbook.slider.leave()); + await page.evaluate(() => fluidbook.menu.openView('print')); + await new Promise(r => setTimeout(r, 500)); + await page.screenshot({path: options.destmenu, type: 'jpeg', quality: 95}); + + // Open burger menu and take a screenshot + await page.evaluate(() => fluidbook.menu.quickCloseView()); await page.evaluate(() => fluidbook.nav.menuAPI.open()); await new Promise(r => setTimeout(r, 500)); await page.mouse.move(60, 400); - await page.screenshot({path: options.destmenu, type: 'jpeg', quality: 95}); + await page.screenshot({path: options.destburger, type: 'jpeg', quality: 95}); await browser.close(); })(); diff --git a/resources/views/fields/fluidbook_theme_selector.blade.php b/resources/views/fields/fluidbook_theme_selector.blade.php index 6fccd0512..bac499d93 100644 --- a/resources/views/fields/fluidbook_theme_selector.blade.php +++ b/resources/views/fields/fluidbook_theme_selector.blade.php @@ -13,10 +13,7 @@ resizeThemeSelector(); function resizeThemeSelector() { - var ifr = $('.themeSelector iframe'); - var ih = ifr.outerWidth() * 0.75; - ifr.css('height', ih); - $('.themeSelector .preview').css('max-height', (ih / 2) + 10); + } setInterval(function () { @@ -64,8 +61,14 @@ setTimeout(updateThemeSelector, 500); return; } - var iframe = $('.themeSelector .preview iframe'); - $(iframe).attr('src', $(iframe).data('url').replace(/\$id/, themeID)); + + $(".themeSelector [data-url]").each(function () { + var attr = 'href' + if ($(this).is('img')) { + attr = 'src'; + } + $(this).attr(attr, $(this).data('url').replace(/\$id/, themeID)); + }); $(".themeSelector .actions a").each(function () { $(this).attr('href', $(this).data('url').replace(/\$id/, themeID) + '&ajax=' + $(selector).data('ajax') + '&entry={{addcslashes(get_class($entry),'\\')}}&id={{$entry->id}}&name={{$field['name']}}'); }); @@ -84,7 +87,6 @@ $(this).text(optName); $(selector).trigger('change.select2'); }); - console.log($(selector + ' + .select2 .select2-selection__rendered')); $(selector + ' + .select2 .select2-selection__rendered').text(optName); } }); @@ -106,22 +108,28 @@ } .themeSelector .preview { - width: 55%; + width: 65%; display: inline-block; - overflow: hidden; + white-space: normal; + font-size: 0; } - .themeSelector .preview iframe { - width: 200%; + .themeSelector .preview a { + display: inline-block; + width: 50%; border: 0; border-radius: 6px; - transform: scale(0.5); - transform-origin: 0 0; + } + .themeSelector .preview a img { + display: block; + width: 100%; + height: auto; + border: 0; } .themeSelector .actions { display: inline-block; - width: 45%; + width: 35%; vertical-align: top; padding: 0 0 0 20px; white-space: normal; @@ -138,10 +146,11 @@ @endif @include('cubist_back::fields.select2_from_array')
-
- +
+ @foreach(['loader','','menu','burger'] as $v) + @php $u='$id'; if($v){$u.='-'.$v;} $url=backpack_url('fluidbookthemepreview/'.$u.'.jpg') @endphp + + @endforeach

#where(['args' => '.*']); Route::post('toolbox_setting', 'ToolboxSettingsController@set'); Route::get('fluidbookthemepreview/{id}-loader.jpg', 'FluidbookThemePreviewController@previewLoader'); + Route::get('fluidbookthemepreview/{id}-burger.jpg', 'FluidbookThemePreviewController@previewBurger'); Route::get('fluidbookthemepreview/{id}-menu.jpg', 'FluidbookThemePreviewController@previewMenu'); Route::get('fluidbookthemepreview/{id}.jpg', 'FluidbookThemePreviewController@preview'); -- 2.39.5