From 1bab9a80f3d3a2207380eca8bb1a652927906a91 Mon Sep 17 00:00:00 2001 From: Arun Kunchithapatham Date: Sat, 11 Apr 2020 02:29:22 -0500 Subject: [PATCH] Version 1.2: * Allow users to customize the default NxN grid size for the jigsaw puzzle * Bug fix in calculating the size of the jigsaw frame In some corner cases, frame size was too small or too large. * Updated copyright information --- README.md | 7 ++- RELEASE-NOTES.md | 11 ++++ background/jigsaw_bg_common_functions.js | 2 +- background/jigsaw_bg_context_menu.js | 2 +- content_scripts/jigsaw.js | 59 +++++++++++++------ css/jigsaw.css | 2 +- manifest.json | 8 ++- options/jigsaw_options.css | 48 ++++++++++++++++ options/jigsaw_options.html | 58 +++++++++++++++++++ options/jigsaw_options.js | 72 ++++++++++++++++++++++++ 10 files changed, 245 insertions(+), 24 deletions(-) create mode 100644 options/jigsaw_options.css create mode 100644 options/jigsaw_options.html create mode 100644 options/jigsaw_options.js diff --git a/README.md b/README.md index 26328d9..2cefe88 100644 --- a/README.md +++ b/README.md @@ -20,12 +20,15 @@ puzzle. * Useful visual indicator when a piece is placed in the correct location -* Ability to choose degree of difficulty (3x3 to 9x9 puzzle sizes) +* Ability to choose degree of difficulty (3x3 to 10x10 puzzle sizes) + +* Customize default degree of difficult via options page + ## License & Copyright: JigSaw is provided under AGPLv3 license. -Copyright (C) 2017-2019 Arun Kunchithapatham +Copyright (C) 2017-2020 Arun Kunchithapatham ## Feedback: diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 0cd7e4c..a4bcbb9 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -1,3 +1,14 @@ +## Version 1.2: + +* Allow users to customize the default NxN grid size + for the jigsaw puzzle + +* Bug fix in calculating the size of the jigsaw frame + In some corner cases, frame size was too small or + too large. + +------------------------------ + ## Version 1.1: * Minor bug fix; when a piece is clicked on but not moved, diff --git a/background/jigsaw_bg_common_functions.js b/background/jigsaw_bg_common_functions.js index 3219333..8a1f82a 100644 --- a/background/jigsaw_bg_common_functions.js +++ b/background/jigsaw_bg_common_functions.js @@ -2,7 +2,7 @@ /* * JigSaw is html/javascript code that creates a jigsaw from a link. * It assumes that the user has provided a valid link to an image file. - * Copyright (C) 2017-2019 Arun Kunchithapatham + * Copyright (C) 2017-2020 Arun Kunchithapatham * * This file is part of JigSaw. * diff --git a/background/jigsaw_bg_context_menu.js b/background/jigsaw_bg_context_menu.js index 3b57447..ac90e8a 100644 --- a/background/jigsaw_bg_context_menu.js +++ b/background/jigsaw_bg_context_menu.js @@ -2,7 +2,7 @@ /* * JigSaw is html/javascript code that creates a jigsaw from a link. * It assumes that the user has provided a valid link to an image file. - * Copyright (C) 2017-2019 Arun Kunchithapatham + * Copyright (C) 2017-2020 Arun Kunchithapatham * * This file is part of JigSaw. * diff --git a/content_scripts/jigsaw.js b/content_scripts/jigsaw.js index a2e9c66..78dc5b1 100644 --- a/content_scripts/jigsaw.js +++ b/content_scripts/jigsaw.js @@ -2,7 +2,7 @@ /* * JigSaw is html/javascript code that creates a jigsaw from a link. * It assumes that the user has provided a valid link to an image file. - * Copyright (C) 2015-2019 Arun Kunchithapatham + * Copyright (C) 2015-2020 Arun Kunchithapatham * * This file is part of JigSaw. * @@ -33,6 +33,8 @@ var JigSaw = { width: null, height: null, numGrids: 5, + minGridSize: 3, + maxGridSize: 10, offset: 50, frameDiv: null, previewWidth: 100, @@ -61,6 +63,7 @@ var JigSaw = { message.innerText = "Please wait while image is loading..."; JigSaw.base_div.appendChild(message); message.style.zIndex = 99999999; + JigSaw.base_div.appendChild(message); // Set the number of grids per row/column @@ -128,20 +131,19 @@ var JigSaw = { JigSaw.height = imgH; JigSaw.width = imgW; - - if (imgH >= imgW) { - if (imgH > JigSaw.maxHeight) { - JigSaw.height = JigSaw.maxHeight; - JigSaw.width = Math.round(JigSaw.height / ratio); - } + + JigSaw.maxHeight = window.innerHeight - JigSaw.offset * 2; + JigSaw.maxWidth = window.innerWidth - JigSaw.offset * 3 - JigSaw.previewWidth; + + if (JigSaw.height > JigSaw.maxHeight) { + JigSaw.height = JigSaw.maxHeight; + JigSaw.width = Math.round(JigSaw.height / ratio); } - else { - if (imgW > JigSaw.maxWidth) { - JigSaw.width = JigSaw.maxWidth; - JigSaw.height = Math.round(JigSaw.width * ratio); - } + if (JigSaw.width > JigSaw.maxWidth) { + JigSaw.width = JigSaw.maxWidth; + JigSaw.height = Math.round(JigSaw.width * ratio); } - + JigSaw.frameDiv = document.createElement('div'); JigSaw.frameDiv.setAttribute("style", "position:absolute;border:blue 2px solid;"); JigSaw.frameDiv.style.setProperty("width", JigSaw.width + "px"); @@ -653,7 +655,7 @@ function jigsawize(request, sender, sendResponse) { if (request.jigsaw_action === 'loadJigSaw') { console.log("Called to load JigSaw at: " + new Date()); thisURL = request.jigsaw_url; - loadJigSaw(); + getJigSawSizeAndLoad(); return Promise.resolve({response: "Completed Loading JigSaw"}); } else { @@ -661,10 +663,25 @@ function jigsawize(request, sender, sendResponse) { } } -function loadJigSaw() { - if (document.getElementById('jigsaw_base') == null) { +function getJigSawSizeAndLoad() { + // Update numGrids from the option setting + // + let onGetting = function(result) { + if (browser.runtime.lastError) { + console.log(browser.runtime.lastError); + } + else { + let jigsaw_default_size = parseInt(result.jigsaw_default_size); + loadJigSaw(jigsaw_default_size); + } + }; + let gettings = browser.storage.local.get("jigsaw_default_size", onGetting); +} + +function loadJigSaw(jigsaw_default_size) { + if (document.getElementById('jigsaw_base') == null) { // Delete all elements of the page! while (document.body.lastChild != null) { @@ -683,13 +700,19 @@ function loadJigSaw() { let jigsaw_select = document.createElement('select'); jigsaw_select.setAttribute('id', 'jigsaw_select'); - for (let i = 3; i < 10; i++) { + let selectedIdx = 0; + let idx = 0; + for (let i = JigSaw.minGridSize; i <= JigSaw.maxGridSize; i++) { let opt = document.createElement('option'); opt.value = i; + if (i == jigsaw_default_size) { + selectedIdx = idx; + } opt.textContent = i + "x" + i; jigsaw_select.appendChild(opt); + idx += 1; } - jigsaw_select.selectedIndex = 2; + jigsaw_select.selectedIndex = selectedIdx; jigsaw_base.appendChild(jigsaw_select); diff --git a/css/jigsaw.css b/css/jigsaw.css index b3ff5c0..8de1ee6 100644 --- a/css/jigsaw.css +++ b/css/jigsaw.css @@ -2,7 +2,7 @@ /* * JigSaw is html/javascript code that creates a jigsaw from a link. * It assumes that the user has provided a valid link to an image file. - * Copyright (C) 2017-2019 Arun Kunchithapatham + * Copyright (C) 2017-2020 Arun Kunchithapatham * * This file is part of JigSaw. * diff --git a/manifest.json b/manifest.json index fb88809..586e422 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "__MSG_extensionName__", - "version": "1.1", + "version": "1.2", "description": "__MSG_extensionDescription__", "homepage_url": "https://www.github.com/ushnisha/jigsaw/", @@ -23,6 +23,7 @@ "permissions": [ "", "activeTab", + "storage", "contextMenus" ], @@ -31,6 +32,11 @@ "icons/*.png" ], + "options_ui": { + "page": "options/jigsaw_options.html", + "open_in_tab": false + }, + "background": { "scripts": ["background/jigsaw_bg_common_functions.js", "background/jigsaw_bg_context_menu.js"] diff --git a/options/jigsaw_options.css b/options/jigsaw_options.css new file mode 100644 index 0000000..72b561b --- /dev/null +++ b/options/jigsaw_options.css @@ -0,0 +1,48 @@ +/** + ********************************************************************** + * JigSaw - A Firefox Webextension that creates a jigsaw puzzle from + * an image link + ********************************************************************** + + Copyright (c) 2017-2020 Arun Kunchithapatham + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see . + + Contributors: + Arun Kunchithapatham - Initial Contribution + *********************************************************************** + * + */ + +.jigsaw_options_section { + padding: 10px; + text-align: center; + font-size: 1em; + background-color: #F0F8FF; + cursor: pointer; +} + +.jigsaw_options_row { + padding: 4px; + text-align: center; + font-size: 1em; + background-color: #F0F8FF; + cursor: pointer; + display: flex; + justify-content: space-between; +} + +.jigsaw_options_row:hover { + background-color: #B0C4DE; +} diff --git a/options/jigsaw_options.html b/options/jigsaw_options.html new file mode 100644 index 0000000..cb58a60 --- /dev/null +++ b/options/jigsaw_options.html @@ -0,0 +1,58 @@ + + + + + + + + + + +
+ +

