diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index a4bcbb9..ca1b506 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -1,3 +1,14 @@ +## Version 1.3 + +* Removed permission since activeTab permission + is sufficient for this extension + +* Set default grid size to 5 when installing extension + +* Added new option to toggle preview image visibility + +------------------------------ + ## Version 1.2: * Allow users to customize the default NxN grid size diff --git a/background/jigsaw_bg_common_functions.js b/background/jigsaw_bg_common_functions.js index 8a1f82a..74dd2c9 100644 --- a/background/jigsaw_bg_common_functions.js +++ b/background/jigsaw_bg_common_functions.js @@ -57,3 +57,45 @@ function loadLinkAndRunJigSaw(thisURL) { loadJigSaw(active_tab.id, thisURL); }); } + +function initializeOption(opt_name, opt_value) { + + console.log(opt_name + ": " + opt_value); + + let onGettingSuccess = function(result) { + if (browser.runtime.lastError) { + console.log(browser.runtime.lastError); + } + else { + if (Object.keys(result).length == 0) { + let onSetting = function() { + if (browser.runtime.lastError) { + console.log(browser.runtime.lastError); + } + } + console.log({[opt_name] : opt_value}); + let setting = browser.storage.local.set({ [opt_name] : opt_value }, onSetting); + } + } + } + + // Try to get an option; if it has not been set ever, + // then try setting the option in the onGettingSuccess function + let getting = browser.storage.local.get(opt_name, onGettingSuccess); +} + +function handleInstalled(details) { + + let options_list = {jigsaw_default_size: "5", + jigsaw_show_preview_image: true}; + + let option_keys = Object.keys(options_list); + + for (let opt=0; opt < option_keys.length; opt++) { + let opt_name = option_keys[opt]; + let opt_value = options_list[opt_name]; + initializeOption(opt_name, opt_value); + } +} + +browser.runtime.onInstalled.addListener(handleInstalled); diff --git a/content_scripts/jigsaw.js b/content_scripts/jigsaw.js index 78dc5b1..1fcdded 100644 --- a/content_scripts/jigsaw.js +++ b/content_scripts/jigsaw.js @@ -38,6 +38,7 @@ var JigSaw = { offset: 50, frameDiv: null, previewWidth: 100, + showPreviewImage: true, maxZIndex: 100, numBlink: 8, loading: false, @@ -162,8 +163,12 @@ var JigSaw = { previewImage.style.setProperty("height", Math.round(JigSaw.previewWidth * JigSaw.height/JigSaw.width) + "px"); previewImage.style.setProperty("top", JigSaw.offset + "px"); previewImage.style.setProperty("left", JigSaw.offset + "px"); + previewImage.style.setProperty("visibility", 'visible'); JigSaw.base_div.appendChild(previewImage); - + if (!JigSaw.showPreviewImage) { + previewImage.style.setProperty("visibility",'hidden'); + } + }, // Create a piece; scale it to fit the frameDiv if it is larger than the frameDiv @@ -293,6 +298,20 @@ var JigSaw = { } } return solved; + }, + + + toggle_preview_image: function() { + let jigsaw_preview_image = document.getElementById('jigsaw_previewImage'); + if (jigsaw_preview_image != undefined) { + JigSaw.showPreviewImage = !JigSaw.showPreviewImage; + if (jigsaw_preview_image.style.visibility == 'hidden') { + jigsaw_preview_image.style.visibility = 'visible'; + } + else if (jigsaw_preview_image.style.visibility == 'visible') { + jigsaw_preview_image.style.visibility = 'hidden'; + } + } } }; @@ -659,7 +678,7 @@ function jigsawize(request, sender, sendResponse) { return Promise.resolve({response: "Completed Loading JigSaw"}); } else { - console.log("Meassage not implemented: " + request.jigsaw_action); + console.log("Message not implemented: " + request.jigsaw_action); } } @@ -672,11 +691,13 @@ function getJigSawSizeAndLoad() { console.log(browser.runtime.lastError); } else { + console.log(result); let jigsaw_default_size = parseInt(result.jigsaw_default_size); + JigSaw.showPreviewImage = result.jigsaw_show_preview_image; loadJigSaw(jigsaw_default_size); } }; - let gettings = browser.storage.local.get("jigsaw_default_size", onGetting); + let gettings = browser.storage.local.get(["jigsaw_default_size", "jigsaw_show_preview_image"], onGetting); } function loadJigSaw(jigsaw_default_size) { @@ -695,10 +716,19 @@ function loadJigSaw(jigsaw_default_size) { jigsaw_base.setAttribute('class', 'jigsaw_base'); document.body.appendChild(jigsaw_base); + // Create a div to hold the controls + let jigsaw_controls = document.createElement('div'); + jigsaw_controls.setAttribute('id', 'jigsaw_controls'); + jigsaw_controls.setAttribute('class', 'jigsaw_controls'); + jigsaw_base.appendChild(jigsaw_controls); + + // Create SELECT option for jigsaw size // let jigsaw_select = document.createElement('select'); jigsaw_select.setAttribute('id', 'jigsaw_select'); + jigsaw_select.setAttribute('class', 'jigsaw_control_item'); + jigsaw_select.setAttribute('title', 'Select JigSaw Grid Size'); let selectedIdx = 0; let idx = 0; @@ -714,24 +744,38 @@ function loadJigSaw(jigsaw_default_size) { } jigsaw_select.selectedIndex = selectedIdx; - jigsaw_base.appendChild(jigsaw_select); + jigsaw_controls.appendChild(jigsaw_select); // Create text input for user to enter URL // let jigsaw_input = document.createElement('input'); jigsaw_input.setAttribute('id', 'jigsaw_url'); + jigsaw_input.setAttribute('class', 'jigsaw_control_item'); + jigsaw_input.setAttribute('title', 'Enter URL of Image'); jigsaw_input.setAttribute('type', 'text'); jigsaw_input.setAttribute('size', '100'); jigsaw_input.value = thisURL; - jigsaw_base.appendChild(jigsaw_input); + jigsaw_controls.appendChild(jigsaw_input); // Create button to enter/submit let jigsaw_submit = document.createElement('input'); jigsaw_submit.setAttribute('id', 'jigsaw_submit'); + jigsaw_submit.setAttribute('class', 'jigsaw_control_item'); + jigsaw_submit.setAttribute('title', 'Load Image URL and Create JigSaw Puzzle'); jigsaw_submit.setAttribute('type', 'submit'); jigsaw_submit.setAttribute('value', 'Load Image'); jigsaw_submit.addEventListener('click', JigSaw.init); - jigsaw_base.appendChild(jigsaw_submit); + jigsaw_controls.appendChild(jigsaw_submit); + + // Create button to toggle preview image visibility + let jigsaw_toggle_preview = document.createElement('input'); + jigsaw_toggle_preview.setAttribute('id', 'jigsaw_toggle_preview'); + jigsaw_toggle_preview.setAttribute('class', 'jigsaw_control_item'); + jigsaw_toggle_preview.setAttribute('title', 'Show/Hide JigSaw Image Preview'); + jigsaw_toggle_preview.setAttribute('type', 'submit'); + jigsaw_toggle_preview.setAttribute('value', 'Toggle Preview Image'); + jigsaw_toggle_preview.addEventListener('click', JigSaw.toggle_preview_image); + jigsaw_controls.appendChild(jigsaw_toggle_preview); console.log("Created basic elements. Now initializing the JigSaw puzzle"); } diff --git a/css/jigsaw.css b/css/jigsaw.css index 8de1ee6..4dec9a7 100644 --- a/css/jigsaw.css +++ b/css/jigsaw.css @@ -31,3 +31,19 @@ div.jigsaw_base position:fixed; } +div.jigsaw_controls +{ + font-size: 1em; + display: flex; + justify-content: flex-start; +} + +.jigsaw_control_item +{ + margin: 5px 5px 5px 5px; + padding: 5px 5px 5px 5px; +} + +input[type="text"] { + font-size: 1em; +} diff --git a/manifest.json b/manifest.json index 586e422..6c47fec 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "__MSG_extensionName__", - "version": "1.2", + "version": "1.3", "description": "__MSG_extensionDescription__", "homepage_url": "https://www.github.com/ushnisha/jigsaw/", @@ -21,7 +21,6 @@ }, "permissions": [ - "", "activeTab", "storage", "contextMenus" diff --git a/options/jigsaw_options.html b/options/jigsaw_options.html index cb58a60..3cdbdec 100644 --- a/options/jigsaw_options.html +++ b/options/jigsaw_options.html @@ -35,11 +35,13 @@
-

