vendor/oojs/oojs-ui/demos/classes/BookletDialog.js

   1 Demo.BookletDialog = function DemoBookletDialog( config ) {
   2         Demo.BookletDialog.parent.call( this, config );
   3 };
   4 OO.inheritClass( Demo.BookletDialog, OO.ui.ProcessDialog );
   5 Demo.BookletDialog.static.title = 'Booklet dialog';
   6 Demo.BookletDialog.static.actions = [
   7         { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
   8         { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
   9 ];
  10 Demo.BookletDialog.prototype.getBodyHeight = function () {
  11         return 250;
  12 };
  13 Demo.BookletDialog.prototype.initialize = function () {
  14         var dialog;
  15         Demo.BookletDialog.parent.prototype.initialize.apply( this, arguments );
  16
  17         dialog = this;
  18
  19         function changePage( direction ) {
  20                 var pageIndex = dialog.pages.indexOf( dialog.bookletLayout.getCurrentPage() );
  21                 pageIndex = ( dialog.pages.length + pageIndex + direction ) % dialog.pages.length;
  22                 dialog.bookletLayout.setPage( dialog.pages[ pageIndex ].getName() );
  23         }
  24
  25         this.navigationField = new OO.ui.FieldLayout(
  26                 new OO.ui.ButtonGroupWidget( {
  27                         items: [
  28                                 new OO.ui.ButtonWidget( {
  29                                         data: 'previous',
  30                                         icon: 'previous'
  31                                 } ).on( 'click', function () {
  32                                         changePage( -1 );
  33                                 } ),
  34                                 new OO.ui.ButtonWidget( {
  35                                         data: 'next',
  36                                         icon: 'next'
  37                                 } ).on( 'click', function () {
  38                                         changePage( 1 );
  39                                 } )
  40                         ]
  41                 } ),
  42                 {
  43                         label: 'Change page',
  44                         align: 'top'
  45                 }
  46         );
  47
  48         this.bookletLayout = new OO.ui.BookletLayout();
  49         this.pages = [
  50                 new Demo.SamplePage( 'page-1', { label: 'Page 1', icon: 'window' } ),
  51                 new Demo.SamplePage( 'page-2', { label: 'Page 2', icon: 'window' } ),
  52                 new Demo.SamplePage( 'page-3', { label: 'Page 3', icon: 'window' } )
  53         ];
  54         this.bookletLayout.addPages( this.pages );
  55         this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } );
  56         this.bookletLayout.setPage( 'page-1' );
  57
  58         this.$body.append( this.bookletLayout.$element );
  59 };
  60 Demo.BookletDialog.prototype.getActionProcess = function ( action ) {
  61         if ( action ) {
  62                 return new OO.ui.Process( function () {
  63                         this.close( { action: action } );
  64                 }, this );
  65         }
  66         return Demo.BookletDialog.parent.prototype.getActionProcess.call( this, action );
  67 };
  68 Demo.BookletDialog.prototype.onBookletLayoutSet = function ( page ) {
  69         page.$element.append( this.navigationField.$element );
  70 };