Skip to main content

Creating an ember cli component addon for javascript library


Create addon with generator command


ember addon <addon-name>

example:


ember addon ember-cli-holderjs


Add bower dependency


 create blueprint to install dependency
 ember g blueprint <addon-name>

example:


ember g blueprint ember-cli-holderjs

Two files will be created

installing blueprint
  create blueprints/.jshintrc
  create blueprints/ember-cli-holderjs/index.js

Edit blueprints/<addon-name>/index.js

Add afterInstall hook to add javascript library package to bower.json

afterInstall: function(options) {
    return this.addBowerPackageToProject('holderjs', '2.9.0');
  }

Generate component


ember g component <addon-name>

example:

ember g component ember-cli-holderjs

This will create following files

installing component
  create addon/components/ember-cli-holderjs.js
  create addon/templates/components/ember-cli-holderjs.hbs
installing component-test
  create tests/integration/components/ember-cli-holderjs-test.js
installing component-addon
  create app/components/ember-cli-holderjs.js

Edit addon/components/<addon-name> according to your need.

Example:


import Ember from 'ember';
import layout from '../templates/components/ember-cli-holderjs';

export default Ember.Component.extend({
 layout: layout,
 didInsertElement: function() {
   Ember.run.next(function() {
     Holder.run();
   });
 }
});

Edit  addon/templates/components/<addon-name>

Example:

<img data-src={{src_url}} alt='holderjs image' class={{class}} />


update package.json dependencies


"dependencies": {
    "ember-cli-babel": "^5.1.3",
   // Add ember-cli-htmlbars for compiling templates
    "ember-cli-htmlbars": "0.7.9"
  }

Add dummy app


update index.js


/* jshint node: true */

'use strict';


module.exports = {
  name: 'ember-cli-holderjs',


  included: function(app){
    this._super.included(app);
    // Include library js file
    this.app.import(app.bowerDirectory + '/holderjs/holder.min.js');
  }
};

update bower.json, add devDependencies


"devDependencies": {
    "holderjs": "2.9.0" // Javascript library 
  }

update tests/dummy/app/templates/application.hbs


Example:

{{ember-cli-holderjs src_url="holder.js/132x128?text=Upload Photo"}}

Check if addon is working properly


Run server:

ember server

Browse : localhost://4200




Comments

Post a Comment

Popular posts from this blog

Resolve OpenSSL::SSL::SSLError on Yosemite

If you are using rvm installed ruby on Yosemite  OSX  and getting error : OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed then reinstalling ruby with ` --disable-binary` may fix this Issue. rvm reinstall 2.1.2 --disable-binary  Reason: Ruby installed with packaged binary in rvm has OpenSSL path: /etc/openssl  Path of installed openssl is :  /usr/local/etc/openssl To check openssl directory: > irb > require 'openssl' > "SSL_CERT_DIR: %s" % OpenSSL::X509::DEFAULT_CERT_DIR

Generating preview for pdf and images using Carrierwave in Rails

This blog post will cover how to generate the preview of pdf files using Carrierwave gem. Carrierwave gem has an inbuilt " manipulate! " method which reads the file and loops over every page.  This " manipulate! " method works as expected for a pdf having 300-400 pages but when I uploaded a pdf having 1000+ pages my machine crashed!!! That is when I started debugging the code and found out that there is an issue with the manipulate method. Here is my original code. class MyUploader < CarrierWave :: Uploader :: Base include CarrierWave :: RMagick def cover manipulate ! do | frame , index | frame if index . zero ? # take only the first page of the file end end version : preview do process : cover process : resize_to_fit => [ 310 , 438 ] process : convert => : jpg def full_filename ( for_file = model . source . file ) super . chomp ( File . extname ( super )) + '.jpg'

Letter To Ruby Conf India Organisers

Disclaimer : This article consist of my brutally honest review about Ruby Conf India 2015, If you are prone to depression, heart attack while reading criticism, please STOP reading this letter now  and move on. I know organizers worked hard to organize this event and I thank you for that but this does not mean I am happy with the way it was organised. I have complaints, so do lots of people I know. Someone has to raise voice, for now I am taking this responsibility. 1. Why Discriminate ? I was given accommodation in Justa-panjim while most of the conf attendees were in Cidade-goa, those two hotel are incomparable. Justa-panjim didn't have enough water for bathing, forget about swimming pool, beach. I didn't had complained if everyone was given accommodation in Justa-panjim, Yes I am being jealous here..!!! I paid conf fees(lite tickets.. yes thats how early I booked my ticket.) and I deserve to be treated equally , why discriminate ? 2. Where's Ruby ? In some o