AMT Searchbar

A Simple Mturk/Greasyfork/MTG search bar

// ==UserScript==
// @name         AMT Searchbar
// @namespace    http://i.imgur.com/UNrCfvr.gif
// @version      1.01
// @description  A Simple Mturk/Greasyfork/MTG search bar
// @author       Ethraiel
// @contributor  R.Daneel
// @include      *.mturkgrind.*
// @include      *.reddit.*
// @include      *.mturk.*
// @require      https://code.jquery.com/jquery-3.0.0-alpha1.min.js
// ==/UserScript==
//press backtick [`] to toggle the searchbar
var theme_no = "0";//***0******1*******2******3*******4************5*******the names of the themes are below their respective numbers because im lazy :P
var theme_name = ["Custom","Dark","Frost","Mint","Ole'Greg","Dark_plain","",""];//set the theme_no to set the theme...
var search = "";//This is a default value for the searchbar, i.e. "survey" will make "survey" appear when you bring up the searchbar.
var minpay = ("0.00");//Same as above, but for the minimum pay field.
var qual = "false";//Set to "true" to automatically check the box "Qualled For" everytime you bring up the searchbar. *note any string other than "true" will return false.
var master = "false";//Same as above but for "Masters Only"

if ( localStorage.getItem("AMTSBtheme") ) {
    theme_no = localStorage.getItem("AMTSBtheme");
}

if (theme_no == "0"){
var panel_bg = "white";//CUSTOM********[theme_no = 0]*************CUSTOM
var text_color = "black";//sets the text color*note the above var sets the panel background color
var border_color = "grey";//the color of all the borders
var text_bg = "white";//sets the textfield background color
var button_bg = "white";//sets the button background color
var button_hover ="white";//sets the color of the button when hovered over
var button_hover_text = "blue";//sets the color of the text when the button is hovered over
var greyed_out_payfield_bg = "grey";//sets the color of the minpay field when disabled
}

