From d69eead3f4a65afb1794bcf3b1e32609f39223ef Mon Sep 17 00:00:00 2001 From: Kombie Date: Thu, 13 Jun 2019 15:47:00 +0100 Subject: [PATCH] [feature] [refactor] improve controls and add controls for layout padding and gutter size --- css/background.css | 9 +- css/base.css | 13 +- css/clock.css | 1 - css/date.css | 1 - css/edge.css | 4 +- css/greeting.css | 13 +- css/header.css | 69 +++--- css/link.css | 24 +- css/menu.css | 20 +- css/transitional.css | 13 +- index.html | 195 +++++++-------- js/background.js | 31 +-- js/bookmarks.js | 38 --- js/control.js | 574 ++++++++++++++++++++++++++++++++----------- js/data.js | 2 +- js/header.js | 14 +- js/layout.js | 33 ++- js/link.js | 9 - js/state.js | 23 +- js/update.js | 20 +- js/version.js | 2 +- 21 files changed, 692 insertions(+), 416 deletions(-) diff --git a/css/background.css b/css/background.css index 29010d4b..eb123a39 100755 --- a/css/background.css +++ b/css/background.css @@ -7,10 +7,16 @@ pointer-events: none; z-index: var(--z-index-background); animation: appear var(--animation-speed-slow) 1; + display: none; +} + +.is-background-image-show .background { + display: block; } .background-image { background-image: var(--background-image); + /* background-image: url(https://source.unsplash.com/random/1920x1080/?night); */ background-attachment: fixed; background-size: cover; background-position: center; @@ -22,7 +28,8 @@ pointer-events: none; display: block; opacity: var(--background-opacity); - /* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */ + transform: scale(var(--background-scale)); + filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); } .background-accent { diff --git a/css/base.css b/css/base.css index c831452a..9eb504a0 100755 --- a/css/base.css +++ b/css/base.css @@ -58,14 +58,8 @@ --header-shade-color: transparent; --header-shade-opacity: none; --header-search-width: 0%; - --header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier)); - --header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier)); - --header-padding-top-multiplier: 4; - --header-padding-bottom-multiplier: 4; - --header-border-width-top: calc(var(--line-width) * var(--header-border-width-top-multiplier)); - --header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-bottom-multiplier)); - --header-border-width-top-multiplier: 1; - --header-border-width-bottom-multiplier: 1; + --header-border-top: 0; + --header-border-bottom: 0; --header-date-size: 1em; --header-clock-size: 1em; --header-search-size: 1em; @@ -80,9 +74,12 @@ --link-item-name-size: 0.9em; --background-image: none; --background-opacity: 1; + --background-scale: 1; --background-accent-opacity: 0; --background-blur: 0; --layout-width: 80%; + --layout-padding-multiplier: 4; + --layout-gutter-multiplier: 4; --animation-speed-fast: 0.2s; --animation-speed-medium: 0.4s; --animation-speed-slow: 0.6s; diff --git a/css/clock.css b/css/clock.css index 810deacb..be1ab5db 100755 --- a/css/clock.css +++ b/css/clock.css @@ -1,7 +1,6 @@ .clock { margin: 0; padding: 0; - border-radius: var(--theme-radius); font-size: 1em; font-family: var(--font-fjalla); color: rgb(var(--style-neutral-text)); diff --git a/css/date.css b/css/date.css index bf9ac517..056e736f 100755 --- a/css/date.css +++ b/css/date.css @@ -1,7 +1,6 @@ .date { margin: 0; padding: 0; - border-radius: var(--theme-radius); font-size: 1em; font-family: var(--font-fjalla); color: rgb(var(--style-neutral-text)); diff --git a/css/edge.css b/css/edge.css index 652dee74..69033afd 100644 --- a/css/edge.css +++ b/css/edge.css @@ -1,5 +1,5 @@ .edge { - background-color: rgba(var(--theme-accent), 0.10); + background-color: rgba(var(--theme-accent), 0.2); width: 0; height: 0; position: absolute; @@ -7,7 +7,7 @@ left: 0; opacity: 0; border-radius: var(--theme-radius); - box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--theme-accent), 0.25); + box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1); z-index: var(--z-index-edge); pointer-events: none; transition: opacity var(--animation-speed-fast) ease-in-out; diff --git a/css/greeting.css b/css/greeting.css index d95e5e0a..e148df50 100755 --- a/css/greeting.css +++ b/css/greeting.css @@ -1,7 +1,6 @@ .greeting { margin: 0; padding: 0; - border-radius: var(--theme-radius); font-size: 1em; font-family: var(--font-fjalla); color: rgb(var(--style-neutral-text)); @@ -13,6 +12,18 @@ flex-wrap: nowrap; } +.is-header-item-alignment-horizontal-left .greeting { + justify-content: flex-start; +} + +.is-header-item-alignment-horizontal-center .greeting { + justify-content: center; +} + +.is-header-item-alignment-horizontal-right .greeting { + justify-content: flex-end; +} + .greeting-item { font-size: 1.5em; max-width: 100%; diff --git a/css/header.css b/css/header.css index d46299d7..f43b17c9 100755 --- a/css/header.css +++ b/css/header.css @@ -23,8 +23,7 @@ left: 0; } -.header-shade, -.header-border { +.header-shade { content: ""; display: block; position: absolute; @@ -35,47 +34,35 @@ pointer-events: none; } -.is-header-shade-style-scroll .header-shade { - transition: background-color var(--animation-speed-slow) ease-in-out; - animation: none; +.is-header-radius .header-shade { + border-radius: calc(var(--theme-radius) * 4); } .is-header-shade-show .header-shade { - background-color: rgb(var(--header-shade-color)); - opacity: var(--header-shade-opacity); -} - -.is-header-border-top-show .header-border { - border-top: var(--header-border-width-top) solid rgb(var(--theme-accent)); -} - -.is-header-border-bottom-show .header-border { - border-bottom: var(--header-border-width-bottom) solid rgb(var(--theme-accent)); + background-color: rgba(var(--header-shade-color), var(--header-shade-opacity)); } .header-area { - padding-top: calc(var(--gutter) * 3 + var(--header-padding-top)); - padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom)); - padding-left: calc(var(--gutter) * 3); - padding-right: calc(var(--gutter) * 3); + padding: calc(var(--gutter) * var(--layout-padding-multiplier)); position: relative; width: var(--header-area-width); - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; } -.is-header-item-alignment-horizontal-left .header-area { - justify-content: flex-start; +.is-header-border-top .header-area { + border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent)); } -.is-header-item-alignment-horizontal-center .header-area { - justify-content: center; +.is-header-border-bottom .header-area { + border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent)); } -.is-header-item-alignment-horizontal-right .header-area { - justify-content: flex-end; +.is-header-radius .header-area { + border-radius: calc(var(--theme-radius) * 4); +} + +.is-header-shade-style-scroll .header-area { + transition: background-color var(--animation-speed-slow) ease-in-out; + animation: none; } .is-header-search-text-align-left .header-search-input { @@ -100,13 +87,35 @@ right: 0; } +.header-item-grid { + margin: calc(-1 * calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2))); + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + pointer-events: none; +} + +.is-header-item-alignment-horizontal-left .header-item-grid { + justify-content: flex-start; +} + +.is-header-item-alignment-horizontal-center .header-item-grid { + justify-content: center; +} + +.is-header-item-alignment-horizontal-right .header-item-grid { + justify-content: flex-end; +} + .header-item { - margin: var(--gutter); + margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2)); display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; + pointer-events: all; } .is-header-search-style-auto .header-search { diff --git a/css/link.css b/css/link.css index 78a084c1..2ca55c76 100755 --- a/css/link.css +++ b/css/link.css @@ -22,21 +22,21 @@ } .link-area { - padding-bottom: calc(var(--gutter) * 4); - padding-left: calc(var(--gutter) * 4); - padding-right: calc(var(--gutter) * 4); + padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier)); + padding-left: calc(var(--gutter) * var(--layout-padding-multiplier)); + padding-right: calc(var(--gutter) * var(--layout-padding-multiplier)); font-size: calc(var(--link-item-size) * 1); position: relative; width: var(--link-area-width); display: grid; grid-auto-rows: 1fr; - grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier)); + grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier)); grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr)); } -.is-header-border-bottom-show .link-area, +.is-header-border-bottom .link-area, .is-header-shade-style-always .link-area { - padding-top: calc(var(--gutter) * 4); + padding-top: calc(var(--gutter) * var(--layout-padding-multiplier)); } .link-item { @@ -52,7 +52,7 @@ .link-item:focus-within, .link-item:focus, .link-item:hover { - transform: scale(1.06); + transform: scale(1.05); z-index: 2; } @@ -178,18 +178,14 @@ height: calc(100% - var(--line-width)); } +.is-link-edit .link-panel-back, .is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back, .is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back, .is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back { - top: calc(var(--line-width) * 2); + top: 0; + height: 100%; } -/* .is-link-item-line-show.is-link-url-show .link-item:focus .link-panel-back, -.is-link-item-line-show.is-link-url-show .link-item:focus-within .link-panel-back, -.is-link-item-line-show.is-link-url-show .link-item:hover .link-panel-back { - top: var(--line-width); -} */ - .link-control { margin: 0; padding: 0; diff --git a/css/menu.css b/css/menu.css index f8576768..c707cf1b 100755 --- a/css/menu.css +++ b/css/menu.css @@ -54,6 +54,10 @@ margin: 0; } +.menu-content { + padding: 0 3em; +} + .menu-content-area { display: grid; grid-template-columns: 1fr; @@ -65,11 +69,11 @@ } .menu-item:not(:last-child) { - border-bottom: calc(var(--line-width) * 2) solid rgb(var(--gray-03)); + border-bottom: 2px solid rgb(var(--gray-03)); } .menu-item-header { - padding: 2em; + padding: 2em 0; } .menu-item-header-text { @@ -77,7 +81,7 @@ } .menu-item-form { - padding: 0 2em 2em 4em; + padding: 0 2em 2em 3em; } .menu-close { @@ -121,7 +125,7 @@ @media (min-width: 700px) { .menu { - width: 60vw; + width: 70vw; height: 100%; overflow-y: inherit; max-height: inherit; @@ -149,21 +153,21 @@ } .menu-item-header { - padding: 2em 0 2em 2em; + padding: 2em 0; position: sticky; top: 0; z-index: 3; } .menu-item-form { - padding: 2em 2em 2em 0; + padding: 2em 0; z-index: 2; } } @media (min-width: 900px) { .menu { - width: 60vw; + width: 70vw; } .menu-item { @@ -173,6 +177,6 @@ @media (min-width: 1600px) { .menu { - width: 40vw; + width: 50vw; } } diff --git a/css/transitional.css b/css/transitional.css index 55a72b67..79fe8208 100644 --- a/css/transitional.css +++ b/css/transitional.css @@ -1,7 +1,6 @@ .transitional { margin: 0; padding: 0; - border-radius: var(--theme-radius); font-size: 1em; font-family: var(--font-fjalla); color: rgb(var(--gray-14)); @@ -20,3 +19,15 @@ justify-content: center; align-items: center; } + +.is-header-item-alignment-horizontal-left .transitional { + text-align: left; +} + +.is-header-item-alignment-horizontal-center .transitional { + text-align: center; +} + +.is-header-item-alignment-horizontal-right .transitional { + text-align: right; +} diff --git a/index.html b/index.html index 6343cbd6..cc76dd1f 100644 --- a/index.html +++ b/index.html @@ -46,51 +46,52 @@
-
-
-

-
-
-

-
-
-

-
-
-

-
-
-
- - -
- -
-
-
-
- - -
-
-
-
-
- - +
+
+
+ + +
+ +
-
-
-
+
@@ -127,7 +128,7 @@
- +
@@ -161,6 +162,28 @@
+
+
+

Padding

+
+
+
+ + +
+
+
+
+
+

Gutter

+
+
+
+ + +
+
+

Page

@@ -191,7 +214,7 @@

Max width is defined by Layout Area Width.

- +
@@ -259,7 +282,7 @@
- +
@@ -290,7 +313,7 @@
- +
@@ -364,7 +387,7 @@
- +
@@ -499,7 +522,7 @@
- +
@@ -592,7 +615,7 @@

Only the Search box width control will change the Width of the Search box.

- +
@@ -617,23 +640,7 @@
- -
- - -
-
-

Padding

-
-
-
- - -
-
-
- - +
@@ -643,25 +650,13 @@
- - -
-
-
- - -
+ +
- - -
-
-
- - -
+ +
@@ -691,6 +686,11 @@ +
+
+ + +
@@ -708,7 +708,7 @@

Max width is defined by Layout Area Width.

- +
@@ -743,7 +743,7 @@
- +
@@ -756,7 +756,7 @@
- +
@@ -764,20 +764,20 @@
- +
- +
- +
- +
@@ -802,11 +802,6 @@
-
- - -
-
@@ -911,7 +906,7 @@
- +
@@ -946,7 +941,7 @@
- +
@@ -968,10 +963,12 @@
-

Enter a URL to an image file or a path to a local file.

-

To use local files enter a relative file path, eg:

-

../background/abstract.jpg

-

../background/gray-steps.jpg

+

Use a URL or file path to an image. Local files use relative file paths, eg:

+

../background/abstract.jpg

+

../background/gray-steps.jpg

+

Use Unsplash for random images, eg:

+

https://source.unsplash.com/random/1920x1080/?night,day,sky

+

Change parameters after .../ramdom/ for more options. Loading times may vary when using Unsplash.

@@ -988,7 +985,11 @@
- + +
+
+ +
diff --git a/js/background.js b/js/background.js index f7458484..41003265 100644 --- a/js/background.js +++ b/js/background.js @@ -2,31 +2,12 @@ var background = (function() { var render = function() { var html = helper.e("html"); - var background = helper.e(".background"); - var backgroundImage = helper.e(".background-image"); - if (state.get().background.image.show) { - helper.removeClass(background, "is-hidden"); - html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); - html.style.setProperty("--background-blur", state.get().background.image.blur + "px"); - html.style.setProperty("--background-grayscale", state.get().background.image.grayscale); - html.style.setProperty("--background-opacity", state.get().background.image.opacity); - html.style.setProperty("--background-accent-opacity", state.get().background.image.accent); - if (state.get().background.image.blur > 0 && state.get().background.image.grayscale > 0) { - backgroundImage.style.setProperty("filter", "blur(var(--background-blur)) grayscale(var(--background-grayscale))"); - } else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) { - backgroundImage.style.setProperty("filter", "blur(var(--background-blur))"); - } else if (state.get().background.image.blur == 0 && state.get().background.image.grayscale > 0) { - backgroundImage.style.setProperty("filter", "grayscale(var(--background-grayscale))"); - }; - } else { - helper.addClass(background, "is-hidden"); - html.style.setProperty("--background-image", "none"); - html.style.setProperty("--background-blur", "none"); - html.style.setProperty("--background-grayscale", "none"); - html.style.setProperty("--background-opacity", "none"); - html.style.setProperty("--background-accent-opacity", "none"); - backgroundImage.style.setProperty("filter", "none"); - }; + html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); + html.style.setProperty("--background-blur", state.get().background.image.blur + "px"); + html.style.setProperty("--background-grayscale", state.get().background.image.grayscale); + html.style.setProperty("--background-opacity", state.get().background.image.opacity); + html.style.setProperty("--background-scale", state.get().background.image.scale); + html.style.setProperty("--background-accent-opacity", state.get().background.image.accent); }; var init = function() { diff --git a/js/bookmarks.js b/js/bookmarks.js index 425a2bd9..db41a485 100644 --- a/js/bookmarks.js +++ b/js/bookmarks.js @@ -19,25 +19,6 @@ var bookmarks = (function() { } }, timeStamp: 1546453101749 - }, { - display: "letter", - letter: "M", - icon: { - name: null, - prefix: null, - label: null - }, - name: "Maps", - url: "https://www.google.co.uk/maps", - accent: { - override: false, - color: { - r: null, - g: null, - b: null - } - }, - timeStamp: 1546453103560 }, { display: "icon", letter: "AS", @@ -76,25 +57,6 @@ var bookmarks = (function() { } }, timeStamp: 1546453104460 - }, { - display: "letter", - letter: "GOT", - icon: { - name: null, - prefix: null, - label: null - }, - name: "r/gameofthrones/", - url: "https://www.reddit.com/r/gameofthrones/", - accent: { - override: false, - color: { - r: null, - g: null, - b: null - } - }, - timeStamp: 1546453105844 }, { display: "icon", letter: "AZ", diff --git a/js/control.js b/js/control.js index 8b8ac106..51b62298 100644 --- a/js/control.js +++ b/js/control.js @@ -72,7 +72,7 @@ var control = (function() { }], func: function() { render(); - layout.render(); + layout.render.width(); } }, { element: helper.e(".control-layout-alignment-horizontal-left"), @@ -170,6 +170,98 @@ var control = (function() { func: function() { render(); } + }, { + element: helper.e(".control-layout-padding"), + path: "layout.padding", + type: "range", + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".main"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".main"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".main"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], + func: function() { + layout.render.padding(); + } + }, { + element: helper.e(".control-layout-gutter"), + path: "layout.gutter", + type: "range", + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".main"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".main"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".main"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], + func: function() { + layout.render.gutter(); + } }, { element: helper.e(".control-layout-title"), path: "layout.title", @@ -371,12 +463,60 @@ var control = (function() { path: "header.greeting.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".greeting"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".greeting"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".greeting"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.greeting.size(); } }, { element: helper.e(".control-header-greeting-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".greeting"), + delay: 500 + }); + } + }], func: function() { _setValue("header.greeting.size", 1); header.render.greeting.size(); @@ -413,12 +553,60 @@ var control = (function() { path: "header.transitional.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".transitional"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".transitional"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".transitional"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.transitional.size(); } }, { element: helper.e(".control-header-transitional-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".transitional"), + delay: 500 + }); + } + }], func: function() { _setValue("header.transitional.size", 1); header.render.transitional.size(); @@ -579,12 +767,60 @@ var control = (function() { path: "header.clock.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".clock"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".clock"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".clock"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.clock.size(); } }, { element: helper.e(".control-header-clock-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".clock"), + delay: 500 + }); + } + }], func: function() { _setValue("header.clock.size", 1); header.render.clock.size(); @@ -883,12 +1119,60 @@ var control = (function() { path: "header.date.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".date"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".date"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".date"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.date.size(); } }, { element: helper.e(".control-header-date-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".date"), + delay: 500 + }); + } + }], func: function() { _setValue("header.date.size", 1); header.render.date.size(); @@ -907,6 +1191,15 @@ var control = (function() { element: helper.e(".control-header-search-style-auto"), path: "header.search.style", type: "radio", + additionalEvents: [{ + event: "change", + func: function() { + edge.render({ + element: helper.e(".header-search-input"), + delay: 500 + }); + } + }], func: function() { render(); dependents(); @@ -916,6 +1209,15 @@ var control = (function() { element: helper.e(".control-header-search-style-custom"), path: "header.search.style", type: "radio", + additionalEvents: [{ + event: "change", + func: function() { + edge.render({ + element: helper.e(".header-search-input"), + delay: 500 + }); + } + }], func: function() { render(); dependents(); @@ -1051,12 +1353,60 @@ var control = (function() { path: "header.search.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".header-search-input"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".header-search-input"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".header-search-input"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.search.size(); } }, { element: helper.e(".control-header-search-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".header-search-input"), + delay: 500 + }); + } + }], func: function() { _setValue("header.search.size", 1); header.render.search.size(); @@ -1083,12 +1433,60 @@ var control = (function() { path: "header.button.size", type: "range", valueMod: ["float"], + additionalEvents: [{ + event: "input", + func: function() { + edge.render({ + element: helper.e(".control-menu"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.render({ + element: helper.e(".control-menu"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.destroy(); + } + }, { + event: "touchend", + func: function() { + edge.destroy(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.render({ + element: helper.e(".control-menu"), + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.destroy(); + } + }], func: function() { header.render.button.size(); } }, { element: helper.e(".control-header-button-size-default"), type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.render({ + element: helper.e(".control-menu"), + delay: 500 + }); + } + }], func: function() { _setValue("header.button.size", 1); header.render.button.size(); @@ -1128,128 +1526,27 @@ var control = (function() { header.render.opacity(); } }, { - element: helper.e(".control-header-padding-top"), - path: "header.padding.top", - type: "range", - additionalEvents: [{ - event: "input", - func: function() { - edge.render({ - element: helper.e(".header-area") - }); - } - }, { - event: "mousedown", - func: function() { - edge.render({ - element: helper.e(".header-area") - }); - } - }, { - event: "mouseup", - func: function() { - edge.destroy(); - } - }, { - event: "touchend", - func: function() { - edge.destroy(); - } - }, { - event: "keydown", - func: function() { - if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { - edge.render({ - element: helper.e(".header-area"), - }); - }; - } - }, { - event: "keyup", - func: function() { - edge.destroy(); - } - }], - func: function() { - header.render.padding(); - } - }, { - element: helper.e(".control-header-padding-bottom"), - path: "header.padding.bottom", - type: "range", - additionalEvents: [{ - event: "input", - func: function() { - edge.render({ - element: helper.e(".header-area") - }); - } - }, { - event: "mousedown", - func: function() { - edge.render({ - element: helper.e(".header-area") - }); - } - }, { - event: "mouseup", - func: function() { - edge.destroy(); - } - }, { - event: "touchend", - func: function() { - edge.destroy(); - } - }, { - event: "keydown", - func: function() { - if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { - edge.render({ - element: helper.e(".header-area"), - }); - }; - } - }, { - event: "keyup", - func: function() { - edge.destroy(); - } - }], - func: function() { - header.render.padding(); - } - }, { - element: helper.e(".control-header-border-top-show"), - path: "header.border.top.show", + element: helper.e(".control-header-radius"), + path: "header.radius", type: "checkbox", func: function() { render(); - dependents(); - header.render.border(); } }, { - element: helper.e(".control-header-border-top-width"), - path: "header.border.top.width", + element: helper.e(".control-header-border-top"), + path: "header.border.top", type: "range", func: function() { header.render.border(); - } - }, { - element: helper.e(".control-header-border-bottom-show"), - path: "header.border.bottom.show", - type: "checkbox", - func: function() { render(); - dependents(); - header.render.border(); } }, { - element: helper.e(".control-header-border-bottom-width"), - path: "header.border.bottom.width", + element: helper.e(".control-header-border-bottom"), + path: "header.border.bottom", type: "range", func: function() { header.render.border(); + render(); } }, { element: helper.e(".control-link-area-width"), @@ -1536,13 +1833,6 @@ var control = (function() { func: function() { render(); } - }, { - element: helper.e(".control-link-area-gap"), - path: "link.area.gap", - type: "range", - func: function() { - link.render.area.gap(); - } }, { element: helper.e(".control-link-item-display-alignment-horizontal-left"), path: "link.item.display.alignment.horizontal", @@ -1769,6 +2059,14 @@ var control = (function() { func: function() { background.render(); } + }, { + element: helper.e(".control-background-image-scale"), + path: "background.image.scale", + type: "range", + valueMod: ["float"], + func: function() { + background.render(); + } }]; var _setValue = function(path, value) { @@ -1835,7 +2133,7 @@ var control = (function() { path: object.path, newValue: newValue }); - // console.log(object.path, helper.getObject({ + // console.log("state set", object.path, helper.getObject({ // object: state.get(), // path: object.path // })); @@ -1956,15 +2254,20 @@ var control = (function() { helper.addClass(html, "is-header-shade-show"); helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style); }; + if (state.get().header.radius) { + helper.addClass(html, "is-header-radius"); + } else { + helper.removeClass(html, "is-header-radius"); + }; }; var _border = function() { - helper.removeClass(html, "is-header-border-top-show"); - helper.removeClass(html, "is-header-border-bottom-show"); - if (state.get().header.border.top.show) { - helper.addClass(html, "is-header-border-top-show"); + helper.removeClass(html, "is-header-border-top"); + helper.removeClass(html, "is-header-border-bottom"); + if (state.get().header.border.top > 0) { + helper.addClass(html, "is-header-border-top"); }; - if (state.get().header.border.bottom.show) { - helper.addClass(html, "is-header-border-bottom-show"); + if (state.get().header.border.bottom > 0) { + helper.addClass(html, "is-header-border-bottom"); }; }; _area(); @@ -2227,22 +2530,6 @@ var control = (function() { helper.e(".control-header-shade-opacity").disabled = true; }; }; - var _border = function() { - if (state.get().header.border.top.show) { - helper.e("[for=control-header-border-top-width]").removeAttribute("disabled"); - helper.e(".control-header-border-top-width").disabled = false; - } else { - helper.e("[for=control-header-border-top-width]").setAttribute("disabled", ""); - helper.e(".control-header-border-top-width").disabled = true; - }; - if (state.get().header.border.bottom.show) { - helper.e("[for=control-header-border-bottom-width]").removeAttribute("disabled"); - helper.e(".control-header-border-bottom-width").disabled = false; - } else { - helper.e("[for=control-header-border-bottom-width]").setAttribute("disabled", ""); - helper.e(".control-header-border-bottom-width").disabled = true; - }; - }; var _search = function() { if (state.get().header.search.show) { helper.e(".control-header-search-style-label").removeAttribute("disabled"); @@ -2347,7 +2634,6 @@ var control = (function() { }; _clock(); _date(); - _border(); _shade(); _search(); _greeting(); @@ -2387,8 +2673,6 @@ var control = (function() { helper.e(".control-link-item-url-style-dark").disabled = true; helper.e(".control-link-item-url-style-light").disabled = true; helper.e(".control-link-item-line-show").disabled = true; - helper.e("[for=control-link-area-gap]").setAttribute("disabled", ""); - helper.e(".control-link-area-gap").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", ""); helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true; helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true; @@ -2419,8 +2703,6 @@ var control = (function() { helper.e(".control-link-item-name-show").disabled = false; helper.e(".control-link-item-url-show").disabled = false; helper.e(".control-link-item-line-show").disabled = false; - helper.e("[for=control-link-area-gap]").removeAttribute("disabled"); - helper.e(".control-link-area-gap").disabled = false; helper.e(".control-link-new-tab").disabled = false; helper.e(".control-link-style-block").disabled = false; helper.e(".control-link-style-list").disabled = false; @@ -2486,6 +2768,8 @@ var control = (function() { helper.e(".control-background-image-grayscale").disabled = false; helper.e("[for=control-background-image-accent]").removeAttribute("disabled"); helper.e(".control-background-image-accent").disabled = false; + helper.e("[for=control-background-image-scale]").removeAttribute("disabled"); + helper.e(".control-background-image-scale").disabled = false; } else { helper.e("[for=control-background-image-url]").setAttribute("disabled", ""); helper.e(".control-background-image-url").disabled = true; @@ -2497,6 +2781,8 @@ var control = (function() { helper.e(".control-background-image-grayscale").disabled = true; helper.e("[for=control-background-image-accent]").setAttribute("disabled", ""); helper.e(".control-background-image-accent").disabled = true; + helper.e("[for=control-background-image-scale]").setAttribute("disabled", ""); + helper.e(".control-background-image-scale").disabled = true; }; }; _header(); diff --git a/js/data.js b/js/data.js index 075d18d1..79f04969 100644 --- a/js/data.js +++ b/js/data.js @@ -21,7 +21,7 @@ var data = (function() { bookmarks: bookmarks.get() }; set(saveName, JSON.stringify(data)); - console.log("data saved"); + // console.log("data saved"); }; var wipe = function() { diff --git a/js/header.js b/js/header.js index 93c6c5f5..cb734d43 100644 --- a/js/header.js +++ b/js/header.js @@ -29,9 +29,6 @@ var header = (function() { opacity: function() { _renderOpacity(); }, - padding: function() { - _renderPadding(); - }, border: function() { _renderBorder(); }, @@ -103,16 +100,10 @@ var header = (function() { }; }; - var _renderPadding = function() { - var html = helper.e("html"); - html.style.setProperty("--header-padding-top-multiplier", state.get().header.padding.top); - html.style.setProperty("--header-padding-bottom-multiplier", state.get().header.padding.bottom); - }; - var _renderBorder = function() { var html = helper.e("html"); - html.style.setProperty("--header-border-width-top-multiplier", state.get().header.border.top.width); - html.style.setProperty("--header-border-width-bottom-multiplier", state.get().header.border.bottom.width); + html.style.setProperty("--header-border-top", state.get().header.border.top); + html.style.setProperty("--header-border-bottom", state.get().header.border.bottom); }; var _renderSearchWidth = function() { @@ -155,7 +146,6 @@ var header = (function() { render.area.width(); render.shade(); render.opacity(); - render.padding(); render.border(); render.greeting.size(); render.transitional.size(); diff --git a/js/layout.js b/js/layout.js index 53b2e697..a280c074 100644 --- a/js/layout.js +++ b/js/layout.js @@ -1,15 +1,36 @@ var layout = (function() { - var render = function() { + var render = { + width: function() { + _renderWidth(); + }, + padding: function() { + _renderPadding(); + }, + gutter: function() { + _renderGutter(); + } + }; + + var _renderWidth = function() { var html = helper.e("html"); - html.style.setProperty("--layout-width", helper.getObject({ - object: state.get(), - path: "layout.width" - }) + "%"); + html.style.setProperty("--layout-width", state.get().layout.width + "%"); + }; + + var _renderPadding = function() { + var html = helper.e("html"); + html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding); + }; + + var _renderGutter = function() { + var html = helper.e("html"); + html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter); }; var init = function() { - render(); + render.width(); + render.padding(); + render.gutter(); }; // exposed methods diff --git a/js/link.js b/js/link.js index 6c2a995b..be4217e9 100644 --- a/js/link.js +++ b/js/link.js @@ -523,9 +523,6 @@ var link = (function() { var render = { area: { - gap: function() { - _renderAreaGap(); - }, width: function() { _renderAreaWidth(); } @@ -554,11 +551,6 @@ var link = (function() { } }; - var _renderAreaGap = function() { - var html = helper.e("html"); - html.style.setProperty("--link-area-gutter-multiplier", state.get().link.area.gap); - }; - var _renderAreaWidth = function() { var html = helper.e("html"); html.style.setProperty("--link-area-width", state.get().link.area.width + "%"); @@ -646,7 +638,6 @@ var link = (function() { }; var init = function() { - render.area.gap(); render.area.width(); render.item.all(); render.item.size(); diff --git a/js/state.js b/js/state.js index 41848c02..18cadfc1 100644 --- a/js/state.js +++ b/js/state.js @@ -110,21 +110,11 @@ var state = (function() { shade: { show: true, style: "scroll", - opacity: 0.95, - }, - padding: { - top: 0, - bottom: 0 + opacity: 0.95 }, border: { - top: { - show: false, - width: 1 - }, - bottom: { - show: false, - width: 1 - } + top: 0, + bottom: 0 }, greeting: { show: false, @@ -136,11 +126,11 @@ var state = (function() { show: false, type: "timeanddate", size: 1 - } + }, + radius: false }, link: { area: { - gap: 2, width: 100, alignment: { horizontal: "center" @@ -185,6 +175,8 @@ var state = (function() { horizontal: "center", vertical: "center" }, + padding: 4, + gutter: 2, width: 80, scrollPastEnd: false, title: "New Tab" @@ -209,6 +201,7 @@ var state = (function() { show: false, url: "../background/gray-steps.jpg", blur: 0, + scale: 1, opacity: 1, grayscale: 0, accent: 0 diff --git a/js/update.js b/js/update.js index 83e34b72..3ea85d44 100644 --- a/js/update.js +++ b/js/update.js @@ -446,11 +446,25 @@ var update = (function() { size: 1 }; delete data.state.header.editAdd; - delete data.state.header.accent; data.state.theme.radius = 0.2; return data; }; + var _update_390 = function(data) { + data.version = "3.9.0"; + delete data.state.header.padding; + data.state.header.radius = false; + data.state.header.border = { + top: data.state.header.border.top.width, + bottom: data.state.header.border.bottom.width + }; + data.state.layout.padding = 4; + data.state.layout.gutter = 2; + data.state.background.image.scale = 1; + delete data.state.link.area.gap; + return data; + }; + // var _update_300 = function(data) { // data.version = 3.00; // return data; @@ -569,6 +583,10 @@ var update = (function() { console.log("\t= running update 3.8.0"); data = _update_380(data); }; + if (version.compare(data.version, "3.9.0") == -1) { + console.log("\t= running update 3.9.0"); + data = _update_390(data); + }; }; // if no update is needed // version bump diff --git a/js/version.js b/js/version.js index 9848860e..72b29dc6 100644 --- a/js/version.js +++ b/js/version.js @@ -1,7 +1,7 @@ var version = (function() { // version is normally bumped when the state needs changing or any new functionality is added - var current = "3.8.4"; + var current = "3.9.0"; var compare = function(a, b) { var pa = a.split(".");