Dotclear

Changeset 3704:37312cc7eeda


Ignore:
Timestamp:
02/16/18 12:37:18 (7 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

dcCKEditor media insertion : cope with no alignment set for image insertion, cope with video media (insert video tag rather than a link)

File:
1 edited

Legend:

Unmodified
Added
Removed

  • plugins/dcCKEditor/js/popup_media.js

    r3446 r3704  
    11$(function() { 
    2      $('#media-insert-cancel').click(function() { 
    3           window.close(); 
    4      }); 
     2  $('#media-insert-cancel').click(function() { 
     3    window.close(); 
     4  }); 
    55 
    6      $('#media-insert-ok').click(function() { 
    7           var insert_form = $('#media-insert-form').get(0); 
    8           if (insert_form === undefined) { 
    9                return; 
    10           } 
     6  $('#media-insert-ok').click(function() { 
     7    var insert_form = $('#media-insert-form').get(0); 
     8    if (insert_form === undefined) { 
     9      return; 
     10    } 
    1111 
    12           var editor_name = window.opener.$.getEditorName(), 
    13               editor = window.opener.CKEDITOR.instances[editor_name], 
    14               type = insert_form.elements.type.value, 
    15               media_align_grid = { 
    16                    left: 'float: left; margin: 0 1em 1em 0;', 
    17                    right: 'float: right; margin: 0 0 1em 1em;', 
    18                    center: 'margin: 0 auto; display: table;' 
    19               }; 
     12    var editor_name = window.opener.$.getEditorName(), 
     13      editor = window.opener.CKEDITOR.instances[editor_name], 
     14      type = insert_form.elements.type.value, 
     15      media_align_grid = { 
     16        left: 'float: left; margin: 0 1em 1em 0;', 
     17        right: 'float: right; margin: 0 0 1em 1em;', 
     18        center: 'margin: 0 auto; display: table;' 
     19      }; 
    2020 
    21           if (type == 'image') { 
    22                if (editor.mode == 'wysiwyg') { 
    23                     var media_legend = $('input[name="legend"]:checked',insert_form).val(); 
    24                     if (media_legend != '' && media_legend != 'title' && media_legend != 'none') { 
    25                          media_legend = 'legend'; 
    26                     } 
    27                     if (media_legend == 'legend') { 
    28                          var figure_template = '<figure style="{figureStyle}"><img class="media" src="{imgSrc}" alt="{imgAlt}"/><figcaption>{figCaption}</figcaption></figure>', 
    29                              a_figure_template = '<figure style="{figureStyle}"><a class="media-link" href="{aHref}"><img class="media" src="{imgSrc}" alt="{imgAlt}"/></a><figcaption>{figCaption}</figcaption></figure>'; 
    30                     } else if (media_legend == 'title') { 
    31                          var figure_template = '<img style="{figureStyle}" class="media" src="{imgSrc}" alt="{imgAlt}"/>', 
    32                              a_figure_template = '<a class="media-link" href="{aHref}"><img class="media" style="{figureStyle}" src="{imgSrc}" alt="{imgAlt}"/></a>'; 
    33                     } else { 
    34                          var figure_template = '<img style="{figureStyle}" class="media" src="{imgSrc}" alt=""/>', 
    35                              a_figure_template = '<a class="media-link" href="{aHref}"><img class="media" style="{figureStyle}" src="{imgSrc}" alt=""/></a>'; 
    36                     } 
    37                     var figure_block = new window.opener.CKEDITOR.template(figure_template), 
    38                         a_figure_block = new window.opener.CKEDITOR.template(a_figure_template), 
    39                         params = {}, 
    40                         templateBlock = null; 
     21    if (type == 'image') { 
     22      if (editor.mode == 'wysiwyg') { 
    4123 
    42                     var align = $('input[name="alignment"]:checked',insert_form).val(); 
    43                     if (align!='' && align!='none') { 
    44                          params.figureStyle = media_align_grid[align]; 
    45                     } 
     24        var align = $('input[name="alignment"]:checked', insert_form).val(); 
     25        var media_legend = $('input[name="legend"]:checked', insert_form).val(); 
     26        var img_description = $('input[name="description"]', insert_form).val(); 
     27        var style = ''; 
     28        var template = ''; 
     29        var template_figure = [ 
     30          '', 
     31          '' 
     32        ]; 
     33        var template_link = [ 
     34          '', 
     35          '' 
     36        ]; 
     37        var template_image = ''; 
    4638 
    47                     var img_description = $('input[name="description"]',insert_form).val(); 
    48                     params.figCaption = window.opener.CKEDITOR.tools.htmlEncodeAttr(img_description); 
     39        if (media_legend != '' && media_legend != 'title' && media_legend != 'none') { 
     40          media_legend = 'legend'; 
     41        } 
    4942 
    50                     var selected_element = ''; 
    51                     if (editor.getSelection().getSelectedElement() !=null ) { 
    52                          selected_element = editor.getSelection().getSelectedElement(); 
    53                     } else { 
    54                          selected_element = editor.getSelection().getNative().toString(); 
    55                     } 
    56                     if (selected_element == '') { 
    57                          selected_element = window.opener.$.stripBaseURL($('input[name="title"]',insert_form).val()); 
    58                     } 
    59                     params.imgAlt = window.opener.CKEDITOR.tools.htmlEncodeAttr(selected_element); 
    60                     params.imgSrc = window.opener.$.stripBaseURL($('input[name="src"]:checked',insert_form).val()); 
     43        // Build template 
     44        if (align != '' && align != 'none') { 
     45          // Set alignment 
     46          style = ' style="{figureStyle}"'; 
     47        } 
     48        if (media_legend == 'legend') { 
     49          // With a legend 
     50          template_figure[0] = '<figure' + style + '>'; 
     51          style = ''; // Do not use style further 
     52          if (img_description != '') { 
     53            template_figure[1] = '<figcaption>{figCaption}</figcaption>'; 
     54          } 
     55          template_figure[1] = template_figure[1] + '</figure>'; 
     56        } 
     57        template_image = '<img class="media" src="{imgSrc}" alt="{imgAlt}"' + style + '/>'; 
     58        if ($('input[name="insertion"]:checked', insert_form).val() == 'link') { 
     59          // With a link to original 
     60          template_link[0] = '<a class="media-link" href="{aHref}">'; 
     61          template_link[1] = '</a>'; 
     62        } 
     63        template = template_figure[0] + template_link[0] + template_image + template_link[1] + template_figure[1]; 
    6164 
    62                     if ($('input[name="insertion"]:checked',insert_form).val() == 'link') { 
    63                          params.aHref = window.opener.$.stripBaseURL($('input[name="url"]',insert_form).val()); 
    64                          templateBlock = a_figure_block; 
    65                     } else { 
    66                          templateBlock = figure_block; 
    67                     } 
     65        var block = new window.opener.CKEDITOR.template(template); 
     66        var params = {}; 
    6867 
    69                     var figure = window.opener.CKEDITOR.dom.element.createFromHtml( 
    70                          templateBlock.output(params), editor.document 
    71                     ); 
     68        // Set parameters for template 
     69        if (media_legend != '' && media_legend != 'none') { 
     70          params.imgAlt = window.opener.CKEDITOR.tools.htmlEncodeAttr( 
     71            window.opener.$.stripBaseURL($('input[name="title"]', insert_form).val())); 
     72        } else { 
     73          params.imgAlt = ''; 
     74        } 
     75        params.imgSrc = window.opener.$.stripBaseURL($('input[name="src"]:checked', insert_form).val()); 
     76        if (align != '' && align != 'none') { 
     77          params.figureStyle = media_align_grid[align]; 
     78        } 
     79        params.figCaption = window.opener.CKEDITOR.tools.htmlEncodeAttr(img_description); 
     80        if ($('input[name="insertion"]:checked', insert_form).val() == 'link') { 
     81          params.aHref = window.opener.$.stripBaseURL($('input[name="url"]', insert_form).val()); 
     82        } 
    7283 
    73                     editor.insertElement(figure); 
    74                } 
    75           } else if (type=='mp3') { 
    76                var player = $('#public_player').val(); 
    77                var align = $('input[name="alignment"]:checked',insert_form).val(); 
     84        // Insert element 
     85        var figure = window.opener.CKEDITOR.dom.element.createFromHtml( 
     86          block.output(params), editor.document 
     87        ); 
     88        editor.insertElement(figure); 
     89      } 
     90    } else if (type == 'mp3') { 
     91      // Audio media 
     92      var player = $('#public_player').val(); 
     93      var align = $('input[name="alignment"]:checked', insert_form).val(); 
    7894 
    79                if (align != undefined && align != 'none') { 
    80                     player = '<div style="' + media_align_grid[align] + '">' + player + '</div>'; 
    81                } 
    82                editor.insertElement(window.opener.CKEDITOR.dom.element.createFromHtml(player)); 
    83           } else { 
    84                var link = '<a href="'; 
    85                link += window.opener.$.stripBaseURL($('input[name="url"]',insert_form).val()); 
    86                link += '">'+window.opener.CKEDITOR.tools.htmlEncodeAttr(insert_form.elements.title.value)+'</a>'; 
    87                element = window.opener.CKEDITOR.dom.element.createFromHtml(link); 
     95      if (align != undefined && align != 'none') { 
     96        player = '<div style="' + media_align_grid[align] + '">' + player + '</div>'; 
     97      } 
     98      editor.insertElement(window.opener.CKEDITOR.dom.element.createFromHtml(player)); 
     99    } else if (type == 'flv') { 
     100      // Video media 
     101      var oplayer = $('<div>' + $('#public_player').val() + '</div>'); 
     102      var flashvars = $("[name=FlashVars]", oplayer).val(); 
    88103 
    89                editor.insertElement(element); 
    90           } 
     104      var align = $('input[name="alignment"]:checked', insert_form).val(); 
     105      var title = insert_form.elements.title.value; 
    91106 
    92           window.close(); 
    93      }); 
     107      $('video', oplayer).attr('width', $('#video_w').val()); 
     108      $('video', oplayer).attr('height', $('#video_h').val()); 
     109 
     110      if (title) { 
     111        flashvars = 'title=' + encodeURI(title) + '&amp;' + flashvars; 
     112      } 
     113      $('object', oplayer).attr('width', $('#video_w').val()); 
     114      $('object', oplayer).attr('height', $('#video_h').val()); 
     115      flashvars = flashvars.replace(/(width=\d*)/, 'width=' + $('#video_w').val()); 
     116      flashvars = flashvars.replace(/(height=\d*)/, 'height=' + $('#video_h').val()); 
     117 
     118      $("[name=FlashVars]", oplayer).val(flashvars); 
     119      var player = oplayer.html(); 
     120 
     121      if (align != undefined && align != 'none') { 
     122        player = '<div style="' + media_align_grid[align] + '">' + player + '</div>'; 
     123      } 
     124      editor.insertElement(window.opener.CKEDITOR.dom.element.createFromHtml(player)); 
     125    } else { 
     126      // Unknown media type 
     127      var link = '<a href="'; 
     128      link += window.opener.$.stripBaseURL($('input[name="url"]', insert_form).val()); 
     129      link += '">' + window.opener.CKEDITOR.tools.htmlEncodeAttr(insert_form.elements.title.value) + '</a>'; 
     130      element = window.opener.CKEDITOR.dom.element.createFromHtml(link); 
     131 
     132      editor.insertElement(element); 
     133    } 
     134 
     135    window.close(); 
     136  }); 
    94137}); 
Note: See TracChangeset for help on using the changeset viewer.

Sites map