├── jQueryScriptLoader.js ├── README.md └── TableThis.js /jQueryScriptLoader.js: -------------------------------------------------------------------------------- 1 | // change the scriptURL variable to add your own script file. This one links to our TableThat bookmarklet. 2 | 3 | var scriptURL = "https://scripts.shpg.org/TableThis.js"; 4 | 5 | 6 | if (window.jQuery) { 7 | loadScript(); 8 | 9 | } else { 10 | var jq = document.createElement('script'); 11 | jq.type = 'text/javascript'; 12 | jq.onload = function() { 13 | loadScript(); 14 | } 15 | jq.src = '//code.jquery.com/jquery-2.1.3.js'; 16 | document.getElementsByTagName('head')[0].appendChild(jq); 17 | } 18 | 19 | 20 | function loadScript() { 21 | 22 | //add new script file to the DOM 23 | 24 | var A = document.createElement('script'); 25 | A.type = 'text/javascript'; 26 | A.onload = function() { 27 | } 28 | A.src = scriptURL; 29 | document.getElementsByTagName('head')[0].appendChild(A); 30 | 31 | } 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | **ShareProgress Bookmarklet Generator** 3 | 4 | 5 | jQueryScriptLoader.js will load external scripts like jQuery and your own JavaScripts on a web page. This will allow you to create code that is longer than 2000 characters. To add your own external script file, just edit the scriptURL variable to your file's location. 6 | 7 | Note: If you want users to use your bookmarklet while on secure sites (ones that start with https://), you’ll need to host your script on a server with an SSL-certificate. 8 | 9 | Copy & paste the jQueryScriptLoader.js code to the ShareProgress Bookmarklet Generator: http://www.shareprogress.org/bookmarklet/ to generate your bookmarklet link. 10 | 11 | **Example Bookmarklet: TableThis** 12 | 13 | Our TableThis.js bookmarklet is an example of a bookmarklet that will help you with downloading the raw data from a table you find on a webpage and save it as a CSV file. 14 | 15 | When your cursor hovers over a table it notifies the user to click on the table to download it. 16 | 17 | The TableThis bookmarklet will handle UTF-16 characters, images, inner tables, commas, varying number of columns in each row, etc. So that your data will come out properly. Let us know if there are cases when it isn't. 18 | 19 | Visit our test HTML Table http://www.shareprogress.org/bookmarklet/htmltabletest/ to try it out. 20 | 21 | Fork this repo and show us what kinds of bookmarklets you create. 22 | -------------------------------------------------------------------------------- /TableThis.js: -------------------------------------------------------------------------------- 1 | var $$; 2 | 3 | // Define array forEach and trim for backwards compatibility 4 | if (!Array.prototype.forEach) { 5 | Array.prototype.forEach = function(fun) { 6 | var len = this.length; 7 | if (typeof fun !== "function") { throw new TypeError(); } 8 | 9 | var thisp = arguments[1]; 10 | for (var i = 0; i < len; i++) { 11 | if (i in this) { fun.call(thisp, this[i], i, this); } 12 | } 13 | }; 14 | } 15 | if(typeof String.prototype.trim !== 'function') { 16 | String.prototype.trim = function() { 17 | return this.replace(/^\s+|\s+$/g, ''); 18 | } 19 | } 20 | 21 | function init() { 22 | $$ = jQuery; 23 | $$('table').mouseenter( function() { 24 | //set position, height, width, color of a new div.table-overlay to match the table that is hovered over. Set cursor as pointer. 25 | var pos = $$(this).offset(); 26 | var width = $$(this).width(); 27 | var height= $$(this).height(); 28 | $$(this).css("cursor","pointer"); 29 | 30 | var tableOverlay = $$("
").addClass('table-overlay'); 31 | tableOverlay.offset(pos).width(width).height(height); 32 | tableOverlay.css({"position": "absolute", "background": "#000","background": "rgba(0,0,0,0.4)", "z-index":100000, "pointer-events": "none", "cursor": "pointer","display": "table"}); 33 | //add div for tableText and style 34 | 35 | var tableText = $$("
").addClass('table-text'); 36 | 37 | tableText.text('Click to download table as CSV file').css({"color": "white", "pointer-events": "none","display": "table-cell", "text-align": "center", "vertical-align": "middle", "font-size": "26px", "font-family": "Arial", "font-weight": "800"}); 38 | //append the styled div.table-text to the table-lay then add div.table-overlay to the body. 39 | tableOverlay = tableOverlay.append(tableText); 40 | $$('body').append(tableOverlay); 41 | }); 42 | 43 | $$('table').mouseleave( function() { 44 | //when mouse leaves the table, hide the div.table-overlay element. 45 | $$('div.table-overlay').remove(); 46 | }); 47 | 48 | $$('table').click( function() { 49 | // when table is clicked, start processing the data in table to be downloaded 50 | var table = $$(this); 51 | tableData(table); 52 | }) 53 | } 54 | 55 | function csvDownload(str, utf) { 56 | // download table as CSV file // 57 | var a = document.createElement('a'); 58 | if (utf) { 59 | // if UTF == true download table as UTF-16 charset CSV file, for Excel // 60 | a.href = 'data:text/csv;charset=utf-16,' + str; 61 | } else { 62 | a.href = 'data:text/csv,' + str; 63 | } 64 | a.target = '_blank'; 65 | a.download = "tabledownload.csv"; 66 | document.body.appendChild(a); 67 | a.click(); 68 | } 69 | 70 | // check whether the table contains UTF-16 characters and determine what type of file should be downloaded 71 | function utf16Checker(str) { 72 | var re = /%u\d/; 73 | var string = escape(str); 74 | var res = string.search(re); 75 | return (res !== -1); 76 | } 77 | 78 | //converting data in table into CSV-friendly format 79 | function tableData(table) { 80 | var tr = table.find('> tr, > tbody > tr'); 81 | var tableString = ""; 82 | 83 | var tableData = $$.map(tr, function(tr) { 84 | var row = [$$.map($$(tr).children(), function(td) { 85 | return $$(td).text(); 86 | })]; 87 | return row; 88 | }); 89 | 90 | tableData.forEach(function(entry) { 91 | entry.forEach(function(i) { 92 | //for each cell's content escape spaces, double quotes and breaks 93 | var re = new RegExp(" ", "g"), 94 | rdq = new RegExp('"', "g"), 95 | rlb = new RegExp("\n","g"); 96 | i = i.trim(); 97 | i = i.replace(re, "%20"); 98 | i = i.replace(rdq, '\"'); 99 | i = i.replace(rlb,'%0D'); 100 | //add quotes around entire cell so that commas won't split the cell 101 | tableString += '"'+ i +'",'; 102 | }) 103 | //remove the last comma in a row so that there isn't an extra column and add a line break 104 | tableString = tableString.substring(0, tableString.length - 1); 105 | tableString += "%0A"; 106 | }); 107 | 108 | if (utf16Checker(tableString)) { 109 | csvDownload(tableString, true); 110 | alert("NOTE: Because this table contains special characters, the data has been downloaded in UTF-16 format. \n\nThis may cause compatibility issues with some spreadsheet programs."); 111 | } else { 112 | csvDownload(tableString, false); 113 | } 114 | } 115 | 116 | // Initialize mouse action handlers 117 | init(); --------------------------------------------------------------------------------