JSFiddle - React, Tailwind, and code Playground

by Barry Carter

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<max-tag-filter class='max-tag' params='arraysToFilter: [Max.tagging.optionsForArray($root.fakeUsers, "id")]'></max-tag-filter>    
<div id="demo">
<table class="max-tag-test">
  <tr>
    <td>
      <h3>Button menu, Read Only</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options'></max-tag>    
    </td>
    <td class="tag-options">
      <h3>Button menu, Edit Mode</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options1'></max-tag>
    </td>
  </tr>
  <tr>
    <td>
      <pre>
options = {
    headerText: "Group 1", 
    displayMode: 'button',
    readOnly: true
};
      </pre>
    </td>
    <td>
      <pre>
options = {
    headerText: "Group 2", 
    displayMode: 'button',
    readOnly: false
};
      </pre>
    </td>
  </tr>
</table>
<hr/>

<table class="max-tag-test">
  <tr>
    <td>
      <h3>Inline, Read Only</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options2'></max-tag>
    </td>
    <td class="tag-options">
      <h3>Inline Edit Mode</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options3'></max-tag>
    </td>
  </tr>
  <tr>
    <td>
      <pre>
options = {
    headerText: "Group 3", 
    displayMode: 'block',
    readOnly: true
};
      </pre>
    </td>
    <td>
      <pre>
options = {
    headerText: "Group 4", 
    displayMode: 'block',
    readOnly: false
};
      </pre>
    </td>
  </tr>
</table>
<hr/>

<table class="max-tag-test">
  <tr>
    <td>
      <h3>Inline, Read Only, No Header</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options4'></max-tag>
    </td>
    <td class="tag-options">
      <h3>Inline, Edit Mode, No Header</h3>
      <max-tag class='max-tag' params='tags: allTags, tagIds: showTagsIds, options: options5'></max-tag>
    </td>
  </tr>
  <tr>
    <td>
   ...

CSS

#demo .max-tag-test { 
  width: 100%;
}

#demo .max-tag-test td {
  width: 50%;
}

.max-tag-test pre {
  background: #d8d8d8;
  width: 200px;
  padding: 10px
}

/* start tags */
.max-tag-menu-button, .max-tag-hide-button {
  background-color: white;    
}

.max-tag-menu-button {
  width: 20px;
  height: 20px;
  background-image: url("http://headfuzz.co.uk/files/junk/tag-xxl.png");
  background-size: 20px 20px;
  position: relative;
}

.max-tag-hide-button {
  width: 20px;
  height: 20px;
  background-image: url("http://headfuzz.co.uk/files/junk/direction-navigation-back-arrow-circle-left-icon.png");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  margin: 2px 0 0 3px;
}

.max-tag-header {
  background-color: #883ae9;
  border-bottom: 1px solid #545459;
  padding: 0 3px 2px 0;
}

.max-tag-header h4 {
  margin: 0 0 0 10px;
  color: #ccc;
  font-size: 0.8em;
}

.max-tag-content input {
  margin: 0 3px 0 10px;
  width: 50px;
  border: none;

}

.max-tag-dropdown {
  background-color: white;
  min-width: 50px;
  width: -moz-fit-content;
  cursor: text;
  border: 1px solid #bec0d2;
}

.max-tag-dropdown-wr {
  height: auto;
  position: absolute;
  overflow: hidden;
  width: 0;
  margin-top: -16px;
  margin-left: 4px;
}

.max-tag-dropdown .inline, .max-tag-all-dropdown .inline {
  display: inline-flex;
  vertical-align: middle;
}

.max-tag-all-dropdown {
  height: auto;
  /*position: absolute;*/
  top: 53px;
  left: 9px;  
  background: white;
  padding: 6px;
  min-width: 200px;
}

.max-tag-show-tags {
  width: 20px;
  height: 20px;
  background-color: green;
  display: inline-flex;
}

.max-tag-hide-tags {
  width: 20px;
  height: 20px;
  background-color: orange;
  display: inline-flex;
}

.max-tag-tag {
    display: inline-flex;
    background-color: green;
    margin: 2px;
}

.max-tag-results-header {
    font-size: 0.7em;
    color: #9c9c9c;
    border-bottom: 1px solid #d1d1d1;
    overflow: visible;
    margin-bottom: 7px;
}

.max-tag-menu-button...

JavaScript

window.Max = window.Max || {};
Max.tagging = Max.tagging || {
		optionsForArray: function(arr, propName) {
    		return { propName: propName, data: arr };
    }
};

ko.components.register("max-tag-filter", {
    viewModel: function (params) {
        var self = this;
        self.arraysToFilter = params.arraysToFilter || [];
        self.allTags = ko.observableArray([]);
        self.selectedTagIds = ko.observableArray([]);
        
        
      	self.tagOptions = {
            headerText: "Expanded", 
            displayMode: 'block',
            readOnly: false,
            header: false,
            expanded: true
        };
        params.options = params.options || {};
        
        self.options = { 
            headerText: params.headerText || "Filter Selection",
            displayMode: params.options.displayMode || "button",
            readOnly: (params.options.hasOwnProperty("readOnly") ? params.options.readOnly : true),
            header: (params.options.hasOwnProperty("header") ? params.options.header : true),
            expanded: (params.options.hasOwnProperty("expanded") ? params.options.expanded : false),
            dataSource: params.options.dataSource || undefined,
        };
        
        // always recalculate he given lists based on the tag selection
        ko.computed(function() {
        		// get all permissable ids
            var permiss = [1, 2];
            // .ajax(permiss);
            
        		// for each array in the array, loop through and check its properties
          	ko.utils.arrayForEach(self.arraysToFilter, function(arr) {
              	arr = ko.utils.arrayFilter(arr.data(), function(innerArr) {
                  	// if match the property?
                    if (permiss.indexOf(innerArr[arr.propName]) >= 0) {
                    		return true;
                    }
                    return false;
                });
            });
            debugger;
        });
        
        // Private variables
       ...