initial commit

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -0,0 +1,30 @@
+# kanbantool-extension
+
+This project is for anyone that is using an instance of [kanbantool][kanbantool]. 
+
+The project currently can talk to the page that the extension is running on and populate the extension popup to display the columns and rows of your kanban board.
+
+NOTE: It's still not totally functional but works in terms of communicating with the actual page and interacting with it's own popup
+
+## Project Setup
+
+1. Just clone the repo!
+
+## Running it
+
+1. Open up chrome and open the extentions tab
+2. Select the developer mode checkbox at the top right
+3. Click "Load unpacked extension…"
+4. Select the root folder of where you downloaded kanbantool-extension
+5. Navigate to your kanbantool page (ie http://mycompany.kanbantool.com)
+6. You should see the extension popup in the omnibar on the right
+7. Currently (version 0.0) this will list all workflow options and swimlane options available.  Debating what to do next with it.
+
+Links
+-----
+
+*for easy reference*
+
+- [kanbantool][kanbantool]
+
+[kanbantool]: http://kanbantool.com

background.js

@@ -0,0 +1,8 @@
+chrome.runtime.onMessage.addListener(function(msg, sender) {
+    /* First, validate the message's structure */
+    if (msg.from && (msg.from === "content")
+            && msg.subject && (msg.subject = "showPageAction")) {
+        /* Enable the page-action for the requesting tab */
+        chrome.pageAction.show(sender.tab.id);
+    }
+});

content.js

@@ -0,0 +1,103 @@
+/* Inform the backgrund page that 
+ * this tab should have a page-action */
+chrome.runtime.sendMessage({
+    from: "content",
+    subject: "showPageAction"
+});
+
+///////////////////////////////////////////////////////////////////////////
+// This method currently will get the workflow options out of order because
+// of the way that the kanban board can be constructed
+//
+// it gets all the leafs in order which will be a problem if you have nested
+// workflow options
+///////////////////////////////////////////////////////////////////////////
+/* Listen for message from the popup */
+chrome.runtime.onMessage.addListener(function(msg, sender, response) {
+    /* First, validate the message's structure */
+    if (msg.from && (msg.from === "popup")
+            && msg.subject && (msg.subject === "DOMInfo")) {
+        var workflow_options = {};
+        var leaves = document.getElementsByClassName('leaf');
+        for (i = 0; i < leaves.length; i += 1 ) {
+            leaf = leaves[i];
+            id_string = leaf.getAttribute('id');
+            workflow_id = id_string.substring(0, id_string.length - 3); 
+            columnName = leaf.getElementsByClassName('hide_when_collapsed')[0].firstElementChild.innerHTML;
+            // remove the extra div at the end
+            columnName = columnName.replace(/<div(.*?)<\/div>/gi, '');
+            // remove the hyphen and spaces in the front
+            columnName = columnName.replace(/-/gi,'').trim();
+            workflow_options[columnName] = workflow_id;
+            alert(columnName + ' - ' + workflow_id);
+        }
+        var swimlane_options = {};
+        var swimlanes = document.getElementsByClassName('swimlane_header');
+        for (i = 0; i < swimlanes.length; i += 1 ) {
+            swimlane = swimlanes[i];
+            id_string = swimlane.getAttribute('id');
+            swimlane_id = id_string.substring(0, id_string.length - 3); 
+            swimlane_name = swimlane.firstElementChild.getAttribute('title');
+            swimlane_options[swimlane_name] = swimlane_id;
+        }
+        data = {
+            "workflow_options" : workflow_options,
+            "swimlane_options" : swimlane_options
+        };
+        response(data);
+    }
+});
+
+
+///////////////////////////////////////////////////////////////////////////
+// This is another attempt using not leafs but more traversing
+///////////////////////////////////////////////////////////////////////////
+
+// /* Listen for message from the popup */
+// chrome.runtime.onMessage.addListener(function(msg, sender, response) {
+//     /* First, validate the message's structure */
+//     if (msg.from && (msg.from === "popup") && msg.subject && (msg.subject === "DOMInfo")) {
+//         data = {};
+//         var workflow_options = {};
+//         var boardHeading = document.getElementById('board_heading');
+//         headingRows = boardHeading.getElementsByTagName('tr');
+//         for (i = 1; i < headingRows.length; i++) {
+//             tr = headingRows[i];
+//             columns = tr.getElementsByTagName('th');
+//             for (j = 0; j < columns.length; j++) {
+//                 th = columns[j];
+//                 if (th.classList.contains('board_handler_cell')) {
+//                     // these are filler cells
+//                     continue; 
+//                 }
+//                 isLeaf = th.classList.contains('leaf');
+//                 if (!isLeaf) {
+//                     // i wanna go down
+
+//                 }
+//                 else {
+//                     id_string = th.getAttribute('id');
+//                     workflow_id = id_string.substring(0, id_string.length - 3); 
+//                     columnName = th.getElementsByClassName('hide_when_collapsed')[0].firstElementChild.innerText;
+//                     console.log(columnName);
+//                     workflow_options[columnName] = workflow_id;
+//                 }
+//             }
+//         }
+//         var swimlane_options = {};
+//         var swimlanes = document.getElementsByClassName('swimlane_header');
+//         for (i = 0; i < swimlanes.length; i += 1 ) {
+//             swimlane = swimlanes[i];
+//             id_string = swimlane.getAttribute('id');
+//             swimlane_id = id_string.substring(0, id_string.length - 3); 
+//             swimlane_name = swimlane.firstElementChild.getAttribute('title');
+//             swimlane_options[swimlane_name] = swimlane_id;
+//         }
+//         data = {
+//             "workflow_options" : workflow_options,
+//             "swimlane_options" : swimlane_options
+//         };
+//         response(data);
+//     }
+// });
+

manifest.json

@@ -0,0 +1,33 @@
+{
+    "manifest_version": 2,
+    "name":    "kanbantool.com Extension",
+    "version": "0.0",
+    "author": [ {
+            "name": "Jason Leong",
+            "email": "[email protected]"
+        }, 
+        {
+            "name": "Amol Mittal",
+            "email": "[email protected]"
+        }
+    ],
+    "offline_enabled": true,
+
+    "background": {
+        "persistent": false,
+        "scripts": ["background.js"]
+    },
+
+    "content_scripts": [{
+        "matches":    ["*://*.kanbantool.com/*"],
+        "js":         ["./content.js"],
+        "run_at":     "document_idle",
+        "all_frames": false
+    }],
+
+    "page_action": {
+        "default_title": "Test Extension",
+        "default_icon": "icon.png",
+        "default_popup": "popup.html"
+    }
+}

popup.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script type="text/javascript" src="popup.js"></script>
+    </head>
+    <body style="min-width:300px">
+        <h3 style="font-weight:bold; text-align:center;">Choose which columns to you want</h3>
+        <form name='theform' action="http://test.nerdwallet.com" method="GET">
+            <div id="columns"></div>
+            <hr>
+            <div id="rows"></div>
+            <input type="submit">
+        </form>
+        <div>
+            <h3>Results</h3>
+            <div id="resuts"></div>
+        </div>
+    </body>
+</html>

popup.js

@@ -0,0 +1,58 @@
+/* Update the relevant fields with the new data */
+function setDOMInfo(info) {
+    column_checkboxes = '';
+    workflow_options = info.workflow_options;
+    swimlane_options = info.swimlane_options;
+    container = document.getElementById('columns');
+    for (var name in workflow_options) {
+       var id = workflow_options[name]; 
+       var checkbox = document.createElement('input');
+       checkbox.type = "checkbox";
+       checkbox.name = id;
+       checkbox.value = id;
+       checkbox.id = id;
+
+       var label = document.createElement('label')
+       label.htmlFor = id;
+       label.appendChild(document.createTextNode(name));
+       container.appendChild(checkbox);
+       container.appendChild(label);
+       container.appendChild(document.createElement('br'));
+    }
+    // //your processing here
+    container = document.getElementById('rows');
+    for (var name in swimlane_options) {
+       var id = swimlane_options[name]; 
+       var checkbox = document.createElement('input');
+       checkbox.type = "checkbox";
+       checkbox.name = id;
+       checkbox.value = id;
+       checkbox.id = id;
+
+       var label = document.createElement('label')
+       label.htmlFor = id;
+       label.appendChild(document.createTextNode(name));
+       container.appendChild(checkbox);
+       container.appendChild(label);
+       container.appendChild(document.createElement('br'));
+    }
+    // document.getElementById('columns').textContent = 'something htmlitcaly correct';
+    // start constructing the checkboxes for columns
+}
+
+/* Once the DOM is ready... */
+window.addEventListener("DOMContentLoaded", function() {
+    /* ...query for the active tab... */
+    chrome.tabs.query({
+        active: true,
+        currentWindow: true
+    }, function(tabs) {
+        /* ...and send a request for the DOM info... */
+        chrome.tabs.sendMessage(
+                tabs[0].id,
+                { from: "popup", subject: "DOMInfo" },
+                /* ...also specifying a callback to be called 
+                 *    from the receiving end (content script) */
+                setDOMInfo);
+    });
+});