else if (theme_no == 1){//Dark**********[ theme_no = 1 ]****************Dark
var panel_bg = "-webkit-linear-gradient(top,rgb(67, 66, 66) 0,rgb(32, 32, 32) 100%) repeat-y; background: -moz-linear-gradient(top,rgb(67, 66, 66) 0,rgb(32, 32, 32) 100%) repeat-y";
var text_bg = "-webkit-linear-gradient(top,rgb(56, 56, 56) 0,rgb(25, 25, 25) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(56, 56, 56) 0,rgb(25, 25, 25) 100%) repeat-x";
var button_bg = "-webkit-linear-gradient(top,rgb(84, 83, 83) 0,rgb(48, 48, 48) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(84, 83, 83) 0,rgb(48, 48, 48) 100%) repeat-x";
var border_color = "rgb(15, 15, 22)";
var text_color = "rgb(12, 144, 195)";
var button_hover ="-webkit-linear-gradient(top,rgb(85, 91, 101) 0,rgb(48, 48, 48) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(85, 91, 101) 0,rgb(48, 48, 48) 100%) repeat-x";
var button_hover_text = "rgb(30, 165, 220)";
var greyed_out_payfield_bg = "rgb(60, 45, 45)";
}
else if (theme_no == 2){//Frost**********[ theme_no = 2 ]****************Frost
var panel_bg = "-webkit-linear-gradient(top,rgb(225, 244, 251) 0,rgb(121, 190, 255) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(225, 244, 251) 0,rgb(121, 190, 255) 100%) repeat-x";
var text_bg = "-webkit-linear-gradient(top,rgb(241, 241, 241) 0,rgb(198, 216, 232) 100%) repeat-x !important; background: -moz-linear-gradient(top,rgb(241, 241, 241) 0,rgb(198, 216, 232) 100%) repeat-x !important";
var button_bg = "-webkit-linear-gradient(top,rgba(151, 182, 250, 0.97) 0,rgb(51, 95, 162) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(151, 182, 250, 0.97) 0,rgb(51, 95, 162) 100%) repeat-x";
var border_color = "rgb(70, 110, 180)";
var text_color = "rgb(0, 57, 79)";
var button_hover ="-webkit-linear-gradient(top,rgba(175, 195, 255, 0.97) 0,rgb(70, 110, 180) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(175, 195, 255, 0.97) 0,rgb(70, 110, 180) 100%) repeat-x";
var button_hover_text = "rgb(1, 69, 85)";
var greyed_out_payfield_bg = "rgb(210, 145, 145)";
}
else if (theme_no == 3){//Mint**********[ theme_no = 3 ]****************Mint
var panel_bg = "-webkit-linear-gradient(top,rgb(176, 251, 170) 0,rgb(142, 255, 151) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(176, 251, 170) 0,rgb(142, 255, 151) 100%) repeat-x";
var text_bg = "-webkit-linear-gradient(top,rgba(233, 249, 235, 0.97) 0,rgb(245, 179, 234) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(233, 249, 235, 0.97) 0,rgb(245, 179, 234) 100%) repeat-x";
var button_bg = "-webkit-linear-gradient(top,rgba(255, 200, 236, 0.97) 0,rgb(255, 108, 231) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(255, 200, 236, 0.97) 0,rgb(255, 108, 231) 100%) repeat-x";
var border_color = "rgb(6, 170, 53)";
var text_color = "rgb(116, 27, 81)";
var button_hover ="-webkit-linear-gradient(top,rgba(255, 200, 236, 0.97) 0,rgb(255, 125, 255) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(255, 200, 236, 0.97) 0,rgb(255, 125, 255) 100%) repeat-x";
var button_hover_text = "rgb(196, 47, 138)";
var greyed_out_payfield_bg = "rgb(150, 190, 75)";
}
else if (theme_no == 4){//Ole'Gregg**********[ theme_no = 4 ]****************Ole'Gregg
var panel_bg = "-webkit-linear-gradient(top,rgb(236, 69, 236) 0,rgb(159, 37, 119) 100%) repeat-x; background: -moz-linear-gradient(top,rgb(236, 69, 236) 0,rgb(159, 37, 119) 100%) repeat-x";
var text_bg = "-webkit-linear-gradient(top,rgba(158, 230, 79, 0.97) 0,rgb(143, 194, 141) 100%); background: -moz-linear-gradient(top,rgba(158, 230, 79, 0.97) 0,rgb(143, 194, 141) 100%)";
var button_bg = "-webkit-linear-gradient(top,rgba(130, 191, 64, 0.97) 0,rgb(10, 148, 4) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(130, 191, 64, 0.97) 0,rgb(10, 148, 4) 100%) repeat-x";
var border_color = "rgb(48, 94, 48)";
var text_color = "rgb(75, 25, 75)";
var button_hover ="-webkit-linear-gradient(top,rgba(145, 210, 79, 0.97) 0,rgb(27, 159, 10) 100%) repeat-x; background: -moz-linear-gradient(top,rgba(145, 210, 79, 0.97) 0,rgb(27, 159, 10) 100%) repeat-x";
var button_hover_text = "rgb(55, 99, 55)";
var greyed_out_payfield_bg = "rgb(100, 55, 100)";
}
else if (theme_no == 5){//Dark_plain**********[ theme_no = 5 ]****************Dark_plain
var panel_bg = "rgb(45, 45, 45)";
var text_bg = "rgb(30, 30, 30)";
var button_bg = "rgb(40, 40, 40)";
var border_color = "rgb(15, 15, 22)";
var text_color = "rgb(12, 144, 195)";
var button_hover ="rgb(45, 45, 55)";
var button_hover_text = "rgb(30, 165, 220)";
var greyed_out_payfield_bg = "rgb(60, 45, 45)";
}
//note you can also add new custom themes here... simply add another "else if (theme_no == [your theme number]){" then copy and paste your custom theme under it and dont forget to add the closing "}"

var textfield_focus =  "";//".eJtextfields:focus {box-shadow: 0px 0px 7px 1.5px rgba(15, 15, 20, 0.75);}";(this is a style that i'd like to have on some themes and not on others... just replace "" with what comes after //)

