sources/plugins/html5video/dialogs/html5video.js

   1 CKEDITOR.dialog.add( 'html5video', function( editor ) {
   2     return {
   3         title: editor.lang.html5video.title,
   4         minWidth: 500,
   5         minHeight: 100,
   6         contents: [ {
   7             id: 'info',
   8             label: editor.lang.html5video.infoLabel,
   9             elements: [ {
  10                 type: 'vbox',
  11                 padding: 0,
  12                 children: [
  13                     {
  14                     type: 'hbox',
  15                     widths: [ '365px', '110px' ],
  16                     align: 'right',
  17                     children: [ {
  18                         type: 'text',
  19                         id: 'url',
  20                         label: editor.lang.html5video.allowed,
  21                         required: true,
  22                         validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.html5video.urlMissing ),
  23                         setup: function( widget ) {
  24                             this.setValue( widget.data.src );
  25                         },
  26                         commit: function( widget ) {
  27                             widget.setData( 'src', this.getValue() );
  28                         }
  29                     },
  30                     {
  31                         type: 'button',
  32                         id: 'browse',
  33                         // v-align with the 'txtUrl' field.
  34                         // TODO: We need something better than a fixed size here.
  35                         style: 'display:inline-block;margin-top:14px;',
  36                         align: 'center',
  37                         label: editor.lang.common.browseServer,
  38                         hidden: true,
  39                         filebrowser: 'info:url'
  40                     } ]
  41                 } ]
  42             },
  43             {
  44                 type: 'checkbox',
  45                 id: 'responsive',
  46                 label: editor.lang.html5video.responsive,
  47                 setup: function( widget ) {
  48                     this.setValue( widget.data.responsive );
  49                 },
  50                 commit: function( widget ) {
  51                     widget.setData( 'responsive', this.getValue()?'true':'' );
  52                 }
  53             },
  54             {
  55                 type: 'hbox',
  56                 id: 'size',
  57                 children: [ {
  58                     type: 'text',
  59                     id: 'width',
  60                     label: editor.lang.common.width,
  61                     setup: function( widget ) {
  62                         if ( widget.data.width ) {
  63                             this.setValue( widget.data.width );
  64                         }
  65                     },
  66                     commit: function( widget ) {
  67                         widget.setData( 'width', this.getValue() );
  68                     }
  69                 },
  70                 {
  71                     type: 'text',
  72                     id: 'height',
  73                     label: editor.lang.common.height,
  74                     setup: function( widget ) {
  75                         if ( widget.data.height ) {
  76                             this.setValue( widget.data.height );
  77                         }
  78                     },
  79                     commit: function( widget ) {
  80                         widget.setData( 'height', this.getValue() );
  81                     }
  82                 },
  83                 ]
  84             },
  85
  86             {
  87                 type: 'hbox',
  88                 id: 'alignment',
  89                 children: [ {
  90                     type: 'radio',
  91                     id: 'align',
  92                     label: editor.lang.common.align,
  93                     items: [
  94                         [editor.lang.common.alignCenter, 'center'],
  95                         [editor.lang.common.alignLeft, 'left'],
  96                         [editor.lang.common.alignRight, 'right'],
  97                         [editor.lang.common.alignNone, 'none']
  98                     ],
  99                     'default': 'center',
 100                     setup: function( widget ) {
 101                         if ( widget.data.align ) {
 102                             this.setValue( widget.data.align );
 103                         }
 104                     },
 105                     commit: function( widget ) {
 106                         widget.setData( 'align', this.getValue() );
 107                     }
 108                 } ]
 109             } ]
 110         },
 111         {
 112             id: 'Upload',
 113             hidden: true,
 114             filebrowser: 'uploadButton',
 115             label: editor.lang.html5video.upload,
 116             elements: [ {
 117                 type: 'file',
 118                 id: 'upload',
 119                 label: editor.lang.html5video.btnUpload,
 120                 style: 'height:40px',
 121                 size: 38
 122             },
 123             {
 124                 type: 'fileButton',
 125                 id: 'uploadButton',
 126                 filebrowser: 'info:url',
 127                 label: editor.lang.html5video.btnUpload,
 128                 'for': [ 'Upload', 'upload' ]
 129             } ]
 130         },
 131         {
 132             id: 'advanced',
 133             label: editor.lang.html5video.advanced,
 134             elements: [ {
 135                 type: 'vbox',
 136                 padding: 0,
 137                 children: [ {
 138                     type: 'hbox',
 139                     children: [ {
 140                         type: 'radio',
 141                         id: 'autoplay',
 142                         label: editor.lang.html5video.autoplay,
 143                         items: [
 144                             [editor.lang.html5video.yes, 'yes'],
 145                             [editor.lang.html5video.no, 'no']
 146                         ],
 147                         'default': 'no',
 148                         setup: function( widget ) {
 149                             if ( widget.data.autoplay ) {
 150                                 this.setValue( widget.data.autoplay );
 151                             }
 152                         },
 153                         commit: function( widget ) {
 154                             widget.setData( 'autoplay', this.getValue() );
 155                         }
 156                     } ]
 157                 } ]
 158             } ]
 159         } ]
 160     };
 161 } );