Revamp options and changelog page

andryou · Jun 23, 2016 · 0073a07 · 0073a07 · Asakapaaaa · Mar 8, 2022
1 parent f5596b6
commit 0073a07
Show file tree

Hide file tree

Showing 13 changed files with 708 additions and 350 deletions.
diff --git a/css/bootstrap-theme.min.css b/css/bootstrap-theme.min.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/options.css b/css/options.css
@@ -1,31 +1,16 @@
-body { color: #000; margin: 20px; font-family: Arial, Sans-Serif; background-color: #fff; }
-#header { margin: 0 auto; width: 100%; text-align: center; }
-#main { border: 1px solid #ccc; background-color: #fafafa; width: 700px; padding: 10px; margin: 0 auto; font-size: 12px; text-align: center; }
-h1 { margin: 0; }
+body { padding: 25px 0; }
+.tab { display:none; }
+.tab.active { display:block; }
+.table { margin-bottom: 0px !important; }
+h3 { margin: 0px !important; }
 #title, .i18_support { color: green; font-size: 30px; font-weight: bold; }
-.i18_support { color: #000; font-size: 18px; }
 #title:hover { color: blue; }
-table { width: 100%; } 
-td { vertical-align: top; color: #000; font-size: 12px; border-top: 1px solid #eee; padding: 3px; }
-tr.first td, td#t_table, td.first { border-top: none; }
-tr.bottom td { border-bottom: 1px solid #eee; }
-td.bottom { border-bottom: none !important; }
-td.rowtitle { width: 180px; }
-label { vertical-align: top; }
-i { font-size: 11px; color: #000; }
-a { color: blue; }
-.list, textarea { width: 300px; max-height: 300px; overflow-y: auto; border: 1px solid #ccc; background-color: #eee; padding: 5px; }
-textarea { min-height: 100px; font-family: Arial, Sans-Serif; }
-.listentry { clear: both; }
-.listentry:hover { background-color: #fff; }
-.clear { clear: both; }
+.i18_support { color: #000; font-size: 18px; }
+#message { color: #000; margin: 5px; position: fixed; top: 0; padding: 5px; font-weight: bold; }
+.sshidden, #message { display: none; }
+.listentry, .clear { clear: both; }
+.listentry { border-bottom: 1px solid #eee; padding: 2px; }
+.listentry:hover { background-color: #f5f5f5; }
 .right { float: right; }
-.entryoptions { float: right; font-size: 10px; }
-a { text-decoration: underline }
-a:hover { text-decoration: none }
-#message { display: none; color: #000; margin-top: 5px; position: fixed; top: 0; border: 1px solid black; padding: 5px; background-color: #fff; font-weight: bold; }
-#listMsg { display: none; color: #000; margin-left: 5px; font-weight: bold; }
-.section { font-weight: bold; color: #fff; background-color: black; }
-.hide { display: none; }
-#bulk textarea { width: 250px; height: 150px; }
-#bulk { text-align: left; padding-left: 15px; }
+.entryoptions { float: right; font-size: 11px; }
+.list, textarea { min-height: 300px !important; max-height: 300px; overflow-y: auto; }
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/fonts/glyphicons-halflings-regular.woff2 b/fonts/glyphicons-halflings-regular.woff2
diff --git a/html/options.html b/html/options.html
diff --git a/html/updated.html b/html/updated.html
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/js/jquery.js b/js/jquery.js
diff --git a/js/options.js b/js/options.js
@@ -10,6 +10,8 @@ var bkg = chrome.extension.getBackgroundPage();
 var settingnames = [];
 var syncstatus;
 document.addEventListener('DOMContentLoaded', function () {
+	initTabs();
+	$('#sidebar').stickyScroll({ container: '.container' });
 	loadOptions();
 	$(".save").click(saveOptions);
 	$("#domainsort").click(domainsort);
@@ -23,14 +25,23 @@ document.addEventListener('DOMContentLoaded', function () {
 	$("#importsettings").click(settingsImport);
 	$("#settingsall").click(settingsall);
 	$(".savechange").change(saveOptions);
-	$(".close").click(closeOptions);
+	$(".closepage").click(closeOptions);
 	$("#syncimport").click(forceSyncImport);
 	$("#syncexport").click(forceSyncExport);
+	$("#savetxt").click(downloadtxt);
 	$("#hotkeyspage").click(function() {
 		chrome.tabs.create({url: 'chrome://extensions/?id=footer-section'});
 	});
 	syncstatus = localStorage['syncenable'];
 });
+function initTabs() {
+	$('.list-group a').on('click', function(e)  {
+		var currentAttrValue = $(this).attr('href');
+		$('.tab-content ' + currentAttrValue).show().siblings().hide();
+		$(this).addClass('active').siblings().removeClass('active');
+		e.preventDefault();
+	});
+}
 function forceSyncExport() {
 	if (confirm('Do you want to sync your current settings to your Google Account?\r\nNote: please do not press this frequently; there is a limit of 10 per minute and 1,000 per hour.')) {
 		if (bkg.freshSync(0, true) == 'true') {
@@ -280,6 +291,17 @@ function settingsImport() {
 		notification('Error importing the following settings (empty value and/or invalid setting name): '+error.slice(0, -2));
 	}
 }
+function downloadtxt() {
+	var textToWrite = $("#settingsexport").val();
+	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
+	var fileNameToSaveAs = "scriptsafe-settings-"+new Date().toJSON()+".txt";
+	var downloadLink = document.createElement("a");
+	downloadLink.download = fileNameToSaveAs;
+	downloadLink.innerHTML = "Download File";
+	downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
+	downloadLink.click();
+	downloadLink.remove();
+}
 function updateExport() {
 	$("#settingsexport").val("");
 	for (var i in localStorage) {
@@ -355,6 +377,9 @@ function hidebulk() {
 function bulk(type) {
 	var error = false;
 	hidebulk();
+	$('html, body').animate({
+        scrollTop: $(document).height()
+    }, 'slow');
 	if (!$("#bulk").is(":visible")) $("#bulk").slideDown("fast");
 	$("#bulk textarea").focus();
 	if (type == '0') {
@@ -409,7 +434,7 @@ function listUpdate() {
 	var whiteList = JSON.parse(localStorage['whiteList']);
 	var blackList = JSON.parse(localStorage['blackList']);
 	var whitelistCompiled = '';
-	if (whiteList.length==0) whitelistCompiled = '[none]';
+	if (whiteList.length==0) whitelistCompiled = '[currently empty]';
 	else {
 		if (localStorage['domainsort'] == 'true') whiteList = bkg.domainSort(whiteList);
 		else whiteList.sort();
@@ -419,7 +444,7 @@ function listUpdate() {
 		}
 	}
 	var blacklistCompiled = '';
-	if (blackList.length==0) blacklistCompiled = '[none]';
+	if (blackList.length==0) blacklistCompiled = '[currently empty]';
 	else {
 		if (localStorage['domainsort'] == 'true') blackList = bkg.domainSort(blackList);
 		else blackList.sort();
@@ -447,4 +472,6 @@ function listclear(type) {
 		}
 	}
 	return false;
-}
+}
+
+!function(t){t.fn.stickyScroll=function(o){var e={init:function(o){function e(){return t(document).height()-i.container.offset().top-i.container.attr("offsetHeight")}function s(){return i.container.offset().top}function n(o){return t(o).attr("offsetHeight")}var i;return"auto"!==o.mode&&"manual"!==o.mode&&(o.container&&(o.mode="auto"),o.bottomBoundary&&(o.mode="manual")),i=t.extend({mode:"auto",container:t("body"),topBoundary:null,bottomBoundary:null},o),i.container=t(i.container),i.container.length?("auto"===i.mode&&(i.topBoundary=s(),i.bottomBoundary=e()),this.each(function(o){var c=t(this),a=t(window),r=Date.now()+o,l=n(c);c.data("sticky-id",r),a.bind("scroll.stickyscroll-"+r,function(){var o=t(document).scrollTop(),e=t(document).height()-o-l;e<=i.bottomBoundary?c.offset({top:t(document).height()-i.bottomBoundary-l}).removeClass("sticky-active").removeClass("sticky-inactive").addClass("sticky-stopped"):o>i.topBoundary?c.offset({top:t(window).scrollTop()}).removeClass("sticky-stopped").removeClass("sticky-inactive").addClass("sticky-active"):o<i.topBoundary&&c.css({position:"",top:"",bottom:""}).removeClass("sticky-stopped").removeClass("sticky-active").addClass("sticky-inactive")}),a.bind("resize.stickyscroll-"+r,function(){"auto"===i.mode&&(i.topBoundary=s(),i.bottomBoundary=e()),l=n(c),t(this).scroll()}),c.addClass("sticky-processed"),a.scroll()})):void(console&&console.log("StickyScroll: the element "+o.container+" does not exist, we're throwing in the towel"))},reset:function(){return this.each(function(){var o=t(this),e=o.data("sticky-id");o.css({position:"",top:"",bottom:""}).removeClass("sticky-stopped").removeClass("sticky-active").removeClass("sticky-inactive").removeClass("sticky-processed"),t(window).unbind(".stickyscroll-"+e)})}};return e[o]?e[o].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof o&&o?void(console&&console.log("Method"+o+" does not exist on jQuery.stickyScroll")):e.init.apply(this,arguments)}}(jQuery);