Improved video support, all tinymce related resources moved to program/js/t...

Aleksander Machniak

2014-06-04 c5bfe69e2199d6dc92136d5e1ebcc9cdeb180bf5

Improved video support, all tinymce related resources moved to program/js/tinymce/roundcube dir

 program/include/rcmail.php

@@ -1795,8 +1795,9 @@
            'spelldict'  => intval($this->config->get('spellcheck_dictionary'))
        );

        $this->output->add_label('selectimage', 'addimage');
        $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia');
        $this->output->set_env('editor_config', $config);
        $this->output->include_css('program/js/tinymce/roundcube/browser.css');
        $this->output->include_script('tinymce/tinymce.min.js');
        $this->output->include_script('editor.js');
    }

 program/js/editor.js

@@ -40,7 +40,7 @@
      selector: '#' + ($('#' + id).is('.mce_editor') ? id : 'fake-editor-id'),
      theme: 'modern',
      language: config.lang,
      content_css: config.skin_path + '/editor_content.css?v2',
      content_css: 'program/js/tinymce/roundcube/content.css?v1',
      menubar: false,
      statusbar: false,
      toolbar_items_size: 'small',
@@ -84,7 +84,7 @@
      accessibility_focus: false,
      file_browser_callback: function(name, url, type, win) { ref.file_browser_callback(name, url, type); },
      // @todo: support more than image (types: file, image, media)
      file_browser_callback_types: 'image'
      file_browser_callback_types: 'image media'
    });
  }

@@ -582,9 +582,25 @@
      return;
    }

    if (file.mimetype.startsWith('image/')) {
    var rx, img_src;

    switch (rcmail.env.file_browser_type) {
      case 'image':
        rx = /^image\//i;
        break;

      case 'media':
        rx = /^video\//i;
        img_src = 'program/js/tinymce/roundcube/video.png';
        break;

      default:
        return;
    }

    if (rx.test(file.mimetype)) {
      var href = rcmail.env.comm_path+'&_id='+rcmail.env.compose_id+'&_action=display-attachment&_file='+file_id,
        img = $('<img>').attr({title: file.name, src: href + '&_thumbnail=1'});
        img = $('<img>').attr({title: file.name, src: img_src ? img_src : href + '&_thumbnail=1'});

      return $('<li>').data('url', href)
        .append($('<span class="img">').append(img))

 program/js/tinymce/roundcube/browser.css

New file
@@ -0,0 +1,91 @@
/* This file contains the CSS data for media file selector of TinyMCE */
#image-selector-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 152px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#image-selector-form {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    border: 0;
    border: 1px solid #FFF;
    border-left: 1px solid #DDD;
    text-align: center;
    padding-top: 10px;
}

#image-upload-button {
    width: 80%;
    height: 30px;
}

#image-upload-button span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

#image-selector-list li {
    line-height: 80px;
    padding: 2px 0 2px 3px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

#image-selector-list li:hover {
    background-color: #F0F0F0;
}

#image-selector-list ul li img {
    vertical-align: middle;
    max-height: 80px;
}

#image-selector-list ul li span.name {
    vertical-align: middle;
    font-weight: bold;
    padding-left: 10px;
}

#image-selector-list ul li span.img {
    height: 80px;
    width: 80px;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    line-height: 80px;
}

#image-selector-form.droptarget.hover,
#image-selector-form.droptarget.active {
    border: 1px solid #019bc6;
    box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}

#image-selector-form.droptarget.hover {
    background-color: #d9ecf4;
    box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}

div.mce-abs-end div.hint {
    line-height: 50px;
    padding-left: 10px;
    color: #999;
    text-shadow: 0 1px 1px #FFF;
}

 program/js/tinymce/roundcube/content.css

 program/js/tinymce/roundcube/video.png

 program/lib/Roundcube/rcube_washtml.php

@@ -95,6 +95,7 @@
        'ins', 'label', 'legend', 'li', 'map', 'menu', 'nobr', 'ol', 'p', 'pre', 'q',
        's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'table',
        'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'tt', 'u', 'ul', 'var', 'wbr', 'img',
        'video', 'source',
        // form elements
        'button', 'input', 'textarea', 'select', 'option', 'optgroup'
    );