//you can play with some of the finer details below, note that any changes you make will apply to all themes
var theme =`<style id= "Theme_No.`+theme_no+`" name="`+theme_name[theme_no]+`">
.eJmain {
    position: relative;
    color: `+text_color+`;
    box-sizing: initial;
    border-radius: 2em;
    font: bold 15px Arial;
    margin: 0;
    outline: none !important;
    padding: 2px !important;
    min-height: 0px;
    text-align: left;

}

.eJpanel {
    height: 85px;
    width: 440px;
    background: `+panel_bg+`;
    border: 2.5px solid `+border_color+`;
    box-shadow: 5px 7px 5px 3px rgba(15, 15, 20, 0.72);
    transition-property: height;
    transition-duration: 0.65s;
}

.eJtop_row {
    width: 500px;
    position: relative;
    top: 20px;
    left: 7.5px;
}

.eJtextfields {
    height: 18px;
    background: `+text_bg+` !important;
    border: .5px solid `+border_color+`;
    box-shadow: inset 0px 4px 6px -2px rgba(15, 15, 20, 0.8);
    font-stretch: normal;
    transition-property: border, background, box-shadow;
    transition-duration: 1s;
}
`+textfield_focus+`
.eJalign_right {
    text-align: right;
}

.eJbutton {
    height: 18px;
    width: 75px;
    background: `+button_bg+`;
    border: 0px solid `+border_color+`;
    box-shadow: 1.5px 1.5px 2px 1px rgba(15, 15, 20, 0.75);
    text-align: center;
}

.eJbutton:hover {
    box-shadow: 1.5px 2px 2px 1px rgba(15, 15, 20, 0.55);
    background: `+button_hover+`;
    color: `+button_hover_text+`;
    cursor:pointer;
}

.eJbutton:active {
    box-shadow: 1px 1px 0px 0px rgba(15, 15, 20, 0.55);
}

.eJtoggle_button {
    height: 15px;
    width: 15px;
}

.eJsecond_row {
    position: relative;
    top: 15px;
    left: 215px;
}

.eJanimate {
    height: 165px;
}

.eJsmallfont {
    font: bold 12px Arial;
    position: relative;
    top: 25px;
    left: 20px;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1s;
}

.eJcheckbox {
    height: 14px;
    width: 14px;
    margin-left 15px;
    vertical-align: middle;
}

.eJdrop_menu {
    height: 18px;
    width: 100px;
    position: relative;
    top: 12.5px;
    left: 235px;
    opacity: 1;
    transition-property: opacity, display;
    transition-duration: 1s;
}
.eJdisable {
    background: `+greyed_out_payfield_bg+` !important;
    box-shadow: 0px 0px 0px 0px rgba(1, 1, 1, 0.0);
    border: none;
}

.eJhidden_menu {
    opacity: 0;
}

</style>`;


var AMT_Searchbar =/*div structure-you should only have to edit the theme dropdown menu if you want to add a theme to that menu*/`
<div id="eJAMTcapsule" class="cap" style="position: fixed; top: 24%; left: 31%; z-index: 3; display: none;">

     <div id="eJmain_panel" class="eJmain eJpanel">

        <div id="eJhomebar" class="eJtop_row">

            <input type="text" id="eJsearch_field" class="eJmain eJtextfields" size="30">
            <input type="text" id="eJpay_field" class="eJmain eJtextfields eJalign_right" size="3">
            <button type="button" id="eJsearch_button" class="eJmain eJbutton">Search</button>

                <div style="height: 1px;">
                    <select name="eJdropdown" id="eJgreasy_drop" class="eJmain eJtextfields eJdrop_menu eJhidden_menu">
                    <option value="">Relevance</option>
                    <option value="&sort=daily_installs">Daily Installs</option>
                    <option value="&sort=total_installs">Total Installs</option>
                    <option value="&sort=ratings">Ratings</option>
                    <option value="&sort=created">Created Date</option>
                    <option value="&sort=updated">Updated Date</option>
                    <option value="&sort=name">Name</option>
                    </select>
                </div>

        </div></br>

            <button type="button" id="eJanimate_button" class="eJmain eJbutton eJtoggle_button eJsecond_row">⇕</button>

        <div id="eJchecks" class="eJsmallfont eJhidden_menu">
            <input type="checkbox" id="eJqual_box" class="eJmain eJcheckbox" value="Qualed"> Qualified For
            <span style="display:inline-block; width: 180px;"></span>
            Search GreasyFork  <input type="checkbox" id="eJgreasy_box" class="eJmain eJcheckbox eJalign_right" value="urls"></br>
            <input type="checkbox" id="eJmaster_box" class="eJmain eJcheckbox" value="Masters"> Masters Only
            <span style="display:inline-block; width: 218px;"></span>
            Search MTG  <input type="checkbox" id="eJMTG_box" class="eJmain eJcheckbox eJalign_right" value="urls"></br></br>
            <button type="button" id="eJtheme_button" class="eJmain eJbutton eJtoggle_button"><img src="http://i.imgur.com/dvGS1s8.png"></button>
                    <select name="eJ1dropdown" id="eJtheme_drop" class="eJmain eJtextfields eJhidden_menu">
                    <option value="`+theme_no+`">`+theme_name[theme_no]+`</option>
                    <option value="0">`+theme_name[0]+`</option>
                    <option value="1">`+theme_name[1]+`</option>
                    <option value="2">`+theme_name[2]+`</option>
                    <option value="3">`+theme_name[3]+`</option>
                    <option value="4">`+theme_name[4]+`</option>
                    <option value="5">`+theme_name[5]+`</option>
                    </select>
        </div>

     </div>

</div>
;`;

