From 0874fea1fbe773890a262a3713c0fc4c2c1b7301 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 14 Oct 2022 19:17:45 +0200 Subject: [PATCH] wip #5531 @3 --- .../Admin/ToolboxSettingsController.php | 4 +- resources/linkeditor/js/linkeditor.js | 7 ++- resources/linkeditor/js/linkeditor.panels.js | 60 +++++++++++++++++++ resources/linkeditor/js/linkeditor.resize.js | 9 ++- .../linkeditor/js/linkeditor.settings.js | 38 ++++++++++++ resources/linkeditor/style/panels.sass | 21 +++++-- resources/linkeditor/style/variables.sass | 1 + .../link_editor.blade.php | 31 +++++++--- .../base/inc/sidebar_content.blade.php | 6 +- 9 files changed, 160 insertions(+), 17 deletions(-) create mode 100644 resources/linkeditor/js/linkeditor.panels.js create mode 100644 resources/linkeditor/js/linkeditor.settings.js diff --git a/app/Http/Controllers/Admin/ToolboxSettingsController.php b/app/Http/Controllers/Admin/ToolboxSettingsController.php index d5f34eac3..e79247936 100644 --- a/app/Http/Controllers/Admin/ToolboxSettingsController.php +++ b/app/Http/Controllers/Admin/ToolboxSettingsController.php @@ -7,7 +7,9 @@ class ToolboxSettingsController public function set() { $user = backpack_user(); - $user->setToolboxSetting(request()->get('key'), request()->get('value')); + foreach (request('settings') as $key => $val) { + $user->setToolboxSetting($key, $val); + } $user->saveWithoutFlushingCache(); } } diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 21e54b946..0c9c34be9 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -8,6 +8,8 @@ import LinkeditorToolbar from './linkeditor.toolbar'; import LinkeditorUtils from './linkeditor.utils'; import LinkeditorZoom from './linkeditor.zoom'; import LinkeditorSave from './linkeditor.save'; +import LinkeditorSettings from './linkeditor.settings'; +import LinkeditorPanels from './linkeditor.panels'; window.$ = window.jQuery = require('jquery'); window.key = require('keymaster'); @@ -51,12 +53,15 @@ LinkEditor.prototype = { this.utils = new LinkeditorUtils(this); this.loader = new LinkeditorLoader(this); this.save = new LinkeditorSave(this); + this.panels = new LinkeditorPanels(this); + this.settings = new LinkeditorSettings(this); this.initEvents(); this.initIcons(); + this.panels.init(); }, - initIcons:function(){ + initIcons: function () { $("#linkeditor [data-icon]").each(function () { $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))); }); diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js new file mode 100644 index 000000000..694c382fb --- /dev/null +++ b/resources/linkeditor/js/linkeditor.panels.js @@ -0,0 +1,60 @@ +function LinkeditorPanels(linkeditor) { + this.linkeditor = linkeditor; + this.sides = ['left', 'right']; +} + +LinkeditorPanels.prototype = { + init: function () { + + var $this = this; + $.each(this.sides, function (k, side) { + var tool = $this.linkeditor.settings.get(side + '_tool'); + var open = $this.linkeditor.settings.get(tool + '_open'); + console.log(open); + var width = Math.min(70, Math.max(12, $this.linkeditor.settings.get(tool + '_width'))); + var icon = $("#linkeditor-icon-" + tool); + var panelContainer = $("#linkeditor-" + side + '-panel') + + $("#linkeditor-" + side + '-icons').append(icon); + panelContainer.append($("#linkeditor-panel-" + tool)); + if (open) { + icon.addClass('active'); + panelContainer.addClass('open'); + } + panelContainer.attr('data-width', width); + }); + this.linkeditor.resize.resize(); + }, + + resize: function (ww) { + $('.linkeditor-panel.open').each(function () { + var dw = parseFloat($(this).data('width')); + if (isNaN(dw)) { + return; + } + var w = (ww / 100) * dw; + $(this).css('width', w); + }); + }, + toggleLayers: function () { + this.togglePanel('layers'); + }, + toggleForm: function () { + this.togglePanel('form'); + }, + togglePanel: function (panel) { + let container = $("#linkeditor-panel-" + panel).closest('.linkeditor-panel'); + container.toggleClass('open'); + var icon = $("#linkeditor-icon-" + panel); + var opened = container.hasClass('open'); + if (opened) { + icon.addClass('active'); + } else { + icon.removeClass('active'); + } + this.linkeditor.settings.set(panel + '_open', opened); + this.linkeditor.resize.resize(); + } + +}; +module.exports = LinkeditorPanels; diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js index bbde620d7..62b45c896 100644 --- a/resources/linkeditor/js/linkeditor.resize.js +++ b/resources/linkeditor/js/linkeditor.resize.js @@ -9,11 +9,18 @@ LinkeditorResize.prototype = { $(window).on('resize', function () { $this.resize(); }); + this.updateWindowDimensions(); }, - resize: function () { + updateWindowDimensions: function () { this.ww = $(window).outerWidth(); this.hh = $(window).outerHeight(); + + }, + + resize: function () { + this.updateWindowDimensions(); + this.linkeditor.panels.resize(this.ww); this.resizeMain(); this.resizeCanvas(); this.linkeditor.rulers.updateRulers(); diff --git a/resources/linkeditor/js/linkeditor.settings.js b/resources/linkeditor/js/linkeditor.settings.js new file mode 100644 index 000000000..331b68a72 --- /dev/null +++ b/resources/linkeditor/js/linkeditor.settings.js @@ -0,0 +1,38 @@ +function LinkeditorSettings(linkeditor) { + this.linkeditor = linkeditor; + this.saveTimeout = null; +} + +LinkeditorSettings.prototype = { + save: function () { + var data = {}; + $.each(SETTINGS, function (k, v) { + data['linkeditor_' + k] = v; + }); + Pace.ignore(function () { + $.ajax({ + url: '/toolbox_setting', method: 'POST', data: {settings: data}, + }) + }); + }, + + get: function (key) { + var res = SETTINGS[key]; + if (res === 'true') { + res = true; + } else if (res === 'false') { + res = false; + } + return res; + }, + + set: function (key, value) { + let $this = this; + SETTINGS[key] = value; + clearTimeout(this.saveTimeout); + this.saveTimeout = setTimeout(function () { + $this.save(); + }, 3000); + } +}; +module.exports = LinkeditorSettings; diff --git a/resources/linkeditor/style/panels.sass b/resources/linkeditor/style/panels.sass index 237a54dbd..20f9aa00a 100644 --- a/resources/linkeditor/style/panels.sass +++ b/resources/linkeditor/style/panels.sass @@ -8,6 +8,7 @@ nav position: absolute + left: 0 width: $sidebar-icons-width height: 100% @@ -24,7 +25,7 @@ @media (prefers-color-scheme: dark) color: $toolbar-color-dark - &:hover, &.hover + &:hover, &.hover, &.active background-color: #fff @media (prefers-color-scheme: dark) background-color: #000 @@ -38,26 +39,38 @@ .handle position: absolute + top: 0 right: 0 - width: 2px + width: $sidebar-handle-width height: 100% background-color: #aaa + cursor: col-resize + z-index: 1 + @media (prefers-color-scheme: dark) background-color: #666 - cursor: col-resize + .linkeditor-panel display: none margin-left: $sidebar-icons-width + margin-right: $sidebar-handle-width background: $panel-background height: 100% @media (prefers-color-scheme: dark) background-color: #111 + &.open + display: block + &#linkeditor-right border-width: 0 0 0 2px + nav + left: auto + right: 0 + [data-icon] margin-left: 9px @@ -66,5 +79,5 @@ left: 0 .linkeditor-panel - margin-left: 0 + margin-left: $sidebar-handle-width margin-right: $sidebar-icons-width diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass index ab1fc21e2..fdf756262 100644 --- a/resources/linkeditor/style/variables.sass +++ b/resources/linkeditor/style/variables.sass @@ -1,5 +1,6 @@ $font-size: 16px $sidebar-icons-width: 46px +$sidebar-handle-width: 3px $rulers-size: 16px $ruler-margin: 2px diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index 94232c4dc..b94d4c1f8 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -16,18 +16,35 @@ $rulers=!count($rulers)?'{}':json_encode($rulers); $links=!count($links)?'{}':json_encode($links); + /** @var \App\Models\User $user */ + $user=backpack_user(); + $settings=['left_tool'=>'layers','layers_open'=>false,'layers_width'=>20,'right_tool'=>'form','form_open'=>true,'form_width'=>20]; + foreach ($settings as $k=>$v) { + $settings[$k]=$user->getToolboxSetting('linkeditor_'.$k,$v); + } @endphp @extends('layouts.empty') @section('content') @include('fluidbook_publication.link_editor_icons')
+
@@ -109,6 +123,7 @@ var FLUIDBOOK_DATA = @json($fbdata); var LINKS = {!! $links !!}; var RULERS = {!! $rulers !!}; + var SETTINGS = @json($settings); diff --git a/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php b/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php index 34f7a382d..89535bd57 100644 --- a/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php +++ b/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php @@ -14,11 +14,13 @@ setTimeout(function () { let newState = $(dropdown).hasClass('open') ? '1' : '0'; Pace.ignore(function () { + var data = {}; + data['sidebar_' + $(dropdown).data('sidebar-id')] = newState; $.ajax({ url: '{{ backpack_url('toolbox_setting') }}', method: 'POST', - data: {key: 'sidebar_' + $(dropdown).data('sidebar-id'), value: newState} - }) + data: {settings: data}, + }); }); }, 500); return true; -- 2.39.5