pageflow 15.3.0 → 15.4.0

data/entry_types/scrolled/package/package.json

@@ -11,18 +11,30 @@
     "debounce": "^1.2.0",
     "deep-assign": "^3.0.0",
     "intersection-observer": "^0.7.0",
+    "invert-color": "^2.0.0",
     "prop-types": "^15.7.2",
     "react-compare-image": "https://github.com/codevise/react-compare-image#offset-width-fix",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-draggable": "^4.4.2",
     "react-measure": "^2.3.0",
     "react-player": "^1.15.2",
     "react-tooltip": "^3.11.1",
     "react_ujs": "^2.6.1",
+    "reselect": "^4.0.0",
     "slate": "^0.57.3",
     "slate-react": "^0.57.3",
+    "slugify": "^1.4.6",
+    "striptags": "^3.1.1",
+    "use-context-selector": "^1.2.11",
+    "video.js": "6.2.7",
+    "videojs-contrib-dash": "2.11.0",
     "wavesurfer.js": "https://github.com/tf/wavesurfer.js#patches",
     "whatwg-fetch": "^3.0.0"
   },
+  "resolutions": {
+    "video.js": "6.2.7"
+  },
   "peerDependencies": {
     "pageflow": "15.1.0",
     "react": "^16.9.0",
@@ -57,8 +69,8 @@
   "scripts": {
     "test": "jest",
     "lint": "eslint .",
-    "start-storybook": "start-storybook",
-    "build-storybook": "build-storybook -o .storybook/out",
-    "snapshot": "STORYBOOK_SPLIT=true build-storybook --quiet -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
+    "start-storybook": "start-storybook -s .storybook/static",
+    "build-storybook": "build-storybook -s .storybook/static -o .storybook/out",
+    "snapshot": "STORYBOOK_SPLIT=true build-storybook --quiet -s .storybook/static -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
   }
 }

data/lib/generators/pageflow/initializer/templates/pageflow.rb

@@ -25,7 +25,8 @@ Pageflow.configure do |config|
 
   config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
     entry_type_config.themes.register(:default,
-                                      logo_alt_text: 'Pageflow')
+                                      logo_alt_text: 'Pageflow',
+                                      theme_color: '#ffffff')
   end
 
   # String to interpolate into paths of files generated by paperclip

data/lib/pageflow/engine.rb

@@ -118,7 +118,6 @@ module Pageflow
         pageflow/print_view.css
         pageflow/lt_ie9.js pageflow/lt_ie9.css pageflow/ie9.js pageflow/ie9.css
         pageflow/vendor.js
-        pageflow/videojs
         pageflow/editor/vendor.js
         video-js.swf vjs.eot vjs.svg vjs.ttf vjs.woff
       )

data/lib/pageflow/themes.rb

@@ -36,6 +36,10 @@ module Pageflow
     # @option options :hide_logo_option [Boolean]
     #   Pass true if hiding the logo on specific pages should be supported
     #   as an option in the editor.
+    #
+    # @option options :logo_url [String]
+    #   Pass logo url as string to turn the logo in navigation bar into a link.
+    #
     def register(name, options = {})
       @themes[name] = Theme.new(name, options)
     end

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '15.3.0'.freeze
+  VERSION = '15.4.0'.freeze
 end

data/package/config/jest/index.js

