前端代码

node_modules/browser-sync-ui/lib/plugins/overview/overview.client.js

@@ -0,0 +1,131 @@
+(function (angular) {
+
+    const SECTION_NAME = "overview";
+
+    angular
+        .module("BrowserSync")
+        .controller("OverviewController", [
+            "options",
+            "pagesConfig",
+            OverviewController
+        ]);
+
+    /**
+     * @param options
+     * @param pagesConfig
+     */
+    function OverviewController (options, pagesConfig) {
+        var ctrl     = this;
+        ctrl.section = pagesConfig[SECTION_NAME];
+        ctrl.options = options.bs;
+        ctrl.ui = {
+            snippet: !ctrl.options.server && !ctrl.options.proxy
+        };
+    }
+
+    /**
+     * Url Info - this handles rendering of each server
+     * info item
+     */
+    angular
+        .module("BrowserSync")
+        .directive("urlInfo", function () {
+            return {
+                restrict: "E",
+                replace: true,
+                scope: {
+                    "options": "="
+                },
+                templateUrl: "url-info.html",
+                controller: [
+                    "$scope",
+                    "$rootScope",
+                    "Clients",
+                    urlInfoController
+                ]
+            };
+        });
+
+    /**
+     * @param $scope
+     * @param $rootScope
+     * @param Clients
+     */
+    function urlInfoController($scope, $rootScope, Clients) {
+
+        var options = $scope.options;
+        var urls    = options.urls;
+
+        $scope.ui = {
+            server: false,
+            proxy: false
+        };
+
+        if ($scope.options.mode === "server") {
+            $scope.ui.server = true;
+            if (!Array.isArray($scope.options.server.baseDir)) {
+                $scope.options.server.baseDir = [$scope.options.server.baseDir];
+            }
+        }
+
+        if ($scope.options.mode === "proxy") {
+            $scope.ui.proxy = true;
+        }
+
+        $scope.urls = [];
+
+        $scope.urls.push({
+            title: "Local",
+            tagline: "URL for the machine you are running BrowserSync on",
+            url: urls.local,
+            icon: "imac"
+        });
+
+        if (urls.external) {
+            $scope.urls.push({
+                title: "External",
+                tagline: "Other devices on the same wifi network",
+                url: urls.external,
+                icon: "wifi"
+            });
+        }
+
+        if (urls.tunnel) {
+            $scope.urls.push({
+                title: "Tunnel",
+                tagline: "Secure HTTPS public url",
+                url: urls.tunnel,
+                icon: "globe"
+            });
+        }
+
+        /**
+         *
+         */
+        $scope.sendAllTo = function (path) {
+            Clients.sendAllTo(path);
+            $rootScope.$emit("notify:flash", {
+                heading: "Instruction sent:",
+                message: "Sync all Browsers to: " + path
+            });
+        };
+    }
+
+    /**
+     * Display the snippet when in snippet mode
+     */
+    angular
+        .module("BrowserSync")
+        .directive("snippetInfo", function () {
+            return {
+                restrict: "E",
+                replace: true,
+                scope: {
+                    "options": "="
+                },
+                templateUrl: "snippet-info.html",
+                controller: ["$scope", function snippetInfoController() {/*noop*/}]
+            };
+        });
+
+})(angular);

node_modules/browser-sync-ui/lib/plugins/overview/overview.html

@@ -0,0 +1,25 @@
+<article>
+    <div bs-panel="controls outline">
+        <h1 bs-heading>
+            <icon icon="{{ctrl.section.icon}}"></icon>
+            {{ctrl.section.title}}
+        </h1>
+    </div>
+
+    <url-info ng-if="ctrl.options.server || ctrl.options.proxy" options="ctrl.options"></url-info>
+    <snippet-info ng-if="ctrl.options && ctrl.ui.snippet" options="ctrl.options"></snippet-info>
+
+    <div bs-panel="full">
+        <div bs-panel-content>
+            <div bs-panel-icon>
+                <svg bs-svg-icon><use xlink:href="#svg-devices"></use></svg>
+            </div>
+            <p bs-text="lede">Current Connections</p>
+            <p>Connected browsers will be listed here.</p>
+
+            <connection-list options="ctrl.options"></connection-list>
+
+        </div>
+    </div>
+
+</article>

