From de2a755a239c079e27fa2aca7e66a93c06da850a Mon Sep 17 00:00:00 2001 From: Kombie Date: Sun, 24 Nov 2019 12:24:02 +0000 Subject: [PATCH] [feature] add link display rotate and translate controls --- src/css/link.css | 249 +++++++++++++++++++++++++----------------- src/css/variables.css | 5 +- src/index.html | 64 +++++++---- src/js/control.js | 173 ++++++++++++++++++++--------- src/js/link.js | 43 ++++++-- src/js/state.js | 29 +++-- src/js/update.js | 28 +++++ 7 files changed, 397 insertions(+), 194 deletions(-) diff --git a/src/css/link.css b/src/css/link.css index 1a7061f1..f7126073 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -121,12 +121,21 @@ width: 100%; height: 100%; display: flex; + flex-direction: column; z-index: 3; overflow: hidden; user-select: none; transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast); } +.is-link-style-block .link-panel-front { + padding: 1em; +} + +.is-link-style-list .link-panel-front { + padding: 0.5em 1em; +} + .is-theme-radius .link-panel-front { border-radius: var(--theme-radius); } @@ -165,102 +174,47 @@ box-shadow: var(--layout-shadow-large); } -.is-link-style-block .link-panel-front { - padding: 1em; - flex-direction: column; -} - -.is-link-style-block.is-link-display-alignment-topleft .link-panel-front { +.is-link-display-alignment-topleft .link-panel-front { justify-content: flex-start; align-items: flex-start; } -.is-link-style-block.is-link-display-alignment-topcenter .link-panel-front { +.is-link-display-alignment-topcenter .link-panel-front { justify-content: flex-start; align-items: center; } -.is-link-style-block.is-link-display-alignment-topright .link-panel-front { +.is-link-display-alignment-topright .link-panel-front { justify-content: flex-start; align-items: flex-end; } -.is-link-style-block.is-link-display-alignment-centerleft .link-panel-front { +.is-link-display-alignment-centerleft .link-panel-front { justify-content: center; align-items: flex-start; } -.is-link-style-block.is-link-display-alignment-centercenter .link-panel-front { +.is-link-display-alignment-centercenter .link-panel-front { justify-content: center; align-items: center; } -.is-link-style-block.is-link-display-alignment-centerright .link-panel-front { +.is-link-display-alignment-centerright .link-panel-front { justify-content: center; align-items: flex-end; } -.is-link-style-block.is-link-display-alignment-bottomleft .link-panel-front { +.is-link-display-alignment-bottomleft .link-panel-front { justify-content: flex-end; align-items: flex-start; } -.is-link-style-block.is-link-display-alignment-bottomcenter .link-panel-front { +.is-link-display-alignment-bottomcenter .link-panel-front { justify-content: flex-end; align-items: center; } -.is-link-style-block.is-link-display-alignment-bottomright .link-panel-front { - justify-content: flex-end; - align-items: flex-end; -} - -.is-link-style-list .link-panel-front { - padding: 0.5em 1em; - flex-direction: row; -} - -.is-link-style-list.is-link-display-alignment-topleft .link-panel-front { - justify-content: flex-start; - align-items: flex-start; -} - -.is-link-style-list.is-link-display-alignment-topcenter .link-panel-front { - justify-content: center; - align-items: flex-start; -} - -.is-link-style-list.is-link-display-alignment-topright .link-panel-front { - justify-content: flex-end; - align-items: flex-start; -} - -.is-link-style-list.is-link-display-alignment-centerleft .link-panel-front { - justify-content: flex-start; - align-items: center; -} - -.is-link-style-list.is-link-display-alignment-centercenter .link-panel-front { - justify-content: center; - align-items: center; -} - -.is-link-style-list.is-link-display-alignment-centerright .link-panel-front { - justify-content: flex-end; - align-items: center; -} - -.is-link-style-list.is-link-display-alignment-bottomleft .link-panel-front { - justify-content: flex-start; - align-items: flex-end; -} - -.is-link-style-list.is-link-display-alignment-bottomcenter .link-panel-front { - justify-content: center; - align-items: flex-end; -} - -.is-link-style-list.is-link-display-alignment-bottomright .link-panel-front { +.is-link-display-alignment-bottomright .link-panel-front { justify-content: flex-end; align-items: flex-end; } @@ -313,21 +267,116 @@ /* link display */ .link-display { + display: flex; + position: relative; + top: var(--link-item-display-translate-y); + left: var(--link-item-display-translate-x); font-size: 1em; - display: none; - transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast); + transform: rotate(var(--link-item-display-rotate)); + transform-origin: center; + transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast); } -.is-link-edit.is-link-style-list .link-display { - font-size: 0.5em; -} - -.is-link-edit.is-link-style-block .link-display { +.is-link-edit .link-display { font-size: 0.6em; } -.is-link-display-item-show .link-display { - display: flex; +.is-link-style-block .link-display { + flex-direction: column; +} + +.is-link-style-list .link-display { + flex-direction: row; +} + +.is-link-style-block.is-link-display-alignment-topleft .link-display { + justify-content: flex-start; + align-items: flex-start; +} + +.is-link-style-block.is-link-display-alignment-topcenter .link-display { + justify-content: flex-start; + align-items: center; +} + +.is-link-style-block.is-link-display-alignment-topright .link-display { + justify-content: flex-start; + align-items: flex-end; +} + +.is-link-style-block.is-link-display-alignment-centerleft .link-display { + justify-content: center; + align-items: flex-start; +} + +.is-link-style-block.is-link-display-alignment-centercenter .link-display { + justify-content: center; + align-items: center; +} + +.is-link-style-block.is-link-display-alignment-centerright .link-display { + justify-content: center; + align-items: flex-end; +} + +.is-link-style-block.is-link-display-alignment-bottomleft .link-display { + justify-content: flex-end; + align-items: flex-start; +} + +.is-link-style-block.is-link-display-alignment-bottomcenter .link-display { + justify-content: flex-end; + align-items: center; +} + +.is-link-style-block.is-link-display-alignment-bottomright .link-display { + justify-content: flex-end; + align-items: flex-end; +} + +.is-link-style-list.is-link-display-alignment-topleft .link-display { + justify-content: flex-start; + align-items: flex-start; +} + +.is-link-style-list.is-link-display-alignment-topcenter .link-display { + justify-content: center; + align-items: flex-start; +} + +.is-link-style-list.is-link-display-alignment-topright .link-display { + justify-content: flex-end; + align-items: flex-start; +} + +.is-link-style-list.is-link-display-alignment-centerleft .link-display { + justify-content: flex-start; + align-items: center; +} + +.is-link-style-list.is-link-display-alignment-centercenter .link-display { + justify-content: center; + align-items: center; +} + +.is-link-style-list.is-link-display-alignment-centerright .link-display { + justify-content: flex-end; + align-items: center; +} + +.is-link-style-list.is-link-display-alignment-bottomleft .link-display { + justify-content: flex-start; + align-items: flex-end; +} + +.is-link-style-list.is-link-display-alignment-bottomcenter .link-display { + justify-content: center; + align-items: flex-end; +} + +.is-link-style-list.is-link-display-alignment-bottomright .link-display { + justify-content: flex-end; + align-items: flex-end; } .link-display-letter, @@ -336,6 +385,14 @@ text-align: center; } +.link-display-letcon { + display: none; +} + +.is-link-item-display-letcon-show .link-display-letcon { + display: block; +} + .link-display-letter { padding-top: 8%; font-family: var(--font-fjalla); @@ -360,11 +417,11 @@ font-size: var(--link-item-display-icon-size); } -.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { +.is-link-style-block.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child) { margin-bottom: 0.5em; } -.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child) { +.is-link-style-list.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child) { margin-right: 0.5em } @@ -381,56 +438,52 @@ } /* link name */ -.link-name { +.link-display-name { margin: 0; - font-size: var(--link-item-name-size); + font-size: var(--link-item-display-name-size); font-family: var(--font-regular); color: rgb(var(--theme-gray-12)); display: none; - transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast); + transition: color var(--layout-timing-extra-fast); } -.is-link-edit .link-name { - font-size: 0.6em; -} - -.link-name, -.link-name:not(:last-child) { +.link-display-name, +.link-display-name:not(:last-child) { margin-bottom: 0; } -.is-link-display-alignment-topleft .link-name, -.is-link-display-alignment-centerleft .link-name, -.is-link-display-alignment-bottomleft .link-name { +.is-link-display-alignment-topleft .link-display-name, +.is-link-display-alignment-centerleft .link-display-name, +.is-link-display-alignment-bottomleft .link-display-name { text-align: left; } -.is-link-display-alignment-topcenter .link-name, -.is-link-display-alignment-centercenter .link-name, -.is-link-display-alignment-bottomcenter .link-name { +.is-link-display-alignment-topcenter .link-display-name, +.is-link-display-alignment-centercenter .link-display-name, +.is-link-display-alignment-bottomcenter .link-display-name { text-align: center; } -.is-link-display-alignment-topright .link-name, -.is-link-display-alignment-centerright .link-name, -.is-link-display-alignment-bottomright .link-name { +.is-link-display-alignment-topright .link-display-name, +.is-link-display-alignment-centerright .link-display-name, +.is-link-display-alignment-bottomright .link-display-name { text-align: right; } -.is-link-item-name-show .link-name { +.is-link-item-display-name-show .link-display-name { display: block; } -.link-item:hover .link-name, -.link-item:focus .link-name { +.link-item:hover .link-display-name, +.link-item:focus .link-display-name { color: rgb(var(--theme-style-text)); } -.link-panel-front:focus .link-name { +.link-panel-front:focus .link-display-name { color: rgb(var(--theme-style-text)); } -.is-link-style-list .link-name { +.is-link-style-list .link-display-name { white-space: nowrap; } diff --git a/src/css/variables.css b/src/css/variables.css index 2267dae3..db1163b8 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -46,7 +46,10 @@ --link-item-size: 1em; --link-item-display-letter-size: 2em; --link-item-display-icon-size: 2.5em; - --link-item-name-size: 0.9em; + --link-item-display-rotate: 0deg; + --link-item-display-translate-x: 0em; + --link-item-display-translate-y: 0em; + --link-item-display-name-size: 0.9em; --link-item-border: 1; /* layout */ --layout-width: 80%; diff --git a/src/index.html b/src/index.html index e456dd63..9c59021e 100644 --- a/src/index.html +++ b/src/index.html @@ -899,7 +899,7 @@
- +
@@ -945,40 +945,64 @@
- -
-
- - -
-
+
- - + +
- +
- - + +
- + +
+
+
+ + +
+
+
- - + + +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+
+
+ +
- - + +
- +
@@ -1317,7 +1341,7 @@
-

Project repository on Github.

+

Project repository on Github.

diff --git a/src/js/control.js b/src/js/control.js index a1fa9ad8..7f9aba23 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -2004,61 +2004,116 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-link-item-display-show"), - path: "link.item.display.show", + element: helper.e(".control-link-item-display-letcon-show"), + path: "link.item.display.letcon.show", type: "checkbox", func: function() { render.class(); render.dependents(); } }, { - element: helper.e(".control-link-item-display-letter-size"), - path: "link.item.display.letter.size", + element: helper.e(".control-link-item-display-letcon-letter-size"), + path: "link.item.display.letcon.letter.size", type: "range", valueMod: ["float"], func: function() { link.render.item.display.letter(); } }, { - element: helper.e(".control-link-item-display-letter-size-default"), + element: helper.e(".control-link-item-display-letcon-letter-size-default"), type: "button", func: function() { - mod.setValue("link.item.display.letter.size", 3); + mod.setValue("link.item.display.letcon.letter.size", 3); link.render.item.display.letter(); render.update(); } }, { - element: helper.e(".control-link-item-display-icon-size"), - path: "link.item.display.icon.size", + element: helper.e(".control-link-item-display-letcon-icon-size"), + path: "link.item.display.letcon.icon.size", type: "range", valueMod: ["float"], func: function() { link.render.item.display.icon(); } }, { - element: helper.e(".control-link-item-display-icon-size-default"), + element: helper.e(".control-link-item-display-letcon-icon-size-default"), type: "button", func: function() { - mod.setValue("link.item.display.icon.size", 3); + mod.setValue("link.item.display.letcon.icon.size", 3); link.render.item.display.icon(); render.update(); } }, { - element: helper.e(".control-link-item-name-size"), - path: "link.item.name.size", + element: helper.e(".control-link-item-display-name-show"), + path: "link.item.display.name.show", + type: "checkbox", + func: function() { + render.class(); + render.dependents(); + } + }, { + element: helper.e(".control-link-item-display-name-size"), + path: "link.item.display.name.size", type: "range", valueMod: ["float"], func: function() { link.render.item.name(); } }, { - element: helper.e(".control-link-item-name-size-default"), + element: helper.e(".control-link-item-display-name-size-default"), type: "button", func: function() { - mod.setValue("link.item.name.size", 0.9); + mod.setValue("link.item.display.name.size", 0.9); link.render.item.name(); render.update(); } + }, { + element: helper.e(".control-link-item-display-rotate"), + path: "link.item.display.rotate", + type: "range", + func: function() { + link.render.item.rotate(); + } + }, { + element: helper.e(".control-link-item-display-rotate-default"), + type: "button", + func: function() { + mod.setValue("link.item.display.rotate", 0); + link.render.item.rotate(); + render.update(); + } + }, { + element: helper.e(".control-link-item-display-translate-x"), + path: "link.item.display.translate.x", + type: "range", + valueMod: ["float"], + func: function() { + link.render.item.translate.x(); + } + }, { + element: helper.e(".control-link-item-display-translate-x-default"), + type: "button", + func: function() { + mod.setValue("link.item.display.translate.x", 0); + link.render.item.translate.x(); + render.update(); + } + }, { + element: helper.e(".control-link-item-display-translate-y"), + path: "link.item.display.translate.y", + type: "range", + valueMod: ["float"], + func: function() { + link.render.item.translate.y(); + } + }, { + element: helper.e(".control-link-item-display-translate-y-default"), + type: "button", + func: function() { + mod.setValue("link.item.display.translate.y", 0); + link.render.item.translate.y(); + render.update(); + } }, { element: helper.e(".control-link-item-order-displayname"), path: "link.item.order", @@ -2095,14 +2150,6 @@ var control = (function() { func: function() { render.class(); } - }, { - element: helper.e(".control-link-item-name-show"), - path: "link.item.name.show", - type: "checkbox", - func: function() { - render.class(); - render.dependents(); - } }, { element: helper.e(".control-link-item-hoverscale"), path: "link.item.hoverScale.show", @@ -2703,8 +2750,8 @@ var control = (function() { helper.removeClass(html, "is-link-area-alignment-left"); helper.removeClass(html, "is-link-area-alignment-center"); helper.removeClass(html, "is-link-area-alignment-right"); - helper.removeClass(html, "is-link-item-name-show"); - helper.removeClass(html, "is-link-display-item-show"); + helper.removeClass(html, "is-link-item-display-name-show"); + helper.removeClass(html, "is-link-item-display-letcon-show"); helper.removeClass(html, "is-link-display-alignment-topleft"); helper.removeClass(html, "is-link-display-alignment-topcenter"); helper.removeClass(html, "is-link-display-alignment-topright"); @@ -2733,11 +2780,11 @@ var control = (function() { helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment); helper.addClass(html, "is-link-style-" + state.get().link.style); helper.addClass(html, "is-link-orientation-" + state.get().link.orientation); - if (state.get().link.item.name.show) { - helper.addClass(html, "is-link-item-name-show"); + if (state.get().link.item.display.letcon.show) { + helper.addClass(html, "is-link-item-display-letcon-show"); }; - if (state.get().link.item.display.show) { - helper.addClass(html, "is-link-display-item-show"); + if (state.get().link.item.display.name.show) { + helper.addClass(html, "is-link-item-display-name-show"); }; if (state.get().link.item.url.show) { helper.addClass(html, "is-link-item-url-show"); @@ -3162,17 +3209,26 @@ var control = (function() { _disable.element("[for=control-link-item-size]", true); _disable.input(".control-link-item-size", true); _disable.input(".control-link-item-size-default", true); - _disable.input(".control-link-item-display-show", true); - _disable.element("[for=control-link-item-display-letter-size]", true); - _disable.input(".control-link-item-display-letter-size", true); - _disable.input(".control-link-item-display-letter-size-default", true); - _disable.element("[for=control-link-item-display-icon-size]", true); - _disable.input(".control-link-item-display-icon-size", true); - _disable.input(".control-link-item-display-icon-size-default", true); - _disable.input(".control-link-item-name-show", true); - _disable.element("[for=control-link-item-name-size]", true); - _disable.input(".control-link-item-name-size", true); - _disable.input(".control-link-item-name-size-default", true); + _disable.input(".control-link-item-display-letcon-show", true); + _disable.element("[for=control-link-item-display-letcon-letter-size]", true); + _disable.input(".control-link-item-display-letcon-letter-size", true); + _disable.input(".control-link-item-display-letcon-letter-size-default", true); + _disable.element("[for=control-link-item-display-letcon-icon-size]", true); + _disable.input(".control-link-item-display-letcon-icon-size", true); + _disable.input(".control-link-item-display-letcon-icon-size-default", true); + _disable.input(".control-link-item-display-name-show", true); + _disable.element("[for=control-link-item-display-name-size]", true); + _disable.input(".control-link-item-display-name-size", true); + _disable.input(".control-link-item-display-name-size-default", true); + _disable.element("[for=control-link-item-display-rotate]", true); + _disable.input(".control-link-item-display-rotate", true); + _disable.input(".control-link-item-display-rotate-default", true); + _disable.element("[for=control-link-item-display-translate-x]", true); + _disable.input(".control-link-item-display-translate-x", true); + _disable.input(".control-link-item-display-translate-x-default", true); + _disable.element("[for=control-link-item-display-translate-y]", true); + _disable.input(".control-link-item-display-translate-y", true); + _disable.input(".control-link-item-display-translate-y-default", true); _disable.input(".control-link-item-order-displayname", true); _disable.input(".control-link-item-order-namedisplay", true); _disable.element(".control-link-item-order-namedisplay-helper", true); @@ -3224,8 +3280,8 @@ var control = (function() { _disable.element("[for=control-link-item-size]", false); _disable.input(".control-link-item-size", false); _disable.input(".control-link-item-size-default", false); - _disable.input(".control-link-item-display-show", false); - _disable.input(".control-link-item-name-show", false); + _disable.input(".control-link-item-display-letcon-show", false); + _disable.input(".control-link-item-display-name-show", false); _disable.input(".control-link-item-url-show", false); _disable.input(".control-link-item-line-show", false); _disable.input(".control-link-item-shadow-show", false); @@ -3246,20 +3302,20 @@ var control = (function() { _disable.input(".control-link-accent-clear", false); _disable.input(".control-link-accent-set", false); _disable.element(".control-link-accent-set-helper", false); - if (state.get().link.item.display.show) { - _disable.element("[for=control-link-item-display-letter-size]", false); - _disable.input(".control-link-item-display-letter-size", false); - _disable.input(".control-link-item-display-letter-size-default", false); - _disable.element("[for=control-link-item-display-icon-size]", false); - _disable.input(".control-link-item-display-icon-size", false); - _disable.input(".control-link-item-display-icon-size-default", false); + if (state.get().link.item.display.letcon.show) { + _disable.element("[for=control-link-item-display-letcon-letter-size]", false); + _disable.input(".control-link-item-display-letcon-letter-size", false); + _disable.input(".control-link-item-display-letcon-letter-size-default", false); + _disable.element("[for=control-link-item-display-letcon-icon-size]", false); + _disable.input(".control-link-item-display-letcon-icon-size", false); + _disable.input(".control-link-item-display-letcon-icon-size-default", false); }; - if (state.get().link.item.name.show) { - _disable.element("[for=control-link-item-name-size]", false); - _disable.input(".control-link-item-name-size", false); - _disable.input(".control-link-item-name-size-default", false); + if (state.get().link.item.display.name.show) { + _disable.element("[for=control-link-item-display-name-size]", false); + _disable.input(".control-link-item-display-name-size", false); + _disable.input(".control-link-item-display-name-size-default", false); }; - if (state.get().link.item.display.show || state.get().link.item.name.show) { + if (state.get().link.item.display.letcon.show || state.get().link.item.display.name.show) { _disable.element(".control-link-item-display-alignment-grid", false); _disable.element(".control-link-item-display-alignment-label", false); _disable.input(".control-link-item-display-alignment-topleft", false); @@ -3271,8 +3327,17 @@ var control = (function() { _disable.input(".control-link-item-display-alignment-bottomleft", false); _disable.input(".control-link-item-display-alignment-bottomcenter", false); _disable.input(".control-link-item-display-alignment-bottomright", false); + _disable.element("[for=control-link-item-display-rotate]", false); + _disable.input(".control-link-item-display-rotate", false); + _disable.input(".control-link-item-display-rotate-default", false); + _disable.element("[for=control-link-item-display-translate-x]", false); + _disable.input(".control-link-item-display-translate-x", false); + _disable.input(".control-link-item-display-translate-x-default", false); + _disable.element("[for=control-link-item-display-translate-y]", false); + _disable.input(".control-link-item-display-translate-y", false); + _disable.input(".control-link-item-display-translate-y-default", false); }; - if (state.get().link.item.display.show && state.get().link.item.name.show) { + if (state.get().link.item.display.letcon.show && state.get().link.item.display.name.show) { _disable.input(".control-link-item-order-displayname", false); _disable.input(".control-link-item-order-namedisplay", false); _disable.element(".control-link-item-order-namedisplay-helper", false); diff --git a/src/js/link.js b/src/js/link.js index 8f347161..147a57ef 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -552,9 +552,13 @@ var link = (function() { }; var linkPanelFront = helper.makeNode(linkPanelFrontOptions); var linkPanelBack = helper.node("div|class:link-panel-back"); + var linkDisplay = helper.node("div|class:link-display"); + var linkDisplayLetcon = helper.node("div|class:link-display-letcon"); + var linkDisplayLetter = null; var linkDisplayIcon = null; + if (stagedLink.link.display == "letter") { var letterText = stagedLink.link.letter; if (letterText == null) { @@ -568,7 +572,8 @@ var link = (function() { if (nameText == null) { nameText = ""; }; - var linkName = helper.node("p:" + nameText + "|class:link-name"); + var linkName = helper.node("p:" + nameText + "|class:link-display-name"); + var linkUrl = helper.node("div|class:link-url"); var url = ""; if (stagedLink.link.url != null) { @@ -598,17 +603,18 @@ var link = (function() { var linkRemoveIcon = helper.node("span|class:button-icon icon-close"); if (stagedLink.link.display == "letter") { - linkDisplay.appendChild(linkDisplayLetter); + linkDisplayLetcon.appendChild(linkDisplayLetter); } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) { - linkDisplay.appendChild(linkDisplayIcon); + linkDisplayLetcon.appendChild(linkDisplayIcon); }; if (state.get().link.item.order == "displayname") { - linkPanelFront.appendChild(linkDisplay); - linkPanelFront.appendChild(linkName); + linkDisplay.appendChild(linkDisplayLetcon); + linkDisplay.appendChild(linkName); } else if (state.get().link.item.order == "namedisplay") { - linkPanelFront.appendChild(linkName); - linkPanelFront.appendChild(linkDisplay); + linkDisplay.appendChild(linkName); + linkDisplay.appendChild(linkDisplayLetcon); }; + linkPanelFront.appendChild(linkDisplay); linkLeft.appendChild(linkLeftIcon); linkControl.appendChild(linkLeft); linkHandle.appendChild(linkHandleIcon); @@ -1027,16 +1033,16 @@ var link = (function() { display: { letter: function() { var html = helper.e("html"); - html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em"); + html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letcon.letter.size + "em"); }, icon: function() { var html = helper.e("html"); - html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em"); + html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.letcon.icon.size + "em"); } }, name: function() { var html = helper.e("html"); - html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em"); + html.style.setProperty("--link-item-display-name-size", state.get().link.item.display.name.size + "em"); }, size: function() { var html = helper.e("html"); @@ -1057,6 +1063,20 @@ var link = (function() { border: function() { var html = helper.e("html"); html.style.setProperty("--link-item-border", state.get().link.item.border); + }, + rotate: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-display-rotate", state.get().link.item.display.rotate + "deg"); + }, + translate: { + x: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-display-translate-x", state.get().link.item.display.translate.x + "em"); + }, + y: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-display-translate-y", state.get().link.item.display.translate.y + "em"); + } } }; @@ -1669,6 +1689,9 @@ var link = (function() { render.item.display.icon(); render.item.name(); render.item.border(); + render.item.rotate(); + render.item.translate.x(); + render.item.translate.y(); render.area.width(); }; diff --git a/src/js/state.js b/src/js/state.js index 3937c358..cb6a42b5 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -140,20 +140,26 @@ var state = (function() { }, item: { display: { - show: true, - size: 2, - alignment: "centercenter", - letter: { - size: 3 + letcon: { + show: true, + letter: { + size: 3 + }, + icon: { + size: 3 + } }, - icon: { - size: 3 + name: { + show: true, + size: 0.9 + }, + alignment: "centercenter", + rotate: 0, + translate: { + x: 0, + y: 0 } }, - name: { - show: true, - size: 0.9 - }, url: { show: true }, @@ -166,6 +172,7 @@ var state = (function() { hoverScale: { show: true }, + newTab: false, order: "displayname", size: 1, border: 0 diff --git a/src/js/update.js b/src/js/update.js index a83dad7c..7441896e 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -625,6 +625,14 @@ var update = (function() { items: data.bookmarks }]; data.state.header.position = "sticky"; + data.state.link.item.display.rotate = 0; + data.state.link.item.display.translate = { + x: 0, + y: 0 + }; + data.state.link.item.hoverScale = { + show: true + }; data.state.group = { area: { alignment: "left" @@ -638,6 +646,26 @@ var update = (function() { add: false }; data.state.dropdown = false; + delete data.state.link.item.display.size; + data.state.link.item.display.name = data.state.link.item.name; + delete data.state.link.item.name; + data.state.link.item.display.letcon = { + show: data.state.link.item.display.show, + letter: { + size: data.state.link.item.display.letter.size + }, + icon: { + size: data.state.link.item.display.icon.size + } + }; + data.state.link.item.display.rotate = 0; + data.state.link.item.display.translate = { + x: 0, + y: 0 + }; + delete data.state.link.item.display.show; + delete data.state.link.item.display.letter; + delete data.state.link.item.display.icon; return data; } };