Semantic UI - Ractive Component

Dropdown

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ">
		<div class="ui {{#fluid}}fluid{{/fluid}} dropdown selection multiple" tabindex="0" on-click="toggle('showOptions')">
	<select name="" multiple="">
	  <option value="">{{defaultText}}</option>
	  {{#options}}
	  <option value="{{.}}">{{.}}</option>
	  {{/options}}
	</select>
	<i class="dropdown icon"></i>
  {{#selected}}
  <a class="ui label transition visible" style="display: inline-block !important;" on-click="unSelectOption:0">{{selected}}<i class="delete icon"></i></a>
  {{/selected}}
	{{#selectedOptions:i}}
	<a class="ui label transition visible" style="display: inline-block !important;" on-click="unSelectOption:{{i}}">{{.}}<i class="delete icon"></i></a>
	{{/selectedOptions}}
	<div class="default text">{{defaultText}}</div>
	<div class="menu transition {{#showOptions}}visible{{/showOptions}}" tabindex="-1">
		{{#options:i}}
		<div class="item" on-click="selectOption:{{i}}">{{.}}</div>
		{{/options}}
	</div>
</div>
</script>

<main></main>

JavaScript

var MyComponent = Ractive.extend({
	template: '#templ'
  ,data: function() {
  	
    return {
    	
      'selectedOptions': []
      ,'selected': undefined
      ,showOptions: false
      ,multiple: false
      ,fluid: false
    
    }
  
  }
  , oninit() {
  
  	var self = this;
    
    self.on({
    	'selectOption': function(_, i) {
      	if (!self.get('multiple')) {
        	//self.splice('selectedOptions', 0, 1, self.get('options')[i])
          self.set('selected', self.get('options')[i]);
        } else {
        	self.push('selectedOptions',  self.get('options')[i]);
        }
      }
      ,'unSelectOption': function(_, i) {
      	if (!self.get('multiple')) {
        	self.set('selected', undefined);
        } else {
        	self.splice('selectedOptions', i, 1);
        }
      	
      }
    })
  }
})

new Ractive({
  el: 'main',
  template: '<MyComponent options="{{[\'action1\', \'action2\']}}" selectedOptions="{{userSelection}}" defaultText="Select" multiple="{{true}}" fluid="{{true}}"/>',
  components: {
  	MyComponent: MyComponent
  }
  ,data: function() {
  		return {
      	userSelection: []
        ,selection: undefined
      }
  }
  , oninit: function() {
  
  	this.on('MyComponent.selectOption', function() {
    	console.log(this.get('userSelection'));
      return false;
    }.bind(this))
    
    this.on('MyComponent.unSelectOption', function() {
    	console.log(this.get('userSelection'));
      return false;
    }.bind(this))
    
     
  
  }

})