git.sesse.net Git - vlc/blob - share/lua/http/dialogs/mosaic_window.html

   1 <script language="javascript" type="text/javascript">
   2         $(function(){
   3                 $('#window_mosaic').dialog({
   4                         autoOpen: false,
   5                         width: 800,
   6                         maxWidth: 1000,
   7                         minWidth: 800,
   8                         minHeight: 500,
   9                         modal: true,
  10                         buttons: {
  11                                 "Create": function() {
  12                                         $(this).dialog("close");
  13                                 },
  14                                 "Cancel" : function(){
  15                                         $(this).dialog("close")
  16                                 }
  17                         }
  18                 });
  19                 $('#mosaic_bg').resizable({
  20                         maxWidth: 780,
  21                         ghost: true
  22                 });
  23                 $('#mosaic_tiles').draggable({
  24                         maxWidth: 780,
  25                         handle: 'h3',
  26                         containment: [13,98,99999999,99999999],
  27                         drag:function(event,ui){
  28                                 var xoff        =       ui.offset.left - $('#mosaic_bg').offset().left;
  29                                 var yoff        =       ui.offset.top - $('#mosaic_bg').offset().top-17;
  30                                 $('#mosaic_xoff').val(xoff);
  31                                 $('#mosaic_yoff').val(yoff);
  32                         }
  33                 });
  34                 $('input','#mosaic_options').change(setMosaic);
  35                 setMosaic();
  36         });
  37         function setMosaic(){
  38                 var rows        =       Number($('#mosaic_rows').val());
  39                 var cols        =       Number($('#mosaic_cols').val());
  40                 var n           =       0;
  41                 $('#mosaic_tiles').empty()
  42                 $('#mosaic_tiles').append('<tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>');
  43                 for(var i=0;i<rows;i++){
  44                         $('#mosaic_tiles').append('<tr>');
  45                         for(var j=0;j<cols;j++){
  46                                 $('tr:last','#mosaic_tiles').append('<td class="mosaic">');
  47                                 $('td:last','#mosaic_tiles').append('<div id="mosaic_open__'+n+'" class="button icon ui-widget ui-state-default" title="Open Media" style="margin-top:49%"><span class="ui-icon ui-icon-eject"></span></div>');
  48                                 n++;
  49                         }
  50                 }
  51                 $('.mosaic').resizable({
  52                         alsoResize: '.mosaic',
  53                         resize:function(event,ui){
  54                                 $('#mosaic_width').val(ui.size.width);
  55                                 $('#mosaic_height').val(ui.size.height);
  56                                 $('[id^=mosaic_open]').css({
  57                                         'margin-top': Number($('#mosaic_height').val()/2)
  58                                 });
  59                         }
  60                 });
  61                 $('.mosaic').css({
  62                         'background': '#33FF33',
  63                         'width': Number($('#mosaic_width').val()),
  64                         'height':Number($('#mosaic_height').val()),
  65                         'text-align': 'center',
  66                         'float' : 'left',
  67                         'border' : '1px solid #990000',
  68                         'margin-left': Number($('#mosaic_rbord').val()),
  69                         'margin-right': Number($('#mosaic_rbord').val()),
  70                         'margin-top': Number($('#mosaic_cbord').val()),
  71                         'margin-bottom': Number($('#mosaic_cbord').val())
  72                 });
  73                 $('[id^=mosaic_open_]').each(function(){
  74                         $(this).css({
  75                                 'margin-top': Number($('#mosaic_height').val()/2)
  76                         });
  77                         $(this).click(function(){
  78                                 browse_target   =       '#'+$(this).attr('id');
  79                                 get_dir();
  80                                 $('#window_browse').dialog('open');
  81                         });
  82                 });
  83
  84                 $('.button').hover(
  85                         function() { $(this).addClass('ui-state-hover'); },
  86                         function() { $(this).removeClass('ui-state-hover'); }
  87                 );
  88         }
  89 </script>
  90
  91 <div id="window_mosaic" title="Create Mosaic">
  92         <table id="mosaic_options">
  93                 <tr>
  94                         <td style="text-align:right">Rows:</td>
  95                         <td>
  96                                 <input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
  97                         </td>
  98                         <td style="text-align:right">x offset</td>
  99                         <td>
 100                                 <input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
 101                         </td>
 102                         <td style="text-align:right">row border</td>
 103                         <td>
 104                                 <input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
 105                         </td>
 106                         <td style="text-align:right">width</td>
 107                         <td>
 108                                 <input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
 109                         </td>
 110                 </tr>
 111                 <tr>
 112                         <td style="text-align:right">Columns:</td>
 113                         <td>
 114                                 <input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
 115                         </td>
 116                         <td style="text-align:right">y offset</td>
 117                         <td>
 118                                 <input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
 119                         </td>
 120                         <td style="text-align:right">column border</td>
 121                         <td>
 122                                 <input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
 123                         </td>
 124                         <td style="text-align:right">height</td>
 125                         <td>
 126                                 <input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
 127                         </td>
 128                 </tr>
 129         </table>
 130         <div id="mosaic_bg" class="ui-widget-content" style="background: #3333FF;width:400px; height:300px;text-align: center; vertical-align: middle;">
 131                 <h3 style="margin:0px;font-weight:normal" class="ui-widget-header">Background</h3>
 132                 <table id="mosaic_tiles" class="ui-widget-content" cellpadding="0" cellspacing="0">
 133                         <tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>
 134                         <tr>
 135                                 <td class="mosaic"></td>
 136                                 <td class="mosaic"></td>
 137                         </tr>
 138                         <tr>
 139                                 <td class="mosaic"></td>
 140                                 <td class="mosaic"></td>
 141                         </tr>
 142                 </table>
 143         </div>
 144 </div>