前端代码

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

@@ -0,0 +1,111 @@
+(function (angular) {
+
+    const SECTION_NAME = "history";
+
+    angular
+        .module("BrowserSync")
+        .controller("HistoryController", [
+            "$scope",
+            "options",
+            "History",
+            "pagesConfig",
+            historyController
+        ]);
+
+    /**
+     * @param $scope
+     * @param options
+     * @param History
+     * @param pagesConfig
+     */
+    function historyController($scope, options, History, pagesConfig) {
+
+        var ctrl       = this;
+        ctrl.options = options.bs;
+        ctrl.section = pagesConfig[SECTION_NAME];
+        ctrl.visited = [];
+
+        ctrl.update  = function (items) {
+            ctrl.visited = items;
+            $scope.$digest();
+        };
+
+        History.get().then(function (items) {
+            ctrl.visited = items;
+        });
+
+        History.on("change", ctrl.update);
+
+        $scope.$on("$destroy", function () {
+            History.off(ctrl.update);
+        });
+
+        ctrl.clearVisited = function () {
+            History.clear();
+        };
+    }
+
+    angular
+        .module("BrowserSync")
+        .directive("historyList", function () {
+            return {
+                restrict: "E",
+                scope: {
+                    options: "=",
+                    visited: "="
+                },
+                templateUrl: "history.directive.html",
+                controller: ["$scope", "History", "Clients", historyDirective],
+                controllerAs: "ctrl"
+            };
+        });
+
+    /**
+     * Controller for the URL sync
+     * @param $scope - directive scope
+     * @param History
+     * @param Clients
+     */
+    function historyDirective($scope, History, Clients) {
+
+        var ctrl = this;
+
+        ctrl.visited = [];
+
+        ctrl.utils = {};
+
+        ctrl.utils.localUrl = function (path) {
+            return [$scope.options.urls.local, path].join("");
+        };
+
+        ctrl.updateVisited = function (data) {
+            ctrl.visited = data;
+            $scope.$digest();
+        };
+
+        ctrl.sendAllTo = function (url) {
+            url.success = true;
+            Clients.sendAllTo(url.path);
+            setTimeout(function () {
+                url.success = false;
+                $scope.$digest();
+            }, 1000);
+        };
+
+        ctrl.removeVisited = function (item) {
+            History.remove(item);
+        };
+
+        History.get().then(function (items) {
+            ctrl.visited = items;
+        });
+
+        History.on("change", ctrl.updateVisited);
+
+        $scope.$on("$destroy", function () {
+            History.off(ctrl.updateVisited);
+        });
+    }
+
+})(angular);
+

node_modules/browser-sync-ui/lib/plugins/history/history.directive.html

@@ -0,0 +1,20 @@
+<ul bs-list="bordered inline-controls" ng-if="ctrl.visited" id="bs-history-list">
+    <li ng-repeat="url in ctrl.visited track by $index">
+        <p>{{url.path}}</p>
+        <div bs-button-group>
+            <new-tab url="{{ctrl.utils.localUrl(url.path)}}" mode="options.mode"></new-tab>
+            <a href="#"
+               title="Sync all devices to this address."
+               bs-button="subtle-alt icon-left"
+               ng-click="ctrl.sendAllTo(url)"
+               ng-class="{success: url.success}"
+               >
+                <icon icon="circle-ok" bs-state="success"></icon>
+                <icon icon="syncall"   bs-state="default"></icon> Sync all
+            </a>
+            <a href="#" bs-button="subtle-alt icon" bs-remove ng-click="ctrl.removeVisited(url)">
+                <icon icon="bin"></icon>
+            </a>
+        </div>
+    </li>
+</ul>

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

@@ -0,0 +1,16 @@
+<div bs-panel="controls outline">
+    <h1 bs-heading><icon icon="{{ctrl.section.icon}}"></icon> {{ctrl.section.title}}</h1>
+</div>
+<div bs-button-row ng-if="ctrl.visited.length">
+    <button bs-button="icon-left inline" ng-click="ctrl.clearVisited()" ng-show="ctrl.visited.length">
+        <svg bs-svg-icon><use xlink:href="#svg-bin"></use></svg>
+        Clear all
+    </button>
+</div>
+<div bs-panel ng-if="!ctrl.visited.length" id="bs-history-empty">
+    <div bs-panel-content="basic">
+        <p>Pages you navigate to will appear here - making it easy
+            to sync all devices to a specific page</p>
+    </div>
+</div>
+<history-list options="ctrl.options"></history-list>

