Add support for block "visibility:" option so that fixed blocks can "…

…reuse" the delete button to switch the block visibility

e.g:

myFixedBlock { visibility: _root_.fixedBlockVisible }

will switch the fixedBlockVisible boolean variable when the trash icon is clicked.

res/lang/mosaico-en.json

@@ -9,6 +9,7 @@
     "Insert here the recipient email address": "Insert here the recipient email address",
     "Test email address": "Test email address",
     "Block removed: use undo button to restore it...": "Block removed: use undo button to restore it...",
+    "Block removed: use the visibility flag in the content tab to restore it...": "Block removed: use the visibility flag in the content tab to restore it...",
     "New block added after the selected one (__pos__)": "New block added after the selected one (__pos__)",
     "New block added at the model bottom (__pos__)": "New block added at the model bottom (__pos__)",
     "Undo (#COUNT#)": "Undo (#COUNT#)",

res/lang/mosaico-it.json

@@ -9,6 +9,7 @@
     "Insert here the recipient email address": "Inserisci qui l'indirizzo email a cui spedire",
     "Test email address": "Indirizzo email di test",
     "Block removed: use undo button to restore it...": "Blocco eliminato: usa il pulsante annulla per recuperarlo...",
+    "Block removed: use the visibility flag in the content tab to restore it...": "Blocco eliminato: usa l'opzione di visibilità nella scheda contenuto per recuperarlo...",
     "New block added after the selected one (__pos__)": "Nuovo blocco aggiunto sotto a quello selezionato (__pos__)",
     "New block added at the model bottom (__pos__)": "Nuovo blocco aggiunto in fondo al modello (__pos__)",
     "Undo (#COUNT#)": "Annulla (#COUNT#)",

src/js/converter/stylesheet.js

