Share-Box

components.share-box.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  init() {
   	this._super(...arguments);
    
    this.shareText = "Test";
    this._shareText = "Test Test";
  },
  
  actions: {
    onHashtagSelected(hashtag) {
     	this.set('additionalText', `${this.get('additionalText')} #${hashtag}`);
      this.set('_shareText', `${this.get('_shareText')} #${hashtag}`);
    },
    
    onShare() {
     console.log('Text to Share: ', this.get('_shareText'));
    }
  }
});

components.suggested-hashtags.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  hashtags: [
  	'linkedinlife',
    'linkedin',
    'design',
    'software',
    'code'
  ],
  
  actions: {
   	hashtagSelected(hashtag) {
      this.get('onHashtagSelected')(hashtag);
    }
  }
});

components.text-box.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.share-box__textbox {
 	width: 100%; 
  font-size: 14px;
  height: 100px;
}

.share-box__hashtag {
 	background-color: transparent;
  border-radius: 2px;
  color: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.55);
  cursor: pointer;
}

.share-box__hashtag:hover {
  color: rgba(0,0,0,.95);
  border-color: rgba(0,0,0,.95);
}

.share-box__button {
  border-radius: 2px;
  padding: 10px;
 	font-size: 20px;
  color: #fff;
  background-color: #0084bf;
  border: none;
  float: right;
  cursor: pointer;
}

.share-box__button:hover {
  background-color: #0073b1;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{share-box}}
<br>
<br>

templates.components.share-box.hbs

<p>Share Something:</p>

{{textarea
	class="share-box__textbox"
	value=(mut _shareText)
}}

{{!--
{{text-box
	shareText=shareText
  additionalText=additionalText
}}
--}}

{{suggested-hashtags
	onHashtagSelected=(action "onHashtagSelected")
}}

<button
	class="share-box__button"
	{{action "onShare"}}
>
  Share
</button>

templates.components.suggested-hashtags.hbs

<div>
	<span>Suggested hashtags: </span>
  {{#each hashtags as |hashtag|}}
  	<button class="share-box__hashtag" {{action "hashtagSelected" hashtag}}>#{{hashtag}}</button>
  {{/each}}
</div>

templates.components.text-box.hbs

<textarea class="share-box__textbox">{{shareText}}</textarea>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}