rm-components/addon/components/rm-preview-dashboard/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,

  _initDash() {
    this.setPrimaryColorSVG();
    this.updateOrganizationName();
    this.showDashboardPage();
  },

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

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

    this.addObserver('primaryColor', this, this.setPrimaryColorSVG);
    this.addObserver('organizationName', this, this.updateOrganizationName);
    this.addObserver('dashboardPage', this, this.showDashboardPage);
  },

  willDestroyElement() {
    this.removeObserver('primaryColor', this, this.setPrimaryColorSVG);
    this.removeObserver('organizationName', this, this.updateOrganizationName);
    this.removeObserver('dashboardPage', this, this.showDashboardPage);
  },

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

  updateOrganizationName() {
    let organizationName = this.get('organizationName') || this.get('organizationName');
    this.$('.organizationName').text(organizationName);
  },

  showDashboardPage() {
    let currentPage = this.get('currentDashboardPage') || this.get('defaults.currentDashboardPage');
    let svgId = '#dashboardSVG';
    let id = this.get('dashboardPage');

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

    this.hideAllPages(svgId, '.dashPage', -1852);
    this.showPage(id, svgId);

    this.set('currentDashboardPage', id);
  }

});