spino-elements/dist/spino-elements.es.js

A Vue.js 2 component library for dynamically adjusting text sizes within elements using TextFit.

(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".break_line[data-v-2fc3c2c4]{white-space:normal!important}.normal_line[data-v-2fc3c2c4]{white-space:nowrap!important}.sprite-container[data-v-19d3ffef]{display:flex;justify-content:center;align-items:center;z-index:9999}.win-amount-container[data-v-19d3ffef]{display:flex;flex-direction:column;justify-content:center;align-items:center;flex-direction:row}.win-amount[data-v-19d3ffef]{white-space:nowrap;display:flex;justify-content:center;align-items:center}.currency-code[data-v-19d3ffef]{display:flex;justify-content:center;align-items:center;transform:scale(.8)}.currency-code img[data-v-19d3ffef]{height:90%;width:70%;object-fit:contain}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import textFit from "textfit";
var render$2 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", {
    directives: [{
      name: "show",
      rawName: "v-show",
      value: false,
      expression: "false"
    }]
  });
};
var staticRenderFns$2 = [];
function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
  if (render2) {
    options.render = render2;
    options.staticRenderFns = staticRenderFns2;
    options._compiled = true;
  }
  if (functionalTemplate) {
    options.functional = true;
  }
  if (scopeId) {
    options._scopeId = "data-v-" + scopeId;
  }
  var hook;
  if (moduleIdentifier) {
    hook = function(context) {
      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
        context = __VUE_SSR_CONTEXT__;
      }
      if (injectStyles) {
        injectStyles.call(this, context);
      }
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier);
      }
    };
    options._ssrRegister = hook;
  } else if (injectStyles) {
    hook = shadowMode ? function() {
      injectStyles.call(
        this,
        (options.functional ? this.parent : this).$root.$options.shadowRoot
      );
    } : injectStyles;
  }
  if (hook) {
    if (options.functional) {
      options._injectStyles = hook;
      var originalRender = options.render;
      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context);
        return originalRender(h, context);
      };
    } else {
      var existing = options.beforeCreate;
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
    }
  }
  return {
    exports: scriptExports,
    options
  };
}
const __vue2_script$2 = {
  name: "TextfitManager",
  props: {
    i_ElementToTextfit: Array,
    i_SameSizeElements: Array,
    i_PrioritizeElement: String,
    i_ResizeStopOn: Boolean,
    i_Component: String,
    isMobile: Boolean
  },
  methods: {
    TextfitLogic(i_Source) {
      if (!this.i_ResizeStopOn) {
        return;
      }
      const LogSource = `${this.i_Component} Textfit`;
      if (window.ServiceWrapper) {
        switch (i_Source) {
          case "resize":
            ServiceWrapper.LogMessage("Textfit Resize Triggered", LogSource);
            break;
          case "debounce":
            ServiceWrapper.LogMessage("Textfit Debounced Triggered", LogSource);
            break;
          default:
            ServiceWrapper.LogMessage("Textfit Triggered", LogSource);
            break;
        }
      }
      this.i_ElementToTextfit.forEach((ClassName) => {
        if (!this.isElementHidden(ClassName, LogSource)) {
          textFit($(`.${ClassName}`));
        }
      });
      this.InitSameElements();
    },
    isElementHidden(ClassName, LogSource) {
      const elements = document.querySelectorAll(`.${ClassName}`);
      for (const el of elements) {
        if (el.offsetWidth === 0 || el.offsetHeight === 0) {
          if (window.ServiceWrapper) {
            ServiceWrapper.LogMessage(
              `[${LogSource}] Skipping ${ClassName} because it's still hidden.`
            );
          }
          return true;
        }
      }
      return false;
    },
    getMinFontSize(i_ClassName) {
      let sizes = $(`.${i_ClassName} span`).map(function(i, el) {
        return $(el).css("font-size").replace("px", "");
      }).get();
      return Math.min(...sizes);
    },
    TextFitSameSize(i_ClassName, i_FontSize, i_IsNameFormat = false) {
      if (!i_FontSize) {
        return;
      }
      $(`.${i_ClassName} span`).css("font-size", i_FontSize + "px");
      if (i_IsNameFormat) {
        $(`[name-format='default']`).css("transform", "scale(1.2)");
      }
    },
    InitSameElements() {
      if (!this.i_SameSizeElements) {
        return;
      }
      let SameSizeObject = [];
      let sizes = [];
      let MainElementIndex = 0;
      this.i_SameSizeElements.forEach((ClassName, i) => {
        let isMainElement = false;
        let ClassMinSize = this.getMinFontSize(ClassName);
        if (this.i_PrioritizeElement == ClassName) {
          isMainElement = true;
          MainElementIndex = i;
        }
        sizes.push(ClassMinSize);
        SameSizeObject.push({
          className: ClassName,
          MinSize: ClassMinSize,
          isMainElement
        });
      });
      SameSizeObject.forEach((obj) => {
        if (Math.min(...sizes) >= SameSizeObject[MainElementIndex].MinSize) {
          return this.TextFitSameSize(
            obj.className,
            SameSizeObject[MainElementIndex].MinSize,
            true
          );
        }
        this.TextFitSameSize(obj.className, obj.MinSize, true);
      });
    },
    debounced(delay, fn) {
      let timerId;
      return function(...args) {
        if (timerId) {
          clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
          fn(...args);
          timerId = null;
        }, delay);
      };
    },
    handleTextfit(i_Source) {
      this.TextfitLogic(i_Source);
    },
    handleDebounce() {
      return this.debounced(300, () => this.handleTextfit("debounce"));
    },
    handleResize() {
      this.handleTextfit("resize");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.handleTextfit();
      window.addEventListener("textfit", this.handleTextfit);
      if (!this.isMobile) {
        window.addEventListener("resize", this.handleDebounce());
      } else {
        window.addEventListener("resize", this.handleResize);
      }
    });
  }
};
const __cssModules$2 = {};
var __component__$2 = /* @__PURE__ */ normalizeComponent(
  __vue2_script$2,
  render$2,
  staticRenderFns$2,
  false,
  __vue2_injectStyles$2,
  null,
  null,
  null
);
function __vue2_injectStyles$2(context) {
  for (let o in __cssModules$2) {
    this[o] = __cssModules$2[o];
  }
}
var TextfitManager = /* @__PURE__ */ function() {
  return __component__$2.exports;
}();
function findLongestWord(i_String) {
  if (!i_String) {
    return false;
  }
  const words = i_String.split(/\s+/);
  let longestWord = "";
  for (const word of words) {
    if (word.length > longestWord.length) {
      longestWord = word;
    }
  }
  return longestWord;
}
var render$1 = function() {
  var _vm$getCharWidth;
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", [_c("div", {
    class: [`textfit-${_vm.i_Class}`, {
      break_line: _vm.i_isBreakLine,
      normal_line: !_vm.i_isBreakLine
    }],
    style: {
      width: (_vm$getCharWidth = _vm.getCharWidth(this.i_Text)) !== null && _vm$getCharWidth !== void 0 ? _vm$getCharWidth : "90%"
    }
  }, [_vm._v(" " + _vm._s(_vm.i_Text) + " ")])]);
};
var staticRenderFns$1 = [];
var TextfitLimiter_vue_vue_type_style_index_0_scoped_true_lang = "";
const __vue2_script$1 = {
  name: "TextfitLimiter",
  data() {
    return {};
  },
  props: {
    i_Class: String,
    i_Text: String,
    config: {
      type: Object,
      default: () => ({
        minCharWidth: 1,
        maxCharWidth: 50,
        minPercentage: 65,
        maxPercentage: 85
      }),
      required: true
    },
    i_isReactiveFix: {
      type: Boolean,
      default: false
    },
    i_isBreakLine: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getCharWidth(i_Text) {
      var _a, _b, _c, _d, _e, _f, _g, _h;
      let text = i_Text;
      if (this.i_isBreakLine) {
        text = findLongestWord(i_Text);
      }
      const span = document.createElement("span");
      span.textContent = text;
      span.style.fontSize = "10px";
      span.style.visibility = "hidden";
      document.body.appendChild(span);
      const charWidth = span.getBoundingClientRect().width;
      document.body.removeChild(span);
      const minCharWidth = (_b = (_a = this.config) == null ? void 0 : _a.minCharWidth) != null ? _b : 1;
      const maxCharWidth = (_d = (_c = this.config) == null ? void 0 : _c.maxCharWidth) != null ? _d : 50;
      const minPercentage = (_f = (_e = this.config) == null ? void 0 : _e.minPercentage) != null ? _f : 65;
      const maxPercentage = (_h = (_g = this.config) == null ? void 0 : _g.maxPercentage) != null ? _h : 85;
      const percentage = minPercentage + (maxPercentage - minPercentage) * (charWidth - minCharWidth) / (maxCharWidth - minCharWidth);
      return this.OverrideWidth(
        Math.min(maxPercentage, Math.max(minPercentage, percentage)) + "%"
      );
    },
    OverrideWidth(i_Percentage) {
      return i_Percentage;
    }
  },
  watch: {
    i_Text(i_NewText) {
      if (this.i_isReactiveFix) {
        $(`.textfit-${this.i_Class} span`).text(i_NewText);
        setTimeout(() => {
          $(`.textfit-${this.i_Class} span`).text(i_NewText);
        }, 0);
        window.dispatchEvent(new Event("textfit"));
      }
    }
  }
};
const __cssModules$1 = {};
var __component__$1 = /* @__PURE__ */ normalizeComponent(
  __vue2_script$1,
  render$1,
  staticRenderFns$1,
  false,
  __vue2_injectStyles$1,
  "2fc3c2c4",
  null,
  null
);
function __vue2_injectStyles$1(context) {
  for (let o in __cssModules$1) {
    this[o] = __cssModules$1[o];
  }
}
var TextfitLimiter = /* @__PURE__ */ function() {
  return __component__$1.exports;
}();
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", {
    staticClass: "sprite-container"
  }, [_c("div", {
    staticClass: "win-amount-container"
  }, [_c("div", {
    staticClass: "win-amount"
  }, _vm._l(_vm.CharsArray, function(char, i) {
    return _c("div", {
      key: `char-${i}`,
      style: {
        width: _vm.CharWidth(char) + "px",
        height: _vm.height + "px",
        display: "inline-block",
        background: "url(" + _vm.i_SpritePath + "chars_sprite.png)-" + _vm.moveX(char) + "px 0px / " + _vm.CharSpriteWidth + "px " + _vm.height + "px"
      }
    });
  }), 0), _vm.IsCurrencyCode ? _c("div", {
    staticClass: "currency-code"
  }, _vm._l(_vm.LettersArray, function(char, i) {
    return _c("div", {
      key: `letter-${i}`,
      style: {
        width: _vm.LetterWidth(char) + "px",
        height: _vm.height + "px",
        display: "inline-block",
        background: "url(" + _vm.i_SpritePath + "letters_sprite.png)-" + _vm.moveX(char) + "px 0px / " + _vm.LetterSpriteWidth + "px " + _vm.height + "px"
      }
    });
  }), 0) : _vm._e()])]);
};
var staticRenderFns = [];
var Sprite_vue_vue_type_style_index_0_scoped_true_lang = "";
const __vue2_script = {
  name: "SpriteFont",
  props: {
    i_Chars: String,
    i_SpritePath: String,
    i_SizeMultiplater: Number,
    i_CurrencyCode: String
  },
  data() {
    return {
      Chars: "",
      CharsArray: [],
      LettersArray: [],
      IsCurrencyCode: false,
      SpriteChars: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "0",
        ",",
        ".",
        "$",
        "\xA5",
        "\u20AC",
        "\u20BD",
        "\xA3"
      ],
      SpriteLetters: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ]
    };
  },
  computed: {
    CharWidth() {
      return (charIndex) => {
        switch (charIndex) {
          case 0:
            return this.i_SizeMultiplater * 110;
          case 10:
          case 11:
            return this.i_SizeMultiplater * 55;
          case 15:
          case 16:
            return this.i_SizeMultiplater * 145;
          default:
            return this.i_SizeMultiplater * 130;
        }
      };
    },
    LetterWidth() {
      return (charIndex) => {
        switch (charIndex) {
          case 0:
          case 12:
            return this.i_SizeMultiplater * 135;
          case 1:
            return this.i_SizeMultiplater * 118;
          case 2:
          case 16:
            return this.i_SizeMultiplater * 122;
          case 3:
          case 7:
          case 14:
          case 17:
          case 18:
          case 20:
            return this.i_SizeMultiplater * 120;
          case 4:
          case 5:
          case 11:
            return this.i_SizeMultiplater * 105;
          case 6:
          case 21:
            return this.i_SizeMultiplater * 125;
          case 8:
            return this.i_SizeMultiplater * 50;
          case 9:
          case 10:
          case 13:
          case 15:
          case 25:
            return this.i_SizeMultiplater * 115;
          case 19:
            return this.i_SizeMultiplater * 118;
          case 22:
            return this.i_SizeMultiplater * 148;
          case 23:
            return this.i_SizeMultiplater * 130;
          case 24:
            return this.i_SizeMultiplater * 128;
          default:
            console.log("[Sprite]Invalid Input");
        }
      };
    },
    height() {
      return this.i_SizeMultiplater * 181;
    },
    CharSpriteWidth() {
      return this.i_SizeMultiplater * 3400;
    },
    LetterSpriteWidth() {
      return this.i_SizeMultiplater * 5200;
    },
    moveX() {
      return (charIndex) => charIndex * this.i_SizeMultiplater * 200;
    }
  },
  methods: {
    HandleCurrencyCode() {
      if (this.i_Chars.includes(this.i_CurrencyCode)) {
        this.IsCurrencyCode = true;
      }
    },
    CharsArraySplit(i_String) {
      this.Chars = i_String.toString();
      this.CharsArray = this.Chars.split(/(\s|\d)/).filter((element) => element != " " && element != "");
      this.LettersArray = this.i_CurrencyCode.split("");
    },
    CharsMap(i_String) {
      this.CharsArraySplit(i_String);
      this.CharsArray = this.CharsArray.map((item) => {
        let index = this.SpriteChars.findIndex((element) => element == item);
        if (index != -1) {
          return index;
        }
      });
      this.LettersArray = this.LettersArray.map((item) => {
        let index = this.SpriteLetters.findIndex(
          (element) => element.toUpperCase() == item.toUpperCase()
        );
        if (index != -1) {
          return index;
        }
      });
      this.CharsArray = this.CharsArray.filter(
        (item) => item != void 0 || item != null
      );
      this.LettersArray = this.LettersArray.filter(
        (item) => item != void 0 || item != null
      );
      this.HandleCurrencyCode();
    }
  },
  watch: {
    i_Chars(i_NewValue) {
      this.CharsMap(i_NewValue);
    }
  },
  mounted() {
    this.CharsMap(this.i_Chars);
  }
};
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(
  __vue2_script,
  render,
  staticRenderFns,
  false,
  __vue2_injectStyles,
  "19d3ffef",
  null,
  null
);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var Sprite = /* @__PURE__ */ function() {
  return __component__.exports;
}();
export { Sprite, TextfitLimiter, TextfitManager };