前端代码

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

@@ -0,0 +1,94 @@
+(function (angular) {
+
+    const SECTION_NAME = "sync-options";
+
+    angular
+        .module("BrowserSync")
+        .controller("SyncOptionsController", [
+            "Socket",
+            "options",
+            "pagesConfig",
+            SyncOptionsController
+        ]);
+
+    /**
+     * @param Socket
+     * @param options
+     * @param pagesConfig
+     * @constructor
+     */
+    function SyncOptionsController(Socket, options, pagesConfig) {
+
+        var ctrl = this;
+        ctrl.options = options.bs;
+        ctrl.section = pagesConfig[SECTION_NAME];
+
+        ctrl.setMany = function (value) {
+            Socket.uiEvent({
+                namespace: SECTION_NAME,
+                event: "setMany",
+                data: {
+                    value: value
+                }
+            });
+            ctrl.syncItems = ctrl.syncItems.map(function (item) {
+                item.value = value;
+                return item;
+            });
+        };
+
+        /**
+         * Toggle Options
+         * @param item
+         */
+        ctrl.toggleSyncItem = function (item) {
+            Socket.uiEvent({
+                namespace: SECTION_NAME,
+                event: "set",
+                data: {
+                    path:  item.path,
+                    value: item.value
+                }
+            });
+        };
+
+        ctrl.syncItems = [];
+
+        var taglines = {
+            clicks:  "Mirror clicks across devices",
+            scroll:  "Mirror scroll position across devices",
+            "ghostMode.submit":  "Form Submissions will be synced",
+            "ghostMode.inputs":  "Text inputs (including text-areas) will be synced",
+            "ghostMode.toggles": "Radio + Checkboxes changes will be synced",
+            codeSync:            "Reload or Inject files when they change"
+        };
+
+        // If watching files, add the code-sync toggle
+        ctrl.syncItems.push(addItem("codeSync", ["codeSync"], ctrl.options.codeSync, taglines["codeSync"]));
+
+        Object.keys(ctrl.options.ghostMode).forEach(function (item) {
+            if (item !== "forms" && item !== "location") {
+                ctrl.syncItems.push(addItem(item, ["ghostMode", item], ctrl.options.ghostMode[item], taglines[item]));
+            }
+        });
+
+        Object.keys(ctrl.options.ghostMode.forms).forEach(function (item) {
+            ctrl.syncItems.push(addItem("Forms: " + item, ["ghostMode", "forms", item], ctrl.options.ghostMode["forms"][item], taglines["ghostMode." + item]));
+        });
+
+        function addItem (item, path, value, tagline) {
+            return {
+                value: value,
+                name: item,
+                path: path,
+                title: ucfirst(item),
+                tagline: tagline
+            };
+        }
+    }
+
+    function ucfirst (string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+
+})(angular);

node_modules/browser-sync-ui/lib/plugins/sync-options/sync-options.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>
+    <div bs-button-row>
+        <button bs-button="icon-left inline success" ng-click="ctrl.setMany(true)">
+            <svg bs-svg-icon><use xlink:href="#svg-circle-ok"></use></svg>
+            Enable All
+        </button>
+        <button bs-button="icon-left inline" ng-click="ctrl.setMany(false)">
+            <svg bs-svg-icon><use xlink:href="#svg-circle-delete"></use></svg>
+            Disable all
+        </button>
+    </div>
+
+    <switch toggle="ctrl.toggleSyncItem(item)"
+            switchid="sync-options-{{$index}}"
+            active="item.value"
+            prop="value"
+            ng-repeat="item in ctrl.syncItems track by $index"
+            item="item"></switch>
+</article>

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

@@ -0,0 +1,66 @@
+const PLUGIN_NAME = "Sync Options";
+var chalk         = require("chalk");
+
+/**
+ * @type {{plugin: Function, plugin:name: string, hooks: object}}
+ */
+module.exports = {
+
+    "plugin": function (ui, bs) {
+
+        ui.listen("sync-options", {
+
+            "set": function (data) {
+
+                ui.logger.debug("Setting option: %s:%s", chalk.magenta(data.path.join(".")), chalk.cyan(data.value));
+                bs.setOptionIn(data.path, data.value);
+            },
+
+            "setMany": function (data) {
+
+                ui.logger.debug("Setting Many options...");
+
+                if (data.value !== true) {
+                    data.value = false;
+                }
+
+                bs.setMany(function (item) {
+                    [
+                        ["codeSync"],
+                        ["ghostMode", "clicks"],
+                        ["ghostMode", "scroll"],
+                        ["ghostMode", "forms", "inputs"],
+                        ["ghostMode", "forms", "toggles"],
+                        ["ghostMode", "forms", "submit"]
+                    ].forEach(function (option) {
+                            item.setIn(option, data.value);
+                        });
+                });
+
+                return bs;
+            }
+        });
+    },
+    "hooks": {
+        "markup": fileContent("sync-options.html"),
+        "client:js": fileContent("sync-options.client.js"),
+        "templates": [],
+        "page": {
+            path: "/sync-options",
+            title: PLUGIN_NAME,
+            template: "sync-options.html",
+            controller: PLUGIN_NAME.replace(" ", "") + "Controller",
+            order: 2,
+            icon: "sync"
+        }
+    },
+    "plugin:name": PLUGIN_NAME
+};
+
+function getPath (filepath) {
+    return require("path").join(__dirname, filepath);
+}
+
+function fileContent (filepath) {
+    return require("fs").readFileSync(getPath(filepath), "utf-8");
+}