User:Huji/OOUI2.js

(function($, mw) {
  'use strict';
  var windowManager;
  var SD;
  var SDOptions = {
    install: function() {
      mw.loader.using(['oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows', 'mediawiki.api']).done(SDOptions.createWindow);
      mw.loader.load(['oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows', 'mediawiki.api']);
    },
    createWindow: function() {
      function SimpleDialog(config) {
        SimpleDialog.super.call(this, config);
      }
      OO.inheritClass(SimpleDialog, OO.ui.ProcessDialog);
      SimpleDialog.static.name = 'Simple dialog';
      SimpleDialog.static.title = 'Simple Dialog';
      SimpleDialog.static.actions = [{
        action: 'Go',
        label: 'Go',
        flags: 'primary'
      }, {
        label: 'Cancel',
        flags: 'safe'
      }];
      SimpleDialog.prototype.initialize = function() {
        var dialog = this;

        SimpleDialog.super.prototype.initialize.apply(this, arguments);

        this.buttonEmotions = new OO.ui.ButtonOptionWidget({
          id: 'buttonEmotions',
          label: 'Show Emotions',
          data: {
            group: 'Emotions'
          }
        });
        this.buttonAnimals = new OO.ui.ButtonOptionWidget({
          id: 'buttonAnimals',
          label: 'Show Animals',
          data: {
            group: 'Animals'
          }
        });
        this.buttonHappy = new OO.ui.ButtonOptionWidget({
          id: 'buttonHappy',
          label: 'Happy :)'
        });
        this.buttonSad = new OO.ui.ButtonOptionWidget({
          id: 'buttonSad',
          label: 'Sad :('
        });
        this.buttonCat = new OO.ui.ButtonOptionWidget({
          id: 'buttonCat',
          label: 'Meow!'
        });
        this.buttonDog = new OO.ui.ButtonOptionWidget({
          id: 'buttonDog',
          label: 'Woof!'
        });
        
        this.buttonSelectGroups = new OO.ui.ButtonSelectWidget({
          items:[
            this.buttonEmotions,
            this.buttonAnimals
          ]
        });
        this.buttonSelectGroups.selectItem(this.buttonEmotions);
        this.buttonSelectGroups.on('choose', function(item){
          dialog.panelMiddle.$element.children().detach();
          dialog.panelMiddle.$element.append(dialog.buttonSelect[item.data.group].$element);
          dialog.setButtonSelectAction();
        });
        
        this.buttonSelect = [];
        this.buttonSelect['Emotions'] = new OO.ui.ButtonSelectWidget({
          items: [
            this.buttonHappy,
            this.buttonSad
          ]
        });
        this.buttonSelect['Animals'] = new OO.ui.ButtonSelectWidget({
          items: [
            this.buttonCat,
            this.buttonDog
          ]
        });

        this.setButtonSelectAction = function(){
          dialog.buttonSelect['Emotions'].on('choose', function(btn){
            dialog.panelBottom.$element.empty().append($('<p>You pressed ' + btn.label + '</p>'));
          });
          dialog.buttonSelect['Animals'].on('choose', function(btn){
            dialog.panelBottom.$element.empty().append($('<p>You pressed ' + btn.label + '</p>'));
          });
          windowManager.getCurrentWindow().updateSize();
        }
        // this.setButtonSelectAction();

        this.panelTop = new OO.ui.PanelLayout({
          expanded: true,
          padded: true
        });
        this.panelMiddle = new OO.ui.PanelLayout({
          expanded: true,
          padded: true
        });
        this.panelBottom = new OO.ui.PanelLayout({
          expanded: true,
          padded: true
        });
        this.panelTop.$element.append(this.buttonSelectGroups.$element);
        this.panelMiddle.$element.append(this.buttonSelect['Emotions'].$element);

        this.stackLayout = new OO.ui.StackLayout({
          items: [
          	this.panelTop,
            this.panelMiddle,
            this.panelBottom
          ],
          continuous: true,
          scrollable: false
        });
        this.$body.append(this.stackLayout.$element);
      };
      if (!windowManager) {
        windowManager = new OO.ui.WindowManager();
        $('body').append(windowManager.$element);
      }
      SD = new SimpleDialog({
        size: 'large'
      });
      SD.on('opened', function(){
        console.log('Something');
      });
      windowManager.addWindows([SD]);
      windowManager.openWindow(SD);
    }
  }
  if (mw.config.get('wgPageName') != 'User:Huji/OOUI2.js' & mw.config.get('wgPageName') != 'User:Huji/vector.js'){
    $(SDOptions.install);
  }
})(jQuery, mediaWiki);