I am writing a greasemonkey script to control the DOM, it queries the server and displays the result in a separate jquery dialog box. I want to add the following two functions to it:
- Provide a search box that acts like a simple browser search (i.e., it only scans the contents of the jquery dialog box and selects text).
- Provide a text field whose contents should be stored forever for future use of the user document, unless the user changes it specifically.
The problem I am facing is that I want to include both of them in the dialog area of the ui-dialog-buttonpane dialog, to the left of the close button, but I cannot figure out how to do this.
I know that I can use window.find () ( http://www.javascripter.net/faq/searchin.htm is used here) to enable the browser search function.
Can someone help me? Below is the code for my existing greasemonkey script:
// ==UserScript== // @name Query for each URL Asynchronously // @namespace SupportScript // @include * // @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js // @require https://ajax.googleapis.com/ajax/libs/jquery/ui/1.11.0/jquery-ui.min.js // @resource jqUI_CSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css // @grant GM_addStyle // @grant GM_getResourceText // @grant GM_getResourceURL // @run-at document-end // allow pasting // ==/UserScript== var snapshotResults = document.evaluate('//a[contains(@href,"http")]/@href', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); var windowWidth = $(window).width()-800; var windowHeight = $(window).height(); var zNode = document.createElement ('input'); zNode.setAttribute ('id', 'SSButton'); zNode.setAttribute( 'type', 'image' ); zNode.setAttribute( 'src', 'http://www.veryicon.com/icon/64/System/Longhorn%20R2/Back%20Button.png'); //zNode.setAttribute( 'src', 'https://dperkins.org/2013/2013-07-24.Icon.2.png'); //zNode.setAttribute( 'src','http://i1043.photobucket.com/albums/b433/suzuki800/Button-Info-icon.png'); document.body.appendChild (zNode); var batchSize = 10; var urlsToUpsert = []; var uniqueHostnameSet = new Set(); var uniqueURLArray = []; uniqueHostnameSet.add(window.location.hostname); var finalUrl = window.location.protocol + '//' + window.location.hostname; uniqueURLArray.push(finalUrl); for (var iterate = 0; iterate < snapshotResults.snapshotLength; iterate++) { var hrefContent = snapshotResults.snapshotItem(iterate).textContent; var regex = /http.*/; var href = regex.exec(hrefContent); var a = document.createElement('a'); a.href = href; if (!uniqueHostnameSet.has(a.hostname)) { uniqueHostnameSet.add(a.hostname); finalUrl = a.protocol + '//' + a.hostname; uniqueURLArray.push(finalUrl); } } var divMain = '<div id="SSOverlayDialog"></div>'; $('body').append(divMain); $.Coral = function (options) { $.extend(options, { url: "my URL", data: JSON.stringify(options.data), dataType: 'json', crossDomain: true, type: 'POST', contentType: 'application/json', processData: false, headers: { 'Content-Encoding': 'abc', 'X-Target': options.operation }, dataFilter: function(data, type) { return data || "{}"; } }); return $.ajax(options); }; $.GetOperation = function (options) { $.extend(options, { async: true, success: function(data) { handleData(data); }, operation: 'opeartion1' }); return $.Coral(options); }; $.UpsertOperation = function (options) { $.extend(options, { async: true, operation: 'Operation2' }); return $.Coral(options); }; for (var iterateUniqueURLArray=0; iterateUniqueURLArray<uniqueURLArray.length; iterateUniqueURLArray+=batchSize) { var urlList = uniqueURLArray.slice(iterateUniqueURLArray,iterateUniqueURLArray+batchSize); try { var listOfURLs = { storeUrlList: urlList }; var dataGetAttributes = {data: listOfURLs}; $.GetOperation(dataGetAttributes); } catch(e) { console.log(e); } } function handleData (data) { var div = '<div id="SSOverlayDialog">'; var response = JSON.stringify(data); var subString = ""; var startIndex = response.indexOf('{',1); var endIndex = response.lastIndexOf('}'); var responseText = response.substring(startIndex,endIndex); var subString = JSON.parse(responseText); $.each( subString, function( key, value ) { key = JSON.stringify(key); div+='<b><i><a style="color:#0645AD" href="'+key.substring(1,key.length-1)+'"><u>' + key.substring(1,key.length-1) + '</u></a></i></b><br><br>'; if(JSON.stringify(value)==='{}') { console.log("Value for URL "+key+" is null."); div+='<p>This URL does not exist with Mobius.<span style="color:red" class="urlNotPresent" id ="'+key.substring(1,key.length-1)+'"><u>Click Here</u></span> to submit to Mobius.</p>'; } $.each( value, function( ky, val ) { ky = JSON.stringify(ky); if (val==null) { div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val+'</i></p>'; } else{ val = JSON.stringify(val); div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val.substring(1,val.length-1)+'</i></p>'; }; }); div+='<br>'; }); div += '</div>'; $('#SSOverlayDialog').append(div); $(".urlNotPresent").off('click'); $(".urlNotPresent").one('click', urlNotPresentFn); $(".urlNotPresent").hover(pointerToClick, pointerToDefault); } var urlNotPresentFn = function() { var url = jQuery(this).attr("id"); if (urlsToUpsert.length == batchSize-1) { urlsToUpsert.push(url); var listOfURLs = { storeUrlList: urlsToUpsert }; var myOptions = {data: listOfURLs}; $.UpsertOperation(myOptions); urlsToUpsert.length = 0; } else { urlsToUpsert.push(url); }; console.log(urlsToUpsert); } var pointerToClick = function() { $(".urlNotPresent").css("cursor", "pointer"); } var pointerToDefault = function(){ $(".urlNotPresent").css("cursor", "default"); } $(window).bind('beforeunload', function() { if(urlsToUpsert.length>0) { var listOfURLs = { storeUrlList: urlsToUpsert }; var myOptions = {data: listOfURLs}; $.UpsertOperation(myOptions); urlsToUpsert.length = 0; }; return ; }); $('#SSOverlayDialog').dialog({ autoOpen: false, modal: false, title: 'Discovered URLs (press "Esc" button to close)', position: { at: 'right top' }, resizable: false, width: windowWidth, height: windowHeight, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, zIndex: 11111111, buttons: [ { text: 'Close', click: function () { $(this).dialog('close'); } } ] }); $("#SSButton").click(function() { ($("#SSOverlayDialog").dialog("isOpen") == false) ? $("#SSOverlayDialog").dialog("open") : $("#SSOverlayDialog").dialog("close") ; /* if ($("#SSOverlayDialog").dialog("isOpen") == false) { $("#SSOverlayDialog").dialog("open"), $('#SSButton').css({ 'transform': 'rotate(180deg)', 'transform': 'translate(-windowWidth)' }); } else{ $("#SSOverlayDialog").dialog("close"), $('#SSButton').css({ 'transform': 'initial' }); };*/ }); var jqUI_CssSrc = GM_getResourceText('jqUI_CSS'); jqUI_CssSrc = jqUI_CssSrc.replace(/\.ui-front \{[\s]*z-index:\s100\;[\s]*\}/g,".ui-front \{\n z-index: 20000000 \; \n\}"); GM_addStyle(jqUI_CssSrc); GM_addStyle ( multilineStr ( function () {/*! #SSButton { background: none repeat scroll 0% 0% ; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 22222222; width: 40px; height: 40px; } */} ) ); function multilineStr (multiLineStringFn) { var str = multiLineStringFn.toString (); str = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*! .replace (/\s*\*\/\s*\}\s*$/, '') // Strip */ } .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them. ; return str; }