From d39940237c1d4e68dc88eea19876f5c7bd4330da Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 14 Sep 2022 20:15:26 +0200 Subject: [PATCH] wip #5450 @3 --- .../fluidbook/toolbox/css/linkeditor.css | 71 +- .../fluidbook/toolbox/css/linkeditor.css.map | 2 +- .../fluidbook/toolbox/css/linkeditor.less | 84 +- .../fluidbook/toolbox/js/linkeditor.js | 954 ++++++++++-------- .../link_editor.blade.php | 34 +- 5 files changed, 660 insertions(+), 485 deletions(-) diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css b/public/packages/fluidbook/toolbox/css/linkeditor.css index 9b2c19ffb..042a87232 100644 --- a/public/packages/fluidbook/toolbox/css/linkeditor.css +++ b/public/packages/fluidbook/toolbox/css/linkeditor.css @@ -28,58 +28,99 @@ html { text-align: left; } #linkeditor aside { - width: 51px; + width: 40px; background-color: #EBECEE; } #linkeditor #linkeditor-main { - width: calc(100% - 102px); + width: calc(100% - 40px - 40px); } #linkeditor #linkeditor-main #linkeditor-toolbar { background-color: #dbdddf; color: #5d5d5d; - height: 51px; - padding: 10px; + height: 40px; + padding: 5px; } #linkeditor #linkeditor-main #linkeditor-toolbar nav { + padding: 2px; display: inline-block; - height: 30px; + height: 26px; vertical-align: top; width: 33%; } +#linkeditor #linkeditor-main #linkeditor-toolbar nav#linkeditor-toolbar-center { + text-align: center; +} #linkeditor #linkeditor-main #linkeditor-toolbar div { display: inline-block; + font-size: 16px; } #linkeditor #linkeditor-main #linkeditor-toolbar .separator { width: 0; - height: 30px; - margin: 0 5px; + height: 26px; + margin: 0 2px; border-left: 1px solid #5d5d5d; } +#linkeditor #linkeditor-main #linkeditor-toolbar #linkeditor-page-field { + padding: 2px 10px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + cursor: text; + font-size: 13px; + position: relative; + top: -9px; + user-select: none; + margin: 0 8px; + font-weight: 600; +} +#linkeditor #linkeditor-main #linkeditor-toolbar #linkeditor-page-field input { + vertical-align: top; + text-align: right; + border: 0; + background-color: transparent; + width: 20px; + color: #5d5d5d; + font-size: 13px; + appearance: textfield; + font-weight: 600; + position: relative; +} +#linkeditor #linkeditor-main #linkeditor-toolbar #linkeditor-page-field input:hover, +#linkeditor #linkeditor-main #linkeditor-toolbar #linkeditor-page-field input:focus { + outline: 0; + border: 0; +} #linkeditor #linkeditor-main #linkeditor-toolbar [data-icon] { display: inline-block; vertical-align: top; - height: 30px; - padding: 5px; + height: 26px; + min-width: 26px; + padding: 3px; border-radius: 5px; - margin: 0 5px; + margin: 0 3px; + text-align: center; color: #5d5d5d; } -#linkeditor #linkeditor-main #linkeditor-toolbar [data-icon]:hover { - background-color: rgba(0, 0, 0, 0.25); +#linkeditor #linkeditor-main #linkeditor-toolbar [data-icon]:hover, +#linkeditor #linkeditor-main #linkeditor-toolbar [data-icon].hover { + background-color: #467fcf; + color: #fff; } #linkeditor #linkeditor-main #linkeditor-toolbar [data-icon].arrow { padding: 1px; } #linkeditor #linkeditor-main #linkeditor-toolbar [data-icon].arrow svg { - height: 18px; + height: 16px; } #linkeditor #linkeditor-main #linkeditor-toolbar [data-icon] svg { - height: 20px; + position: relative; + top: 1px; + height: 18px; width: auto; } #linkeditor #linkeditor-main #linkeditor-editor { position: relative; - height: calc( 100% - 51px); + height: calc( 100% - 40px); width: 100%; } #linkeditor #linkeditor-main #linkeditor-editor .ruler { diff --git a/public/packages/fluidbook/toolbox/css/linkeditor.css.map b/public/packages/fluidbook/toolbox/css/linkeditor.css.map index 9548e9bde..21dfc5244 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":"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","file":"linkeditor.css"} \ No newline at end of file +{"version":3,"sources":["linkeditor.less"],"names":[],"mappings":"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","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 4b06efe88..997390a39 100644 --- a/public/packages/fluidbook/toolbox/css/linkeditor.less +++ b/public/packages/fluidbook/toolbox/css/linkeditor.less @@ -4,6 +4,8 @@ box-sizing: border-box; } +@font-size: 16px; + img, .division, .info { user-select: none; @@ -17,6 +19,7 @@ body, #linkeditor, html { } #linkeditor { + @sidebar-width: 40px; @rulers-size: 16px; white-space: nowrap; font-size: 0; @@ -29,61 +32,112 @@ body, #linkeditor, html { } aside { - width: 51px; + width: @sidebar-width; background-color: #EBECEE; } #linkeditor-main { - width: ~"calc(100% - 102px)"; + @toolbar-height: 40px; + + width: ~"calc(100% - @{sidebar-width} - @{sidebar-width})"; #linkeditor-toolbar { + @toolbar-color: #5d5d5d; background-color: #dbdddf; color: @toolbar-color; - height: 51px; - padding: 10px; + height: @toolbar-height; + padding: 5px; nav { + padding: 2px; display: inline-block; - height: 30px; + height: 26px; vertical-align: top; width: 33%; + + &#linkeditor-toolbar-center { + text-align: center; + } + + &#linkeditor-toolbar-right { + + } } div { display: inline-block; + font-size: @font-size; } .separator { width: 0; - height: 30px; - margin:0 5px; + height: 26px; + margin: 0 2px; border-left: 1px solid @toolbar-color; } + #linkeditor-page-field { + padding: 2px 10px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + cursor: text; + font-size: 13px; + position: relative; + top: -9px; + user-select: none; + margin: 0 8px; + font-weight: 600; + + input { + vertical-align: top; + text-align: right; + border: 0; + background-color: transparent; + width: 20px; + color: @toolbar-color; + font-size: 13px; + appearance: textfield; + font-weight: 600; + position: relative; + + + &:hover, &:focus { + outline: 0; + border: 0; + } + } + } + [data-icon] { display: inline-block; vertical-align: top; - height: 30px; - padding: 5px; + height: 26px; + min-width: 26px; + padding: 3px; border-radius: 5px; - margin: 0 5px; + margin: 0 3px; + text-align: center; color: @toolbar-color; - &:hover { - background-color: rgba(0, 0, 0, 0.25); + &:hover, &.hover { + background-color: #467fcf; + color: #fff; } &.arrow { padding: 1px; svg { - height: 18px; + height: 16px; } } svg { - height: 20px; + position: relative; + top: 1px; + height: 18px; width: auto; } } @@ -91,7 +145,7 @@ body, #linkeditor, html { #linkeditor-editor { position: relative; - height: ~"calc( 100% - 51px)"; + height: ~"calc( 100% - @{toolbar-height})"; width: 100%; @ruler-margin: 2px; diff --git a/public/packages/fluidbook/toolbox/js/linkeditor.js b/public/packages/fluidbook/toolbox/js/linkeditor.js index 83fb5ece7..6275d063f 100644 --- a/public/packages/fluidbook/toolbox/js/linkeditor.js +++ b/public/packages/fluidbook/toolbox/js/linkeditor.js @@ -1,471 +1,562 @@ -$(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 fs = 1; - var mx = 0, my = 0; - var zoom = 1; - var zoomdragging = false; - var dividers = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]; - var fluidbookRect, canvasRect, editorRect; - var currentPage; - - var movingRuler = null; - - 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; - } - moveRuler(); - }); - $(window).on('keyup', function (e) { - if (e.keyCode == 32) { - resetZoomDrag(); - } - moveRuler(); - }); +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 fs = 1; +var mx = 0, my = 0; +var zoom = 1; +var zoomdragging = false; +var dividers = [1, 2, 5, 10, 20, 50, 100]; +var fluidbookRect, canvasRect, editorRect; +var currentPage; +var movingRuler = null; - $("#linkeditor-canvas").on('scroll', function () { - updateRulers(); - }); - $("#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(); - } - }); - - $("#linkeditor-ruler-x").on('mousedown', function (e) { - addRuler('y'); - }); - - $("#linkeditor-ruler-y").on('mousedown', function (e) { - addRuler('x'); - }); - - $(document).on('mousedown', ".ruler", function (e) { - movingRuler = $(this); +$(function () { + init(); +}); - }); +function init() { + $(window).on('hashchange', function () { + changePage(); + }); + $(window).on('resize', function () { + resize(); + }); - $(window).on('mousemove', function (e) { - if (!$("#linkeditor-canvas").hasClass('grab') || zoom === 1) { - resetZoomDrag(); - } - if (zoomdragging !== false) { - moveZoomDrag(e); - } - updateMousePosition(e); - }); - $(window).on('mouseup', function (e) { - if (zoomdragging !== false) { - moveZoomDrag(e); - } - stopMoveRuler(); - resetZoomDrag(); - }); - $("#linkeditor-canvas").on('wheel', function (e) { - var delta = e.originalEvent.deltaY; - if (delta == 0) { - return true; - } - e.stopPropagation(); - e.stopImmediatePropagation(); - e.preventDefault(); - if (delta < 0) { - if (setZoom(zoom + 0.25)) { - moveZoom(e); - } - } else { - setZoom(zoom - 0.25); - } + // Disable scroll by spacebar + $(window).on('keydown', function (e) { + if (e.keyCode == 32) { + $("#linkeditor-canvas").addClass('grab'); return false; - }); + } + moveRuler(); + }); + $(window).on('keyup', function (e) { + if (e.keyCode == 32) { + resetZoomDrag(); + } + moveRuler(); + }); - if (single) { - $("#linkeditor").addClass('single'); + $("#linkeditor-canvas").on('scroll', function () { + updateRulers(); + }); + $("#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 { - $("#linkeditor").addClass('double'); + resetZoomDrag(); } - $('.linkeditor-page').css({ - width: pw, height: ph - }); - $("#linkeditor-page-right").css({left: pw}) - $('#linkeditor-fluidbook').css({ - width: fw, height: ph - }); - initToolbar(); - resize(); - changePage(); - } + }); - function initToolbar() { - $("#linkeditor-toolbar [data-icon]").each(function () { - $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))); - }); - } + $("#linkeditor-ruler-x").on('mousedown', function (e) { + addRuler('y'); + }); - function generateUID() { - var length = 12; - var result = ''; - var characters = 'abcdefghijklmnopqrstuvwxyz0123456789'; - var charactersLength = characters.length; - for (var i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * charactersLength)); - } - return result; - } + $("#linkeditor-ruler-y").on('mousedown', function (e) { + addRuler('x'); + }); - function addRuler(axis, pos, uid) { - if (undefined === uid) { - uid = generateUID(); - RULERS[uid] = {page: currentPage, type: axis, uid: uid}; - } - var ruler = $('
'); - if (pos === undefined) { - movingRuler = ruler; - } else { - var dim = axis == 'x' ? 'left' : 'top'; - $(ruler).attr('fb-' + dim, pos); - } - $("#linkeditor-editor").append(ruler); - moveRuler(); - } + $(document).on('mousedown', ".ruler", function (e) { + movingRuler = $(this); - function deleteRuler(ruler) { - if (ruler === undefined) { - ruler = movingRuler; - } - var uid = $(ruler).data('uid'); - delete RULERS[uid]; - $(ruler).remove(); - movingRuler = null; - } + }); - function moveRuler() { - if (movingRuler === null || movingRuler === undefined) { - return; + $(window).on('mousemove', function (e) { + if (!$("#linkeditor-canvas").hasClass('grab') || zoom === 1) { + resetZoomDrag(); } - var magnet = !key.ctrl; - var editorMouse = globalToEditor(mx, my); - var fbMouse = globalToFluidbook(mx, my, false); - var css = {}; - var attrs = {}; - var v, fbv; - if ($(movingRuler).data('axis') === 'x') { - v = editorMouse.x; - fbv = attrs['fb-left'] = magnet ? magnetize(fbMouse.x, getRulersMagnetValues('x')) : fbMouse.x; - } else { - v = editorMouse.y; - fbv = attrs['fb-top'] = magnet ? magnetize(fbMouse.y, getRulersMagnetValues('y')) : fbMouse.y; + if (zoomdragging !== false) { + moveZoomDrag(e); } - if (v < 16) { - $(movingRuler).addClass('pending-delete'); - } else { - $(movingRuler).removeClass('pending-delete'); + updateMousePosition(e); + }); + $(window).on('mouseup', function (e) { + if (zoomdragging !== false) { + moveZoomDrag(e); } - $(movingRuler).css(css).attr(attrs); - RULERS[$(movingRuler).data('uid')].pos = fbv; - updateFBElements(); - } - - function magnetize(value, values) { - var sensibility = 8 / (zoom * fs); - var min = 100000; - var magnetValue; - if (values.length === 0) { - return value; + stopMoveRuler(); + resetZoomDrag(); + }); + $("#linkeditor-canvas").on('wheel', function (e) { + var delta = e.originalEvent.deltaY; + if (delta == 0) { + return true; } - - for (var i in values) { - var v = values[i]; - var diff = Math.abs(v - value); - if (diff < min) { - min = diff; - magnetValue = v; + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + if (delta < 0) { + if (setZoom(zoom + 0.25)) { + moveZoom(e); } - } - - if (min > sensibility) { - return value; - } - return magnetValue; - } - - function getRulersMagnetValues(axis) { - var res = [0]; - if (axis === 'x') { - res.push(pw); - res.push(pw * 2); } else { - res.push(ph); + setZoom(zoom - 0.25); } - return res; - } + return false; + }); - function updateFBElements() { - var dims = ['left', 'top', 'width', 'height']; - $('[fb-ref]').each(function () { - var e = $(this); - var rect = $(this).attr('fb-ref'); - $.each(dims, function (k, dim) { - if ($(e).is('[fb-' + dim + ']')) { - var v = fluidbookTo(parseFloat($(e).attr('fb-' + dim)), dim, rect); - $(e).css(dim, v); - } - }); + if (single) { + $("#linkeditor").addClass('single'); + } else { + $("#linkeditor").addClass('double'); + } + $('.linkeditor-page').css({ + width: pw, height: ph + }); + $("#linkeditor-page-right").css({left: pw}) + $('#linkeditor-fluidbook').css({ + width: fw, height: ph + }); + initToolbar(); + resize(); + changePage(); +} + +function initToolbar() { + $("#linkeditor-page-field input").on('change', function () { + changePage($(this).val()); + $(this).blur(); + return false; + }); + + $("#linkeditor-toolbar [data-icon]").each(function () { + $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))); + }); + + $("[data-key]").each(function () { + var e = $(this); + key($(this).data('key'), function () { + $(e).addClass('hover'); + runAction($(e).data('action')); + setTimeout(function () { + $(e).removeClass('hover') + }, 150); + return false; }); + }); + + $('[data-action]').click(function () { + runAction($(this).data('action')); + return false; + }); + + $('[data-tooltip]').each(function () { + tippy($(this).get(0), {content: $(this).data('tooltip')}); + }); +} + +function runAction(act) { + console.log(act, window[act]); + window[act](); +} + +function saveLinks() { + +} + +function firstPage() { + changePage(1); +} + +function nextPage() { + changePage(currentPage + (single ? 1 : 2)); +} + +function previousPage() { + changePage(currentPage - (single ? 1 : 2)); +} + +function lastPage() { + changePage(FLUIDBOOK_DATA.settings.pages); +} + +function focusPageField() { + var i = $("#linkeditor-page-field input").get(0); + i.focus(); + i.select(); +} + +function zoomReset() { + setZoom(1); + resetZoomDrag(); +} + +function generateUID() { + var length = 12; + var result = ''; + var characters = 'abcdefghijklmnopqrstuvwxyz0123456789'; + var charactersLength = characters.length; + for (var i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); } + return result; +} - function fluidbookTo(dim, name, rect) { - switch (rect) { - case 'editor': - rect = editorRect; - break; - case 'canvas': - rect = canvasRect; - break; - } - return fluidbookToGlobal(dim, name) - rect[name]; +function addRuler(axis, pos, uid) { + if (undefined === uid) { + uid = generateUID(); + RULERS[uid] = {page: currentPage, type: axis, uid: uid}; } - - function stopMoveRuler() { - moveRuler(); - if ($(movingRuler).hasClass('pending-delete')) { - deleteRuler($(movingRuler)); - } - movingRuler = null; + var ruler = $('
'); + if (pos === undefined) { + movingRuler = ruler; + } else { + var dim = axis == 'x' ? 'left' : 'top'; + $(ruler).attr('fb-' + dim, pos); } + $("#linkeditor-editor").append(ruler); + moveRuler(); +} - function updateMousePosition(e) { - mx = e.pageX; - my = e.pageY; - updateMousePositionRulers(); - moveRuler(); +function deleteRuler(ruler) { + if (ruler === undefined) { + ruler = movingRuler; } - - function updateMousePositionRulers() { - var rulersRect = $("#linkeditor-rulers").get(0).getBoundingClientRect(); - var rx = mx - rulersRect.x; - var ry = my - rulersRect.y; - $("#linkeditor-ruler-x .info").css('left', rx); - $("#linkeditor-ruler-y .info").css('top', ry); - - var rrect = $("#linkeditor-rulers").get(0).getBoundingClientRect(); - - if (mx - rrect.x < 0 || my - rrect.y < 0 || mx - rrect.x > rrect.width || my - rrect.y > rrect.height) { - $("#linkeditor-rulers .info").hide(); - return; - } - - var fb = globalToFluidbook(mx, my, true); - $("#linkeditor-ruler-y .info span").text(fb.y.toFixed(2)); - $("#linkeditor-ruler-x .info span").text(fb.x.toFixed(2)); - $("#linkeditor-rulers .info").css('display', 'inline-block'); + var uid = $(ruler).data('uid'); + delete RULERS[uid]; + $(ruler).remove(); + movingRuler = null; +} + +function moveRuler() { + if (movingRuler === null || movingRuler === undefined) { + return; + } + var magnet = !key.ctrl; + var editorMouse = globalToEditor(mx, my); + var fbMouse = globalToFluidbook(mx, my, false); + var css = {}; + var attrs = {}; + var v, fbv; + if ($(movingRuler).data('axis') === 'x') { + v = editorMouse.x; + fbv = attrs['fb-left'] = magnet ? magnetize(fbMouse.x, getRulersMagnetValues('x')) : fbMouse.x; + } else { + v = editorMouse.y; + fbv = attrs['fb-top'] = magnet ? magnetize(fbMouse.y, getRulersMagnetValues('y')) : fbMouse.y; + } + if (v < 16) { + $(movingRuler).addClass('pending-delete'); + } else { + $(movingRuler).removeClass('pending-delete'); + } + $(movingRuler).css(css).attr(attrs); + RULERS[$(movingRuler).data('uid')].pos = fbv; + updateFBElements(); +} + +function magnetize(value, values) { + var sensibility = 8 / (zoom * fs); + var min = 100000; + var magnetValue; + if (values.length === 0) { + return value; } - function resetZoomDrag() { - $("#linkeditor-canvas").removeClass('grab').removeClass('grabbing'); - if (zoom === 1) { - $("#linkeditor-canvas").scrollTo({left: 0, top: 0}); + for (var i in values) { + var v = values[i]; + var diff = Math.abs(v - value); + if (diff < min) { + min = diff; + magnetValue = v; } - 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 + if (min > sensibility) { + return value; + } + return magnetValue; +} + +function getRulersMagnetValues(axis) { + var res = [0]; + if (axis === 'x') { + res.push(pw); + res.push(pw * 2); + } else { + res.push(ph); + } + return res; +} + +function updateFBElements() { + var dims = ['left', 'top', 'width', 'height']; + $('[fb-ref]').each(function () { + var e = $(this); + var rect = $(this).attr('fb-ref'); + $.each(dims, function (k, dim) { + if ($(e).is('[fb-' + dim + ']')) { + var v = fluidbookTo(parseFloat($(e).attr('fb-' + dim)), dim, rect); + $(e).css(dim, v); + } }); - updateRulers(); + }); +} + +function fluidbookTo(dim, name, rect) { + switch (rect) { + case 'editor': + rect = editorRect; + break; + case 'canvas': + rect = canvasRect; + break; } + return fluidbookToGlobal(dim, name) - rect[name]; +} - 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)}); - updateRulers(); +function stopMoveRuler() { + moveRuler(); + if ($(movingRuler).hasClass('pending-delete')) { + deleteRuler($(movingRuler)); + } + movingRuler = null; +} + +function updateMousePosition(e) { + mx = e.pageX; + my = e.pageY; + updateMousePositionRulers(); + moveRuler(); +} + +function updateMousePositionRulers() { + var rulersRect = $("#linkeditor-rulers").get(0).getBoundingClientRect(); + var rx = mx - rulersRect.x; + var ry = my - rulersRect.y; + $("#linkeditor-ruler-x .info").css('left', rx); + $("#linkeditor-ruler-y .info").css('top', ry); + + var rrect = $("#linkeditor-rulers").get(0).getBoundingClientRect(); + + if (mx - rrect.x < 0 || my - rrect.y < 0 || mx - rrect.x > rrect.width || my - rrect.y > rrect.height) { + $("#linkeditor-rulers .info").hide(); + return; } - function pct(v) { - return (v * 100) + '%'; + var fb = globalToFluidbook(mx, my, true); + $("#linkeditor-ruler-y .info span").text(fb.y.toFixed(2)); + $("#linkeditor-ruler-x .info span").text(fb.x.toFixed(2)); + $("#linkeditor-rulers .info").css('display', 'inline-block'); +} + +function resetZoomDrag() { + $("#linkeditor-canvas").removeClass('grab').removeClass('grabbing'); + if (zoom === 1) { + $("#linkeditor-canvas").scrollTo({left: 0, top: 0}); + } + 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 + }); + updateRulers(); +} + +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)}); + updateRulers(); +} + +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 + ')', overflow: 'visible'}); - function setZoom(z) { - z = Math.max(1, Math.min(6, z)); - if (z === zoom) { - return false; + setTimeout(function () { + $("#linkeditor-zoom").css({overflow: 'hidden'}); + if (zoom === 1) { + resetZoomDrag(); } - zoom = z; - $("#linkeditor-canvas").attr('data-z', zoom); - $("#linkeditor-zoom").css({transform: 'scale(' + zoom + ')', overflow: 'visible'}); - - setTimeout(function () { - $("#linkeditor-zoom").css({overflow: 'hidden'}); - if (zoom === 1) { - resetZoomDrag(); - } - updateRulers(); + updateRulers(); - }, 10); + }, 10); - return true; - } + 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); - } - } - page = parseInt(page); - if (page % 2 === 1 && !single) { - page--; - } - currentPage = page; - loadPage(page, 'left'); - if (!single) { - loadPage(page + 1, 'right'); +function changePage(page) { + if (page === undefined) { + var h = window.location.hash; + if (h.length === 0) { + page = 0; + } else { + page = window.location.hash.substring(1); } - resize(); } - - // Convert global coordinates to fluidbook ones - function globalToFluidbook(x, y, onePage) { - var res = _globalTo(x, y, fluidbookRect, 1 / (fs * zoom)); - if (onePage) { - res.xside = 'left'; - if (!single && res.x >= pw) { - res.xside = 'right'; - res.x -= pw; - } + page = parseInt(page); + if (page % 2 === 1 && !single) { + page--; + } + var normPage = Math.max(0, Math.min(page, FLUIDBOOK_DATA.settings.pages)); + if (normPage === currentPage) { + return; + } + currentPage = normPage; + clearLinksAndRulers(); + loadPage(currentPage, 'left'); + if (!single) { + loadPage(currentPage + 1, 'right'); + } + $("#linkeditor-page-field input").val(currentPage); + resize(); +} + +// Convert global coordinates to fluidbook ones +function globalToFluidbook(x, y, onePage) { + var res = _globalTo(x, y, fluidbookRect, 1 / (fs * zoom)); + if (onePage) { + res.xside = 'left'; + if (!single && res.x >= pw) { + res.xside = 'right'; + res.x -= pw; } - return res; } + return res; +} - function fluidbookToGlobal(dim, name) { - return fluidbookRect[name] + (dim * fs * zoom); - } +function fluidbookToGlobal(dim, name) { + return fluidbookRect[name] + (dim * fs * zoom); +} - function globalToCanvas(x, y) { - return _globalTo(x, y, canvasRect, 1); - } +function globalToCanvas(x, y) { + return _globalTo(x, y, canvasRect, 1); +} - function globalToEditor(x, y) { - return _globalTo(x, y, editorRect, 1); - } +function globalToEditor(x, y) { + return _globalTo(x, y, editorRect, 1); +} - function _globalTo(x, y, rect, multi) { - return {x: multi * (x - rect.x), y: multi * (y - rect.y)}; - } +function _globalTo(x, y, rect, multi) { + return {x: multi * (x - rect.x), y: multi * (y - rect.y)}; +} - function loadPage(p, side) { - var container = $("#linkeditor-page-" + side); - $(container).attr('data-page', p) +function loadPage(p, side) { + var container = $("#linkeditor-page-" + side); + $(container).attr('data-page', p) - if (p === 0 || p > FLUIDBOOK_DATA.settings.pages) { - $(container).html(''); - } else { - $(container).html('') - } - loadLinks(p, side); - loadRulers(p, side); + if (p === 0 || p > FLUIDBOOK_DATA.settings.pages) { + $(container).html(''); + } else { + $(container).html('') } + loadLinks(p, side); + loadRulers(p, side); +} - function loadLinks(page, side) { +function loadLinks(page, side) { +} - } +function clearLinksAndRulers() { + $('#linkeditor-editor .ruler').remove(); +} - function loadRulers(page, side) { - $.each(RULERS, function (uid, ruler) { - if (ruler.page != page) { - return; - } - addRuler(ruler.type, ruler.pos, ruler.uid); - }); +function loadRulers(page, side) { + $.each(RULERS, function (uid, ruler) { + if (ruler.page != page) { + return; + } + addRuler(ruler.type, ruler.pos, ruler.uid); + }); +} + + +function resize() { + resizeCanvas(); + updateRulers(); +} + +function updateRulers() { + // Update rects + fluidbookRect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect(); + + $("#linkeditor-ruler-y,#linkeditor-ruler-x").html(''); + // Measure of visible fluidbook px at current zoom + + var factor = fs / zoom; + var visible_w = canvasRect.width * factor; + var visible_h = canvasRect.height * factor; + // Find the best divider to have around 10 main divisions + var divider = 0; + for (var i in dividers) { + divider = dividers[i]; + var v = visible_h / divider; + if (v <= 10) { + break; + } } - function resize() { - resizeCanvas(); - updateRulers(); + var divisionSize = divider * fs * zoom; + // Draw vertical ruler + var margin = 100; + var nbDivisions = Math.floor(visible_h / divider); + var y0 = 16 + fluidbookRect.y - canvasRect.y; + + var yruler = '
1234.12
'; + for (var y = -margin; y <= nbDivisions + (margin * 2) + 1; y++) { + // Draw subdivision + var v = divider * y; + var ystart = y0 + (y * divisionSize); + if (ystart + divisionSize < 0 || ystart > canvasRect.height) { + continue; + } + yruler += '
' + Math.abs(v) + '
'; + for (var i = 1; i <= 9; i++) { + yruler += '
'; + } + yruler += '
'; } - - function updateRulers() { - // Update rects - fluidbookRect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect(); - - $("#linkeditor-ruler-y,#linkeditor-ruler-x").html(''); - // Measure of visible fluidbook px at current zoom - - var factor = fs / zoom; - var visible_w = canvasRect.width * factor; - var visible_h = canvasRect.height * factor; - // Find the best divider to have around 10 main divisions - var divider = 0; - for (var i in dividers) { - divider = dividers[i]; - var v = visible_h / divider; - if (v <= 10) { - break; - } + $("#linkeditor-ruler-y").html(yruler); + + // Draw horizontal ruler + nbDivisions = Math.floor(visible_w / divider); + var x0 = 16 + fluidbookRect.x - canvasRect.x; + var xruler = '
'; + + for (var x = -margin; x <= nbDivisions + (margin * 2) + 1; x++) { + // Draw subdivision + var v = divider * x; + var xstart = x0 + (x * divisionSize); + if (xstart + divisionSize < 0 || xstart > canvasRect.width) { + continue; } - - - var divisionSize = divider * fs * zoom; - // Draw vertical ruler - var margin = 100; - var nbDivisions = Math.floor(visible_h / divider); - var y0 = 16 + fluidbookRect.y - canvasRect.y; - - var yruler = '
1234.12
'; - for (var y = -margin; y <= nbDivisions + (margin * 2) + 1; y++) { - // Draw subdivision - var v = divider * y; - var ystart = y0 + (y * divisionSize); - if (ystart + divisionSize < 0 || ystart > canvasRect.height) { - continue; + xruler += '
' + Math.abs(v) + '
'; + for (var i = 1; i <= 9; i++) { + var cls = ''; + if (i === 5) { + cls += ' middle'; } - yruler += '
' + Math.abs(v) + '
'; - for (var i = 1; i <= 9; i++) { - yruler += '
'; - } - yruler += '
'; + xruler += '
'; } - $("#linkeditor-ruler-y").html(yruler); - - // Draw horizontal ruler - nbDivisions = Math.floor(visible_w / divider); - var x0 = 16 + fluidbookRect.x - canvasRect.x; - var xruler = '
'; - - for (var x = -margin; x <= nbDivisions + (margin * 2) + 1; x++) { + xruler += '
'; + } + // Draw right page horizontal ruler + if (!single) { + x0 = x0 + pw * fs * zoom; + for (var x = 0; x <= nbDivisions + margin + 1; x++) { // Draw subdivision var v = divider * x; var xstart = x0 + (x * divisionSize); @@ -482,42 +573,19 @@ $(function () { } xruler += ''; } - // Draw right page horizontal ruler - if (!single) { - x0 = x0 + pw * fs * zoom; - for (var x = 0; x <= nbDivisions + margin + 1; x++) { - // Draw subdivision - var v = divider * x; - var xstart = x0 + (x * divisionSize); - if (xstart + divisionSize < 0 || xstart > canvasRect.width) { - continue; - } - xruler += '
' + Math.abs(v) + '
'; - for (var i = 1; i <= 9; i++) { - var cls = ''; - if (i === 5) { - cls += ' middle'; - } - xruler += '
'; - } - xruler += '
'; - } - } - $("#linkeditor-ruler-x").html(xruler); - updateFBElements() - updateMousePositionRulers(); } - - function resizeCanvas() { - canvasRect = $("#linkeditor-canvas").get(0).getBoundingClientRect(); - editorRect = $("#linkeditor-editor").get(0).getBoundingClientRect(); - var aw = canvasRect.width - 30; - var ah = canvasRect.height - 30; - fs = Math.min(aw / fw, ah / fh); - var left = (canvasRect.width - fw * fs) / 2; - var top = (canvasRect.height - fh * fs) / 2; - $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + fs + ')'}); - } - - init(); -}); + $("#linkeditor-ruler-x").html(xruler); + updateFBElements() + updateMousePositionRulers(); +} + +function resizeCanvas() { + canvasRect = $("#linkeditor-canvas").get(0).getBoundingClientRect(); + editorRect = $("#linkeditor-editor").get(0).getBoundingClientRect(); + var aw = canvasRect.width - 30; + var ah = canvasRect.height - 30; + fs = Math.min(aw / fw, ah / fh); + var left = (canvasRect.width - fw * fs) / 2; + var top = (canvasRect.height - fh * fs) / 2; + $("#linkeditor-fluidbook").css({left: left, top: top, transform: 'scale(' + fs + ')'}); +} diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index ea618d2b4..0ad3c5e9d 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -13,27 +13,30 @@
+ -
- -