@@ -42,7 +42,7 @@ var _removeOptionalQuotes = function(str) {
 
 var _processStyleSheetRules_processBlockDef = function(blockDefsUpdater, rules, templateUrlConverter) {
   var properties, namedProps, decls;
-  // name, contextName, globalStyle, themeOverride, extend, min, max, widget, options, category, variant, help, blockDescription, version, 
+  // name, contextName, globalStyle, themeOverride, extend, min, max, widget, options, category, variant, visibility, help, blockDescription, version, 
   for (var i = 0; i < rules.length; i++) {
     if (rules[i].type == 'rule') {
       var sels = rules[i].selectors;
@@ -78,7 +78,7 @@ var _processStyleSheetRules_processBlockDef = function(blockDefsUpdater, rules,
           else namedProps[decls[k].name] = declarations.declarationValueUrlPrefixer(val, templateUrlConverter);
           // NOTE in past we detected unsupported properties, while now we simple push every declaration in a namedProperty.
           // This make it harder to spot errors in declarations.
-          // Named properties we supported were extend, min, max, options, widget, category, variant, help, blockDescription, version
+          // Named properties we supported were extend, min, max, options, widget, category, variant, visibility, help, blockDescription, version
           // console.warn("Unknown property processing @supports -ko-blockdefs ", decls[k], sels);
         }
         for (var l = 0; l < sels.length; l++) {

src/js/converter/wrapper.js

@@ -102,9 +102,7 @@ var _nextVariant = function(target) {
   return target._nextValue();
 };
 
-// When a block define a variant option we find the linked variable and 
-// link the block _nextVariant function to the linked variable _nextValue.
-function _makeNextVariantFunction(contentModel, t, variant) {
+function _targetLookup(contentModel, t, variant) {
   var pParts = variant.split('.');
   // looks in t and not contentModel because variants are declared on single blocks.
   var pTarget = t;
@@ -113,19 +111,37 @@ function _makeNextVariantFunction(contentModel, t, variant) {
     else if (i4 == 0 && pParts[i4] == '_theme_') pTarget = ko.utils.unwrapObservable(contentModel.theme);
     else pTarget = ko.utils.unwrapObservable(pTarget)[pParts[i4]];
   }
+  if (typeof pTarget == 'undefined') {
+    console.error("Error looking for target variable", variant, t);
+    throw "Error looking for target variable" + variant;
+  }
+  return pTarget;
+}
+
+// When a block define a variant option we find the linked variable and 
+// link the block _nextVariant function to the linked variable _nextValue.
+function _makeNextVariantFunction(contentModel, t, variant) {
+  var pTarget = _targetLookup(contentModel, t, variant);
   if (typeof pTarget._defaultComputed != 'undefined') {
     // maybe this is an acceptable condition and we could remove this warning
     console.log("Found variant on a style property: beware variants should be only used on content properties because they don't match the theme fallback behaviour", variant);
     pTarget = pTarget._defaultComputed;
   }
-  if (typeof pTarget == 'undefined') {
-    console.error("Error looking for variant target", variant, t);
-    throw "Error looking for variant target " + variant;
-  }
   // pTarget._nextValue may not exists yet, at this time, so we create a dynamic proxy:
   t._nextVariant = _nextVariant.bind(undefined, pTarget);
 }
 
+function _makeSwitchVisibilityFunction(contentModel, t, variant) {
+  var pTarget = _targetLookup(contentModel, t, variant);
+  if (typeof pTarget._defaultComputed != 'undefined') {
+    // maybe this is an acceptable condition and we could remove this warning
+    console.error("Found visibility option on a style property", variant, t);
+    throw "Unsupported visibility option targeting a style property: "+variant;
+  }
+  // pTarget._nextValue may not exists yet, at this time, so we create a dynamic proxy:
+  t._switchVisibility = _nextVariant.bind(undefined, pTarget);
+}
+
 var _nextValueFunction = function(prop, variants) {
   var currentValue = ko.utils.unwrapObservable(prop);
   var variantValue;
@@ -235,6 +251,10 @@ var _makeComputedFunction = function(defs, contentModel, tobs) {
     _makeNextVariantFunction(contentModel, tobs, def._variant);
   }
 
+  if (typeof def._visibility !== 'undefined') {
+    _makeSwitchVisibilityFunction(contentModel, tobs, def._visibility);
+  }
+
   for (var prop2 in def)
     if (def.hasOwnProperty(prop2)) {
       var val = def[prop2];

src/js/viewmodel.js

@@ -119,16 +119,22 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     return obj.url;
   };
 
+  // This is used to remove a block from a container or to hide a fixed block using the "visibility" property
   // block-wysiwyg.tmpl.html
   viewModel.removeBlock = function(data, parent) {
     // let's unselect the block
     if (ko.utils.unwrapObservable(viewModel.selectedBlock) == ko.utils.unwrapObservable(data)) {
       viewModel.selectBlock(null, true);
     }
-    var res = parent.blocks.remove(data);
-    // TODO This message should be different depending on undo plugin presence.
-    viewModel.notifier.info(viewModel.t('Block removed: use undo button to restore it...'));
-    return res;
+    if (typeof data._switchVisibility == 'function') {
+      data._switchVisibility();
+      viewModel.notifier.info(viewModel.t('Block removed: use the visibility flag in the content tab to restore it...'));
+    } else if (typeof parent !== 'undefined' && parent !== null) {
+      var res = parent.blocks.remove(data);
+      // TODO This message should be different depending on undo plugin presence.
+      viewModel.notifier.info(viewModel.t('Block removed: use undo button to restore it...'));
+      return res;
+    }
   };
 
   // block-wysiwyg.tmpl.html
@@ -269,6 +275,18 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     else prop(null);
     return false;
   };
+  // This is not used right now. Provides an helper method to push a local style to a new theme default value
+  viewModel.localToGlobalSwitch = function(prop, globalProp) {
+    var current = prop();
+    if (current === null) prop(globalProp());
+    else {
+      viewModel.startMultiple();
+      globalProp(current);
+      prop(null);
+      viewModel.stopMultiple();
+    }
+    return false;
+  };
 
   // Used by editor and main "converter" to support item selection
   viewModel.selectItem = function(valueAccessor, item, block) {

src/tmpl/block-wysiwyg.tmpl.html

@@ -12,6 +12,7 @@
     <div title="Delete block" class="tool delete" data-bind="attr: { title: $root.t('Delete block') }, click: $root.removeBlock.bind($element, $rawData, $parent)"><i class="fa fa-fw fa-trash-o"></i></div>
     <div title="Duplicate block" class="tool clone" data-bind="attr: { title: $root.t('Duplicate block') }, click: $root.duplicateBlock.bind($element, $index, $parent)"><i class="fa fa-fw fa-files-o"></i></div>
     <!-- /ko -->
+    <!-- ko if: typeof $rawData._switchVisibility != 'undefined' --><div title="Delete block" class="tool delete" data-bind="attr: { title: $root.t('Delete block') }, click: $root.removeBlock.bind($element, $rawData, $parent)"><i class="fa fa-fw fa-trash-o"></i></div><!-- /ko -->
     <!-- ko if: typeof $rawData._nextVariant != 'undefined' --><div title="Switch block variant" class="tool variant" data-bind="attr: { title: $root.t('Switch block variant') }, click: $rawData._nextVariant"><i class="fa fa-fw fa-magic"></i></div><!-- /ko -->
   </div>
   <!-- ko block: $data --><!-- /ko -->