client/assets/src/applets/settings.js

   1 (function () {
   2     var View = Backbone.View.extend({
   3         events: {
   4             'change [data-setting]': 'saveSettings',
   5             'click [data-setting="theme"]': 'selectTheme'
   6         },
   7
   8         initialize: function (options) {
   9             this.$el = $($('#tmpl_applet_settings').html().trim());
  10
  11             // Incase any settings change while we have this open, update them
  12             _kiwi.global.settings.on('change', this.loadSettings, this);
  13
  14             // Now actually show the current settings
  15             this.loadSettings();
  16
  17         },
  18
  19         loadSettings: function () {
  20
  21             var that = this;
  22
  23             $.each(_kiwi.global.settings.attributes, function(key, value) {
  24
  25                 console.log(key, value);
  26
  27                 var $el = $('[data-setting="' + key + '"]', that.$el);
  28
  29                 // Only deal with settings we have a UI element for
  30                 if (!$el.length)
  31                     return;
  32
  33                 switch ($el.prop('type')) {
  34                     case 'checkbox':
  35                         $el.prop('checked', value);
  36                         break;
  37                     case 'radio':
  38                         $('[data-setting="' + key + '"][value="' + value + '"]', that.$el).prop('checked', true);
  39                         break;
  40                     case 'text':
  41                         $el.val(value);
  42                         break;
  43                     default:
  44                         $('[data-setting="' + key + '"][data-value="' + value + '"]', that.$el).addClass('active');
  45                         break;
  46                 }
  47             });
  48         },
  49
  50         saveSettings: function (event) {
  51             var value,
  52                 settings = _kiwi.global.settings,
  53                 $setting = $(event.currentTarget, this.$el)
  54
  55             switch (event.currentTarget.type) {
  56                 case 'checkbox':
  57                     value = $setting.is(':checked');
  58                     break;
  59                 case 'radio':
  60                 case 'text':
  61                     value = $setting.val();
  62                     break;
  63                 default:
  64                     value = $setting.data('value');
  65                     break;
  66             }
  67
  68             // Stop settings being updated while we're saving one by one
  69             _kiwi.global.settings.off('change', this.loadSettings, this);
  70             settings.set($setting.data('setting'), value);
  71             settings.save();
  72
  73             // Continue listening for setting changes
  74             _kiwi.global.settings.on('change', this.loadSettings, this);
  75         },
  76
  77         selectTheme: function(event) {
  78             $('[data-setting="theme"].active', this.$el).removeClass('active');
  79             $(event.currentTarget).addClass('active').trigger('change');
  80             event.preventDefault();
  81         }
  82     });
  83
  84
  85     var Applet = Backbone.Model.extend({
  86         initialize: function () {
  87             this.set('title', 'Settings');
  88             this.view = new View();
  89         }
  90     });
  91
  92
  93     _kiwi.model.Applet.register('kiwi_settings', Applet);
  94 })();