# master-addons/3.1.2/assets/js/admin/visual-select.js

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits, version 3.1.2. 193 lines.

- Page: https://pluginprobe.com/plugins/master-addons/3.1.2/code/assets/js/admin/visual-select.js
- Raw: https://pluginprobe.com/plugins/master-addons/3.1.2/raw/assets/js/admin/visual-select.js
- Modified: 2026-03-08T11:32:50+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/master-addons/3.1.2/code/assets/js/admin/visual-select.js#L10-L20`.

```javascript
(function(){
;
(function($, window2, document2, undefined$1) {
  "use strict";
  var pluginName = "jltmaVisualSelect", defaults = {
    item: "jltma-select-item",
    // visual select item [class name]
    selected: "jltma-selected",
    // selected item [class name]
    caption: "jltma-select-caption",
    // caption under visual item [class name]
    container: "jltma-visual-select",
    // select items container [class name]
    insertCaption: false,
    // whether insert captions to visual items
    insertSymbol: true,
    // whether insert symbol to visual items
    insertTitleAttr: true,
    // adds title attribute to visual item
    autoHideElement: true,
    // hide HTML select element after init
    imgTest: /\.jpg|\.png|\.gif|.jpeg|\.svg/
    // test for image src
  }, attributesMap = {
    "type": "symbolType",
    "title-attr": "insertTitleAttr",
    "auto-hide": "autoHideElement",
    "caption": "insertCaption"
  };
  function Plugin(element, options) {
    this.element = element;
    this.$element = $(element);
    this.options = $.extend({}, defaults, options);
    for (var key in attributesMap) {
      var value = attributesMap[key], dataAttr = this.$element.data(key);
      if (dataAttr === undefined$1) {
        continue;
      }
      this.options[value] = dataAttr;
    }
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }
  $.extend(Plugin.prototype, {
    init: function() {
      var self = this, st = self.options;
      self.multiple = self.$element.attr("multiple") === "multiple";
      if (st.autoHideElement) {
        self.$element.css("display", "none");
      }
      self.$selectCont = $('<div class="' + st.container + '"></div>').insertAfter(self.$element);
      self.generate();
      self.$element.on("change", this.update.bind(this));
    },
    /**
     * on visual select item clicked
     * @private
     * @param  {jQuery Event} event
     */
    _onItemClick: function(event) {
      var $visualItem = $(event.currentTarget), $selectOption = $visualItem.data("selectOption"), st = this.options;
      if (this.multiple) {
        if ($visualItem.hasClass(st.selected)) {
          $visualItem.removeClass(st.selected);
          $selectOption.removeAttr("selected");
        } else {
          $visualItem.addClass(st.selected);
          $selectOption.attr("selected", "selected");
          var val = this.$element.val();
          if (val === null) {
            val = [];
          }
          val.push($selectOption.attr("value"));
          this.$element.val(val);
        }
      } else if (!$visualItem.hasClass(st.selected)) {
        $visualItem.addClass(st.selected);
        $selectOption.attr("selected", "selected");
        this.$element.val($selectOption.attr("value"));
        if (this.$selectedItem) {
          this.$selectedItem.removeClass(st.selected);
          this.$selectedItem.data("selectOption").removeAttr("selected");
        }
        this.$selectedItem = $visualItem;
      }
      this._internalTrigger = true;
      this.$element.trigger("change");
    },
    /**
     * Generates video element sources by parsing the data-video-src attribute on element
     */
    _generateVideoSource: function(videoSrc) {
      var source = "";
      videoSrc.split(",").forEach(function(src) {
        src = src.split(" ");
        source += '<source src="' + src[0] + '" type="video/' + src[1] + '">';
      });
      return source;
    },
    /**
     * On video ready to play
     */
    _videoInit: function(event) {
      $(event.currentTarget).on("mouseenter", function() {
        this.play();
      }).on("mouseleave", function() {
        this.pause();
        this.currentTime = 0;
      });
    },
    /**
     * updates selected items in visual form
     */
    update: function() {
      if (this._internalTrigger) {
        this._internalTrigger = false;
        return;
      }
      var self = this, st = this.options, $items = self.$selectCont.find("." + st.item), val = self.$element.val();
      self.$element.find("option").each(function(index, option) {
        var $option = $(option), $visualItem = $items.eq(index);
        if (val.indexOf($option.val()) !== -1) {
          self.$selectedItem = $visualItem.addClass(st.selected);
        } else {
          $visualItem.removeClass(st.selected);
        }
      });
    },
    /**
     * create visual items from HTML select element
     * @param {boolean} reset Remove old visual items [it's useful for updating visual select]
     * @public
     */
    generate: function(reset) {
      var self = this, st = self.options;
      if (reset) {
        this.$selectCont.find("." + st.item).remove();
      }
      self.$element.find("option").each(function() {
        var $selectOption = $(this), $visualItem = $('<div class="' + st.item + '"></div>'), symbol = $selectOption.data("symbol"), videoSrc = $selectOption.data("video-src"), caption = $selectOption.html(), cssClass = $selectOption.data("class");
        if (cssClass) {
          $visualItem.addClass(cssClass);
        }
        if (st.insertSymbol) {
          if (videoSrc) {
            $visualItem.attr("item-type", "video");
            var $videoElement = $("<video></video>").attr("muted", "").attr("loop", "").append(self._generateVideoSource(videoSrc)).appendTo($visualItem);
            $videoElement[0].addEventListener("loadedmetadata", self._videoInit);
          } else if (st.imgTest.test(symbol) || $selectOption.data("type") === "image") {
            $("<img/>").attr("src", symbol).attr("alt", caption).appendTo($visualItem);
          } else {
            $("<span></span>").addClass(symbol).appendTo($visualItem);
          }
        }
        if (st.insertCaption) {
          $('<span class="' + st.caption + '">' + caption + "</span>").appendTo($visualItem);
        }
        $visualItem.click($.proxy(self._onItemClick, self)).data("selectOption", $selectOption).appendTo(self.$selectCont);
        if (st.insertTitleAttr) {
          $visualItem.attr("title", caption);
        }
        if ($selectOption.attr("selected") === "selected") {
          self.$selectedItem = $visualItem.addClass(st.selected);
        }
      });
    }
  });
  $.fn[pluginName] = function(options) {
    var args = arguments;
    if (options === undefined$1 || typeof options === "object") {
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
    } else if (typeof options === "string" && options[0] !== "_" && options !== "init") {
      var returns;
      this.each(function() {
        var instance = $.data(this, "plugin_" + pluginName);
        if (instance instanceof Plugin && typeof instance[options] === "function") {
          returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
        }
        if (options === "destroy") {
          $.data(this, "plugin_" + pluginName, null);
        }
      });
      return returns !== undefined$1 ? returns : this;
    }
  };
})(jQuery, window, document);
})();

```