[feature] switch to layout width range input

Author: zombieFox

css/base.css

@@ -60,9 +60,10 @@
 --z-index-link:2000;
 --z-index-header:3000;
 --z-index-tip:4000;
---z-index-shade:5000;
---z-index-modal:6000;
---z-index-menu:7000;
+--z-container-edge:5000;
+--z-index-shade:6000;
+--z-index-modal:7000;
+--z-index-menu:8000;
 --header-shade-color: transparent;
 --header-shade-opacity: none;
 --header-height:0;
@@ -71,6 +72,8 @@
 --background-opacity:1;
 --background-accent-opacity:0;
 --background-blur:0;
+--layout-width:calc(70vw-var(--layout-width-gutter));
+--layout-width-gutter:var(--gutter) *8;
 /* breakpoint reference */
 /* can not be used in @media as of yet */
 --breakpoint-sm:550px;

css/container.css

@@ -1,45 +1,29 @@
 .container{
 margin-left: auto;
 margin-right: auto;
-transition: all var(--animation-speed-fast) ease-in-out;
+position: relative;
+width:var(--layout-width);
 }
 
-.is-layout-width-fluid .container,
-.is-layout-width-wide .container,
-.is-layout-width-thin .container{
-width:calc(100vw-4em);
+.container-edge{
+background-color: transparent;
+position: fixed;
+top:0;
+left:50%;
+width:calc(var(--layout-width) +var(--layout-width-gutter));
+height:100vh;
+transform:translate(-50%,0);
+z-index:var(--z-container-edge);
+pointer-events: none;
+box-shadow: inset 000var(--line-width) rgb(var(--accent)), inset 000calc(var(--line-width) *2) rgba(var(--accent),0.25);
 }
 
-@media (min-width:550px){
- .is-layout-width-wide .container{
-width:80vw;
- }
-
- .is-layout-width-thin .container{
-width:60vw;
- }
-}
+@media (min-width:550px){}
 
 @media (min-width:900px){}
 
-@media (min-width:1100px){
- .is-layout-width-wide .container{
-width:75vw;
- }
-
- .is-layout-width-thin .container{
-width:40vw;
- }
-}
+@media (min-width:1100px){}
 
-@media (min-width:1600px){
- .is-layout-width-wide .container{
-width:70vw;
- }
-
- .is-layout-width-thin .container{
-width:30vw;
- }
-}
+@media (min-width:1600px){}
 
 @media (min-width:1600px){}

css/form.css

@@ -62,7 +62,7 @@ input[type="text"][disabled]{
 padding:0calc(1em-var(--line-width));
 color:rgb(var(--form-input-text-disabled));
 border-width:var(--line-width);
-border-color:rgb(var(--gray-02));
+border-color:rgb(var(--form-input-text-disabled));;
  cursor: default;
  box-shadow: none;
 }

css/header.css

@@ -41,6 +41,17 @@
 border-bottom:var(--line-width) solid rgb(var(--accent));
 }
 