node_modules/browser-sync-ui/lib/plugins/overview/overview.plugin.js

@@ -0,0 +1,51 @@
+const PLUGIN_NAME = "Overview";
+
+/**
+ * @type {{plugin: Function, plugin:name: string, markup: string}}
+ */
+module.exports = {
+    /**
+     * Plugin init
+     */
+    "plugin": function () { /* noop */ },
+
+    /**
+     * Hooks
+     */
+    "hooks": {
+        "markup": fileContent("/overview.html"),
+        "client:js": fileContent("/overview.client.js"),
+        "templates": [
+            getPath("/snippet-info.html"),
+            getPath("/url-info.html")
+        ],
+        "page": {
+            path: "/",
+            title: PLUGIN_NAME,
+            template: "overview.html",
+            controller: PLUGIN_NAME.replace(" ", "") + "Controller",
+            order: 1,
+            icon: "cog"
+        }
+    },
+    /**
+     * Plugin name
+     */
+    "plugin:name": PLUGIN_NAME
+};
+
+/**
+ * @param filepath
+ * @returns {*}
+ */
+function getPath (filepath) {
+    return require("path").join(__dirname, filepath);
+}
+
+/**
+ * @param filepath
+ * @returns {*}
+ */
+function fileContent (filepath) {
+    return require("fs").readFileSync(getPath(filepath), "utf-8");
+}

node_modules/browser-sync-ui/lib/plugins/overview/snippet-info.html

@@ -0,0 +1,10 @@
+<div bs-panel="full">
+    <div bs-panel-content>
+        <div bs-panel-icon>
+            <svg bs-svg-icon=""><use xlink:href="#svg-code"></use></svg>
+        </div>
+        <p bs-text="lede">Place this snippet somewhere before the closing <code>&lt;/body&gt;</code> tag in your website</p>
+<pre><code>{{options.snippet}}</code></pre>
+
+    </div>
+</div>

node_modules/browser-sync-ui/lib/plugins/overview/url-info.html

@@ -0,0 +1,45 @@
+<div>
+    <section bs-panel ng-repeat="url in urls">
+        <div bs-panel-content>
+            <div bs-panel-icon>
+                <icon icon="{{url.icon}}"></icon>
+            </div>
+            <p bs-text="lede">{{url.title}}</p>
+            <p><a href="{{url.url}}">{{url.url}}</a></p>
+            <div bs-button-group>
+                <a href="{{url.url}}" target="_blank" bs-button="size-small subtle-alt icon-left">
+                    <icon icon="newtab"></icon>
+                    new tab
+                </a>
+                <a href="#" ng-click="sendAllTo(url.url)" bs-button="size-small subtle-alt icon-left">
+                    <icon icon="syncall"></icon>
+                    sync all
+                </a>
+            </div>
+        </div>
+    </section>
+    <section ng-if="ui.server">
+        <div bs-panel="full">
+            <div bs-panel-content>
+                <div bs-panel-icon>
+                    <icon icon="terminal"></icon>
+                </div>
+                <p bs-text="lede">Serving files from</p>
+                <ul bs-list="basic">
+                    <li ng-repeat="url in options.server.baseDir">{{url}}</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    <section bs-panel ng-if="ui.proxy">
+        <div bs-panel-content>
+            <div bs-panel-icon>
+                <icon icon="target"></icon></svg>
+            </div>
+            <p bs-text="lede">Proxying:</p>
+            <p>
+                <a href="{{options.proxy.target}}" target="_blank">{{options.proxy.target}}</a>
+            </p>
+        </div>
+    </section>
+</div>