Merge pull request #1 from dzsquared/edgium

edgium: converted and animated

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 DrewSK
+Copyright (c) 2020 DrewSK
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,31 +1,29 @@
-# Microsoft Docs Sidebar Collapser: Chrome Extension
+# Microsoft Docs Sidebar Collapser: Edge/Chrome Extension
 
-Chrome extension that enables the table of contents sidebar on https://docs.microsoft.com to be collapsed.
+Edge/Chrome extension that enables the table of contents sidebar on https://docs.microsoft.com to be collapsed.
 
 ## Functionality
-The icon for the extension is enabled on pages within https://docs.microsoft.com.
-
-Clicking the full-width icon (courtesy of Magicon from the Noun Project) expands the main content.
-
-Clicking the expand right icon (courtesy of atlantamountain from the Noun Project) expands the table of contents sidebar.
-
-**See it in action:**
-
-![Collapse and Expand](/images/Collapse_Revive.gif)
+A button is automatically added to pages within https://docs.microsoft.com.
+The button allows the left sidebar to be collapsed/expanded, creating more room to read the content.
 
 ## Installation
-### Option 0: Install from the Chrome Web Store
-0. Go to https://chrome.google.com/webstore/detail/microsoft-docs-fullview/dejphoknpednbppnajidmbcddpbejnoc and click *Add to Chrome*
+### Option 0: Install from the Chrome Web Store/Microsoft Edge Store
+Sorry!  This option is no longer available.  I am working to list it in the Microsoft Edge extension store.
 
-### Option 1: Load Unpacked
-0. both methods require enabling developer mode in *chrome://extensions* on your workstation
+### Option 1: Load Unpacked (Chrome/Edge)
+0. This method requires enabling developer mode in *chrome://extensions* or *edge://extensions* on your workstation
 1. Download/clone this repository to your machine
-2. Open *chrome://extensions* and click *Load Unpacked*
+2. Open *chrome://extensions* or *edge://extensions* and click *Load Unpacked*
 3. Select the root folder for the repository
 
-### Option 2: Download the .crx file
-0. both methods require enabling developer mode in *chrome://extensions* on your workstation
+### Option 2: Download the .crx file (Chrome-only)
+0. This methods requires enabling developer mode in *chrome://extensions* on your workstation
 1. Go to https://github.com/dzsquared/MSDocsSidebarCollapser/releases and download the latest release
 2. Open *chrome://extensions* and drag the downloaded crx file onto the page
 
+## See it in action
+
+![Collapse and Expand](/images/example.gif)
+
+
 

buttonActions.js

@@ -0,0 +1,21 @@
+function collapseSide() {
+    $('.left-container').toggle(500);
+    $('.primary-holder').animate({ width: '100%' });
+    document.getElementById("docController").setAttribute("currentSidebar", "revealSide");
+    document.getElementById("docController").innerHTML = "Show Sidebar";
+}
+function revealSide() {
+    $('.left-container').toggle(500);
+    $('.primary-holder').animate({ width: '75%' });
+    document.getElementById("docController").setAttribute("currentSidebar", "collapseSide");
+    document.getElementById("docController").innerHTML = "Collapse Sidebar";
+}
+
+function sidebarButton() {
+    var currentSidebar = document.getElementById("docController").getAttribute("currentSidebar");
+    if (currentSidebar == 'revealSide') {
+        revealSide();
+    } else {
+        collapseSide();
+    }
+}

fullWidth.js

@@ -1,6 +1,18 @@
-$('#left-container').width(2);
-$('#sidebar').hide() 
-
-$('.primary-holder').width('80%');
-$('#main-column').width('95%');
+function setupDocs() {
+    // add a script element for the button actions JS
+    var s = document.createElement('script');
+    s.src = chrome.runtime.getURL('buttonActions.js');
+    s.onload = function() {
+        this.remove();
+    };
+    (document.head || document.documentElement).appendChild(s);
 
+    // prepand a button to the page metadata area
+    var pageMetadata = document.getElementsByClassName("page-metadata")[0];
+    if (typeof pageMetadata !== 'undefined') {
+        var sidebarButton = document.createElement("LI");
+        sidebarButton.innerHTML = "<button class='button is-small' id='docController' data-bi-name='sidebarController' onclick='sidebarButton()' currentSidebar='collapseSide'>Collapse Sidebar</button>"
+        pageMetadata.insertBefore(sidebarButton, pageMetadata.childNodes[0]);
+    }
+}
+setupDocs();

manifest.json

@@ -1,26 +1,23 @@
  {
-    "name": "Microsoft Docs Fullview",
-    "version": "1.0",
-    "description": "Toggle to View Microsoft Docs in Full Width",
-    "permissions": ["activeTab","declarativeContent","storage"],
-    "background": {
-        "scripts": ["background.js"],
-        "persistent": false
-    },
-    "page_action": {
-      "default_popup": "popup.html",
-      "default_icon": {
-        "16": "images/logoIcon16.png",
-        "32": "images/logoIcon32.png",
-        "48": "images/logoIcon48.png",
-        "128": "images/logoIcon128.png"
-      }
-    },
+    "name": "Docs Fullview",
+    "version": "2.0",
+    "description": "Toggle to View Documentation in Full Width",
+    "permissions": [
+        "tabs", "https://docs.microsoft.com/*"
+    ],
     "icons": {
       "16": "images/logoIcon16.png",
       "32": "images/logoIcon32.png",
       "48": "images/logoIcon48.png",
       "128": "images/logoIcon128.png"
     },
+    "content_scripts": [
+        {
+            "matches": ["https://docs.microsoft.com/*"],
+            "js": ["jquery.js", "fullWidth.js"],
+            "run_at": "document_end"
+        }
+    ],
+    "web_accessible_resources": ["buttonActions.js"],
     "manifest_version": 2
   }

notes.txt

@@ -1,8 +1,3 @@
 https://code.jquery.com/jquery-3.3.1.min.js
 
-
-https://thenounproject.com/term/width/304721/
-width by Magicon from the Noun Project
-
-https://thenounproject.com/search/?q=right%20arrow&i=2069553
-right by atlantamountain from the Noun Project
+https://developer.chrome.com/extensions/content_scripts