Add support for -ko-bind-stylesheet

Works like -ko-bind-text but is specifically thought for <style> elements and automatically tries to restrict the rules to the wysiwyg editing area.

src/js/bindings/stylesheet.js

@@ -0,0 +1,61 @@
+"use strict";
+var ko = require("knockout");
+var console = require("console");
+
+var cssParse = require("mensch/lib/parser.js");
+var converterUtils = require("../converter/utils.js");
+
+var _processStylesheetRules = function(style, rules) {
+  var newStyle = style;
+  var lastStart = null;
+
+  if (typeof rules == 'undefined') {
+    var styleSheet = cssParse(style, {
+      comments: true,
+      position: true
+    });
+    if (styleSheet.type != 'stylesheet' || typeof styleSheet.stylesheet == 'undefined') {
+      console.log("unable to process styleSheet", styleSheet);
+      throw "Unable to parse stylesheet";
+    }
+    rules = styleSheet.stylesheet.rules;
+  }
+
+  for (var i = rules.length - 1; i >= 0; i--) {
+    if (rules[i].type == 'media' || rules[i].type == 'supports') {
+      newStyle = _processStylesheetRules(newStyle, rules[i].rules);
+    } else if (rules[i].type == 'comment') {
+      // ignore comments
+    } else if (rules[i].type == 'rule') {
+      var sels = rules[i].selectors;
+      var newSel = "";
+      for (var j = 0; j < sels.length; j++) {
+        if (newSel.length > 0) newSel += ", ";
+        newSel += '#main-wysiwyg-area ' + sels[j];
+      }
+      newStyle = converterUtils.removeStyle(newStyle, rules[i].position.start, rules[i].position.end, 0, 0, 0, newSel);
+    } else {
+      console.error("Unsupported rule type", rules[i].type, "while parsing <style> rules");
+    }
+    lastStart = rules[i].position.start;
+  }
+  return newStyle;
+};
+
+
+ko.bindingHandlers.stylesheet = {
+  _makeComputedValueAccessor: function(valueAccessor) {
+    return function() {
+      var inputCss = ko.utils.unwrapObservable(valueAccessor());
+      return _processStylesheetRules(inputCss);
+    };
+  },
+  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+    return ko.bindingHandlers['text'].init();
+  },
+  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+    var isWysiwygMode = (typeof bindingContext.templateMode !== 'undefined' && bindingContext.templateMode == 'wysiwyg');
+    if (isWysiwygMode) valueAccessor = ko.bindingHandlers.stylesheet._makeComputedValueAccessor(valueAccessor);
+    return ko.bindingHandlers['text'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
+  }
+};

src/js/converter/declarations.js

@@ -65,7 +65,7 @@ var elaborateDeclarations = function(style, declarations, templateUrlConverter,
         if (newStyle === null) newStyle = style;
         newStyle = converterUtils.removeStyle(newStyle, declarations[i].position.start, declarations[i].position.end, skipLines, 0, 0, '');
       } else {
-        var decl = declarations[i].name.match(/^-ko-(bind-|attr-)?([a-z0-9-]*?)(-if|-ifnot)?$/);
+        var decl = declarations[i].name.match(/^-ko-(bind-|attr-)?([A-Za-z0-9-]*?)(-if|-ifnot)?$/);
         if (decl !== null) {
           // rimozione dello stile -ko- dall'attributo style.
           if (newStyle === null && typeof style != 'undefined') newStyle = style;
@@ -99,7 +99,7 @@ var elaborateDeclarations = function(style, declarations, templateUrlConverter,
               bindType = 'virtualStyle';
             } else {
               bindType = null;
-              if (propName == 'text') {
+              if (propName == 'text' || propName == 'stylesheet') {
                 if (typeof element !== 'undefined') {
                   propDefaultValue = domutils.getInnerText(element);
                 } else {

src/js/ko-bindings.js

@@ -13,6 +13,7 @@ require("./bindings/preloader.js");
 require("./bindings/fileupload.js");
 require("./bindings/virtuals.js");
 require("./bindings/wysiwygs.js");
+require("./bindings/stylesheet.js");
 require("./bindings/scrollfix.js");
 require("./bindings/if-subs.js");
 require("./bindings/extsortables.js");