Select Jigsaw Size:

+
+
+ + +
+
+ +
+ + + + + diff --git a/options/jigsaw_options.js b/options/jigsaw_options.js new file mode 100644 index 0000000..8967ccf --- /dev/null +++ b/options/jigsaw_options.js @@ -0,0 +1,72 @@ +/** + ********************************************************************** + * JigSaw - A Firefox Webextension that creates a jigsaw puzzle from + * an image link + ********************************************************************** + + Copyright (c) 2017-2020 Arun Kunchithapatham + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see . + + Contributors: + Arun Kunchithapatham - Initial Contribution + *********************************************************************** + * + */ + +'use strict'; + +var browser = browser || chrome; + +function saveOptions(e) { + e.preventDefault(); + + let current_settings = { + jigsaw_default_size: document.getElementById("jigsaw_default_size").value + }; + + console.log(current_settings); + browser.storage.local.set(current_settings); +} + +function restoreOptions() { + + let options_list = ["jigsaw_default_size"]; + + for (let opt=0; opt < options_list.length; opt++) { + + let opt_name = options_list[opt]; + + let onGetOption = function (result) { + if (browser.runtime.lastError) { + console.log(browser.runtime.lastError); + } + else { + let keys = Object.keys(result); + for (let k=0; k < keys.length; k++) { + 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 getting = browser.storage.local.get(opt_name, onGetOption); + } +} + +document.addEventListener("DOMContentLoaded", restoreOptions); +document.getElementById("jigsaw_default_size").addEventListener("change", saveOptions);