Complete initial implementation.

nitroshare · Nov 2, 2017 · b91f812 · b91f812
1 parent 7ad5c05
commit b91f812
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 6 deletions.
diff --git a/error.png b/error.png
diff --git a/jquery.min.js b/jquery.min.js
diff --git a/popup.html b/popup.html
@@ -7,9 +7,11 @@
                 margin: 0;
                 width: 320px;
             }
+            h1, ul {
+                margin: 0;
+            }
             h1 {
                 font-weight: normal;
-                margin: 0;
             }
             .container {
                 display: flex;
@@ -22,20 +24,49 @@
                 padding: 8px;
             }
             .content {
+                display: flex;
                 flex-grow: 1;
                 position: relative;
                 text-overflow: auto;
             }
-            .spinner {
-                left: 50%;
-                margin: -24px 0 0 -24px;
-                position: absolute;
-                top: 50%;
+            .spinner,
+            .error {
+                align-self: center;
+                display: none;
+                margin: auto;
+            }
+            .error {
+                color: #a55;
+            }
+            .error:before {
+                background-image: url(error.png);
+                content: "";
+                display: block;
+                height: 48px;
+                margin: 0 auto 16px auto;
+                width: 48px;
             }
             .devices {
                 display: none;
+                list-style-type: none;
+                padding: 0;
+                width: 100%;
+            }
+            .devices li a {
+                background: #eee;
+                border-radius: 4px;
+                color: #333;
+                display: block;
+                margin: 4px;
+                padding: 8px;
+                text-decoration: none;
+            }
+            .devices li a:hover {
+                background: #ddd;
             }
         </style>
+        <script src="jquery.min.js"></script>
+        <script src="popup.js"></script>
     </head>
     <body>
         <div class="container">
@@ -44,6 +75,7 @@ <h1>Send to Device</h1>
             </div>
             <div class="content">
                 <img src="loading.gif" class="spinner">
+                <div class="error"></div>
                 <ul class="devices"></ul>
             </div>
         </div>

diff --git a/popup.js b/popup.js
@@ -0,0 +1,106 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2017 Nathan Osman
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+$(function() {
+
+    const METHOD_DEVICES = "devices";
+    const METHOD_SENDURL = "sendurl";
+
+    let $spinner = $('.spinner'),
+        $error = $('.error'),
+        $devices = $('.devices'),
+        lastRequest;
+
+    // Create a port for interacting with the native messaging host
+    let port = chrome.runtime.connectNative('net.nitroshare.chrome');
+
+    // Send a request to the host
+    function request(name, parameters) {
+        $spinner.show();
+        $error.add($devices).hide();
+        lastRequest = name;
+        port.postMessage({
+            name: name,
+            parameters: parameters
+        });
+    }
+
+    // TODO: the enumerator is hardcoded in here
+
+    // Send the current URL to the specified device
+    function sendUrl(device) {
+        chrome.tabs.query({
+            active: true,
+            lastFocusedWindow: true
+        }, function (tabs) {
+            request(METHOD_SENDURL, {
+                device: device.uuid,
+                enumerator: "mdns",
+                url: tabs[0].url
+            });
+        });
+    }
+
+    // Process the list of devices
+    function processDeviceList(devices) {
+        $devices.empty();
+        $.each(devices, function() {
+            let $a = $('<a>')
+                .attr('href', '#')
+                .text(this.name);
+            $a.click(() => {
+                sendUrl(this);
+            });
+            $devices.append($('<li>').append($a));
+        });
+        $devices.show();
+    }
+
+    // Process the response from sending a URL
+    function processSendUrl() {
+        window.close();
+    }
+
+    // Process incoming messages
+    port.onMessage.addListener(function(msg) {
+        $spinner.hide();
+        if ('error' in msg) {
+            $error.text(msg.error).show();
+        } else {
+            if (lastRequest == METHOD_DEVICES) {
+                processDeviceList(msg.return);
+            } else {
+                processSendUrl();
+            }
+        }
+    });
+
+    // TODO: properly implement this
+
+    port.onDisconnect.addListener(function() {
+    });
+
+    // Load the initial list
+    request(METHOD_DEVICES, {})
+});