From c5bfe69e2199d6dc92136d5e1ebcc9cdeb180bf5 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Wed, 4 Jun 2014 18:42:57 +0200 Subject: [PATCH] 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 +++++++++++++++++ .../js/tinymce/roundcube/content.css | 0 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/larry/editor_content.css | 26 ----- skins/larry/styles.css | 92 ------------------ 11 files changed, 122 insertions(+), 212 deletions(-) create mode 100644 program/js/tinymce/roundcube/browser.css rename skins/classic/editor_content.css => program/js/tinymce/roundcube/content.css (100%) create mode 100644 program/js/tinymce/roundcube/video.png 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/skins/classic/editor_content.css b/program/js/tinymce/roundcube/content.css similarity index 100% rename from skins/classic/editor_content.css rename to program/js/tinymce/roundcube/content.css diff --git a/program/js/tinymce/roundcube/video.png b/program/js/tinymce/roundcube/video.png new file mode 100644 index 0000000000000000000000000000000000000000..faf657000b1c153fcc5cb63488614c0155aa86e4 GIT binary patch literal 999 zcmV{F*#6&bJ>`v9{AcJ^} zpv0ROkrg~C2%_Q&#!C)i@t_wy2|48CK{O!2iw9*7qf@=Rk@YL+!9z%HD`ts}>FM&Y zJ33R_oeb%ZVZ!{NVP5g-)&C9k)m-9^ktE*R)G3FKEePBi@bq;vWuM`Bqr@-Uo%N}a; zJD}y4E2TaHPDD|3%^34m0GtG7suWicGr-9JI5=)4IXI}if+NP5M?`GZ!bHTTX#vg;`uWr7_4W1jKmB0Fm|mG; z({Rr9GPGPDv~RmEG;tK2z|X+%1;@N0{unr{wO;a_MC8ED0y*ct3B&Ly5s_xIxg;W| zfqQdkJCLE}@SyD{uplC5ZlyI5`3k`8ydj-wwOXIWar_?e8gR!ggnVEWEv1ctPN(yi zwf0RBd9-i8LT)?N<7@I~j`6TlA{ZWq$D>}vdvp;^c|w{5Nc z#gAl+i3(Bf5r$!BVPWA!tycR9@V|OQ8Cr(A-*hF;gVwrLtJTi2_un5Ge<7;`W6Z2` zZbd|103=T=KY>|e%$^ThKqF5hedgxo?yT4AuLJLj$iADnH!`%$4jO&}j{%?O(3pwV z`k8vY{sHjdh*ge`qNVgMw79tV5b&Xh94{k&X$iDit-Et>=0>8hS;#qe96&@wYyDCj z#}|P&C{a8V|7C6!xCeNoz?e5=s0)e6w@H$`?K_FcC%~~0;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/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; -}