%PDF-
%PDF-
Mini Shell
Mini Shell
/* globals _, jQuery */
/* jshint esversion: 6 */
(function($) {
"use strict";
$(function($) {
var group = '.form-group.mfn-pills-field'; // all field including builder
var $on_load = $('.form-group.mfn-pills-field', '.mfn-options, .mfn-meta'); // theme options and page options only
function init(){
$on_load.each(function(){
var domLocation = $(this);
var instance = new PillField( domLocation );
instance.resizeInputWidth();
});
}
function PillField(domLocation){
var that = this;
this.pills = [];
this.domLocation = domLocation;
this.userInputDOM = this.domLocation.find('.mfn-pills-input');
this.hiddenInputDOM = this.domLocation.find('.mfn-pills-input-hidden');
this.checkForExistingClassess = function() {
//we have to divide the input text, to make the array
var inTextClasses = that.hiddenInputDOM.val().split(' ');
that.pills = inTextClasses;
if( '' == that.pills[0] ){
that.pills = [];
}else{
that.refreshPillsOnFront();
}
};
this.createPillsHTML = function(text){
//dom pill creation
var parent = document.createElement('span');
var removal = document.createElement('i');
removal.classList.add("icon-cancel");
$(removal).one('click', that.removeSelectedPill);
return $(parent).append(removal).append(text);
};
this.refreshHiddenInput = function() {
//update the backend input, not visible for user
that.hiddenInputDOM.attr('value', that.pills.join(' ')).trigger('change');
return that.hiddenInputDOM.prop('value', that.pills.join(' '));
};
this.inputEvents = function(e) {
var code = e.key;
if( [" ", "Enter", "Tab"].includes( code ) ){
e.preventDefault();
that.pushWordToArray();
that.userInputDOM.html('');
} else if( "Backspace" === code ) {
if( that.pills.length > 0 && that.userInputDOM.val().length === 0 ){
that.pills.pop();
that.userInputDOM.html('');
that.refreshPillsOnFront();
}
}
};
this.resizeInputWidth = function(){
//we need to calculate remaining space, to resize input
var pills = $(that.domLocation).find('span');
var boxWidth = $(that.domLocation).outerWidth();
var widthTaken = 0;
var actualHeight = 0;
_.each(pills, function(pill){
if( $(pill).position().top != actualHeight){
widthTaken = 0;
actualHeight = $(pill).position().top;
}
widthTaken += parseInt( $(pill).outerWidth(true) );
});
var calc = (boxWidth - widthTaken) - 25;
return that.userInputDOM.css('width', calc+'px');
};
this.refreshPillsOnFront = function() {
$(that.domLocation).find('span').remove();
_.each(that.pills, (item) => {
if(item === '') return;
$( that.createPillsHTML(item) ).insertBefore( that.userInputDOM );
});
that.refreshHiddenInput();
};
this.pushWordToArray = function() {
var cleanedText = _.without(that.userInputDOM.val(), ' ').join('').toString();
// Table of contents, we need to block other types than heading!
var hidden_attr_name = that.hiddenInputDOM.attr('name');
var hidden_attr_dataname = that.hiddenInputDOM.attr('data-name');
if( ( typeof hidden_attr_name !== 'undefined' && hidden_attr_name !== false && that.hiddenInputDOM.attr('name').indexOf('tags_anchors') !== -1) || ( typeof hidden_attr_dataname !== 'undefined' && hidden_attr_dataname !== false && hidden_attr_dataname.indexOf('tags_anchors') !== -1 ) ){
var match = cleanedText.match(/(h|H)[1-7]/g);
var hiddenInputValues = that.hiddenInputDOM.val().split(' ');
if( match && hiddenInputValues.length <= 5){
that.pills.push(match[0]);
}
} else if( cleanedText.length > 0 && !_.contains(that.pills, cleanedText)){
that.pills.push(cleanedText);
}
that.refreshPillsOnFront();
that.resizeInputWidth();
$(that.userInputDOM).val('');
};
this.removeSelectedPill = function(){
//remove pill on click
var selectedPill = $(this).closest('span');
that.pills = _.without(that.pills, selectedPill.get(0).textContent);
selectedPill.remove();
that.refreshPillsOnFront();
that.resizeInputWidth();
};
this.focusHandler = function(e){
if( e.type === 'focusin' ){
$(that.domLocation).addClass('pills-focused');
} else if( e.type === 'focusout' ){
$(that.domLocation).removeClass('pills-focused');
//if input won't be empty, then push pill
that.pushWordToArray();
}
};
// init
this.checkForExistingClassess();
/* WATCHERS */
//click on the box
$(this.domLocation).on('click', function(e){
$(that.userInputDOM)
// .trigger('focus')
.off('click keydown')
.on('keydown', that.inputEvents);
});
//regular input click
$(this.userInputDOM).on('click', function(){
$(that.userInputDOM)
.off('click keydown')
.on('keydown', that.inputEvents);
});
$(this.userInputDOM).on('focusin focusout', that.focusHandler);
/* EO WATCHERS */
}
/* JUST FOR SHORTCODE EDITOR -- WHEN MOVING DOM, IT HAS TO BE RESTARTED */
$(document).on('mfn:builder:edit', function( $this, modal ){
var $modal = $(modal);
$( group, $modal ).each(function(){
//disable events at start, to not to multiple them
$(this)
.off('click')
.find('.mfn-pills-input')
.off('click focusin focusout keydown');
var instance = new PillField( $(this) );
//calc the width on init!
instance.resizeInputWidth();
});
});
init();
});
})(jQuery);
Zerion Mini Shell 1.0