+.header-edge{
+background-color: transparent;
+position: absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+pointer-events: none;
+box-shadow: inset 000var(--line-width) rgb(var(--accent)), inset 000calc(var(--line-width) *2) rgba(var(--accent),0.25);
+}
+
 .header-area{
 margin:0calc(var(--gutter) *-1);
 display: flex;

index.html

@@ -259,6 +259,7 @@ <h1 class="menu-header">Horizontal Alignment</h1>
 <inputid="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
 <labelfor="control-layout-alignment-horizontal-right"><spanclass="label-icon"></span>Right</label>
 </div>
+<pclass="input-helper small muted">Effects may not be visible if the Search box is set to grow to fill available space.</p>
 </div>
 <divclass="menu-item">
 <h1class="menu-header">Vertical Alignment</h1>
@@ -298,7 +299,7 @@ <h1 class="menu-header">Background Shade</h1>
 </div>
 <divclass="input-wrap form-indent-1">
 <labelfor="control-header-shade-padding">Top & bottom padding</label>
-<inputid="control-header-shade-padding" class="control-header-shade-padding" type="range" min="2" max="20" value="0" tabindex="1">
+<inputid="control-header-shade-padding" class="control-header-shade-padding" type="range" min="1" max="25" value="0" tabindex="1">
 </div>
 <divclass="checkbox-wrap form-indent-1">
 <inputid="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
@@ -416,18 +417,10 @@ <h1 class="menu-header">Accent</h1>
 
 <divclass="menu-content-area menu-content-area-layout is-hidden">
 <divclass="menu-item">
-<h1class="menu-header">Width</h1>
-<divclass="radio-wrap">
-<inputid="control-layout-width-fluid" class="control-layout-width-fluid" type="radio" name="control-layout-width" value="fluid" tabindex="1">
-<labelfor="control-layout-width-fluid"><spanclass="label-icon"></span>Fluid</label>
-</div>
-<divclass="radio-wrap">
-<inputid="control-layout-width-wide" class="control-layout-width-wide" type="radio" name="control-layout-width" value="wide" tabindex="1">
-<labelfor="control-layout-width-wide"><spanclass="label-icon"></span>Wide</label>
-</div>
-<divclass="radio-wrap">
-<inputid="control-layout-width-thin" class="control-layout-width-thin" type="radio" name="control-layout-width" value="thin" tabindex="1">
-<labelfor="control-layout-width-thin"><spanclass="label-icon"></span>Thin</label>
+<h1class="menu-header">Content container</h1>
+<divclass="input-wrap">
+<labelfor="control-layout-width">Width</label>
+<inputid="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
 </div>
 </div>
 <divclass="menu-item">
@@ -506,6 +499,7 @@ <h1 class="menu-header">Image</h1>
 <scriptsrc="js/keyboard.js"></script>
 <scriptsrc="js/background.js"></script>
 <scriptsrc="js/title.js"></script>
+<scriptsrc="js/layout.js"></script>
 <scriptsrc="js/init.js"></script>
 
 </html>

js/control.js

@@ -322,6 +322,17 @@ var control = (function(){
 element: helper.e(".control-header-shade-padding"),
 path: "header.shade.padding",
 type: "range",
+additionalEvents: [{
+event: "mousedown",
+action: function(){
+header.edge("show");
+}
+},{
+event: "mouseup",
+action: function(){
+header.edge("hide");
+}
+}],
 func: function(){
 render();
 header.render();
@@ -483,25 +494,24 @@ var control = (function(){
 link.render();
 }
 },{
-element: helper.e(".control-layout-width-fluid"),
-path: "layout.width",
-type: "radio",
-func: function(){
-render();
-}
-},{
-element: helper.e(".control-layout-width-wide"),
-path: "layout.width",
-type: "radio",
-func: function(){
-render();
-}
-},{
-element: helper.e(".control-layout-width-thin"),
+element: helper.e(".control-layout-width"),
 path: "layout.width",
-type: "radio",
+type: "range",
+additionalEvents: [{
+event: "mousedown",
+action: function(){
+layout.edge("show");
+}
+},{
+event: "mouseup",
+action: function(){
+layout.edge("hide");
+}
+}],
 func: function(){
 render();
+layout.render();
+header.render();
 }
 },{
 element: helper.e(".control-layout-scroll-past-end"),
@@ -680,10 +690,10 @@ var control = (function(){
 path: object.path,
 newValue: newValue
 });
-// console.log(object.path, helper.getObject({
-//  object: state.get(),
-//  path: object.path
-// }));
+console.log(object.path,helper.getObject({
+object: state.get(),
+path: object.path
+}));
 };
 };
 varbindControl=function(object){
@@ -704,6 +714,13 @@ var control = (function(){
 action[object.element.tagName.toLowerCase()](object);
 data.save();
 },false);
+if(object.additionalEvents){
+object.additionalEvents.forEach(function(item,index){
+object.element.addEventListener(item.event,function(){
+item.action();
+},false);
+});
+};
 };
 _allControl.forEach(function(arrayItem,index){
 bindControl(arrayItem);
@@ -801,20 +818,16 @@ var control = (function(){
 urlText[state.get().bookmarks.url.style]();
 };
 var_layout=function(){
-helper.removeClass(html,"is-layout-width-fluid");
-helper.removeClass(html,"is-layout-width-wide");
-helper.removeClass(html,"is-layout-width-thin");
-helper.addClass(html,"is-layout-width-"+state.get().layout.width);
 if(state.get().layout.scrollPastEnd){
 helper.addClass(html,"is-layout-scroll-past-end");
 }else{
 helper.removeClass(html,"is-layout-scroll-past-end");
 };
 };
 var_theme=function(){
-helper.removeClass(html,"is-theme-style-dark");
-helper.removeClass(html,"is-theme-style-light");
-helper.addClass(html,"is-theme-style-"+state.get().theme.style);
+helper.removeClass(html,"is-theme-style-dark");
+helper.removeClass(html,"is-theme-style-light");
+helper.addClass(html,"is-theme-style-"+state.get().theme.style);
 };
 var_editAdd=function(){
 if(state.get().header.editAdd.show){

js/header.js

@@ -14,6 +14,26 @@ var header = (function(){
 });
 };
 
+varedge=function(action){
+varheader=helper.e(".header");
+varcontainer=helper.makeNode({
+tag: "div",
+attr: [{
+key: "class",
+value: "header-edge"
+}]
+});
+varstate={
+show: function(){
+header.appendChild(container);
+},
+hide: function(){
+header.removeChild(helper.e(".header-edge"));
+}
+};
+state[action]();
+};
+
 varrender=function(){
 varhtml=helper.e("html");
 varheader=helper.e(".header");
@@ -68,8 +88,9 @@ var header = (function(){
 
 // exposed methods
 return{
-init: init,
-render: render
+edge: edge,
+render: render,
+init: init
 };
 
 })();

js/init.js

@@ -44,6 +44,9 @@ keyboard.init();
 // bind tips
 tip.init();
 
+// render page title
+layout.init();
+
 // render header height padding
 header.init();
 

js/layout.js

@@ -0,0 +1,42 @@
+varlayout=(function(){
+
+varrender=function(){
+varhtml=helper.e("html");
+html.style.setProperty("--layout-width","calc("+helper.getObject({
+object: state.get(),
+path: "layout.width"
+})+"vw - var(--layout-width-gutter))");
+};
+
+varedge=function(action){
+varbody=helper.e("body");
+varcontainer=helper.makeNode({
+tag: "div",
+attr: [{
+key: "class",
+value: "container container-edge"
+}]
+});
+varstate={
+show: function(){
+body.appendChild(container);
+},
+hide: function(){
+body.removeChild(helper.e(".container-edge"));
+}
+};
+state[action]();
+};
+
+varinit=function(){
+render();
+};
+
+// exposed methods
+return{
+edge: edge,
+render: render,
+init: init
+};
+
+})();

js/state.js

@@ -88,7 +88,7 @@ var state = (function(){
 sort: "none"
 },
 layout: {
-width: "wide",
+width: 72,
 scrollPastEnd: true,
 title: "New Tab"
 },