Merge pull request #1 from ikipatang/feat-action-page

Feat action page

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## Changed
+- Improved share current tab function
+- Improved browser storage initialilisation
+- Better looking settings form
+
+## Added
+- New share button in address bar       
+  Share button in address bar can be enabled in settings, disabled by default
+
 ## [0.0.2][] - 2017-11-23
 - Create extension settings
   - Allow to set your Shaarli URL

manifest.json

@@ -20,5 +20,10 @@
   "browser_action": {
     "default_icon": "resources/icons/icon-24.png",
     "default_title": "Share"
+  },
+  "page_action": {
+    "browser_style": false,
+    "default_icon": "resources/icons/icon-24.png",
+    "default_title": "Share"
   }
 }

src/background.js

@@ -17,22 +17,49 @@ function openInPopup(url) {
  * Share Current Tab
  * @return {void}       -
  */
-function shareCurrentTab() {
-  browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  }).then((tabs) => {
-    const url = tabs[0].url;
-    const title = tabs[0].title || url;
-    browser.storage.local.get('url').then((storage) => {
-      if(storage.url){
-        const shareUrl = `${storage.url}?post=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&source=bookmarklet`;
-        openInPopup(shareUrl);
-      }else{
-        browser.runtime.openOptionsPage()
-      }
-    });
+function shareCurrentTab(tab) {
+  const url = tab.url;
+  const title = tab.title || url;
+  browser.storage.local.get().then((storage) => {
+    if(!storage.url){
+      browser.runtime.openOptionsPage();
+      return;
+    }
+    const shareUrl = `${storage.url}?post=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&source=bookmarklet`;
+    openInPopup(shareUrl);
   });
 }
 
+/**
+ * Show Page Action on current page if activated
+ * @param  {string} tabId - Current tab id
+ * @return {void}         -
+ */
+function showPageAction(tabId){
+  browser.storage.local.get().then((storage) => {
+    storage.pageAction ? browser.pageAction.show(tabId) : browser.pageAction.hide(tabId);
+  });
+}
+
+/**
+ * Show page action with given active information
+ * @param  {object} activeInfo  -
+ * @return {void}               -
+ */
+function tabActivation(activeInfo){
+  showPageAction(activeInfo.tabId);
+}
+
+/*
+Initialize
+ */
+browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
+  showPageAction(tabs[0].id);
+});
+
+/*
+Listeners
+ */
+browser.tabs.onActivated.addListener(tabActivation);
 browser.browserAction.onClicked.addListener(shareCurrentTab);
+browser.pageAction.onClicked.addListener(shareCurrentTab);

src/options/options.css

@@ -1,18 +1,70 @@
-
-body {
-  width: 25em;
-  font-family: "Open Sans Light", sans-serif;
-  font-size: 0.9em;
-  font-weight: 300;
+.main{
+  font: 14px sans-serif;
 }
 
-input#url {
-  margin: 0.5em;
-  width: 50em;
-  height: 2.5em;
+.main .row{
+  text-align: left;
 }
 
-input {
-  width: 20em;
-  height: 2.5em;
+/* The form title */
+
+.main .row > label span{
+  color: #1a1a1a;
+  width: 100em;
+  vertical-align: center;
+  padding-left: 5px;
+  padding-right: 30px;
 }
+
+.main input{
+  color:  #1a1a12;
+  width: 31em;
+  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
+  padding: 5px;
+  border: 1px solid #dbdbdb;
+}
+
+.main input[type=checkbox]{
+  box-shadow: none;
+  width: auto;
+  margin-top: 13px;
+}
+
+.main button{
+  display: block;
+  border-radius: 2px;
+  font-weight: bold;
+  padding: 8px 22px;
+  margin-left: 10em;
+}
+
+/*	Making the form responsive. Remove this media query
+  if you don't need the form to work on mobile devices. */
+
+/*@media (max-width: 600px) {
+
+  .main{
+      padding: 30px;
+      max-width: 480px;
+  }
+
+  .main .row{
+      max-width: 300px;
+      margin: 25px auto;
+      text-align: left;
+  }
+
+  .main .row > label span{
+      display: block;
+      text-align: left;
+      padding: 0 0 15px;
+  }
+
+  .main input[type=checkbox]{
+      margin-top:0;
+  }
+
+  .main button{
+      margin: 0;
+  }
+}*/

src/options/options.html

@@ -7,9 +7,24 @@
   </head>
 
   <body>
-
-    <div>URL: <input id="url" type="text"/></div>
-    <input type="button" value="Save preferences" id="save-button"/>
+    <div class="main">
+      <div class="row">
+        <label>
+          <span>Shaarli URL</span>
+          <input id="url" type="text" name="url">
+        </label>
+      </div>
+      <div class="row">
+        <label>
+          <span>Address bar</span>
+          <input id="pageAction" type="checkbox" name="pageAction" checked>
+        </label>
+      </div>
+      <div class="row">
+        <span>&nbsp;</span>
+        <button id="save-button" type="submit">Save preferences</button>
+      </div>
+    </div>
 
     <script src="options.js"></script>
   </body>

src/options/options.js

@@ -1,26 +1,40 @@
-/*
-Store options UI using browser.storage.local.
-*/
+/**
+ * Store options UI using browser.storage.local.
+ * @return {void}       -
+ */
 function storeSettings() {
-  const url = document.querySelector("#url");
-  // console.log('storeSettings url');
-  // console.log(url);
-  browser.storage.local.set({
-    url: url.value,
-  });
+  const settings = {
+    url: document.querySelector("#url").value,
+    pageAction: document.querySelector("#pageAction").checked,
+  };
+  // console.log('storeSettings settings');
+  // console.log(settings);
+  browser.storage.local.set(settings);
 }
 
-/*
-Update the options UI with the settings values retrieved from storage,
-or the default settings if the stored settings are empty.
-*/
+/**
+ * Update the options UI with the settings values retrieved from storage,
+ * or the default settings if the stored settings are empty.
+ * @param  {object} restoredSettings  -
+ * @return {void}                     -
+ */
 function updateUI(restoredSettings) {
   const url = document.querySelector("#url");
+  url.value = restoredSettings.url;
   // console.log('restoredSettings url');
   // console.log(url);
-  url.value = restoredSettings.url || "";
+
+  const pageAction = document.querySelector("#pageAction");
+  pageAction.checked = restoredSettings.pageAction;
+  // console.log('restoredSettings pageAction');
+  // console.log(pageAction);
 }
 
+/**
+ * Display on error
+ * @param  {object} error -
+ * @return {void}   -
+ */
 function onError(e) {
   console.error(e);
 }

src/storage.js

@@ -3,6 +3,7 @@ Default settings. Initialize storage to these values.
 */
 var storage = {
   url: '',
+  pageAction: false,
 }
 
 /*
@@ -18,7 +19,7 @@ If we don't, then store the default settings.
 */
 function checkStoredSettings(storedSettings) {
   if (!storedSettings.storage) {
-    browser.storage.local.set({storage});
+    browser.storage.local.set(storage);
   }
 }