$("head").append($(theme));
$("body").append($(AMT_Searchbar));
$("#eJgreasy_drop").prop("disabled", true);
$("#eJtheme_drop").prop("disabled", true);

var search1 = "";//Using the var "search" as a default would not work without this var. neither would using "" as a defualt clear the searchbar on toggle
var eJflag1 = -1;//flag used to control the dropdown of the hidden menu
var inject_search = "";//general var that will carry any of the URLs required for search

$.fn.extend({valid_num: function() {//to escape the minpay field of any invalid characters *Thanks R.Daneel*
    vn = this.val().replace(/[^\d\.]/g, '');
        return (vn.length > 0 && /\d/.test(vn)) ? vn : minpay;
}});

$.fn.extend({valid_srch: function() {//to make sure there are not just spaces typed into the searchbar (probably not needed, but i like it)
    vs = this.val();
        return (vs.trim().length > 0) ? vs : search;
}});

$.fn.extend({box_manager: function() {//this is important... it manages the url injection for "qualed" and "masters" as well as assigning the var "inject_search" with the proper URL later on
    cb = this.prop("checked");
    if ($(this).attr("id") === "eJqual_box"){
        return (cb === true) ? "qualifiedFor=on" : "";
    }
    else if ($(this).attr("id") === "eJmaster_box"){
        return (cb === true) ? "requiresMasterQual=on" : "";
    }
    else if ($(this).attr("id") === "eJgreasy_box"){
        return (cb === true) ? "https://greasyfork.org/en/scripts/search?q="+($("#eJsearch_field").valid_srch())+""+($("#eJgreasy_drop").val()) : "https://www.mturk.com/mturk/searchbar?selectedSearchType=hitgroups&searchWords="+$("#eJsearch_field").valid_srch()+"&minReward="+$("#eJpay_field").valid_num()+"&"+$("#eJqual_box").box_manager()+"&"+$("#eJmaster_box").box_manager();
    }
    else if ($(this).attr("id") === "eJMTG_box"){
        return (cb === true) ? "http://www.mturkgrind.com/search/7230196/?q="+($("#eJsearch_field").valid_srch())+"&o=date" : inject_search;
    }
}});

$(document).keydown(function(e){//toggle function--- press[`] (backtick) to toggle the searchbar *note this is also responsible for applying most of the default values
     if (e.which == 192) {
         search1 = search;
       if (qual == "true"){
           $("#eJqual_box").prop("checked", true);
       }
       if (master == "true"){
           $("#eJmaster_box").prop("checked", true);
       }
       if (window.getSelection().toString() !== ""){//this will paste whatever you have selected on the page into the searchbar when you press the toggle button (select a requester name in the forum, then toggle the searchbar and the name will already be in the searchbar)
           search1 = window.getSelection().toString();
       }
         $("#eJsearch_field").val(search1);
         $("#eJpay_field").prop("readonly") === true ? $("#eJpay_field").val("") : $("#eJpay_field").val(minpay);
         $("#eJAMTcapsule").toggle();
         (e.preventDefault());
         $("#eJsearch_field").focus();//this can be changed to ".select();" to select all the text in the searchfield as you toggle the searchbar
     }
});

