bdrathburn / TeslaForumPersonalBlocklist

2 stars 1 forks source link

Feature: Add Simple Google Search #4

Closed Jeffrey-R closed 8 years ago

Jeffrey-R commented 8 years ago

Replace complicated Google Search w/ simple form w/ Advanced Search Options:

as_q => Query String to search for as_sitesearch => Site to constrain search to (tesla.com/forum/forums)

Jeffrey-R commented 8 years ago

Here is my first draft:

(function (){
// added JeffreyR v.1.0.3
// closure function to add simple Google Search
    var Google_Search   = document.createElement('div');
    var gs  =   '<form accept-charset="utf-8" target="_search" action="https://www.google.com/search">';
        gs  +=  '<input name="as_sitesearch" type="hidden" value="tesla.com/forum/forums">';
        gs  +=  '<input name="as_q" type="text" value="" placeholder="Enter text to find" style="width: auto; margin-top: 0.2em; margin-bottom: 0.3em; margin-left: 2px;">';
        gs  +=  '<input type="submit" value="Search" class="btn-primary" title="Google Custom Site Search for tesla.com Forums">';
        gs  +=  '</form>';

    Google_Search.innerHTML = gs;

    var OP_Right    = document.getElementsByClassName('right-column panel-panel sidebar')[0];
    if(OP_Right != null) { 
        OP_Right.firstElementChild.appendChild(Google_Search);
    }

    var Posts_Right = document.getElementById('second-header');
    if(Posts_Right != null) {
        if(Posts_Right.firstElementChild.firstElementChild.className == "grid-6") {
            Google_Search.style.width   = "300px;";
            Google_Search.style.float   = "right";
            Posts_Right.firstElementChild.firstElementChild.appendChild(Google_Search);
        }
    }

})();

The form is the same as my example search.html, but I am re-using Tesla's CSS except for search field width and white-space.

Posts: image

image

Threads: image

(if too narrow they go away) image

Jeffrey-R commented 8 years ago

Here's a version that does not disappear:

(function (){
// added JeffreyR v.1.0.3
// closure function to add simple Google Search
    var Google_Search   = document.createElement('div');
    var gs  =   '<form accept-charset="utf-8" target="_search" action="https://www.google.com/search">';
        gs  +=  '<input name="as_sitesearch" type="hidden" value="tesla.com/forum/forums">';
        gs  +=  '<input name="as_q" type="text" value="" placeholder="Enter text to find" style="width: auto; margin-top: 0.2em; margin-bottom: 0.3em; margin-left: 2px;">';
        gs  +=  '<input type="submit" value="Search" class="btn-primary" title="Google Custom Site Search for tesla.com Forums">';
        gs  +=  '</form>';

    Google_Search.innerHTML = gs;
    Google_Search.style.float   = "right";

    var OP_Right = document.getElementById('second_header');
    if(OP_Right != null) { 
        OP_Right.firstElementChild.appendChild(Google_Search);
    }

    var Posts_Right = document.getElementById('second-header');
    if(Posts_Right != null) {
        if(Posts_Right.firstElementChild.firstElementChild.className == "grid-6") {
            Google_Search.style.width   = "300px;";
            Posts_Right.firstElementChild.firstElementChild.appendChild(Google_Search);
        }
    }
})();

Posts: image

image

Threads: image

image

I tried using the "system_messages" DIV (area showing View|Edit) but it gets covered by the post title. That may be our best bet if we can figure out how to keep it on top.

bdrathburn commented 8 years ago

Added to V 1.0.3 and published. It works well enough to incorporate for now, we can always polish it up later if needed. Thanks.