InputfieldTagify.module

<?php
// Copyright (c) 2019 Sebastian Tilders. All rights reserved.
// This code is licensed under the GPLv3 and can be found in the LICENSE.md file.
// THIS CODE IS DISTRIBUTED WITH NO WARRANTY AT ALL. USE IT AT YOUR OWN RISK.
namespace ProcessWire;
class InputfieldTagify extends Inputfield implements InputfieldHasArrayValue {

	protected  $jsfile = null;
	protected $cssfile = null;
	protected $delimiter = null;
	public static function getModuleInfo() {
		return array(
			'title' => __('Inputfield Tagify'),
			'summary' => __('Provides a tagify input for ProcessWire'),
			'author' => 'Sebastian Tilders',
			'icon' => 'tags',
			'requires' => 'ProcessWire>=3.0,InputfieldAsmSelect,InputfieldCheckbox, InputfieldText, InputfieldInteger',
			'version' => 10,
			'autoload' => false,
			'singular' => false);
	}

	private function getAssetUrl($file) {
		$url = $this->wire('config')->url($this) . $file;
		return $url;
	}

	private static function quote($val) {
		return '"' . $val . '"';
	}

	public function ___render()  {
		$this->addClass("tagify-ip");
		$this->config->styles->add($this->getAssetUrl($this->attr('cssfile')));
		$this->config->styles->add($this->getAssetUrl("css/pwfixes.css"));
		$val = implode(", ", $this->val());
		$maxTags = $this->attr('maxTags');
		if($maxTags == 0) $maxTags = '"infinity"';
		if($this->attr('add_note')) {
			$delim_str = implode(", ", array_map(array('self','quote'), $this->attr('delimiter')));
			$this->notes = sprintf($this->_('Use %s to separate tag(s).'), $delim_str);
			if($maxTags > 0) {
				$this->notes .= " ";
				$this->notes .= sprintf($this->_("You can enter a maximum of %d tag(s)."), $maxTags);
			}
		}
		$content = "<input id=\"{$this->id()}\" class=\"{$this->class()}\" name=\"{$this->name()}\" value=\"{$val}\"></input>";
		$content .= '<script type="text/javascript" src="';
		$content .= $this->getAssetUrl($this->attr('jsfile'));
		$content .= '"></script>';
		$content .= '<script type="text/javascript">
						var $input = document.querySelector(".tagify-ip");
						var $tagify = new Tagify($input,{delimiters:' . json_encode($this->attr('delimiter'),true) . ', whitelist:' . json_encode($this->attr('complete')) .
						     ', maxTags:' . $maxTags .'});
						</script>';
		return $content;
	}

	public function init() {
		parent::init();
		return $this;
	} 

	public function ___processInput(WireInputData $input) {
		$values = json_decode($input[$this->name],true);
		$procInput = array();
		$prevValue = $this->value;
		foreach($values as $value) {
				array_push($procInput, $value['value']);
		}
		if($prevValue !== $procInput) {
			$this->trackChange('value',$prevValue, $this->value);
			$parent = $this->getParent();
			$parent->trackChange('value', $this->name);
			$this->setAttribute('value', $procInput);
		}
		return $this;
	}

	public function __construct() {
			parent::__construct();
			$this->setAttribute('jsfile', 'scripts/tagify.min.js');
			$this->setAttribute('cssfile', 'css/tagify.css');
			$this->setAttribute('delimiter', array(","));
			$this->setAttribute('complete', array());
			$this->setAttribute('add_note',false);
			$this->setAttribute('maxTags', 0);
	}

	public function renderReady(Inputfield $parent = NULL, $renderValueMode = false) {
		$this->addClass("tagify-input");
		parent::renderReady();
	}

	public function ___getConfigInputFields() {
		$inputfields = parent::___getConfigInputFields();
		$wrapper = $this->wire('modules')->get('InputfieldFieldset'); 
		$wrapper->label = "Tagify";
		$wrapper->icon = 'tags';
		$wrapper->collapsed = true;
		$fields = array(
			array(
				'name' => 'delimiter',
				'label' => $this->_('Delimiters'),
				'description' => $this->_('Select which delimiters should be allowed to separate tags'),
				'icon' => 'terminal',
			    'type' => 'InputfieldAsmSelect',
			    'value' => $this->attr('delimiter'),
			    'options' => array(',' => 'Comma',' ' => 'Space',';' => 'Semicolon'),
			    'columnWidth' => '33'
			),
			array(
				'name' => 'maxTags',
				'label' => 'Tag limit',
				'icon' =>'lock',
				'type' => 'InputfieldInteger',
				'value' => $this->attr('maxTags'),
				'description' => $this->_('Limit tag count to this number'),
				'notes' => $this->_("Use zero if you don't want to limit the number of tags."),
				'columnWidth' => '33',
				'zeroNotNull' => 1,
				'min' => '0',
				'inputType' => 'number'
			),
			array(
				'name' => 'add_note',
				'label' => $this->_('Add Note'),
				'icon' => 'question-circle',
				'description' => $this->_('Append a note to the inputfield of the form "Use ",",... to separate tag(s). You can enter a maximum of n tag(s).'),
				'notes' => $this->_('This will override previous manually setted notes'),
				'type' => 'InputfieldCheckbox',
				'checked' => $this->attr('add_note'),
				'columnWidth' => '33'
			),
			array(
				'name' => 'complete',
				'label' => $this->_('Autocomplete'),
				'description' => $this->_('Add additional tags which should be suggested while adding tags'),
				'type' => 'InputfieldTagify',
				'icon' => 'list',
				'value' => $this->attr('complete'),
				'delimiter' => [' ', ',']
			),
			array(
				'name' =>  'jsfile',
			    'label' => $this->_('Alternate Javascript File'),
				'type' => 'InputfieldText',
				'icon' => 'file-text-o',
				'description' => $this->_('Specify an alternate path for the Tagify js file.'),
				'value' => $this->attr('jsfile'),
				'notes' => $this->_('The path should be relative to the inputfield module path'),
				'collapsed' => true
			),
			array(
				'name' => 'cssfile',
				'label' => $this->_('Alternate CSS File'),
				'icon' => 'file-text-o',
				'type' => 'InputfieldText',
				'value' => $this->attr('cssfile'),
				'description' => $this->_('Specify an alternate path for the Tagify css file.'),
				'notes' => $this->_('The path should be relative to the inputfield module path'),
				'collapsed' => true
			)
		);
	   $wrapper->add($fields);
	   $inputfields->append($wrapper);
	   return $inputfields;
	}
}
?>