From c5bfe69e2199d6dc92136d5e1ebcc9cdeb180bf5 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Wed, 4 Jun 2014 18:42:57 +0200 Subject: Improved video support, all tinymce related resources moved to program/js/tinymce/roundcube dir --- program/include/rcmail.php | 3 +- program/js/editor.js | 24 ++++++-- program/js/tinymce/roundcube/browser.css | 91 ++++++++++++++++++++++++++++++ program/js/tinymce/roundcube/content.css | 26 +++++++++ program/js/tinymce/roundcube/video.png | Bin 0 -> 999 bytes program/lib/Roundcube/rcube_washtml.php | 6 +- program/localization/en_US/labels.inc | 2 + program/steps/mail/sendmail.inc | 4 +- skins/classic/common.css | 86 ----------------------------- skins/classic/editor_content.css | 26 --------- skins/larry/editor_content.css | 26 --------- skins/larry/styles.css | 92 ------------------------------- 12 files changed, 148 insertions(+), 238 deletions(-) create mode 100644 program/js/tinymce/roundcube/browser.css create mode 100644 program/js/tinymce/roundcube/content.css create mode 100644 program/js/tinymce/roundcube/video.png delete mode 100644 skins/classic/editor_content.css delete mode 100644 skins/larry/editor_content.css diff --git a/program/include/rcmail.php b/program/include/rcmail.php index a6ba18312..a9e717b86 100644 --- a/program/include/rcmail.php +++ b/program/include/rcmail.php @@ -1795,8 +1795,9 @@ class rcmail extends rcube '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'); } diff --git a/program/js/editor.js b/program/js/editor.js index 6540bd56a..c5ceddd0f 100644 --- a/program/js/editor.js +++ b/program/js/editor.js @@ -40,7 +40,7 @@ function rcube_text_editor(config, id) 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 @@ function rcube_text_editor(config, id) 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 @@ function rcube_text_editor(config, id) 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 = $('').attr({title: file.name, src: href + '&_thumbnail=1'}); + img = $('').attr({title: file.name, src: img_src ? img_src : href + '&_thumbnail=1'}); return $('
  • ').data('url', href) .append($('').append(img)) diff --git a/program/js/tinymce/roundcube/browser.css b/program/js/tinymce/roundcube/browser.css new file mode 100644 index 000000000..1787226f3 --- /dev/null +++ b/program/js/tinymce/roundcube/browser.css @@ -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; +} diff --git a/program/js/tinymce/roundcube/content.css b/program/js/tinymce/roundcube/content.css new file mode 100644 index 000000000..67480ab77 --- /dev/null +++ b/program/js/tinymce/roundcube/content.css @@ -0,0 +1,26 @@ +/* This file contains the CSS data for the editable area(iframe) of TinyMCE */ + +body, td, pre { + font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; +} + +body { + background-color: #FFFFFF; + margin-left: 4px; + margin-right: 4px; + margin-top: 2px; +} + +div.pre { + margin: 0; + padding: 0; + font-family: monospace; +} + +blockquote +{ + border-left: #1010ff 2px solid; + margin: 0; + padding: 0 0.4em; +} diff --git a/program/js/tinymce/roundcube/video.png b/program/js/tinymce/roundcube/video.png new file mode 100644 index 000000000..faf657000 Binary files /dev/null and b/program/js/tinymce/roundcube/video.png differ diff --git a/program/lib/Roundcube/rcube_washtml.php b/program/lib/Roundcube/rcube_washtml.php index 984294376..b93d3b117 100644 --- a/program/lib/Roundcube/rcube_washtml.php +++ b/program/lib/Roundcube/rcube_washtml.php @@ -95,6 +95,7 @@ class rcube_washtml '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 @@ class rcube_washtml $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]) ) { diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc index 20992e50e..2da99105f 100644 --- a/program/localization/en_US/labels.inc +++ b/program/localization/en_US/labels.inc @@ -232,6 +232,8 @@ $labels['mailreplyintro'] = 'On $date, $sender wrote:'; $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'; diff --git a/program/steps/mail/sendmail.inc b/program/steps/mail/sendmail.inc index 4737ce368..b70b18b6b 100644 --- a/program/steps/mail/sendmail.inc +++ b/program/steps/mail/sendmail.inc @@ -428,7 +428,7 @@ if (is_array($COMPOSE['attachments'])) { $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 @@ if (is_array($COMPOSE['attachments'])) { $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); diff --git a/skins/classic/common.css b/skins/classic/common.css index bdc7501f3..813df9ed3 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -1246,84 +1246,6 @@ fieldset.tabbed 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; } @@ -1335,11 +1257,3 @@ fieldset.tabbed -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; -} diff --git a/skins/classic/editor_content.css b/skins/classic/editor_content.css deleted file mode 100644 index 67480ab77..000000000 --- a/skins/classic/editor_content.css +++ /dev/null @@ -1,26 +0,0 @@ -/* This file contains the CSS data for the editable area(iframe) of TinyMCE */ - -body, td, pre { - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - font-size: 12px; -} - -body { - background-color: #FFFFFF; - margin-left: 4px; - margin-right: 4px; - margin-top: 2px; -} - -div.pre { - margin: 0; - padding: 0; - font-family: monospace; -} - -blockquote -{ - border-left: #1010ff 2px solid; - margin: 0; - padding: 0 0.4em; -} diff --git a/skins/larry/editor_content.css b/skins/larry/editor_content.css deleted file mode 100644 index 67480ab77..000000000 --- a/skins/larry/editor_content.css +++ /dev/null @@ -1,26 +0,0 @@ -/* This file contains the CSS data for the editable area(iframe) of TinyMCE */ - -body, td, pre { - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - font-size: 12px; -} - -body { - background-color: #FFFFFF; - margin-left: 4px; - margin-right: 4px; - margin-top: 2px; -} - -div.pre { - margin: 0; - padding: 0; - font-family: monospace; -} - -blockquote -{ - border-left: #1010ff 2px solid; - margin: 0; - padding: 0 0.4em; -} diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 6eceb772e..d1e45012b 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -2721,98 +2721,6 @@ fieldset.tab { 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; -} -- cgit v1.2.3