Select Jigsaw Size:

+

Select Jigsaw Options:

+
+ + +
diff --git a/options/jigsaw_options.js b/options/jigsaw_options.js index 8967ccf..c23e2f9 100644 --- a/options/jigsaw_options.js +++ b/options/jigsaw_options.js @@ -33,7 +33,8 @@ function saveOptions(e) { e.preventDefault(); let current_settings = { - jigsaw_default_size: document.getElementById("jigsaw_default_size").value + jigsaw_default_size: document.getElementById("jigsaw_default_size").value, + jigsaw_show_preview_image: document.getElementById("jigsaw_show_preview_image").checked }; console.log(current_settings); @@ -42,7 +43,7 @@ function saveOptions(e) { function restoreOptions() { - let options_list = ["jigsaw_default_size"]; + let options_list = ["jigsaw_default_size", "jigsaw_show_preview_image"]; for (let opt=0; opt < options_list.length; opt++) { @@ -58,7 +59,18 @@ function restoreOptions() { let opt_name = keys[k]; let elem_name = opt_name; if (opt_name == "jigsaw_default_size") { - document.getElementById(elem_name).value = result.jigsaw_default_size; + let idx = 0; + let selOpts = document.getElementById(elem_name); + for (let opt = 0; opt < selOpts.length; opt++) { + if (selOpts[opt].value == result.jigsaw_default_size) { + idx = opt; + break; + } + } + selOpts.selectedIndex = idx; + } + else if (opt_name == "jigsaw_show_preview_image") { + document.getElementById(elem_name).checked = result.jigsaw_show_preview_image; } } } @@ -70,3 +82,4 @@ function restoreOptions() { document.addEventListener("DOMContentLoaded", restoreOptions); document.getElementById("jigsaw_default_size").addEventListener("change", saveOptions); +document.getElementById("jigsaw_show_preview_image").addEventListener("change", saveOptions);