vue-highlighter/dist/vue-highlighter.cjs.js

Vue directive for highlight multiple istances of a word

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var vue = _interopDefault(require('vue'));

var originalContent = undefined;
var textColorDefault = '#fff';
var bgColorDefault = '#009688';
var paddingDefault = '0px 5px';

function selectPattern(word, liveHighlighting) {
  if ( liveHighlighting === void 0 ) liveHighlighting = false;

  var result = "";
  if (!liveHighlighting) {
    result = "\\b(" + word + ")\\b";
  } else {
    result = "(" + word + ")";
  }
  return result;
}

function testTextColor(color) {
  if ( color === void 0 ) color = textColorDefault;

  var result = textColorDefault;
  if (testColor(color)) {
    result = color;
  }
  return result;
}

function testBgColor(color) {
  if ( color === void 0 ) color = bgColorDefault;

  var result = bgColorDefault;
  if (testColor(color)) {
    result = color;
  }
  return result;
}

function testColor(color) {
  var result = false;
  var isAColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
  var isAString = /^[a-zA-Z]+$/.test(color);
  if (isAColor || isAString) {
    result = true;
  }
  return result;
}

function testPadding(padding) {
  var result = paddingDefault;
  var isAValidValue = /^(\d+(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)\s?){1,4}$/i.test(padding);
  if (isAValidValue) {
    result = padding;
  }
  return result;
}

function highlight(content, word, patternSelected, color, bgColor, padding) {
  var spanStart = "<span style='padding:" + padding + "; background-color:" + bgColor + "; color:" + color + ";'>";
  var spanEnd = "</span>";
  var result = content;
  if (word != "") {
    var regex = new RegExp(patternSelected, "g");
    result = content.replace(regex, spanStart + "$&" + spanEnd);
  }
  return result;
}

var vueHighlighter = {
  bind: function bind(el, binding, vnode) {
    originalContent = el.innerHTML;
    var pattern = '';
    var word = '';
    var color = textColorDefault;
    var bgColor = bgColorDefault;
    var padding = paddingDefault;
    if (binding.value.word != undefined) {
      word = binding.value.word;
    }
    if (binding.value.live != undefined) {
      pattern = selectPattern(word, binding.value.live);
    }
    if (binding.value.style != undefined) {
      color = testTextColor(binding.value.style.color);
      bgColor = testBgColor(binding.value.style.bgColor);
      padding = testPadding(binding.value.style.padding);
    }
    el.innerHTML = highlight(originalContent, word, pattern, color, bgColor, padding);
  },
  update: function update(el, binding, vnode, oldVnode) {
    var pattern = '';
    var color = textColorDefault;
    var bgColor = bgColorDefault;
    var padding = paddingDefault;
    if (binding.value.style != undefined) {
      color = testTextColor(binding.value.style.color);
      bgColor = testBgColor(binding.value.style.bgColor);
      padding = testPadding(binding.value.style.padding);
    }
    if (binding.value.live) {
      pattern = selectPattern(binding.value.word, binding.value.live);
      el.innerHTML = highlight(vnode.children[0].text, binding.value.word, pattern, color, bgColor, padding);
    } else {
      pattern = selectPattern(binding.value.word);
      el.innerHTML = highlight(originalContent, binding.value.word, pattern, color, bgColor, padding);
    }
  },
  unbind: function unbind(el, binding, vnode) {
    el.innerHTML = originalContent;
  }
};

var Plugin = {
  install: function install(Vue, options) {
    Vue.directive('highlight', vueHighlighter);
  }
};

// Install by default
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Plugin);
}

exports['default'] = Plugin;
exports.highlight = vueHighlighter;