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
ushnisha · Apr 11, 2020 · 1bab9a8 · 1bab9a8
1 parent 1693116
commit 1bab9a8
Show file tree

Hide file tree

Showing 10 changed files with 245 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,18 +655,33 @@ 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 {
         console.log("Meassage not implemented: " + request.jigsaw_action);
     }
 }
 
-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
@@ -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
@@ -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": [
         "<all_urls>",
         "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
@@ -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 <http://www.gnu.org/licenses/>.
+
+   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
@@ -0,0 +1,58 @@
+<!--
+ **********************************************************************
+ * 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 <http://www.gnu.org/licenses/>.
+
+   Contributors:
+   Arun Kunchithapatham - Initial Contribution
+ ***********************************************************************
+ *
+ -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="jigsaw_options.css"/>
+  </head>
+
+  <body>
+    <div class="jigsaw_options_panel"> 
+
+        <h2>Select Jigsaw Size:</h2>
+        <div class="jigsaw_options_section">
+            <div class="jigsaw_options_row">
+                <label for="jigsaw_default_size">Jigsaw Default Size:</label>
+                <select id="jigsaw_default_size" class="icon">
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="10">10</option>
+                </select>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="jigsaw_options.js"></script>
+  </body>
+
+</html>
diff --git a/options/jigsaw_options.js 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 <http://www.gnu.org/licenses/>.
+
+   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);