node_modules/browser-sync-ui/lib/plugins/history/history.js

@@ -0,0 +1,132 @@
+var url       = require("url");
+var Immutable = require("immutable");
+
+module.exports.init = function (ui, bs) {
+
+    var validUrls = Immutable.OrderedSet();
+
+    var methods = {
+        /**
+         * Send the url list to UI
+         * @param urls
+         */
+        sendUpdatedUrls: function (urls) {
+            ui.socket.emit("ui:history:update", decorateUrls(urls));
+        },
+        /**
+         * Only send to UI if list changed
+         * @param current
+         * @param temp
+         */
+        sendUpdatedIfChanged: function (current, temp) {
+            if (!Immutable.is(current, temp)) {
+                validUrls = temp;
+                methods.sendUpdatedUrls(validUrls);
+            }
+        },
+        /**
+         * Send all clients to a URL - this is a proxy
+         * in case we need to limit/check anything.
+         * @param data
+         */
+        sendToUrl: function (data) {
+
+            var parsed = url.parse(data.path);
+
+            data.override = true;
+            data.path = parsed.path;
+            data.url  = parsed.href;
+
+            ui.clients.emit("browser:location", data);
+        },
+        /**
+         * Add a new path
+         * @param data
+         */
+        addPath: function (data) {
+            var temp = addPath(validUrls, url.parse(data.href), bs.options.get("mode"));
+            methods.sendUpdatedIfChanged(validUrls, temp, ui.socket);
+        },
+        /**
+         * Remove a path
+         * @param data
+         */
+        removePath: function (data) {
+            var temp = removePath(validUrls, data.path);
+            methods.sendUpdatedIfChanged(validUrls, temp, ui.socket);
+        },
+        /**
+         * Get the current list
+         */
+        getVisited: function () {
+            ui.socket.emit("ui:receive:visited", decorateUrls(validUrls));
+        }
+    };
+
+    ui.clients.on("connection", function (client) {
+        client.on("ui:history:connected", methods.addPath);
+    });
+
+    ui.socket.on("connection", function (uiClient) {
+        /**
+         * Send urls on first connection
+         */
+        uiClient.on("ui:get:visited",    methods.getVisited);
+        methods.sendUpdatedUrls(validUrls);
+    });
+
+    ui.listen("history", {
+        "sendAllTo": methods.sendToUrl,
+        "remove":    methods.removePath,
+        "clear":     function () {
+            validUrls = Immutable.OrderedSet([]);
+            methods.sendUpdatedUrls(validUrls);
+        }
+    });
+
+    return methods;
+};
+
+/**
+ * @param {Immutable.Set} urls
+ * @returns {Array}
+ */
+function decorateUrls (urls) {
+    var count = 0;
+    return urls.map(function (value) {
+        count += 1;
+        return {
+            path: value,
+            key: count
+        };
+    }).toJS().reverse();
+}
+
+/**
+ * If snippet mode, add the full URL
+ * if server/proxy, add JUST the path
+ * @param immSet
+ * @param urlObj
+ * @param mode
+ * @returns {Set}
+ */
+function addPath(immSet, urlObj, mode) {
+    return immSet.add(
+        mode === "snippet"
+            ? urlObj.href
+            : urlObj.path
+    );
+}
+
+module.exports.addPath = addPath;
+
+/**
+ * @param immSet
+ * @param urlPath
+ * @returns {*}
+ */
+function removePath(immSet, urlPath) {
+    return immSet.remove(url.parse(urlPath).path);
+}
+
+module.exports.removePath = removePath;

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

@@ -0,0 +1,54 @@
+var historyPlugin = require("./history");
+
+const PLUGIN_NAME = "History";
+
+/**
+ * @type {{plugin: Function, plugin:name: string, markup: string}}
+ */
+module.exports = {
+    /**
+     * @param ui
+     * @param bs
+     */
+    "plugin": function (ui, bs) {
+        ui.history = historyPlugin.init(ui, bs);
+    },
+    /**
+     * Hooks
+     */
+    "hooks": {
+        "markup": fileContent("history.html"),
+        "client:js": fileContent("/history.client.js"),
+        "templates": [
+            getPath("/history.directive.html")
+        ],
+        "page": {
+            path: "/history",
+            title: PLUGIN_NAME,
+            template: "history.html",
+            controller: PLUGIN_NAME + "Controller",
+            order: 3,
+            icon: "list2"
+        }
+    },
+    /**
+     * 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");
+}