Task techjoomla#179 feat: Adding bootstrap tagInputs for tjlist other…

… field
pravinTek · Sep 4, 2019 · 7a4d808 · 7a4d808
1 parent 0c1a4d4
commit 7a4d808
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/administrator/assets/css/bootstrap-tagsinput.css b/administrator/assets/css/bootstrap-tagsinput.css
diff --git a/administrator/assets/js/bootstrap-tagsinput.min.js b/administrator/assets/js/bootstrap-tagsinput.min.js
diff --git a/administrator/assets/js/tjlist.js b/administrator/assets/js/tjlist.js
@@ -6,13 +6,15 @@
  * @license    GNU General Public License version 2, or later
  */
 var tjlist = {
-
+	tagInput : true,
 	addOtherOption: function (element) {
-
 		jQuery(tjlist.getTextBox(element)).insertAfter(element.next(".chzn-container"));
+
+		setTimeout(function() {
+			element.siblings('div.tjfieldTjListOtherText').children('.bootstrap-tagsinput').children().focus();
+		}, 100);
 	},
 	removeOtherOption: function (element) {
-
 		element.siblings('div.tjfieldTjListOtherText').remove();
 	},
 	getTextBox: function (element) {
@@ -21,7 +23,25 @@ var tjlist = {
 			isRequired    = (element.attr('required') != undefined) ? 'required="required"' : '',
 			requiredClass = (isRequired != '') ? 'required' : '';
 
-		return '<div class="tjfieldTjListOtherText"><br/><input ' + isRequired + ' type="text" name="' + inputName + '" id="' + inputId + '" value="" class=" ' + requiredClass + '" aria-invalid="false"></div>';
+		// Start -To add tags type inputbox design
+		if (this.tagInput)
+		{
+			jQuery('.bootstrap-tagsinput').remove();
+		}
+
+		this.load_tagsinputjs();
+		this.tagInput = false;
+		// End
+
+		return '<div class="tjfieldTjListOtherText"><br/><input data-role="tagsinput" placeholder="' + Joomla.JText._('COM_TJFIELDS_OTHER_VALUE') + '" ' + isRequired + ' type="text" name="' + inputName + '" id="' + inputId + '" value="" class=" focus ' + requiredClass + '" aria-invalid="false"></div>';
+	},
+	load_tagsinputjs: function()
+	{
+	  var head= document.getElementsByTagName('head')[0];
+	  var script= document.createElement('script');
+
+	  script.src= Joomla.getOptions('system.paths').base +'/administrator/components/com_tjfields/assets/js/bootstrap-tagsinput.min.js';
+	  head.appendChild(script);
 	}
 }
 

diff --git a/administrator/models/fields/tjlist.php b/administrator/models/fields/tjlist.php
@@ -14,6 +14,7 @@
 
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
+use Joomla\CMS\Factory;
 
 /**
  * Form Field class for the Joomla Platform.
@@ -105,7 +106,9 @@ protected function getInput()
 
 		$html = parent::getInput();
 
-		$doc = JFactory::getDocument();
+		$doc = Factory::getDocument();
+		$doc->addStyleSheet(JUri::root() . 'administrator/components/com_tjfields/assets/css/bootstrap-tagsinput.css');
+		$doc->addScript(JUri::root() . 'administrator/components/com_tjfields/assets/js/bootstrap-tagsinput.min.js');
 		$doc->addScript(JUri::root() . 'administrator/components/com_tjfields/assets/js/tjlist.min.js');
 
 		$options = $this->getOptions();
@@ -202,7 +205,7 @@ public function getOptions()
 	private function getInputBox()
 	{
 		$text = '<div class="tjfieldTjListOtherText"><br/>';
-		$text .= '<input type="text" class=" ' . $this->otherInputClass . '" ' . $this->otherInputRequired . '
+		$text .= '<input data-role="tagsinput" type="text" class=" focus ' . $this->otherInputClass . '" ' . $this->otherInputRequired . '
 					name="' . $this->name . '" id="' . $this->id . '" value="' . $this->otherSelectedValue . '" aria-invalid="false"></div>';
 
 		return $text;