[feature] adding youtube and name input for custom search to header options

Author: zombieFox

index.html

@@ -221,6 +221,10 @@ <h1 class="menu-header">Search</h1>
 <inputid="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="1">
 <labelfor="control-header-search-engine-duckduckgo"><spanclass="label-icon"></span>Duck Duck Go</label>
 </div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="1">
+<labelfor="control-header-search-engine-youtube"><spanclass="label-icon"></span>YouTube</label>
+</div>
 <divclass="radio-wrap form-indent-1">
 <inputid="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="1">
 <labelfor="control-header-search-engine-giphy"><spanclass="label-icon"></span>Giphy</label>
@@ -229,9 +233,15 @@ <h1 class="menu-header">Search</h1>
 <inputid="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
 <labelfor="control-header-search-engine-custom"><spanclass="label-icon"></span>Custom</label>
 </div>
+<divclass="input-wrap form-indent-2">
+<labelfor="control-header-search-engine-custom-name">Name</label>
+<inputid="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="1">
+</div>
 <divclass="input-wrap form-indent-2">
 <labelfor="control-header-search-engine-custom-url">URL</label>
 <inputid="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
+<pclass="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
+<pclass="input-helper small muted">nightTab would add the search term entered into the Search input at the end of the above URL</p>
 </div>
 </div>
 <divclass="menu-item">
@@ -258,8 +268,8 @@ <h1 class="menu-header">Horizontal Alignment</h1>
 <divclass="radio-wrap">
 <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>
+<pclass="input-helper small muted">Effects may not be visible if the Search box is set to grow to fill available space.</p>
 </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>

js/control.js

@@ -203,6 +203,15 @@ var control = (function(){
 dependents();
 search.render();
 }
+},{
+element: helper.e(".control-header-search-engine-youtube"),
+path: "header.search.engine.selected",
+type: "radio",
+func: function(){
+render();
+dependents();
+search.render();
+}
 },{
 element: helper.e(".control-header-search-engine-giphy"),
 path: "header.search.engine.selected",
@@ -221,6 +230,12 @@ var control = (function(){
 dependents();
 search.render();
 }
+},{
+element: helper.e(".control-header-search-engine-custom-name"),
+path: "header.search.engine.custom.name",
+func: function(){
+search.render();
+}
 },{
 element: helper.e(".control-header-search-engine-custom-url"),
 path: "header.search.engine.custom.url",
@@ -802,6 +817,7 @@ var control = (function(){
 }else{
 helper.removeClass(html,"is-header-search-grow");
 };
+helper.e(".control-header-search-engine-custom-name").value=state.get().header.search.engine.custom.name;
 helper.e(".control-header-search-engine-custom-url").value=state.get().header.search.engine.custom.url;
 };
 var_alignment=function(){
@@ -1021,9 +1037,13 @@ var control = (function(){
 helper.e(".control-header-search-engine-label").setAttribute("disabled","");
 };
 if(state.get().header.search.show&&state.get().header.search.engine.selected==="custom"){
+helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled");
+helper.e(".control-header-search-engine-custom-name").disabled=false;
 helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
 helper.e(".control-header-search-engine-custom-url").disabled=false;
 }else{
+helper.e("[for=control-header-search-engine-custom-name]").setAttribute("disabled","");
+helper.e(".control-header-search-engine-custom-name").disabled=true;
 helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled","");
 helper.e(".control-header-search-engine-custom-url").disabled=true;
 };

js/search.js

@@ -72,9 +72,7 @@ var search = (function(){
 }else{
 placeholder="Search";
 };
-if(state.get().header.search.engine.selected!="custom"){
-placeholder=placeholder+" "+state.get().header.search.engine[state.get().header.search.engine.selected].name;
-};
+placeholder=placeholder+" "+state.get().header.search.engine[state.get().header.search.engine.selected].name;
 searchInput.setAttribute("placeholder",placeholder);
 search.setAttribute("action",state.get().header.search.engine[state.get().header.search.engine.selected].url);
 };

js/state.js

@@ -38,12 +38,17 @@ var state = (function(){
 url: "https://duckduckgo.com/",
 name: "Duck Duck Go"
 },
+youtube: {
+url: "https://www.youtube.com/results?search_query=",
+name: "YouTube"
+},
 giphy: {
 url: "https://giphy.com/search/",
 name: "Giphy"
 },
 custom: {
-url: ""
+url: "",
+name: ""
 }
 }
 },

js/update.js

@@ -261,6 +261,15 @@ var update = (function(){
 data.state.header.search.engine.giphy.name="Giphy";
 data.version="2.17.0";
 };
+if(version.compare(data.version,"2.19.0")==-1){
+console.log("\t -- running update","2.19.0");
+data.state.header.search.engine.youtube={
+url: "https://www.youtube.com/results?search_query=",
+name: "YouTube"
+};
+data.state.header.search.engine.custom.name="";
+data.version="2.19.0";
+};
 };
 // if no update is needed
 // version bump

js/version.js

@@ -1,7 +1,7 @@
 varversion=(function(){
 
 // version is normally bumped when the state needs changing or any new functionality is added
-varcurrent="2.18.0";
+varcurrent="2.19.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");