discourse/app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6

import { url } from 'discourse/lib/computed';
import { default as computed, observes } from 'ember-addons/ember-computed-decorators';

export default Ember.Controller.extend({
  maximized: false,
  section: null,

  targets: [
    {id: 0, name: I18n.t('admin.customize.theme.common')},
    {id: 1, name: I18n.t('admin.customize.theme.desktop')},
    {id: 2, name: I18n.t('admin.customize.theme.mobile')}
  ],

  @computed('onlyOverridden')
  showCommon() {
    return this.shouldShow('common');
  },

  @computed('onlyOverridden')
  showDesktop() {
    return this.shouldShow('desktop');
  },

  @computed('onlyOverridden')
  showMobile() {
    return this.shouldShow('mobile');
  },

  @observes('onlyOverridden')
  onlyOverriddenChanged() {
    if (this.get('onlyOverridden')) {
      if (!this.get('model').hasEdited(this.get('currentTargetName'), this.get('fieldName'))) {
        let target = (this.get('showCommon') && 'common') ||
          (this.get('showDesktop') && 'desktop') ||
          (this.get('showMobile') && 'mobile');

        let fields = this.get('model.theme_fields');
        let field = fields && fields.find(f => (f.target === target));
        this.replaceRoute('adminCustomizeThemes.edit', this.get('model.id'), target, field && field.name);
      }
    }
  },

  shouldShow(target){
    if(!this.get("onlyOverridden")) {
      return true;
    }
    return this.get("model").hasEdited(target);
  },

  currentTarget: 0,

  setTargetName: function(name) {
    let target;
    switch(name) {
      case "common": target = 0; break;
      case "desktop": target = 1; break;
      case "mobile": target = 2; break;
    }

    this.set("currentTarget", target);
  },

  @computed("currentTarget")
  currentTargetName(target) {
    switch(parseInt(target)) {
      case 0: return "common";
      case 1: return "desktop";
      case 2: return "mobile";
    }
  },

  @computed("fieldName")
  activeSectionMode(fieldName) {
    return fieldName && fieldName.indexOf("scss") > -1 ? "scss" : "html";
  },

  @computed("currentTargetName", "fieldName", "saving")
  error(target, fieldName) {
    return this.get('model').getError(target, fieldName);
  },

  @computed("fieldName", "currentTargetName")
  editorId(fieldName, currentTarget) {
    return fieldName + "|" + currentTarget;
  },

  @computed("fieldName", "currentTargetName", "model")
  activeSection: {
    get(fieldName, target, model) {
      return model.getField(target, fieldName);
    },
    set(value, fieldName, target, model) {
      model.setField(target, fieldName, value);
      return value;
    }
  },

  @computed("currentTarget", "onlyOverridden")
  fields(target, onlyOverridden) {
    let fields = [
      "scss", "head_tag", "header", "after_header", "body_tag", "footer"
    ];

    if (parseInt(target) === 0) {
      fields.push("embedded_scss");
    }

    if (onlyOverridden) {
      const model = this.get("model");
      const targetName = this.get("currentTargetName");
      fields = fields.filter(name => model.hasEdited(targetName, name));
    }

    return fields.map(name=>{
      let hash = {
        key: (`admin.customize.theme.${name}.text`),
        name: name
      };

      if (name.indexOf("_tag") > 0) {
        hash.icon = "file-text-o";
      }

      hash.title = I18n.t(`admin.customize.theme.${name}.title`);

      return hash;
    });
  },

  previewUrl: url('model.id', '/admin/themes/%@/preview'),

  maximizeIcon: function() {
    return this.get('maximized') ? 'compress' : 'expand';
  }.property('maximized'),

  saveButtonText: function() {
    return this.get('model.isSaving') ? I18n.t('saving') : I18n.t('admin.customize.save');
  }.property('model.isSaving'),

  saveDisabled: function() {
    return !this.get('model.changed') || this.get('model.isSaving');
  }.property('model.changed', 'model.isSaving'),

  actions: {
    save() {
      this.set('saving', true);
      this.get('model').saveChanges("theme_fields").finally(()=>{this.set('saving', false);});
    },

    toggleMaximize: function() {
      this.toggleProperty('maximized');
      Em.run.next(()=>{
        this.appEvents.trigger('ace:resize');
      });
    }
  }

});