@@ -246,7 +247,10 @@
                $quot = strpos($style, '"') !== false ? "'" : '"';
                $t .= ' style=' . $quot . $style . $quot;
            }
            else if ($key == 'background' || ($key == 'src' && strtolower($node->tagName) == 'img')) { //check tagName anyway
            else if ($key == 'background'
                || ($key == 'src' && preg_match('/^(img|source)$/i', $node->tagName))
                || ($key == 'poster' && strtolower($node->tagName) == 'video')
            ) {
                if (($src = $this->config['cid_map'][$value])
                    || ($src = $this->config['cid_map'][$this->config['base_url'].$value])
                ) {

 program/localization/en_US/labels.inc

@@ -232,6 +232,8 @@
$labels['originalmessage'] = 'Original Message';
$labels['selectimage']    = 'Select image';
$labels['addimage']       = 'Add image';
$labels['selectmedia']    = 'Select movie';
$labels['addmedia']       = 'Add movie';

$labels['editidents']    = 'Edit identities';
$labels['spellcheck']    = 'Spell';

 program/steps/mail/sendmail.inc

@@ -428,7 +428,7 @@
        $attachment = $RCMAIL->plugins->exec_hook('attachment_get', $attachment);

        if ($isHtml) {
            $dispurl      = '/\ssrc\s*=\s*[\'"]*\S+display-attachment\S+file=rcmfile'
            $dispurl      = '/\s(poster|src)\s*=\s*[\'"]*\S+display-attachment\S+file=rcmfile'
                . preg_quote($attachment['id']) . '[\s\'"]*/';
            $message_body = $MAIL_MIME->getHTMLBody();
            $is_inline    = preg_match($dispurl, $message_body);
@@ -449,7 +449,7 @@
                $cid .= '@localhost';
            }

            $message_body = preg_replace($dispurl, ' src="cid:' . $cid . '" ', $message_body);
            $message_body = preg_replace($dispurl, ' \\1="cid:' . $cid . '" ', $message_body);

            $MAIL_MIME->setHTMLBody($message_body);


 skins/classic/common.css

@@ -1246,84 +1246,6 @@
  border: 0 !important;
}

#image-selector-list
{
  position: absolute;
  top: 0;
  left: 0;
  right: 152px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#image-selector-form
{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 150px;
  border: 0;
  border: 1px solid #FFF;
  border-left: 1px solid #DDD;
  text-align: center;
  padding-top: 10px;
}

#image-upload-button
{
  width: 80%;
  height: 30px;
}

#image-upload-button span
{
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 30px;
}

#image-selector-list li
{
  line-height: 80px;
  padding: 2px 0 2px 3px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

#image-selector-list li:hover
{
  background-color: #F0F0F0;
}

#image-selector-list ul li img
{
  vertical-align: middle;
  max-height: 80px;
}

#image-selector-list ul li span.name
{
  vertical-align: middle;
  font-weight: bold;
  padding-left: 10px;
  line-height: 80px;
  vertical-align: middle;
}

#image-selector-list ul li span.img
{
  width: 80px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  line-height: 80px;
  vertical-align: middle;
}

#image-selector-form.droptarget {
  background: url(images/filedrop.png) center bottom no-repeat;
}
@@ -1334,12 +1256,4 @@
  box-shadow: 0 0 5px 0 #999;
  -moz-box-shadow: 0 0 5px 0 #999;
  -o-box-shadow: 0 0 5px 0 #999;
}

div.mce-abs-end div.hint
{
  line-height: 50px;
  padding-left: 10px;
  color: #999;
  text-shadow: 0 1px 1px #FFF;
}

 skins/larry/editor_content.css

File was deleted

 skins/larry/styles.css

@@ -2721,98 +2721,6 @@
    margin-left: 0;
}

/*** image selector in HTML editor ***/
#image-selector-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 152px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#image-selector-form {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    border: 0;
    border: 1px solid #FFF;
    border-left: 1px solid #DDD;
    text-align: center;
    padding-top: 10px;
}

#image-upload-button {
    width: 80%;
    height: 30px;
}

#image-upload-button span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

#image-selector-list li {
    line-height: 80px;
    padding: 2px 0 2px 3px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

#image-selector-list li:hover {
    background-color: #F0F0F0;
}

#image-selector-list ul li img {
    vertical-align: middle;
    max-height: 80px;
}

#image-selector-list ul li span.name {
    vertical-align: middle;
    font-weight: bold;
    padding-left: 10px;
}

#image-selector-list ul li span.img {
    height: 80px;
    width: 80px;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    line-height: 80px;
}

#image-selector-form.droptarget {
    background: url(images/filedrop.png) center bottom no-repeat;
}

#image-selector-form.droptarget.hover,
#image-selector-form.droptarget.active {
    border: 1px solid #019bc6;
    box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
    -o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}

#image-selector-form.droptarget.hover {
    background-color: #d9ecf4;
    box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
    -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}

div.mce-abs-end div.hint {
    line-height: 50px;
    padding-left: 10px;
    color: #999;
    text-shadow: 0 1px 1px #FFF;
}