node_modules

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

@@ -0,0 +1,85 @@
+/**
+ *
+ */
+(function (angular) {
+
+    var SECTION_NAME          = "plugins";
+
+    angular
+        .module("BrowserSync")
+        .controller("PluginsController", [
+            "options",
+            "Socket",
+            "pagesConfig",
+            PluginsPageController
+        ]);
+
+    /**
+     * @param options
+     * @param Socket
+     * @param pagesConfig
+     * @constructor
+     */
+    function PluginsPageController(options, Socket, pagesConfig) {
+
+
+        var ctrl = this;
+        ctrl.section = pagesConfig[SECTION_NAME];
+
+        ctrl.options     = options.bs;
+        ctrl.uiOptions   = options.ui;
+
+        /**
+         * Don't show this UI as user plugin
+         */
+        var filtered = ctrl.options.userPlugins.filter(function (item) {
+            return item.name !== "UI";
+        }).map(function (item) {
+            item.title = item.name;
+            return item;
+        });
+
+        var named = filtered.reduce(function (all, item) {
+            all[item.name] = item;
+            return all;
+        }, {});
+
+        /**
+         * @type {{loading: boolean}}
+         */
+        ctrl.ui = {
+            loading: false,
+            plugins: filtered,
+            named: named
+        };
+
+        /**
+         * Toggle a pluginrs
+         */
+        ctrl.togglePlugin = function (plugin) {
+            Socket.uiEvent({
+                namespace: SECTION_NAME,
+                event: "set",
+                data: plugin
+            });
+        };
+
+        /**
+         * Set the state of many options
+         * @param value
+         */
+        ctrl.setMany = function (value) {
+            Socket.uiEvent({
+                namespace: SECTION_NAME,
+                event: "setMany",
+                data: value
+            });
+            ctrl.ui.plugins = ctrl.ui.plugins.map(function (item) {
+                item.active = value;
+                return item;
+            });
+        };
+    }
+
+})(angular);
+

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

@@ -0,0 +1,33 @@
+<div bs-panel="controls outline">
+    <h1 bs-heading>
+        <icon icon="{{ctrl.section.icon}}"></icon>
+        {{ctrl.section.title}}
+    </h1>
+    <div ng-if="ui.plugins.length" bs-button-row>
+        <button bs-button="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="inline" ng-click="ctrl.setMany(false)">
+            <svg bs-svg-icon="">
+                <use xlink:href="#svg-circle-delete"></use>
+            </svg>
+            Disable all
+        </button>
+    </div>
+</div>
+
+%pluginlist%
+
+<section ng-if="!ctrl.ui.plugins.length">
+    <div bs-panel>
+        <div bs-panel-content="basic">
+            <p bs-text="lede">Sorry, no plugins were loaded</p>
+            <p>You can either write your own plugin (guide coming soon!) or <a href="https://www.npmjs.org/search?q=browser%20sync%20plugin" target="_blank">Search NPM</a>
+                for packages that contain the keywords <code>browser sync plugin</code>
+            </p>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,74 @@
+const PLUGIN_NAME = "Plugins";
+
+/**
+ * @type {{plugin: Function, plugin:name: string, markup: string}}
+ */
+module.exports = {
+    /**
+     * @param ui
+     * @param bs
+     */
+    "plugin": function (ui, bs) {
+
+        ui.listen("plugins", {
+
+            "set": function (data) {
+                bs.events.emit("plugins:configure", data);
+            },
+
+            "setMany": function (data) {
+
+                if (data.value !== true) {
+                    data.value = false;
+                }
+
+                bs.getUserPlugins()
+                    .filter(function (item) {
+                        return item.name !== "UI    "; // todo dupe code server/client
+                    })
+                    .forEach(function (item) {
+                        item.active = data.value;
+                        bs.events.emit("plugins:configure", item);
+                    });
+            }
+        });
+    },
+    /**
+     * Hooks
+     */
+    "hooks": {
+        "markup": fileContent("plugins.html"),
+        "client:js": fileContent("/plugins.client.js"),
+        "templates": [
+            //getPath("plugins.directive.html")
+        ],
+        "page": {
+            path: "/plugins",
+            title: PLUGIN_NAME,
+            template: "plugins.html",
+            controller: PLUGIN_NAME + "Controller",
+            order: 4,
+            icon: "plug"
+        }
+    },
+    /**
+     * 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");
+}