From 41e7e25b13b9d63a67b4365d102b9dd5a66d3c6e Mon Sep 17 00:00:00 2001 From: Vlad Chernushevich Date: Fri, 14 Jun 2013 15:41:03 +0200 Subject: [PATCH] * New options page * Update settings on change --- client/assets/css/style.css | 13 +- client/assets/src/applets/settings.js | 183 +++++++++++++------------- client/assets/src/index.html.tmpl | 116 +++++++++------- 3 files changed, 163 insertions(+), 149 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index c9549ca..e91c28e 100644 --- a/client/assets/css/style.css +++ b/client/assets/css/style.css @@ -219,18 +219,7 @@ html, body { height:100%; } /* Settings applet */ -#kiwi .settings { - width:900px; - margin:1em auto; -} -#kiwi .settings table td { - padding:0.5em 1em; -} -#kiwi .settings .save .feedback { - display: none; - position: relative; - left: -1.6em; -} +#kiwi .settings{padding:50px}#kiwi .settings article,#kiwi .settings aside,#kiwi .settings details,#kiwi .settings figcaption,#kiwi .settings figure,#kiwi .settings footer,#kiwi .settings header,#kiwi .settings hgroup,#kiwi .settings main,#kiwi .settings nav,#kiwi .settings section,#kiwi .settings summary{display:block}#kiwi .settings audio,#kiwi .settings canvas,#kiwi .settings video{display:inline-block}#kiwi .settings audio:not([controls]){display:none;height:0}#kiwi .settings [hidden]{display:none}#kiwi .settings html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}#kiwi .settings body{margin:0}#kiwi .settings a:focus{outline:thin dotted}#kiwi .settings a:active,#kiwi .settings a:hover{outline:0}#kiwi .settings h1{font-size:2em}#kiwi .settings abbr[title]{border-bottom:1px dotted}#kiwi .settings b,#kiwi .settings strong{font-weight:bold}#kiwi .settings dfn{font-style:italic}#kiwi .settings hr{height:0}#kiwi .settings mark{background:#ff0;color:#000}#kiwi .settings code,#kiwi .settings kbd,#kiwi .settings pre,#kiwi .settings samp{font-family:monospace, serif;font-size:1em}#kiwi .settings pre{white-space:pre-wrap}#kiwi .settings q{quotes:"\201C" "\201D" "\2018" "\2019"}#kiwi .settings small{font-size:85%}#kiwi .settings sub,#kiwi .settings sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}#kiwi .settings sup{top:-0.5em}#kiwi .settings sub{bottom:-0.25em}#kiwi .settings img{border:0;max-width:100%;vertical-align:bottom}#kiwi .settings .map img{max-width:none}#kiwi .settings svg:not(:root){overflow:hidden}#kiwi .settings figure{margin:0}#kiwi .settings fieldset{border:1px solid #c0c0c0;margin:0;padding:0}#kiwi .settings legend{border:0;padding:0}#kiwi .settings button,#kiwi .settings input,#kiwi .settings select,#kiwi .settings textarea{font-family:inherit;font-size:100%;margin:0}#kiwi .settings button,#kiwi .settings input{line-height:normal}#kiwi .settings button,#kiwi .settings select{text-transform:none}#kiwi .settings button,#kiwi .settings html input[type="button"],#kiwi .settings input[type="reset"],#kiwi .settings input[type="submit"]{-webkit-appearance:button;cursor:pointer}#kiwi .settings button[disabled],#kiwi .settings html input[disabled]{cursor:default}#kiwi .settings input[type="checkbox"],#kiwi .settings input[type="radio"]{padding:0}#kiwi .settings input[type="search"]{-webkit-appearance:textfield}#kiwi .settings input[type="search"]::-webkit-search-cancel-button,#kiwi .settings input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}#kiwi .settings button::-moz-focus-inner,#kiwi .settings input::-moz-focus-inner{border:0;padding:0}#kiwi .settings textarea{overflow:auto;vertical-align:top}#kiwi .settings table{border-collapse:collapse;border-spacing:0}#kiwi .settings .clearfix:before,#kiwi .settings .list-inline:before,#kiwi .settings .thumbnails:before,#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{content:' ';display:table}#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{clear:both}#kiwi .settings .list-unstyled,#kiwi .settings .list-inline,#kiwi .settings .thumbnails{list-style-type:none;margin:0;padding:0}#kiwi .settings .list-inline>li,#kiwi .settings .thumbnails>li{display:inline-block}#kiwi .settings *,#kiwi .settings *:after,#kiwi .settings *:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#kiwi .settings label{cursor:pointer}#kiwi .settings input,#kiwi .settings select,#kiwi .settings textarea{width:100%}#kiwi .settings input[size],#kiwi .settings select[size],#kiwi .settings textarea[size]{width:auto}#kiwi .settings input[type="file"],#kiwi .settings input[type="image"],#kiwi .settings input[type="submit"],#kiwi .settings input[type="reset"],#kiwi .settings input[type="button"],#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{width:auto}#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{cursor:pointer}#kiwi .settings .radio label,#kiwi .settings .checkbox label{cursor:pointer}#kiwi .settings .radio input[type="radio"],#kiwi .settings .checkbox input[type="checkbox"]{float:left;margin-left:-20px}#kiwi .settings .thumbnail{float:left}@media screen and (max-width: 768px){#kiwi .settings{padding:25px}} diff --git a/client/assets/src/applets/settings.js b/client/assets/src/applets/settings.js index f1ac614..ac461a1 100644 --- a/client/assets/src/applets/settings.js +++ b/client/assets/src/applets/settings.js @@ -1,92 +1,95 @@ (function () { - var View = Backbone.View.extend({ - events: { - 'click .save': 'saveSettings' - }, - - initialize: function (options) { - this.$el = $($('#tmpl_applet_settings').html().trim()); - - // Incase any settings change while we have this open, update them - _kiwi.global.settings.on('change', this.loadSettings, this); - - // Now actually show the current settings - this.loadSettings(); - - - }, - - loadSettings: function () { - var settings = _kiwi.global.settings; - - // TODO: Tidy this up - var theme = settings.get('theme') || 'relaxed'; - this.$el.find('.setting-theme option').filter(function() { - return $(this).val() === theme; - }).prop('selected', true); - - var list_style = settings.get('channel_list_style') || 'tabs'; - this.$el.find('.setting-channel_list_style option').filter(function() { - return $(this).val() === list_style; - }).prop('selected', true); - - this.$el.find('.setting-scrollback').val(settings.get('scrollback') || '250'); - - if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) { - this.$el.find('.setting-show_joins_parts').prop('checked', true); - } else { - this.$el.find('.setting-show_joins_parts').prop('checked', false); - } - - if (typeof settings.get('show_timestamps') === 'undefined' || !settings.get('show_timestamps')) { - this.$el.find('.setting-show_timestamps').prop('checked', false); - } else { - this.$el.find('.setting-show_timestamps').prop('checked', true); - } - - if (typeof settings.get('mute_sounds') === 'undefined' || settings.get('mute_sounds')) { - this.$el.find('.setting-mute_sounds').prop('checked', true); - } else { - this.$el.find('.setting-mute_sounds').prop('checked', false); - } - }, - - - saveSettings: function () { - var settings = _kiwi.global.settings, - feedback; - - // Stop settings being updated while we're saving one by one - settings.off('change', this.loadSettings, this); - - settings.set('theme', $('.setting-theme', this.$el).val()); - settings.set('channel_list_style', $('.setting-channel_list_style', this.$el).val()); - settings.set('scrollback', $('.setting-scrollback', this.$el).val()); - settings.set('show_joins_parts', $('.setting-show_joins_parts', this.$el).is(':checked')); - settings.set('show_timestamps', $('.setting-show_timestamps', this.$el).is(':checked')); - settings.set('mute_sounds', $('.setting-mute_sounds', this.$el).is(':checked')); - - settings.save(); - - feedback = $('.feedback', this.$el); - feedback.fadeIn('slow', function () { - feedback.fadeOut('slow'); - }); - - // Continue listening for setting changes - settings.on('change', this.loadSettings, this); - } - }); - - - - var Applet = Backbone.Model.extend({ - initialize: function () { - this.set('title', 'Settings'); - this.view = new View(); - } - }); - - - _kiwi.model.Applet.register('kiwi_settings', Applet); + var View = Backbone.View.extend({ + events: { + 'change [data-setting]': 'saveSettings', + 'click [data-setting="theme"]': 'selectTheme' + }, + + initialize: function (options) { + this.$el = $($('#tmpl_applet_settings').html().trim()); + + // Incase any settings change while we have this open, update them + _kiwi.global.settings.on('change', this.loadSettings, this); + + // Now actually show the current settings + this.loadSettings(); + + }, + + loadSettings: function () { + + var settings = _kiwi.global.settings, + theme = settings.get('theme') || 'relaxed', + channel_style = settings.get('channel_list_style') || 'tabs', + scrollback = settings.get('scrollback') || '250'; + + $('[data-setting="theme"][data-value="' + theme + '"]', this.$el).addClass('active'); + + $('[data-setting="channel_list_style"][value="' + channel_style + '"]', this.$el).prop('checked', true); + + if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) { + $('[data-setting="show_joins_parts"]', this.$el).prop('checked', true); + } else { + $('[data-setting="show_joins_parts"]', this.$el).prop('checked', false); + } + + if (typeof settings.get('show_timestamps') === 'undefined' || settings.get('show_timestamps')) { + $('[data-setting="show_timestamps"]', this.$el).prop('checked', true); + } else { + $('[data-setting="show_timestamps"]', this.$el).prop('checked', false); + } + + if (typeof settings.get('mute_sounds') === 'undefined' || settings.get('mute_sounds')) { + $('[data-setting="mute_sounds"]', this.$el).prop('checked', true); + } else { + $('[data-setting="mute_sounds"]', this.$el).prop('checked', false); + } + + $('[data-setting="scrollback"]', this.$el).val(scrollback); + }, + + saveSettings: function (event) { + var value, + settings = _kiwi.global.settings, + $setting = $(event.currentTarget, this.$el) + + switch (event.currentTarget.type) { + case 'checkbox': + value = $setting.is(':checked'); + break; + case 'radio': + case 'text': + value = $setting.val(); + break; + default: + value = $setting.data('value'); + break; + } + + // Stop settings being updated while we're saving one by one + _kiwi.global.settings.off('change', this.loadSettings, this); + settings.set($setting.data('setting'), value); + settings.save(); + + // Continue listening for setting changes + _kiwi.global.settings.on('change', this.loadSettings, this); + }, + + selectTheme: function(event) { + $('[data-setting="theme"].active', this.$el).removeClass('active'); + $(event.currentTarget).addClass('active').trigger('change'); + event.preventDefault(); + } + }); + + + var Applet = Backbone.Model.extend({ + initialize: function () { + this.set('title', 'Settings'); + this.view = new View(); + } + }); + + + _kiwi.model.Applet.register('kiwi_settings', Applet); })(); \ No newline at end of file diff --git a/client/assets/src/index.html.tmpl b/client/assets/src/index.html.tmpl index 57610e5..c8f9012 100644 --- a/client/assets/src/index.html.tmpl +++ b/client/assets/src/index.html.tmpl @@ -173,53 +173,75 @@ -- 2.25.1