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();
}
}
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');
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')));
});
--- /dev/null
+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;
$(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();
--- /dev/null
+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;
nav
position: absolute
+ left: 0
width: $sidebar-icons-width
height: 100%
@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
.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
left: 0
.linkeditor-panel
- margin-left: 0
+ margin-left: $sidebar-handle-width
margin-right: $sidebar-icons-width
$font-size: 16px
$sidebar-icons-width: 46px
+$sidebar-handle-width: 3px
$rulers-size: 16px
$ruler-margin: 2px
$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')
<div draggable="false" id="linkeditor">
+ <div style="display: none" id="panels-setups">
+ <a href="#" id="linkeditor-icon-layers" data-icon="layers" data-action="panels.toggleLayers"
+ data-tooltip="{{__('Liste des liens')}} (F7)"
+ data-key="f7"></a>
+ <a href="#" id="linkeditor-icon-form" data-icon="settings" data-action="panels.toggleForm"
+ data-tooltip="{{__('Afficher le formulaire')}} (F8)"
+ data-key="f8"></a>
+ <div id="linkeditor-panel-layers">
+ </div>
+ <div id="linkeditor-panel-form">
+ </div>
+ </div>
<aside id="linkeditor-left" class="linkeditor-sidebar">
<nav id="linkeditor-left-icons">
- <a href="#" data-icon="layers" data-action="panel.toggle.layers" data-tooltip="{{__('Liste des liens')}} (F7)"
- data-key="F7"></a>
+
</nav>
- <div id="linkeditor-left-panel" class="linkeditor-panel open">
+ <div id="linkeditor-left-panel" class="linkeditor-panel">
</div>
<div class="handle"></div>
</div>
</div>
<aside id="linkeditor-right" class="linkeditor-sidebar">
- <nav id="linkeditor-left-icons">
- <a href="#" data-icon="settings" data-action="panel.toggle.form" data-tooltip="{{__('Afficher le formulaire')}} (F8)"
- data-key="F8"></a>
- </nav>
- <div id="linkeditor-left-panel" class="linkeditor-panel open"></div>
+ <nav id="linkeditor-right-icons"></nav>
+ <div id="linkeditor-right-panel" class="linkeditor-panel"></div>
<div class="handle"></div>
</aside>
</div>
var FLUIDBOOK_DATA = @json($fbdata);
var LINKS = {!! $links !!};
var RULERS = {!! $rulers !!};
+ var SETTINGS = @json($settings);
</script>
<script
src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
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;
projects / fluidbook-toolbox.git / commitdiff