From: Vincent Vanwaelscappel Date: Wed, 7 Sep 2022 17:55:23 +0000 (+0200) Subject: wait #5440 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d40e16d95325bbb51a9e7a5b3c7319bfbedc0a7d;p=fluidbook-toolbox.git wait #5440 @4 --- diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php index 404573e8f..e52480783 100644 --- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php +++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php @@ -2,7 +2,9 @@ namespace App\Http\Controllers\Admin\Operations\FluidbookPublication; +use App\Models\FluidbookDocument; use App\Models\FluidbookPublication; +use Cubist\Backpack\Http\Controllers\Base\XSendFileController; use Illuminate\Support\Facades\Route; trait EditOperation @@ -11,8 +13,36 @@ trait EditOperation protected function setupEditRoutes($segment, $routeName, $controller) { Route::match(['get'], $segment . '/{id}/edit/links', $controller . '@links'); + Route::match(['get'], $segment . '/{id}/edit/link_{page}.jpg', $controller . '@getLinkPage'); } + + protected function getLinkPage($fluidbook_id, $page) + { + /** @var FluidbookPublication $fluibdook */ + $fluibdook = FluidbookPublication::find($fluidbook_id); + $path = $fluibdook->getFile($page); + return XSendFileController::sendfile($path); + } + +// protected function getThumb($doc_id, $doc_page) +// { +// +// /** @var FluidbookDocument $doc */ +// $doc = FluidbookDocument::find($doc_id); +// $path = $doc->getFile($doc_page, 'jpg', 'thumb', true, true, ''); +// if (filesize($path) === 0) { +// for ($i = 1; $i <= 8; $i++) { +// clearstatcache(); +// if (filesize($path) > 0) { +// break; +// } +// sleep($i); +// } +// } +// return XSendFileController::sendfile($path); +// } + protected function setupEditDefaults() { $this->crud->addButton('line', 'edit', 'view', 'crud::buttons.fluidbook_publication.edit', 'end'); diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css b/public/packages/fluidbook/toolbox/css/linkeditor.css index 3ff5718fc..69494c00d 100644 --- a/public/packages/fluidbook/toolbox/css/linkeditor.css +++ b/public/packages/fluidbook/toolbox/css/linkeditor.css @@ -1,3 +1,16 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +img { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + user-drag: none; +} body, #linkeditor, html { @@ -32,12 +45,62 @@ html { height: calc( 100% - 51px); width: 100%; } -#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-fluidbook { +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-zoom { + width: 100%; + height: 100%; + transform-origin: 0 0; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas { background-color: #505050; position: relative; top: 16px; left: 16px; height: calc( 100% - 16px); + max-height: calc( 100% - 16px); width: calc( 100% - 16px); + max-width: calc( 100% - 16px); + overflow: auto; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas::-webkit-scrollbar { + width: 6px; + height: 6px; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas::-webkit-scrollbar-track { + background: transparent; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas::-webkit-scrollbar-track:hover { + background-color: #000; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas::-webkit-scrollbar-thumb { + background-color: #aaa; + border: 1px solid #333; + border-radius: 20px; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas.grab { + cursor: grab; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas.grabbing { + cursor: grabbing; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas #linkeditor-fluidbook { + transform-origin: 0 0; + position: absolute; + top: 0; + left: 0; +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas #linkeditor-fluidbook .linkeditor-page { + position: absolute; + top: 0px; + left: 0px; + background-color: rgba(255, 255, 255, 0.2); + outline: 1px solid rgba(255, 255, 255, 0.5); +} +#linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas #linkeditor-fluidbook .linkeditor-page img { + display: block; + width: 100%; + height: 100%; +} +.simple #linkeditor #linkeditor-main #linkeditor-editor #linkeditor-canvas #linkeditor-fluidbook .linkeditor-page#linkeditor-page-right { + display: none; } /*# sourceMappingURL=linkeditor.css.map */ \ No newline at end of file diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css.map b/public/packages/fluidbook/toolbox/css/linkeditor.css.map index 8d346eef4..c9430f7f7 100644 --- a/public/packages/fluidbook/toolbox/css/linkeditor.css.map +++ b/public/packages/fluidbook/toolbox/css/linkeditor.css.map @@ -1 +1 @@ -{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"AAAA;AAAM;AAAa;EACf,YAAA;EACA,WAAA;EACA,gBAAA;;AAGJ;EACI,mBAAA;EACA,YAAA;;AAFJ,WAII;AAJJ,WAIW;EACH,qBAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;;AARR,WAWI;EACI,WAAA;EACA,yBAAA;;AAbR,WAgBI;EACI,yBAAA;;AAjBR,WAgBI,iBAGI;EACI,yBAAA;EACA,cAAA;EACA,YAAA;;AAtBZ,WAgBI,iBASI;EACI,0BAAA;EACA,WAAA;;AA3BZ,WAgBI,iBASI,mBAII;EACI,yBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,yBAAA","file":"linkeditor.css"} \ No newline at end of file +{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;;AAIJ;EACI,yBAAA;EACA,wBAAA;EACA,sBAAA;EACA,oBAAA;EACA,iBAAA;EACA,eAAA;;AAGJ;AAAM;AAAa;EACf,YAAA;EACA,WAAA;EACA,gBAAA;;AAGJ;EACI,mBAAA;EACA,YAAA;;AAFJ,WAII;AAJJ,WAIW;EACH,qBAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;;AARR,WAWI;EACI,WAAA;EACA,yBAAA;;AAbR,WAgBI;EACI,yBAAA;;AAjBR,WAgBI,iBAGI;EACI,yBAAA;EACA,cAAA;EACA,YAAA;;AAtBZ,WAgBI,iBASI;EACI,0BAAA;EACA,WAAA;;AA3BZ,WAgBI,iBASI,mBAII;EACI,WAAA;EACA,YAAA;EACA,qBAAA;;AAhChB,WAgBI,iBASI,mBAUI;EACI,yBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,8BAAA;EACA,yBAAA;EACA,6BAAA;EACA,cAAA;;AAEA,WA9BZ,iBASI,mBAUI,mBAWK;EACG,UAAA;EACA,WAAA;;AAIJ,WApCZ,iBASI,mBAUI,mBAiBK;EACG,uBAAA;;AAEA,WAvChB,iBASI,mBAUI,mBAiBK,yBAGI;EACG,sBAAA;;AAIR,WA5CZ,iBASI,mBAUI,mBAyBK;EACG,sBAAA;EACA,sBAAA;EACA,mBAAA;;AAGJ,WAlDZ,iBASI,mBAUI,mBA+BK;EACG,YAAA;;AAGJ,WAtDZ,iBASI,mBAUI,mBAmCK;EACG,gBAAA;;AAvEpB,WAgBI,iBASI,mBAUI,mBAwCI;EACI,qBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;;AA/EpB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;EACA,2CAAA;;AAtFxB,WAgBI,iBASI,mBAUI,mBAwCI,sBAMI,iBAOI;EACI,cAAA;EACA,WAAA;EACA,YAAA;;AAIA,OAAQ,YA/EhC,iBASI,mBAUI,mBAwCI,sBAMI,iBAaK;EAEO,aAAA","file":"linkeditor.css"} \ No newline at end of file diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.less b/public/packages/fluidbook/toolbox/css/linkeditor.less index f748b8f4b..31cff6522 100644 --- a/public/packages/fluidbook/toolbox/css/linkeditor.less +++ b/public/packages/fluidbook/toolbox/css/linkeditor.less @@ -1,3 +1,19 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +img { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + user-drag: none; +} + body, #linkeditor, html { height: 100%; width: 100%; @@ -33,13 +49,78 @@ body, #linkeditor, html { height: ~"calc( 100% - 51px)"; width: 100%; - #linkeditor-fluidbook { + #linkeditor-zoom { + width: 100%; + height: 100%; + transform-origin: 0 0; + } + + #linkeditor-canvas { background-color: #505050; position: relative; top: 16px; left: 16px; height: ~"calc( 100% - 16px)"; + max-height: ~"calc( 100% - 16px)"; width: ~"calc( 100% - 16px)"; + max-width: ~"calc( 100% - 16px)"; + overflow: auto; + + &::-webkit-scrollbar { + width: 6px; + height: 6px; + + } + + &::-webkit-scrollbar-track { + background: transparent; + + &:hover { + background-color: #000; + } + } + + &::-webkit-scrollbar-thumb { + background-color: #aaa; + border: 1px solid #333; + border-radius: 20px; + } + + &.grab { + cursor: grab; + } + + &.grabbing { + cursor: grabbing; + } + + + #linkeditor-fluidbook { + transform-origin: 0 0; + position: absolute; + top: 0; + left: 0; + + .linkeditor-page { + position: absolute; + top: 0px; + left: 0px; + background-color: rgba(255, 255, 255, 0.2); + outline: 1px solid rgba(255, 255, 255, 0.5); + + img { + display: block; + width: 100%; + height: 100%; + } + + &#linkeditor-page-right { + .simple & { + display: none; + } + } + } + } } } } diff --git a/public/packages/fluidbook/toolbox/js/linkeditor.js b/public/packages/fluidbook/toolbox/js/linkeditor.js index e69de29bb..1224592ef 100644 --- a/public/packages/fluidbook/toolbox/js/linkeditor.js +++ b/public/packages/fluidbook/toolbox/js/linkeditor.js @@ -0,0 +1,171 @@ +$(function () { + var single = ['mobilefirst', 'portrait'].indexOf(FLUIDBOOK_DATA.settings.mobileNavigationType) >= 0; + var pw = FLUIDBOOK_DATA.settings.width; + var ph = FLUIDBOOK_DATA.settings.height; + var fw = pw * (single ? 1 : 2); + var fh = ph; + var zoom = 1; + var zoomdragging = false; + + function init() { + $(window).on('hashchange', function () { + changePage(); + }); + $(window).on('resize', function () { + resize(); + }); + key('escape', function () { + setZoom(1); + resetZoomDrag(); + }); + // Disable scroll by spacebar + $(window).on('keydown', function (e) { + if (e.keyCode == 32) { + $("#linkeditor-canvas").addClass('grab'); + return false; + } + }); + $(window).on('keyup', function (e) { + if (e.keyCode == 32) { + resetZoomDrag(); + } + }); + $("#linkeditor-canvas").on('mousedown', function (e) { + if ($(this).hasClass('grab') && zoom > 1) { + zoomdragging = { + x: e.pageX, + y: e.pageY, + scrollX: $("#linkeditor-canvas").scrollLeft(), + scrollY: $("#linkeditor-canvas").scrollTop() + }; + $(this).addClass('grabbing'); + } else { + resetZoomDrag(); + } + }); + $(window).on('mousemove', function (e) { + if (!$("#linkeditor-canvas").hasClass('grab') || zoom === 1) { + resetZoomDrag(); + } + if (zoomdragging !== false) { + moveZoomDrag(e); + } + }); + $(window).on('mouseup', function (e) { + if (zoomdragging !== false) { + moveZoomDrag(e); + } + resetZoomDrag(); + }); + $("#linkeditor-canvas").on('wheel', function (e) { + var delta = e.originalEvent.deltaY; + if (delta == 0) { + return true; + } + + if (delta < 0) { + if (setZoom(zoom + 0.25)) { + moveZoom(e); + } + } else { + setZoom(zoom - 0.25); + } + return false; + }); + + if (single) { + $("#linkeditor").addClass('single'); + } else { + $("#linkeditor").addClass('double'); + } + $('.linkeditor-page').css({ + width: pw, height: ph + }); + $("#linkeditor-page-right").css({left: pw + 1}) + $('#linkeditor-fluidbook').css({ + width: fw, height: ph + }); + resize(); + changePage(); + } + + function resetZoomDrag() { + $("#linkeditor-canvas").removeClass('grab').removeClass('grabbing'); + zoomdragging = false; + } + + function moveZoomDrag(e) { + var deltaX = e.pageX - zoomdragging.x; + var deltaY = e.pageY - zoomdragging.y; + $("#linkeditor-canvas").scrollTo({ + top: zoomdragging.scrollY - deltaY, left: zoomdragging.scrollX - deltaX + }); + } + + function moveZoom(e) { + var rect = $("#linkeditor-zoom").get(0).getBoundingClientRect(); + var lx = (e.originalEvent.pageX - rect.x) / rect.width; + var ly = (e.originalEvent.pageY - rect.y) / rect.height; + $("#linkeditor-canvas").scrollTo({left: pct(lx), top: pct(ly)}); + } + + function pct(v) { + return (v * 100) + '%'; + } + + function setZoom(z) { + z = Math.max(1, Math.min(6, z)); + if (z === zoom) { + return false; + } + zoom = z; + $("#linkeditor-canvas").attr('data-z', zoom); + $("#linkeditor-zoom").css({transform: 'scale(' + zoom + ')'}); + return true; + } + + function changePage(page) { + if (page === undefined) { + var h = window.location.hash; + if (h.length === 0) { + page = 0; + } else { + page = window.location.hash.substring(1); + } + } + if (page % 2 === 1 && !single) { + page--; + } + loadPage(page, 'left'); + if (!single) { + loadPage(page + 1, 'right'); + } + resize(); + } + + function loadPage(p, side) { + var container = $("#linkeditor-page-" + side); + if (p === 0 || p > FLUIDBOOK_DATA.settings.pages) { + $(container).html(''); + } else { + $(container).html('') + } + } + + function resize() { + resizeCanvas(); + } + + function resizeCanvas() { + var cw = $('#linkeditor-canvas').outerWidth(); + var ch = $('#linkeditor-canvas').outerHeight(); + var aw = cw - 20; + var ah = ch - 20; + var s = Math.min(aw / fw, ah / fh); + var left = (cw - fw * s) / 2; + var top = (ch - fh * s) / 2; + $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + s + ')'}); + } + + init(); +}); diff --git a/resources/views/fields/fluidbook_composition.blade.php b/resources/views/fields/fluidbook_composition.blade.php index e67bf3326..f14beb0c2 100644 --- a/resources/views/fields/fluidbook_composition.blade.php +++ b/resources/views/fields/fluidbook_composition.blade.php @@ -451,7 +451,7 @@ links: { name: "{{__('Editer les liens')}}", callback: function (key, opt) { - + window.open('/fluidbook-publication/' + {{$entry->id}} + '/edit/links#' + ($(opt.$trigger[0]).index() + 1)) }, }, }, compositionContextConversionSettings()); diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index 4e2b2eb17..2dded2b08 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -4,19 +4,35 @@ @extends('layouts.empty') @section('content') -
+
-
+
-
-
+
+
+
+
+
+
+
+
+
@endsection @push('after_scripts') + + +