@@ -1,6 +1,12 @@
 const path = require('path');
 
 module.exports = {
+  globals: {
+    pageflow: {
+      config: {}
+    }
+  },
+
   moduleNameMapper: {
     '^jquery$': resolve('../../src/vendor/jquery'),
     '^jquery-ui$': resolve('../../src/vendor/jquery-ui'),
@@ -11,8 +17,7 @@ module.exports = {
     '^underscore$': resolve('../../src/vendor/underscore'),
     '^cocktail$': resolve('../../src/vendor/cocktail'),
     '^iscroll$': resolve('../../src/vendor/iscroll'),
-    '^wysihtml5': resolve('../../spec/support/wysihtmlStub'),
-    '^videojs$': resolve('../../../vendor/assets/javascripts/videojs')
+    '^wysihtml5': resolve('../../spec/support/wysihtmlStub')
   },
 
   transform: {

data/package/config/webpack.js

@@ -9,8 +9,7 @@ module.exports = {
     'underscore': '_',
     'backbone.marionette': 'Backbone.Marionette',
     'iscroll': 'IScroll',
-    'wysihtml5': 'wysihtml5',
-    'videojs': 'videojs',
+    'wysihtml5': 'wysihtml5'
   },
   // Webpack's chunk loading code references `window` by default -
   // which is not available in server side rendering context.

data/package/editor.js

@@ -1192,10 +1192,10 @@ var startEditor = function startEditor(options) {
   I18n$1.translations = window.I18n.translations;
   $(function () {
     editor.ensureBrowserSupport(function () {
-      $.when($.getJSON('/editor/entries/' + options.entryId + '/seed'), browser.detectFeatures()).done(function (result) {
-        app.start(result[0]);
-      }).fail(function () {
-        alert('Error while starting editor.');
+      Promise.all([$.getJSON('/editor/entries/' + options.entryId + '/seed'), browser.detectFeatures()]).then(function (result) {
+        return app.start(result[0]);
+      }, function () {
+        return alert('Error while starting editor.');
       });
     });
   });

data/package/frontend.js

@@ -14,7 +14,7 @@ import 'core-js/modules/esnext.promise.try';
 import 'core-js/modules/web.dom-collections.iterator';
 import 'classlist.js';
 import BackboneEvents from 'backbone-events-standalone';
-import VideoJS from 'videojs';
+import VideoJS from 'video.js';
 
 var log = function log(text, options) {
   if (window.console && (debugMode() || options && options.force)) {
@@ -486,6 +486,9 @@ browser.feature('mp4 support only', function (has) {
 browser.feature('mse and native hls support', function (has) {
   return agent.matchesSafari() && !agent.matchesMobilePlatform();
 });
+browser.feature('hls support', function (has) {
+  return agent.matchesSafari() || agent.matchesMobilePlatform();
+});
 browser.feature('native video player', function (has) {
   return has('iphone platform');
 });
@@ -1540,6 +1543,10 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+if (typeof window !== 'undefined') {
+  window.VIDEOJS_NO_DYNAMIC_STYLE = true;
+}
+
 var filterSources = function filterSources(playerElement) {
   if (playerElement.tagName.toLowerCase() !== 'video') {
     return playerElement;
@@ -1885,12 +1892,6 @@ var VideoPlayer = function VideoPlayer(element, options) {
   return player;
 };
 
-if (VideoJS.Html5DashJS) {
-  VideoJS.Html5DashJS.hook('beforeinitialize', function (player, mediaPlayer) {
-    mediaPlayer.getDebug().setLogToBrowserConsole(false);
-  });
-}
-
 VideoPlayer.useSlimPlayerControlsDuringPhonePlayback = useSlimPlayerControlsDuringPhonePlayback;
 VideoPlayer.prebuffering = prebuffering;
 VideoPlayer.filterSources = filterSources;
@@ -1956,8 +1957,14 @@ var createMediaPlayer = function createMediaPlayer(options) {
 var BLANK_AUDIO_SRC = 'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBA' + 'AAAABAAEAIlYAAESsAAACABAAZGF0YRAAAAAAAAAAAAAAAAAAAAAAAA==';
 var BLANK_VIDEO_SRC = 'data:video/mp4;base64,AAAAHGZ0eXBNNFYgAAACAG' + 'lzb21pc28yYXZjMQAAAAhmcmVlAAAGF21kYXTeBAAAbGliZmFhYyAxLjI4AABCAJMgBDIARw' + 'AAArEGBf//rdxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNDIgcjIgOTU2YzhkOCAtIE' + 'guMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMTQgLSBodHRwOi8vd3' + 'd3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0wIHJlZj0zIGRlYm' + 'xvY2s9MTowOjAgYW5hbHlzZT0weDE6MHgxMTEgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3' + 'JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbG' + 'lzPTEgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV' + '9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02IGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3Rocm' + 'VhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb2' + '5zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTI1MCBrZXlpbn' + 'RfbWluPTI1IHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcm' + 'M9Y3JmIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcH' + 'N0ZXA9NCB2YnZfbWF4cmF0ZT03NjggdmJ2X2J1ZnNpemU9MzAwMCBjcmZfbWF4PTAuMCBuYW' + 'xfaHJkPW5vbmUgZmlsbGVyPTAgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAFZliIQL8m' + 'KAAKvMnJycnJycnJycnXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' + 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXiEASZACGQAjgCEASZACGQAjgAAAAAdBmjgX4G' + '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' + 'AAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAQkAAADcAABAA' + 'AAAAPgbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAC7gAAAykBVxAAAAAAALWhkbHIAAAAAAA' + 'AAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAADi21pbmYAAAAQc21oZAAAAAAAAA' + 'AAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAADT3N0YmwAAABnc3RzZA' + 'AAAAAAAAABAAAAV21wNGEAAAAAAAAAAQAAAAAAAAAAAAIAEAAAAAC7gAAAAAAAM2VzZHMAAA' + 'AAA4CAgCIAAgAEgICAFEAVBbjYAAu4AAAADcoFgICAAhGQBoCAgAECAAAAIHN0dHMAAAAAAA' + 'AAAgAAADIAAAQAAAAAAQAAAkAAAAFUc3RzYwAAAAAAAAAbAAAAAQAAAAEAAAABAAAAAgAAAA' + 'IAAAABAAAAAwAAAAEAAAABAAAABAAAAAIAAAABAAAABgAAAAEAAAABAAAABwAAAAIAAAABAA' + 'AACAAAAAEAAAABAAAACQAAAAIAAAABAAAACgAAAAEAAAABAAAACwAAAAIAAAABAAAADQAAAA' + 'EAAAABAAAADgAAAAIAAAABAAAADwAAAAEAAAABAAAAEAAAAAIAAAABAAAAEQAAAAEAAAABAA' + 'AAEgAAAAIAAAABAAAAFAAAAAEAAAABAAAAFQAAAAIAAAABAAAAFgAAAAEAAAABAAAAFwAAAA' + 'IAAAABAAAAGAAAAAEAAAABAAAAGQAAAAIAAAABAAAAGgAAAAEAAAABAAAAGwAAAAIAAAABAA' + 'AAHQAAAAEAAAABAAAAHgAAAAIAAAABAAAAHwAAAAQAAAABAAAA4HN0c3oAAAAAAAAAAAAAAD' + 'MAAAAaAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' + 'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAA' + 'kAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' + 'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAACMc3RjbwAAAA' + 'AAAAAfAAAALAAAA1UAAANyAAADhgAAA6IAAAO+AAAD0QAAA+0AAAQAAAAEHAAABC8AAARLAA' + 'AEZwAABHoAAASWAAAEqQAABMUAAATYAAAE9AAABRAAAAUjAAAFPwAABVIAAAVuAAAFgQAABZ' + '0AAAWwAAAFzAAABegAAAX7AAAGFwAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAA' + 'AAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYX' + 'ZmNTUuMzMuMTAw';
 var blankSources = {
-  'audio': BLANK_AUDIO_SRC,
-  'video': BLANK_VIDEO_SRC
+  audio: {
+    src: BLANK_AUDIO_SRC,
+    type: 'audio/wav'
+  },
+  video: {
+    src: BLANK_VIDEO_SRC,
+    type: 'video/mp4'
+  }
 };
 
 /** @const @enum {string} */
@@ -2009,7 +2016,8 @@ function () {
           _ref$loop = _ref.loop,
           loop = _ref$loop === void 0 ? false : _ref$loop,
           _ref$controls = _ref.controls,
-          controls = _ref$controls === void 0 ? false : _ref$controls;
+          controls = _ref$controls === void 0 ? false : _ref$controls,
+          altText = _ref.altText;
       var player = undefined;
 
       if (!this.unAllocatedPlayers[playerType]) {
@@ -2025,6 +2033,7 @@ function () {
       if (player) {
         player.pause();
         player.getMediaElement().loop = loop;
+        player.getMediaElement().setAttribute('alt', altText);
         player.poster(poster);
         player.controls(controls);
 
@@ -2057,7 +2066,7 @@ function () {
         player.controls(false);
         player.getMediaElement().loop = false;
         player.playsinline(false);
-        player.getMediaElement().setAttribute('src', blankSources[type]);
+        player.src(blankSources[type]);
         player.poster('');
         clearTextTracks(player);
         this.unAllocatedPlayers[type].push(player);
@@ -2128,7 +2137,7 @@ function () {
         mediaElement: mediaEl,
         tagName: type
       });
-      mediaEl.setAttribute('src', blankSources[type]);
+      mediaEl.setAttribute('src', blankSources[type].src);
       this.unAllocatedPlayers[type].push(player);
       return player;
     }
@@ -2387,6 +2396,14 @@ var PlayerSourceIDMap = function PlayerSourceIDMap(media) {
       this[id] = sources;
     },
     get: function get(sourceID) {
+      if (!this[sourceID]) {
+        return new AudioPlayer.Null();
+      }
+
+      if (this.current && this.current.playerId === sourceID) {
+        return this.current;
+      }
+
       if (this.previous && this.previous.playerId === sourceID) {
         var holder = this.current;
         this.current = this.previous;
@@ -2522,4 +2539,4 @@ function documentHiddenState(callback) {
   };
 }
 
-export { Audio, AudioPlayer, BLANK_AUDIO_SRC, BLANK_VIDEO_SRC, Features, MediaPool, MediaType, MultiPlayer, PlayerSourceIDMap, VideoPlayer, assetUrls, audioContext, blankSources, browser, cookies, debugMode, documentHiddenState, events, features, log, media, mediaPlayer, settings };
+export { Audio, AudioPlayer, Features, MediaPool, MediaType, MultiPlayer, PlayerSourceIDMap, VideoPlayer, assetUrls, audioContext, blankSources, browser, cookies, debugMode, documentHiddenState, events, features, log, media, mediaPlayer, settings };

data/package/ui.js

@@ -1137,13 +1137,30 @@ var TooltipView = Marionette.ItemView.extend({
  *   A text that will be appended to the translation based inline
  *   text.
  *
- * @param {boolean} [options.disabled]
- *   Render input as disabled.
+ * @param {string|string[]} [options.disabledBinding]
+ *   Name of an attribute to control whether the input is disabled. If
+ *   the `disabled` and `disabledBinding` options are not set,
+ *   input will be disabled whenever this attribute has a truthy value.
+ *   When multiple attribute names are passed, the function passed to
+ *   the `disabled` option will receive an array of values in the same
+ *   order.
+ *
+ * @param {function|boolean} [options.disabled]
+ *   Render input as disabled. A Function taking the value of the
+ *  `disabledBinding` attribute as parameter. Input will be disabled
+ *  only if function returns `true`.
+ *
+ * @param {any} [options.disabledBindingValue]
+ *   Input will be disabled whenever the value of the `disabledBinding`
+ *   attribute equals the value of this option.
  *
- * @param {string} [options.visibleBinding]
+ * @param {string|string[]} [options.visibleBinding]
  *   Name of an attribute to control whether the input is visible. If
  *   the `visible` and `visibleBindingValue` options are not set,
  *   input will be visible whenever this attribute has a truthy value.
+ *   When multiple attribute names are passed, the function passed to
+ *   the `visible` option will receive an array of values in the same
+ *   order.
  *
  * @param {function|boolean} [options.visible]
  *   A Function taking the value of the `visibleBinding` attribute as
@@ -1198,15 +1215,10 @@ var inputView = {
     this.$el.data('labelText', this.labelText());
     this.$el.data('inlineHelpText', this.inlineHelpText());
     this.ui.labelText.text(this.labelText());
-    this.ui.inlineHelp.html(this.inlineHelpText());
-
-    if (!this.inlineHelpText()) {
-      this.ui.inlineHelp.hide();
-    }
-
+    this.updateInlineHelp();
     this.setLabelFor();
-    this.updateDisabled();
-    this.setupVisibleBinding();
+    this.setupAttributeBinding('disabled', this.updateDisabled);
+    this.setupAttributeBinding('visible', this.updateVisible);
   },
 
   /**
@@ -1221,6 +1233,13 @@ var inputView = {
       fallbackPrefix: 'activerecord.attributes'
     }));
   },
+  updateInlineHelp: function updateInlineHelp() {
+    this.ui.inlineHelp.html(this.inlineHelpText());
+
+    if (!this.inlineHelpText()) {
+      this.ui.inlineHelp.hide();
+    }
+  },
 
   /**
    * The inline help text for the form field.
@@ -1231,7 +1250,7 @@ var inputView = {
       fallbackPrefix: 'pageflow.ui.inline_help'
     });
 
-    if (this.options.disabled) {
+    if (this.isDisabled()) {
       keys = translationKeysWithSuffix(keys, 'disabled');
     }
 
@@ -1247,40 +1266,61 @@ var inputView = {
       this.ui.label.attr('for', id);
     }
   },
+  isDisabled: function isDisabled() {
+    return this.getAttributeBoundOption('disabled');
+  },
   updateDisabled: function updateDisabled() {
+    this.updateInlineHelp();
+
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
   },
   updateDisabledAttribute: function updateDisabledAttribute(element) {
-    if (this.options.disabled) {
+    if (this.isDisabled()) {
       element.attr('disabled', true);
     } else {
       element.removeAttr('disabled');
     }
   },
-  setupVisibleBinding: function setupVisibleBinding() {
+  updateVisible: function updateVisible() {
+    this.$el.toggleClass('input-hidden_via_binding', this.getAttributeBoundOption('visible') === false);
+  },
+  setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
+    var _this = this;
+
+    var binding = this.options["".concat(optionName, "Binding")];
     var view = this;
 
-    if (this.options.visibleBinding) {
-      this.listenTo(this.model, 'change:' + this.options.visibleBinding, updateVisible);
-      updateVisible(this.model, this.model.get(this.options.visibleBinding));
+    if (binding) {
+      _.flatten([binding]).forEach(function (attribute) {
+        _this.listenTo(_this.model, 'change:' + attribute, update);
+      });
     }
 
-    function updateVisible(model, value) {
-      view.$el.toggleClass('input-hidden_via_binding', !isVisible(value));
+    update();
+
+    function update() {
+      updateMethod.call(view, view.getAttributeBoundOption(optionName));
     }
+  },
+  getAttributeBoundOption: function getAttributeBoundOption(optionName) {
+    var _this2 = this;
 
-    function isVisible(value) {
-      if ('visibleBindingValue' in view.options) {
-        return value === view.options.visibleBindingValue;
-      } else if (typeof view.options.visible === 'function') {
-        return !!view.options.visible(value);
-      } else if ('visible' in view.options) {
-        return !!view.options.visible;
-      } else {
-        return !!value;
-      }
+    var binding = this.options["".concat(optionName, "Binding")];
+    var bindingValueOptionName = "".concat(optionName, "BindingValue");
+    var value = Array.isArray(binding) ? binding.map(function (attribute) {
+      return _this2.model.get(attribute);
+    }) : this.model.get(binding);
+
+    if (bindingValueOptionName in this.options) {
+      return value === this.options[bindingValueOptionName];
+    } else if (typeof this.options[optionName] === 'function') {
+      return !!this.options[optionName](value);
+    } else if (optionName in this.options) {
+      return !!this.options[optionName];
+    } else if (binding) {
+      return !!value;
     }
   }
 };
@@ -1431,11 +1471,14 @@ var inputWithPlaceholderText = {
       this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
     }
   },
+  updateDisabled: function updateDisabled() {
+    this.updatePlaceholder();
+  },
   updatePlaceholder: function updatePlaceholder() {
     this.ui.input.attr('placeholder', this.placeholderText());
   },
   placeholderText: function placeholderText() {
-    if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
+    if (!this.isDisabled() || !this.options.hidePlaceholderIfDisabled) {
       if (this.options.placeholder) {
         if (typeof this.options.placeholder == 'function') {
           return this.options.placeholder(this.model);
@@ -1446,6 +1489,8 @@ var inputWithPlaceholderText = {
         return this.placeholderModelValue();
       }
     }
+
+    return '';
   },
   placeholderModelValue: function placeholderModelValue() {
     return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
@@ -1598,12 +1643,22 @@ var ColorInputView = Marionette.ItemView.extend({
     this.updateSettings();
   },
   updateSettings: function updateSettings() {
+    this.resetSwatchesInStoredSettings();
     this.ui.input.minicolors('settings', {
       defaultValue: this.defaultValue(),
       swatches: this.getSwatches()
     });
     this.load();
   },
+  // see https://github.com/claviska/jquery-minicolors/issues/287
+  resetSwatchesInStoredSettings: function resetSwatchesInStoredSettings() {
+    var settings = this.ui.input.data('minicolors-settings');
+
+    if (settings) {
+      delete settings.swatches;
+      this.ui.input.data('minicolors-settings', settings);
+    }
+  },
   load: function load() {
     this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
     this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
@@ -2456,6 +2511,15 @@ var SliderInputView = Marionette.ItemView.extend({
     });
     this.load();
   },
+  updateDisabled: function updateDisabled(disabled) {
+    this.$el.toggleClass('disabled', !!disabled);
+
+    if (disabled) {
+      this.ui.widget.slider('disable');
+    } else {
+      this.ui.widget.slider('enable');
+    }
+  },
   save: function save() {
     var value = this.ui.widget.slider('option', 'value');
     var unit = 'unit' in this.options ? this.options.unit : '%';
@@ -2580,8 +2644,11 @@ var CheckBoxInputView = Marionette.ItemView.extend({
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
+  updateDisabled: function updateDisabled() {
+    this.load();
+  },
   save: function save() {
-    if (!this.options.disabled) {
+    if (!this.isDisabled()) {
       this.model.set(this.options.propertyName, this.ui.input.is(':checked'));
     }
   },
@@ -2591,7 +2658,7 @@ var CheckBoxInputView = Marionette.ItemView.extend({
     }
   },
   displayValue: function displayValue() {
-    if (this.options.disabled && this.options.displayUncheckedIfDisabled) {
+    if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
       return false;
     } else {
       return this.model.get(this.options.propertyName);