rm-components/addon/components/rm-preview-iphone/component.js

The default blueprint for ember-cli addons.

import Ember from 'ember';
import layout from './template';
import previewPlumbing from '../../mixins/rm-preview-plumbing';

export default Ember.Component.extend(previewPlumbing, {
  layout,

  _initPhone() {
    this.setPrimaryColorSVG();
    this.updateAppName();
    this.showPhonePage(true);
  },

  didInsertElement() {
    if (this.get('defaultPhoneScreen')) {
      this.set('defaults.iPhonePage', this.get('defaultPhoneScreen'));
    }

    Ember.$.get('assets/rm-components/mobile-12.svg', (data) => {
      if (!this.$('#iphoneSVG')) {
        Ember.Logger.warn('Could not load Mobile SVG. Could not find #dashboardSVG');
        return false;
      }

      if (this.$('#iphoneSVG')[0]) {
        this.$('#iphoneSVG')[0].innerHTML = new XMLSerializer().serializeToString(data.documentElement);
      }
      this.$('#iphoneSVG').append(Ember.$(`<img src="assets/rm-components/mobile.png" style="width: 100%; height: auto;">`));
      this._initPhone();
      this._removeKruft();
    });

    this.addObserver('primaryColor', this, this.setPrimaryColorSVG);
    this.addObserver('appName', this, this.updateAppName);
    this.addObserver('iPhonePage', this, this.showPhonePage);
  },

  willDestroyElement() {
    this.removeObserver('primaryColor', this, this.setPrimaryColorSVG);
    this.removeObserver('appName', this, this.appName);
    this.removeObserver('iPhonePage', this, this.showPhonePage);
  },

  setPrimaryColorSVG() {
    let phoneSVG = this.$('.iphoneSVG')[0]; // jscs:ignore requireArrayDestructuring
    this._updateColors(phoneSVG, '.primaryColor', this.get('primaryColor'));
  },

  updateAppName() {
    let appName = this.get('appName') || this.get('defaults.appName');

    if (appName.length > 9) {
      appName = `${appName.substr(0, 9)} ...`;
    }

    this.$('.appName').text(appName);
  },

  showPhonePage(slam) {

    let currentPage = this.get('currentPhonePage') || '';
    let svgId = '#iphoneSVG';
    let id = this.get('iPhonePage') || this.get('defaults.iPhonePage');

    if (currentPage === id) {
      return;
    } // don't transition if already showing page

    if (slam === true) {
      this.evacuateAllPages(svgId, '.appPage');
      this.slamPage(id, svgId);
    } else {
      this.hideAllPages(svgId, '.appPage');
      this.showPage(id, svgId);
    }
    this.set('currentPhonePage', id);
  }
});