return $this->preview($id, 'menu');
}
+ public function previewBurger($id)
+ {
+ return $this->preview($id, 'burger');
+ }
+
public function previewLoader($id)
{
return $this->preview($id, 'loader');
$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);
'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:
// 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',
--- /dev/null
+/**
+ * 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}}
--- /dev/null
+/**
+ * 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('<span title="'+b+'" class="'+this.namespace+"-"+b+'"><span>'+this[b+"Icon"]+"</span></span>").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()})});
//}
@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%;
+}
+
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 () => {
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();
})();
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 () {
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']}}');
});
$(this).text(optName);
$(selector).trigger('change.select2');
});
- console.log($(selector + ' + .select2 .select2-selection__rendered'));
$(selector + ' + .select2 .select2-selection__rendered').text(optName);
}
});
}
.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;
@endif
@include('cubist_back::fields.select2_from_array')
<div class="themeSelector">
- <div class="preview">
- <iframe
- data-url="{{\App\Models\FluidbookTheme::getThemePreviewURL('$id',['widget'=>'1','action'=>'fullscreen','theme'=>''],0)}}"
- id="themePreviewIframe" src="" frameborder="0" allowfullscreen></iframe>
+ <div class="preview" data-featherlight-gallery data-featherlight-filter="a">
+ @foreach(['loader','','menu','burger'] as $v)
+ @php $u='$id'; if($v){$u.='-'.$v;} $url=backpack_url('fluidbookthemepreview/'.$u.'.jpg') @endphp
+ <a data-url="{{$url}}" href=""><img data-url="{{$url}}"></a>
+ @endforeach
</div>
<div class="actions">
<h4><span class="name"></span> <span style="font-weight: normal;font-style: italic;font-size: 80%">#<span
Route::any('tools/{tool}/{args?}', 'ToolsController@index')->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');
projects / fluidbook-toolbox.git / commitdiff