From 2f4cd1bc9a749054fe3e6ee915b4ba25357e33cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sat, 22 Jul 2017 23:05:05 -0700 Subject: [PATCH] Rewrite config.js as CommonJS and split options to dedicated file, add basic tests --- assets/static/config.js | 280 ++++++++++++++--------------------- assets/static/config.test.js | 9 ++ assets/static/option.js | 52 +++++++ assets/static/option.test.js | 12 ++ 4 files changed, 184 insertions(+), 169 deletions(-) create mode 100644 assets/static/config.test.js create mode 100644 assets/static/option.js create mode 100644 assets/static/option.test.js diff --git a/assets/static/config.js b/assets/static/config.js index dd3ceb34b..17b8d906f 100644 --- a/assets/static/config.js +++ b/assets/static/config.js @@ -1,189 +1,131 @@ -/* globals Clipboard */ // clipboard.js -/* globals Cookies */ // js.cookie.js +const $ = require("jquery"); +const Cookies = require("js-cookie"); +const Clipboard = require("clipboard"); -/* globals Filters, Unsee, QueryString */ +const filters = require("./filters"); +const Option = require("./option"); +const unsee = require("./unsee"); +const querystring = require("./querystring"); -/* exported ConfigOption */ -var ConfigOption = (function() { +var options = {}; - function optionClass(params) { - this.Cookie = params.Cookie; - this.QueryParam = params.QueryParam; - this.Selector = params.Selector; - this.Get = params.Getter || function() { - return $(this.Selector).is(":checked"); - }; - this.Set = params.Setter || function(val) { - $(this.Selector).bootstrapSwitch("state", $.parseJSON(val), true); - }; - this.Action = params.Action || function() {}; - this.Init = params.Init || function() { - var elem = this; - $(this.Selector).on("switchChange.bootstrapSwitch", function(event, val) { - elem.Save(val); - elem.Action(val); +function newOption(params) { + var opt = new Option(params); + opt.Init(); + options[opt.QueryParam] = opt; +} + +function getOption(queryParam) { + return options[queryParam]; +} + +function loadFromCookies() { + $.each(options, function(name, option) { + var value = option.Load(); + if (value !== undefined) { + option.Set(value); + } + }); +} + +function reset() { + // this is not part of options map + Cookies.remove("defaultFilter.v2"); + $.each(options, function(name, option) { + Cookies.remove(option.Cookie); + }); +} + +function init(params) { + + // copy current filter button action + new Clipboard(params.CopySelector, { + text: function(elem) { + var baseUrl = [ location.protocol, "//", location.host, location.pathname ].join(""); + var query = [ "q=" + filters.getFilters().join(",") ]; + $.each(options, function(name, option) { + query.push(option.QueryParam + "=" + option.Get().toString()); }); - }; - } - - optionClass.prototype.Load = function() { - var currentVal = this.Get(); - - var val = Cookies.get(this.Cookie); - if (val !== undefined) { - this.Set(val); + $(elem).finish().fadeOut(100).fadeIn(300); + return baseUrl + "?" + query.join("&"); } + }); - var q = QueryString.Parse(); - if (q[this.QueryParam] !== undefined) { - this.Set(q[this.QueryParam]); - val = q[this.QueryParam]; - } - - if (currentVal != val) { - this.Action(val); - } - }; - - optionClass.prototype.Save = function(val) { - Cookies.set(this.Cookie, val, { + // save settings button action + $(params.SaveSelector).on("click", function() { + var filter = filters.getFilters().join(","); + Cookies.set("defaultFilter.v2", filter, { expires: 365, path: "" }); - }; + $(params.SaveSelector).finish().fadeOut(100).fadeIn(300); + }); - return { - New: optionClass - }; + // reset settings button action + $(params.ResetSelector).on("click", function() { + reset(); + querystring.remove("q"); + location.reload(); + }); -}()); + // https://github.com/twbs/bootstrap/issues/2097 + $(document).on("click", ".dropdown-menu.dropdown-menu-form", function(e) { + e.stopPropagation(); + }); -/* exported Config */ -var Config = (function() { - - var options = {}; - - var loadFromCookies = function() { - $.each(options, function(name, option) { - var value = option.Load(); - if (value !== undefined) { - option.Set(value); + newOption({ + Cookie: "autoRefresh", + QueryParam: "autorefresh", + Selector: "#autorefresh", + Action: function(val) { + if (val) { + unsee.resume(); + } else { + unsee.pause(); } - }); - }; + } + }); - var reset = function() { - // this is not part of options map - Cookies.remove("defaultFilter.v2"); - $.each(options, function(name, option) { - Cookies.remove(option.Cookie); - }); - }; - - var init = function(params) { - - // copy current filter button action - new Clipboard(params.CopySelector, { - text: function(elem) { - var baseUrl = [ location.protocol, "//", location.host, location.pathname ].join(""); - var query = [ "q=" + Filters.GetFilters().join(",") ]; - $.each(options, function(name, option) { - query.push(option.QueryParam + "=" + option.Get().toString()); - }); - $(elem).finish().fadeOut(100).fadeIn(300); - return baseUrl + "?" + query.join("&"); - } - }); - - // save settings button action - $(params.SaveSelector).on("click", function() { - var filter = Filters.GetFilters().join(","); - Cookies.set("defaultFilter.v2", filter, { - expires: 365, - path: "" + newOption({ + Cookie: "refreshInterval", + QueryParam: "refresh", + Selector: "#refresh-interval", + Init: function() { + var elem = this; + $(this.Selector).on("change", function() { + var val = elem.Get(); + elem.Save(val); + elem.Action(val); }); - $(params.SaveSelector).finish().fadeOut(100).fadeIn(300); - }); - - // reset settings button action - $(params.ResetSelector).on("click", function() { - Config.Reset(); - QueryString.Remove("q"); - location.reload(); - }); - - // https://github.com/twbs/bootstrap/issues/2097 - $(document).on("click", ".dropdown-menu.dropdown-menu-form", function(e) { - e.stopPropagation(); - }); - - Config.NewOption({ - Cookie: "autoRefresh", - QueryParam: "autorefresh", - Selector: "#autorefresh", - Action: function(val) { - if (val) { - Unsee.WaitForNextReload(); - } else { - Unsee.Pause(); - } - } - }); - - Config.NewOption({ - Cookie: "refreshInterval", - QueryParam: "refresh", - Selector: "#refresh-interval", - Init: function() { - var elem = this; - $(this.Selector).on("change", function() { - var val = elem.Get(); - elem.Save(val); - elem.Action(val); - }); - }, - Getter: function() { - return $(this.Selector).val(); - }, - Setter: function(val) { - $(this.Selector).val(parseInt(val)); - }, - Action: function(val) { - Unsee.SetRefreshRate(parseInt(val)); - } - }); + }, + Getter: function() { + return $(this.Selector).val(); + }, + Setter: function(val) { + $(this.Selector).val(parseInt(val)); + }, + Action: function(val) { + unsee.setRefreshRate(parseInt(val)); + } + }); - Config.NewOption({ - Cookie: "showFlash", - QueryParam: "flash", - Selector: "#show-flash" - }); + newOption({ + Cookie: "showFlash", + QueryParam: "flash", + Selector: "#show-flash" + }); - Config.NewOption({ - Cookie: "appendTop", - QueryParam: "appendtop", - Selector: "#append-top" - }); + newOption({ + Cookie: "appendTop", + QueryParam: "appendtop", + Selector: "#append-top" + }); - }; +} - var newOption = function(params) { - var option = new ConfigOption.New(params); - option.Init(); - options[option.QueryParam] = option; - }; - - var getOption = function(queryParam) { - return options[queryParam]; - }; - - return { - Init: init, - Load: loadFromCookies, - Reset: reset, - NewOption: newOption, - GetOption: getOption - }; - -}()); +exports.init = init; +exports.reset = reset; +exports.loadFromCookies = loadFromCookies; +exports.newOption = newOption; +exports.getOption = getOption; diff --git a/assets/static/config.test.js b/assets/static/config.test.js new file mode 100644 index 000000000..fd52bd354 --- /dev/null +++ b/assets/static/config.test.js @@ -0,0 +1,9 @@ +test("config init()", () => { + window.jQuery = require("jquery"); + const config = require("./config"); + config.init({ + CopySelector: "#copy-settings-with-filter", + SaveSelector: "#save-default-filter", + ResetSelector: "#reset-settings" + }); +}); diff --git a/assets/static/option.js b/assets/static/option.js new file mode 100644 index 000000000..cf5d4101e --- /dev/null +++ b/assets/static/option.js @@ -0,0 +1,52 @@ +const $ = require("jquery"); +const Cookies = require("js-cookie"); + +const querystring = require("./querystring"); + +function Option(params) { + this.Cookie = params.Cookie; + this.QueryParam = params.QueryParam; + this.Selector = params.Selector; + this.Get = params.Getter || function() { + return $(this.Selector).is(":checked"); + }; + this.Set = params.Setter || function(val) { + $(this.Selector).bootstrapSwitch("state", $.parseJSON(val), true); + }; + this.Action = params.Action || function() {}; + this.Init = params.Init || function() { + var elem = this; + $(this.Selector).on("switchChange.bootstrapSwitch", function(event, val) { + elem.Save(val); + elem.Action(val); + }); + }; +} + +Option.prototype.Load = function() { + var currentVal = this.Get(); + + var val = Cookies.get(this.Cookie); + if (val !== undefined) { + this.Set(val); + } + + var q = querystring.parse(); + if (q[this.QueryParam] !== undefined) { + this.Set(q[this.QueryParam]); + val = q[this.QueryParam]; + } + + if (currentVal != val) { + this.Action(val); + } +}; + +Option.prototype.Save = function(val) { + Cookies.set(this.Cookie, val, { + expires: 365, + path: "" + }); +}; + +module.exports = Option; diff --git a/assets/static/option.test.js b/assets/static/option.test.js new file mode 100644 index 000000000..bdc03b949 --- /dev/null +++ b/assets/static/option.test.js @@ -0,0 +1,12 @@ +const Option = require("./option"); + +test("new Option()", () => { + var opt = new Option({ + Cookie: "myCookie", + QueryParam: "myQuery", + Selector: "#toggle" + }); + expect(opt.Cookie).toBe("myCookie"); + expect(opt.QueryParam).toBe("myQuery"); + expect(opt.Selector).toBe("#toggle") +});