$cols = array(
'uid' => __('Identifiant unique'),
- 'page' => __('Page de la publication'), 'left' => __('x'), 'top' => __('y'), 'width' => __('Largeur'), 'height' => __('Hauteur'), 'rot' => __('Rotation'),
+ 'page' => __('Page de la publication'),
+ 'order' => __('Ordre'),
+ 'left' => __('x'), 'top' => __('y'), 'width' => __('Largeur'), 'height' => __('Hauteur'), 'rot' => __('Rotation'),
'type' => __('Type'), 'to' => __('Destination'), 'target' => __('Cible'),
'tooltip' => __('Infobulle'), 'numerotation' => __('Numérotation'),
'display_area' => __('Activer la surbrillance'),
var $this = this;
this.container = $("#linkeditor-panel-accessibility");
- console.log(this.container);
this.maskCheckEvents = false;
- $(document).on('click', '#linkeditor-panel-accessibility a.lock', function () {
- let uid = $(this).closest('.layer').find('input').attr('name');
- $this.linkeditor.links.locks.toggleLock(uid);
- return false;
- });
-
- $(document).on('click', "#linkeditor-panel-accessibility label", function (e) {
- if ($this.maskCheckEvents) {
- return false;
- }
- let uid = $(this).find('input').attr('name');
- let checked = $(this).find('input').prop('checked');
- var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
-
- if (!e.ctrlKey) {
- $this.linkeditor.links.deselectAllLinks();
- $this.linkeditor.links.selectLink(link);
- } else {
- if (checked) {
- $this.linkeditor.links.deselectLink(link);
- } else {
- $this.linkeditor.links.selectLink(link);
- }
- }
-
- $this.linkeditor.form.updateLinkForm();
- return false;
- });
-
$(document).on('click', '#linkeditor-panel-accessibility label span.uid', function () {
navigator.clipboard.writeText($(this).attr('fb-uid'));
let tippy = $(this).data('tippyinstance');
this.update();
},
- normalizeLinksOrder: function () {
+ moveSelectionOrder: function (way) {
+ let start;
+ let selection = this.getCurrentOrderableSelection();
+ let num = selection.length;
+ if (num <= 0) {
+ return;
+ }
+ let firstSelected = $(selection).get(0);
+ let firstSelectedOrder = parseInt($(firstSelected).attr('fb-order'));
+ let max = this.getOrderableLinksOnPage().length + 1;
+
+ let step = 1 / (num + 1);
+
+ switch (way) {
+ case'start':
+ start = -num;
+ step = -1;
+ break;
+ case'end':
+ start = max;
+ step = 1;
+ break;
+ case'up':
+ start = firstSelectedOrder - 1 - step;
+ step *= -1;
+ break;
+ case'down':
+ start = firstSelectedOrder + 1 + step;
+ break;
+ }
+
+ let selectedOrder = start;
+
+ $(selection).each(function () {
+ $(this).attr('fb-order', selectedOrder);
+ selectedOrder += step;
+ });
+
+ this.normalizeLinksOrder();
+ },
+
+ getOrderableLinksOnPage: function () {
+ return this.filterOrderableLinks(this.linkeditor.links.getLinksOfCurrentPage());
+ },
+
+ filterOrderableLinks: function (links) {
+ let res = [];
+ $.each(links, function () {
+ if ($(this).attr('fb-calc-depth') < 50) {
+ return;
+ }
+ res.push(this);
+ });
+
+ return this.orderLinks(res);
+ },
+
+ orderLinks: function (links) {
+ return $(links).toArray().sort(function (a, b) {
+ return parseInt($(a).attr('fb-order')) - parseInt($(b).attr('fb-order'));
+ });
+ },
+
+ getCurrentOrderableSelection: function () {
+ return this.filterOrderableLinks(this.linkeditor.links.getCurrentSelection());
+ },
+
+ normalizeLinksOrder: function (refresh) {
+ if (refresh === undefined) {
+ refresh = true;
+ }
let $this = this;
let links = [];
$('#linkeditor-links .link:not(.pendingCreate)').each(function () {
links.sort(function (a, b) {
if (a.interactive === b.interactive) {
- console.log(a.order, b.order);
return a.order - b.order
}
return b.interactive - a.interactive;
$(links).each(function (k, v) {
$(v.link).attr('fb-order', i++);
});
- this.linkeditor.hasChanged();
+ if (refresh) {
+ this.linkeditor.hasChanged();
+ }
this.linkeditor.links.pageMaxOrderIndex = i;
},
var $this = this;
this.container.html('');
var accessibility = [];
- this.normalizeLinksOrder();
- $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
+ this.normalizeLinksOrder(false);
+ $(this.orderLinks(this.linkeditor.links.getLinksOfCurrentPage())).each(function () {
let type = $(this).attr('fb-type');
let dest = $(this).attr('fb-to');
+ let uid = $(this).attr('fb-uid');
if (dest === '') {
dest = '<em>' + TRANSLATIONS.empty + '</em>';
}
- var l = '<div class="layer" data-locked="' + ($this.linkeditor.links.locks.isLocked($(this).attr('fb-uid')) ? '1' : '0') + '">';
- l += '<label class="layer" fb-type="' + type + '">';
- l += '<input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ';
+ var l = '<div class="layer" fb-type="' + type + '">';
+ l += '<input name="' + uid + '" type="checkbox"> ';
+ l += '<label class="layer" data-uid="' + uid + '">';
l += dest;
l += '<span class="order">#' + $(this).attr('fb-order') + '</span>';
l += '</label>';
- //l += '<a href="#" class="lock" data-icon="lock" data-tooltip="' + TRANSLATIONS['lock'] + '"></a>';
l += '</div>';
let level = $this.getLinkLevel($(this));
accessibility.push({
}
return b.interactive - a.interactive;
});
+
var seenLevels = {};
- console.log(accessibility);
$.each(accessibility, function (k, v) {
if (seenLevels[v.interactive] === undefined) {
seenLevels[v.interactive] = true;
$this.container.append(v.html);
});
-
this.updateSelection();
this.linkeditor.initTooltips();
this.linkeditor.initIcons();
},
updateSelection() {
-
- if (this.container === undefined || this.container.is(':hidden')) {
- return;
- }
- var $this = this;
- this.maskCheckEvents = true;
- setTimeout(function () {
- $this.maskCheckEvents = false;
- }, 100);
-
- $('#linkeditor-links .link').each(function () {
- let checkbox = $this.container.find('input[name=' + $(this).attr('fb-uid') + ']');
- checkbox.prop('checked', $(this).is('.selected'));
- });
+ this.linkeditor.panels.updatePanelSelection(this);
},
resize: function () {
if (push === true) {
this.undo.pushState();
}
- this.layers.update();
+ this.panels.refresh();
this.updateFBElements(true);
},
this.container = $("#linkeditor-panel-layers");
this.maskCheckEvents = false;
- $(document).on('click', '#linkeditor-panel-layers a.lock', function () {
- let uid = $(this).closest('.layer').find('input').attr('name');
- $this.linkeditor.links.locks.toggleLock(uid);
- return false;
- });
-
- $(document).on('click', "#linkeditor-panel-layers label", function (e) {
- if ($this.maskCheckEvents) {
- return false;
- }
- let uid = $(this).find('input').attr('name');
- let checked = $(this).find('input').prop('checked');
- var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
-
- if (!e.ctrlKey) {
- $this.linkeditor.links.deselectAllLinks();
- $this.linkeditor.links.selectLink(link);
- } else {
- if (checked) {
- $this.linkeditor.links.deselectLink(link);
- } else {
- $this.linkeditor.links.selectLink(link);
- }
- }
-
- $this.linkeditor.form.updateLinkForm();
- return false;
- });
-
$(document).on('click', '#linkeditor-panel-layers label span.uid', function () {
navigator.clipboard.writeText($(this).attr('fb-uid'));
let tippy = $(this).data('tippyinstance');
var $this = this;
this.container.html('');
var layers = [];
- $('#linkeditor-links .link:not(.pendingCreate)').each(function () {
+ this.linkeditor.links.getLinksOfCurrentPage().each(function () {
let type = $(this).attr('fb-type');
let dest = $(this).attr('fb-to');
if (dest === '') {
dest = '<em>' + TRANSLATIONS.empty + '</em>';
}
- var l = '<div class="layer" data-locked="' + ($this.linkeditor.links.locks.isLocked($(this).attr('fb-uid')) ? '1' : '0') + '">';
- l += '<label class="layer" fb-type="' + type + '">';
- l += '<input name="' + $(this).attr('fb-uid') + '" type="checkbox"> ';
+ let uid = $(this).attr('fb-uid');
+ var l = '<div class="layer" fb-type="' + type + '" data-locked="' + ($this.linkeditor.links.locks.isLocked(uid) ? '1' : '0') + '">';
+ l += '<input name="' + uid + '" type="checkbox"> ';
+ l += '<label class="layer" data-uid="' + uid + '">';
l += dest;
- l += '<span data-tooltip="' + TRANSLATIONS.click_to_copy_id + '" data-uid="' + $(this).attr('fb-uid') + '" class="uid">#' + $(this).attr('fb-uid') + '</span>';
+ l += '<span data-tooltip="' + TRANSLATIONS.click_to_copy_id + '" data-uid="' + uid + '" class="uid">#' + uid + '</span>';
l += '</label>';
l += '<a href="#" class="lock" data-icon="lock" data-tooltip="' + TRANSLATIONS['lock'] + '"></a>';
l += '</div>';
},
updateSelection() {
-
- if (this.container === undefined || this.container.is(':hidden')) {
- return;
- }
- var $this = this;
- this.maskCheckEvents = true;
- setTimeout(function () {
- $this.maskCheckEvents = false;
- }, 100);
-
- $('#linkeditor-links .link').each(function () {
- let checkbox = $this.container.find('input[name=' + $(this).attr('fb-uid') + ']');
- checkbox.prop('checked', $(this).is('.selected'));
- });
+ this.linkeditor.panels.updatePanelSelection(this);
},
resize: function () {
$.contextMenu({
- selector: '#linkeditor-canvas,.link,#linkeditor-panel-layers, #linkeditor-panel-layers label', events: {
+ selector: '#linkeditor-canvas,.link,#linkeditor-panel-layers, #linkeditor-panel-layers label,#linkeditor-panel-accessibility, #linkeditor-panel-accessibility label',
+ events: {
show: function (e) {
$this.contextMenuPosition = {x: $this.linkeditor.mx, y: $this.linkeditor.my};
- }, preShow: function (e) {
+ },
+ preShow: function (e) {
+ console.log(e);
if ($(e).is('.link:not(.selected)')) {
$this.deselectAllLinks();
$this.selectLink(e);
}
- if ($(e).is('#linkeditor-panel-layers label')) {
- let input = $(e).find('input');
+ if ($(e).is('.linkeditor-panel label')) {
+ let input = $(e).closest('div.layer').find('input');
+ console.log(input, input.prop('checked'));
if (!input.prop('checked')) {
$this.deselectAllLinks();
$this.selectLink($('.link[fb-uid=' + input.attr('name') + ']'));
},
};
res.items.paste_on_left = {
- isHtmlName: true,
- name: TRANSLATIONS.paste_on_left,
- callback: function () {
+ isHtmlName: true, name: TRANSLATIONS.paste_on_left, callback: function () {
$this.paste('left');
},
};
res.items.paste_on_right = {
- isHtmlName: true,
- name: TRANSLATIONS.paste_on_right,
- callback: function () {
+ isHtmlName: true, name: TRANSLATIONS.paste_on_right, callback: function () {
$this.paste('right');
},
};
}
res.items = $.extend(res.items, {
- sep_extends: '---------',
- cover: {
- name: TRANSLATIONS.cover,
- items: cover_items,
+ sep_extends: '---------', cover: {
+ name: TRANSLATIONS.cover, items: cover_items,
}
});
}
if (hasSelection) {
res.items = $.extend(res.items, {
- 'sep_order': '---------',
- "order": {
- name: (TRANSLATIONS.edit_link_order) + '',
- items: {
+ 'sep_order': '---------', "order": {
+ name: (TRANSLATIONS.edit_link_order) + '', items: {
'move_order_start': {
- name: TRANSLATIONS.move_beginning,
- callback: function () {
+ name: TRANSLATIONS.move_beginning, callback: function () {
$this.moveSelectionOrder('start');
}
- },
- 'move_order_up': {
- name: TRANSLATIONS.move_up,
- callback: function () {
+ }, 'move_order_up': {
+ name: TRANSLATIONS.move_up, callback: function () {
$this.moveSelectionOrder('up');
}
- },
- 'move_order_down': {
- name: TRANSLATIONS.move_down,
- callback: function () {
+ }, 'move_order_down': {
+ name: TRANSLATIONS.move_down, callback: function () {
$this.moveSelectionOrder('down');
}
- },
- 'move_order_end': {
- name: TRANSLATIONS.move_end,
- callback: function () {
+ }, 'move_order_end': {
+ name: TRANSLATIONS.move_end, callback: function () {
$this.moveSelectionOrder('end');
}
}
}, 250);
},
+ moveSelectionOrder: function (way) {
+ return this.linkeditor.accessibility.moveSelectionOrder(way);
+ },
+
key: function (shortcut, scope) {
var $this = this;
key(shortcut, function (event, handler) {
return res;
},
+ getLinksOfCurrentPage: function () {
+ return $('#linkeditor-links .link:not(.pendingCreate)');
+ },
+
loadLinks: function (page, side) {
this.pageMaxOrderIndex = 0;
let $this = this;
updatePanels: function () {
this.updateDepths();
- if (this.linkeditor.panels.isPanelActive('layers')) {
- this.linkeditor.layers.update();
- }
- if (this.linkeditor.panels.isPanelActive('accessibility')) {
- this.linkeditor.accessibility.update();
- }
+ this.linkeditor.panels.refresh()
},
deleteSelection: function () {
updateSelection: function () {
$("#linkeditor").attr('data-selection-count', this.getCurrentSelection().length);
- this.linkeditor.layers.updateSelection();
+ this.linkeditor.panels.updateSelection();
},
updateDepths: function () {
var $this = this;
this.sides = this.linkeditor.settings.get('panels_layout', {
- left: ['layers', 'accessibility', 'versions'],
- right: ['form']
+ left: ['layers', 'accessibility', 'versions'], right: ['form']
});
$.each(this.sides, function (side, panels) {
var panelsContainer = $("#linkeditor-" + side + '-panel');
this.linkeditor.layers.init();
this.linkeditor.accessibility.init();
+ $(document).on('change', '.linkeditor-panel :checkbox', function () {
+ var link = $('#linkeditor-links [fb-uid="' + $(this).attr('name') + '"]');
+
+ if ($(this).prop('checked')) {
+ $this.linkeditor.links.selectLink(link);
+ } else {$this.linkeditor.links.deselectLink(link);
+
+ }
+ return true;
+ });
+
+ $(document).on('click', '.linkeditor-panel a.lock', function () {
+ let uid = $(this).closest('.layer').find('input').attr('name');
+ $this.linkeditor.links.locks.toggleLock(uid);
+ return false;
+ });
+
+ $(document).on('click', ".linkeditor-panel label", function (e) {
+ if ($this.maskCheckEvents) {
+ return false;
+ }
+
+ let uid = $(this).attr('data-uid');
+ var link = $('#linkeditor-links [fb-uid="' + uid + '"]');
+ let checked = $(link).hasClass('selected');
+
+ if (!e.ctrlKey) {
+ $this.linkeditor.links.deselectAllLinks();
+ $this.linkeditor.links.selectLink(link);
+ } else {
+ if (checked) {
+ $this.linkeditor.links.deselectLink(link);
+ } else {
+ $this.linkeditor.links.selectLink(link);
+ }
+ }
+
+ $this.linkeditor.form.updateLinkForm();
+ return false;
+ });
this.linkeditor.resize.resize();
$(document).on('mousedown', ".linkeditor-sidebar .handle", function (e) {
toggleVersions: function () {
this.togglePanel('versions');
- },
- toggleLayers: function () {
+ }, toggleLayers: function () {
this.togglePanel('layers');
- },
- toggleForm: function () {
+ }, toggleForm: function () {
this.togglePanel('form');
- },
- toggleAccessibility: function () {
+ }, toggleAccessibility: function () {
this.togglePanel('accessibility');
- },
- togglePanel: function (panel) {
+ }, togglePanel: function (panel) {
this.setPanelState(panel, 'toggle');
- },
- setPanelState: function (panel, newState) {
+ }, setPanelState: function (panel, newState) {
var $this = this;
var panelDiv = $('#linkeditor-panel-' + panel);
let container = panelDiv.closest('.linkeditor-panel-side');
}
$this.setPanelState($(this).data('panel'), false);
});
- try {
- if (panel === 'layers') {
- this.linkeditor.layers.update();
- } else if (panel === 'accessibility') {
- this.linkeditor.accessibility.update();
- }
- } catch (e) {
-
- }
}
+ this.refresh();
+
// Check if a panel is open on this side, if not, hide the panel
let sideOpen = $(container).children('.open').length > 0;
if (sideOpen) {
return $('#linkeditor-panel-' + panel).hasClass('open');
},
+ updateSelection: function () {
+ if (this.isPanelActive('layers')) {
+ this.linkeditor.layers.updateSelection();
+ }
+ if (this.isPanelActive('accessibility')) {
+ this.linkeditor.accessibility.updateSelection();
+ }
+ },
+
+ updatePanelSelection: function (panel) {
+ if (panel.container === undefined || panel.container.is(':hidden')) {
+ return;
+ }
+ panel.maskCheckEvents = true;
+ setTimeout(function () {
+ panel.maskCheckEvents = false;
+ }, 100);
+
+ $('#linkeditor-links .link').each(function () {
+ let checkbox = panel.container.find('input[name=' + $(this).attr('fb-uid') + ']');
+ checkbox.prop('checked', $(this).is('.selected'));
+ });
+
+ },
+
+ refresh: function () {
+ try {
+ if (this.isPanelActive('layers')) {
+ this.linkeditor.layers.update();
+ }
+ } catch (e) {
+
+ }
+ try {
+ if (this.isPanelActive('accessibility')) {
+ this.linkeditor.accessibility.update();
+ }
+ } catch (e) {
+
+ }
+ }
+
};
export default LinkeditorPanels;
.layer
position: relative
+ input
+ color: #fff
+ position: absolute
+ top: 4px
+ left: 4px
+ width: 16px
+ height: 16px
+ z-index: 2
+
+ &::before
+ height: 16px
+ width: 16px
+ border: 0
+
+ &::after
+ width: 14px
+ height: 14px
+ top: 1px
+ left: 1px
+
label
display: block
border-bottom: 1px solid currentColor
- padding: 5px 10px
+ padding: 5px 10px 5px 24px
cursor: pointer
-
span
display: inline-block
position: absolute
- right: 28px
+ right: 24px
+ height: 16px
background-color: rgba(255, 255, 255, 0.5)
color: #000
+ top: 4px
border-radius: 2px
padding: 2px
font-family: "Courier New", Courier, monospace
- input
- color: #fff
- position: relative
- top: 2px
-
- &::before
- border: 0
-
&[data-locked="1"]
label
pointer-events: none
a.lock
display: block
position: absolute
- top: 5px
- right: 6px
+ top: 4px
+ right: 4px
border-radius: 2px
width: 16px
height: 16px
color: rgba(255, 255, 255, 0.8)
background-color: rgba(255, 255, 255, 0.25)
-
svg
display: none
data-action="panels.toggleLayers"
data-tooltip="{{__('Liste des liens')}} (F7)"
data-key="f7"></a>
+ <a href="#" id="linkeditor-icon-accessibility" data-panel="accessibility" data-icon="accessibility"
+ data-action="panels.toggleAccessibility"
+ data-tooltip="{{__('Accessibilité')}} (Alt+A)" data-key="Alt+A"></a>
<a href="#" id="linkeditor-icon-versions" data-panel="versions" data-action="panels.toggleVersions"
data-icon="wayback-machine"
data-tooltip="{{__('Restaurer une version précédente')}} (F6)" data-key="f6"></a>
<a href="#" id="linkeditor-icon-form" data-panel="form" data-icon="settings"
data-action="panels.toggleForm"
data-tooltip="{{__('Paramètres du lien')}} (F8)" data-key="f8"></a>
- <a href="#" id="linkeditor-icon-accessibility" data-panel="accessibility" data-icon="accessibility"
- data-action="panels.toggleAccessibility"
- data-tooltip="{{__('Accessibilité')}} (Alt+A)" data-key="Alt+A"></a>
<div id="linkeditor-panel-versions">
<div id="linkeditor-panel-versions-list">
background-color: {{\Cubist\Util\Graphics\Color::colorToCSS($type['color'],0.25)}};
}
- .linkeditor-linktype[data-type="{{$type['type']}}"]::before, label[fb-type="{{$type['type']}}"] input[type="checkbox"]::before {
+ .linkeditor-linktype[data-type="{{$type['type']}}"]::before, .layer[fb-type="{{$type['type']}}"] input[type="checkbox"]::before {
background-color: {{$type['color']}};
}
@endif
projects / fluidbook-toolbox.git / commitdiff