$(".eJcheckbox").click(function(e){//this messy logic makes sure that, when you change which site you want to search, the proper things happen...i.e. disabling the minpay field, toggling the hidden dropmenu... 
    if ($(this).attr("id") === "eJgreasy_box") {//this manages the greasyfork checkbox and everything that happens when you click it
        if (eJflag1 == 1) {
            $(this).prop("checked") === true ? ($("#eJpay_field").addClass("eJdisable").val("").prop("readonly", true)) : ($("#eJpay_field").removeClass("eJdisable").val(minpay).prop("readonly", false));
            $("#eJgreasy_drop").prop("disabled") === true ? ($("#eJgreasy_drop").prop("disabled", false).toggleClass("eJhidden_menu")) : ($("#eJgreasy_drop").prop("disabled", true).toggleClass("eJhidden_menu"));
            $("#eJMTG_box").prop("checked", false);
        }
        else (e.preventDefault());
    }
    if ($(this).attr("id") === "eJMTG_box") {//this manages the MTG checkbox and everything that happens when you click it
        if (eJflag1 == 1) {
            $(this).prop("checked") === true ? ($("#eJpay_field").addClass("eJdisable").val("").prop("readonly", true)) : ($("#eJpay_field").removeClass("eJdisable").val(minpay).prop("readonly", false));
            $("#eJgreasy_drop").prop("disabled") === true ?  $("#eJgreasy_drop").prop("disabled", true) : ($("#eJgreasy_drop").prop("disabled", true).toggleClass("eJhidden_menu"));
            $("#eJgreasy_box").prop("checked", false);
        }
        else (e.preventDefault());
    }
});


$(".eJbutton").click(function(e){//this makes things happen when you click any button
    if ($(this).attr("id") === "eJsearch_button") {//this is the search button
        inject_search = $("#eJgreasy_box").box_manager();
        inject_search = $("#eJMTG_box").box_manager();
        $("#eJAMTcapsule").toggle();
        window.open(inject_search);
    }
    if ($(this).attr("id") === "eJtheme_button") {//this is the theme changing button, click once to bring up the drop menu and select your theme, click again to save your theme...*note the line directly beneath this one places the text in the search bar when you click the theme button, you can change this text to whatever you like.
        $("#eJtheme_drop").prop("disabled") === true ? $("#eJsearch_field").val("Press again to save your theme...") : $("#eJsearch_field").val("Please refresh the page");
        $("#eJtheme_drop").prop("disabled") === true ? $("#eJtheme_drop").toggleClass("eJhidden_menu").prop("disabled", false) : $("#eJtheme_drop").toggleClass("eJhidden_menu").prop("disabled", true);
        localStorage.AMTSBtheme = $("#eJtheme_drop").val();
    }
    if ($(this).attr("id") === "eJanimate_button") {//this is the hidden menu toggle button
        if (eJflag1 == -1) {
            $("#eJmain_panel").toggleClass("eJanimate");
            setTimeout(function(){$(".eJsmallfont").toggleClass("eJhidden_menu");}, 500);
            eJflag1 = (eJflag1)*-1;
        }
            else {
                $(".eJsmallfont").toggleClass("eJhidden_menu");
                setTimeout(function(){$("#eJmain_panel").toggleClass("eJanimate");}, 650);
                eJflag1 = (eJflag1)*-1;
        }
    }
});

$(".eJtextfields").keyup(function(e){//this makes things happen when you press enter in a searchfield
    if (e.which == 13) {
      inject_search = $("#eJgreasy_box").box_manager();
      inject_search = $("#eJMTG_box").box_manager();
      $("#eJAMTcapsule").toggle();
      window.open(inject_search);
    }
});