micro-app/packages/icpx-workflow/public/form/data/new-label.js

/* global $ _*/

// eslint-disable-next-line no-unused-vars
var newLabel = {
  title: "label",
  icon: "label.png",
  cache: {
    indent: []
  },
  design: function () {
    return $("<label class='" + this.className.container + "'>" + this.options.value + "</label>");
  },
  applying: function () {
    return this.design();
  },
  view: function () {
    return this.design();
  },
  getValue: function () {
    return this.options.value;
  },
  className: {
    container: "formbuilder-control-label",
    vertical: "formbuilder-control-label-vertical",
    space: "formbuilder-control-label-space"
  },
  options: {
    label: "",
    value: "中文标签\nEnglish",
    className: ""
  },
  property: {
    height: {
      hidden: false
    },
    value: {
      text: "value",
      type: "textarea",
      after: ["font-size", "text-align", "text-vertical-align", "width", "height", "line-height", "indent"],
      update: function (value, position, options) {
        var items = value.split("\n"),
          html = [],
          textV = options["word-vertical"],
          self = this;

        this.cache.indent = [];
        _.each(items, function (item) {
          var trimString,
            tempString,
            signString = "[--]",
            splitArray,
            leftTrim,
            rightTrim;

          if (textV) {
            item = _.map(item.split(""), function (char) {
              return char + "<br/>";
            });

            item = item.join("");
          }
          //计算缩进量
          trimString = $.trim(item);
          tempString = item.replace(trimString, signString);
          splitArray = tempString.split(signString);
          leftTrim = splitArray[0] ? splitArray[0].length : 0;
          rightTrim = splitArray[1] ? splitArray[1].length : 0;
          self.cache.indent.push({ left: leftTrim, right: rightTrim });

          item = tempString.replace(/ /g, "<span class='" + self.className.space + "'></span>")
            .replace(signString, trimString);

          html.push("<p>" + item + "</p>");
        });
        this.elem.html(html.join(""));

        textV ? this.elem.addClass(this.className.vertical) : this.elem.removeClass(this.className.vertical);
      }
    },
    "text-vertical-align": {
      text: "text-vertical-align",
      type: "buttons",
      order: 2004,
      updateInLoad: true,
      source: [
        {
          name: "top",
          text: "vertical-align-top",
          image: "text-align-top.png",
          selected: true
        },
        {
          name: "middle",
          text: "vertical-align-middle",
          image: "text-align-middle.png",
          selected: false
        },
        {
          name: "bottom",
          text: "vertical-align-bottom",
          image: "text-align-bottom.png",
          selected: false
        }
      ],
      update: function (value) {
        this.container.find("p").css("vertical-align", value);
      }
    },
    "word-vertical": {
      text: "word-vertical",
      type: "bool",
      after: ["value"],
      updateInLoad: false,
      source: {
        text: "word-vertical",
        image: "word-vertical.png"
      },
      update: function (value, position, options) { }
    },
    "font-size": {
      text: "font-size",
      order: 2001,
      type: "combox",
      after: "vertical-align",
      updateInLoad: true,
      source: $.formbuilder["FONT-SIZE"],
      conver: function (value) {
        value = value || "";
        return value;
      },
      update: function (value) {
        this.elem.find("p").css("font-size", value + "px");
      }
    },
    "line-height": {
      text: "line-height",
      type: "text",
      updateInLoad: true,
      order: 2006,
      update: function (value, position, options) {
        if (value) {
          this.elem.find("p").css("line-height", value + "px");
        }
      }
    },
    "indent": {
      text: "indent",
      type: "text",
      updateInLoad: true,
      order: 2007,
      conver: function (value) {
        if (isNaN(value) === false) {
          return Number(value);
        }
        return value;
      },
      update: function (value, position, options) {
        if (!value) {
          return;
        }
        var self = this,
          $space = this.elem.find("." + this.className.space),
          $p = this.elem.find("p");

        $p.css({
          "text-align": "left",
          "padding-left": "0"
        });
        $space.css({
          "margin-left": 0,
          "text-align": "left"
        });
        if (_.isNumber(value)) {
          $space.css("margin-left", value + "px");
        }
        else if (value === "auto") {
          this.container.width("100%");
          this.elem.width("100%");
          //强制调整容器宽度为100%
          this.options.width = "100%";

          $p.each(function (i) {
            var indent;
            indent = self.cache.indent[i];
            if (indent) {
              if (indent.left > 0 && indent.right === 0) {
                $(this).css("text-align", "right");
              }
              else if (indent.left > 0 && indent.right > 0) {
                $(this).css("padding-left", Math.floor(indent.left / (indent.left + indent.right) * 100) + "%");
              }
            }
          });
        }
      }
    }
  }
};