From 557dea1f0e14babf5bf02982eb567f6019e3be2f Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 25 Jul 2018 20:28:30 -0700 Subject: [PATCH] Media-picker work. Add the following to e107_config.php to enable and test. define('e_DEBUG_MEDIAPICKER', true); --- e107_admin/image.php | 138 +++++++++++++++++-------- e107_admin/newspost.php | 9 +- e107_handlers/e_parse_class.php | 3 +- e107_handlers/form_handler.php | 39 ++++++- e107_handlers/media_class.php | 49 ++++++--- e107_themes/bootstrap3/admin_style.css | 10 +- e107_web/js/core/mediaManager.js | 8 ++ 7 files changed, 180 insertions(+), 76 deletions(-) diff --git a/e107_admin/image.php b/e107_admin/image.php index 125528a18..0424fa69c 100644 --- a/e107_admin/image.php +++ b/e107_admin/image.php @@ -1329,10 +1329,65 @@ class media_admin_ui extends e_admin_ui return $text; } + /** + * Media-Manager Tabs (new in v2.1.9) + * Replacement for mediaSelectUpload() + * @return string + */ + function mediaManagerTabs() + { + $frm = e107::getForm(); + $tp = e107::getParser(); + $options = array(); + $options['bbcode'] = ($this->getQuery('bbcode')=='img') ? 'img' : FALSE; + + if(isset($_GET['from'])) + { + $options['from'] .= intval($_GET['from']); + } + + $cat = $this->getQuery('for'); + + $tabOptions = array( + 'core-media-image' => array('caption'=> $tp->toGlyph('fa-file-photo-o').ADLAN_105, 'text' => $this->imageTab2($cat,$options) ), + 'core-media-video' => array('caption'=> $tp->toGlyph('fa-file-video-o').IMALAN_163, 'text' => $this->videoTab()), + 'core-media-audio' => array('caption'=> $tp->toGlyph('fa-file-audio-o')."Audio", 'text' => $this->audioTab()), + 'core-media-youtube' => array('caption'=> $tp->toGlyph('fa-youtube-play')."Youtube", 'text' => $this->youtubeTab() ), + 'core-media-glyphs' => array('caption'=> $tp->toGlyph('fa-flag')."Glyphs", 'text' => $this->glyphTab()), + ); + + $tabs = array(); + + // check tab options against URL + foreach($tabOptions as $key=>$val) + { + $id = str_replace('core-media-', '', $key); + if($this->getQuery($id) == 1 || $this->getQuery('bbcode') == $id) + { + $tabs[$key] = $val; + } + + } + + if(getperms('A|A1')) + { + $tabs['core-media-upload'] = array('caption'=> $tp->toGlyph('fa-upload').IMALAN_150, 'text' => $this->uploadTab()); + } + + return $frm->tabs($tabs, array('id'=>'admin-ui-media-manager', 'class'=>'media-manager')); + + } + + /** + * @deprecated by mediaManagerTabs + * @param string $type + * @return string + */ function mediaSelectUpload($type='image') { $frm = e107::getForm(); + $tp = e107::getParser(); if($type === 'video') { @@ -1343,7 +1398,10 @@ class media_admin_ui extends e_admin_ui return $frm->tabs($tabs, array('class'=>'media-manager')); } - + if(deftrue('e_DEBUG_MEDIAPICKER')) + { + return $this->mediaManagerTabs(); + } $youtubeActive = 'inactive'; @@ -1356,11 +1414,11 @@ class media_admin_ui extends e_admin_ui if($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') != 'glyph') { - $text .= "
  • ".IMALAN_151."
    • \n"; + $text .= "
  • ".ADLAN_105."
    • \n"; } else { - if($this->getQuery('bbcode') == 'glyph') + if($this->getQuery('bbcode') == 'glyphs') { $glyphActive = 'active'; } @@ -1372,32 +1430,27 @@ class media_admin_ui extends e_admin_ui } - if(getperms('A|A1') && ($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') !='glyph')) - { - $text .= "
  • ".IMALAN_150."
    • "; - } + if(varset($options['bbcode']) == 'img') { - $text .= "
  • ".IMALAN_152."
    • \n"; + $text .= "
  • ".IMALAN_152."
    • \n"; } - - if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph') - { - $text .= "
  • Glyphs
    • \n"; - } - + if($this->getQuery('video') == 1 || $this->getQuery('bbcode') == 'video') { - $text .= "
  • Youtube
    • \n"; - $text .= "
  • ".IMALAN_163."
    • \n"; - + $text .= "
  • "."Youtube
    • \n"; } - if($this->getQuery('audio') == 1 || $this->getQuery('bbcode') == 'audio') - { - $text .= "
  • Audio
    • \n"; + if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph') + { + $text .= "
  • "."Glyphs
    • \n"; + } + + if(getperms('A|A1') && ($this->getQuery('bbcode') != 'video' && $this->getQuery('bbcode') !='glyph')) + { + $text .= "
  • ".IMALAN_150."
    • "; } @@ -1447,7 +1500,7 @@ class media_admin_ui extends e_admin_ui * */ - if($options['bbcode']) //TODO LAN lan_image.php + if($options['bbcode']) //TODO move to imagestyleTab(); { $text .= "
    @@ -1511,43 +1564,32 @@ class media_admin_ui extends e_admin_ui
    "; } - if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph') - { - //TODO - $text .= "
    "; - - $text .= $this->glyphTab(); - - $text .= "
    - "; - - - } + if($this->getQuery('video') || $this->getQuery('bbcode') == 'video') { $text .= "
    "; - // $text .= "
    "; $text .= $this->youtubeTab(); $text .= "
    "; - $text .= "
    "; - // $text .= "
    "; - $text .= $this->videoTab(); - $text .= "
    "; - - } if($this->getQuery('audio') || $this->getQuery('bbcode') == 'audio') { $text .= "
    "; - // $text .= "
    "; $text .= $this->audioTab(); $text .= "
    "; } - + + if($this->getQuery('glyphs') == 1 || $this->getQuery('bbcode') == 'glyph') + { + $text .= "
    "; + $text .= $this->glyphTab(); + $text .= "
    + "; + + } $text .= "
    "; @@ -1654,6 +1696,7 @@ class media_admin_ui extends e_admin_ui 'saveValue' => $val['media_url'], 'thumbUrl' => $tp->thumbUrl($val['media_url'], array('w'=>340, 'h'=>220)), 'title' => $val['media_name'], + 'tooltip' => basename($val['media_url'])." (".$val['media_dimensions'].")", 'slideCaption' => '', 'slideCategory' => 'bootstrap', 'mime' => $val['media_type'] @@ -1742,7 +1785,7 @@ class media_admin_ui extends e_admin_ui } - function videoTab($parm=array()) + private function videoTab($parm=array()) { $tp = e107::getParser(); @@ -1764,13 +1807,18 @@ class media_admin_ui extends e_admin_ui $videos = e107::getMedia()->getVideos(); + + foreach($videos as $val) { + $size = e107::getFile()->file_size_encode($val['media_size']); + $items[] = array( 'previewHtml' => $tp->toVideo($val['media_url'], array('w'=>210, 'h'=>140)), // e_IMAGE_ABS."generic/playlist_120.png", 'saveValue' => $val['media_url'], 'thumbUrl' => $val['media_url'], 'title' => $val['media_name'], + 'tooltip' => basename($val['media_url'])." (".$size.")", 'slideCaption' => '', 'slideCategory' => 'bootstrap', 'mime' => $val['media_type'] @@ -2053,7 +2101,9 @@ class media_admin_ui extends e_admin_ui else // empty key. { $link = ''.IMALAN_177.''; - $items = "

    ".e107::getParser()->lanVars(e107::getParser()->toHTML(IMALAN_174, true), array('x'=>$link))."

    "; + $items = " +

    ".e107::getParser()->lanVars(e107::getParser()->toHTML(IMALAN_174, true), array('x'=>$link))."

    +
    "; } diff --git a/e107_admin/newspost.php b/e107_admin/newspost.php index a047f97fa..5eb2f39b7 100644 --- a/e107_admin/newspost.php +++ b/e107_admin/newspost.php @@ -1752,15 +1752,8 @@ class news_form_ui extends e_admin_form_ui } } - if(deftrue('e_DEBUG_MEDIAPICKER')) - { - $text = $frm->mediapicker('news_thumbnail[0]', varset($thumbTmp[0]),'media=news&image=1&video=1&audio=1'); - } - else - { - $text = $frm->imagepicker('news_thumbnail[0]', varset($thumbTmp[0]), varset($paths[0]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images'); - } + $text = $frm->imagepicker('news_thumbnail[0]', varset($thumbTmp[0]), varset($paths[0]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images'); $text .= $frm->imagepicker('news_thumbnail[1]', varset($thumbTmp[1]), varset($paths[1]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images'); $text .= $frm->imagepicker('news_thumbnail[2]', varset($thumbTmp[2]), varset($paths[2]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images'); $text .= $frm->imagepicker('news_thumbnail[3]', varset($thumbTmp[3]), varset($paths[3]),'media=news&video=1&legacyPath={e_IMAGE}newspost_images'); diff --git a/e107_handlers/e_parse_class.php b/e107_handlers/e_parse_class.php index ce9d9efa4..3be37f9b5 100644 --- a/e107_handlers/e_parse_class.php +++ b/e107_handlers/e_parse_class.php @@ -4109,8 +4109,9 @@ class e_parser $idAtt = (!empty($parm['id'])) ? "id='".$parm['id']."' " : ''; $style = (!empty($parm['style'])) ? "style='".$parm['style']."' " : ''; $class = (!empty($parm['class'])) ? $parm['class']." " : ''; + $placeholder = isset($parm['placeholder']) ? $parm['placeholder'] : ""; - $text = "<".$tag." {$idAtt}class='".$class.$prefix.$id.$size.$spin.$rotate.$fixedW."' {$style}>" ; + $text = "<".$tag." {$idAtt}class='".$class.$prefix.$id.$size.$spin.$rotate.$fixedW."' {$style}>".$placeholder."" ; $text .= ($options !== false) ? $options : ""; return $text; diff --git a/e107_handlers/form_handler.php b/e107_handlers/form_handler.php index 946fd4702..276a2801a 100644 --- a/e107_handlers/form_handler.php +++ b/e107_handlers/form_handler.php @@ -512,9 +512,10 @@ class e_form function tabs($array,$options = array()) { $initTab = varset($options['active'],false); + $id = !empty($options['id']) ? 'id="'.$options['id'].'"' : ''; $text =' -
      '; +
        '; $c = 0; @@ -998,10 +999,20 @@ class e_form $url .= "&w=".$extras['w']; } + if(!empty($extras['image'])) + { + $url .= "&image=1"; + } + if(!empty($extras['glyphs'])) { $url .= "&glyphs=1"; - } + } + + if(!empty($extras['youtube'])) + { + $url .= "&youtube=1"; + } if(!empty($extras['video'])) { @@ -1206,6 +1217,20 @@ class e_form */ function imagepicker($name, $default, $previewURL = '', $sc_parameters = '') { + + if(deftrue('e_DEBUG_MEDIAPICKER')) + { + $sc_parameters .= '&image=1'; + if(strpos($sc_parameters, 'video=1')!==false) // bc fix + { + $sc_parameters .= '&youtube=1'; + } + + return $this->mediapicker($name, $default, $sc_parameters); + } + + + $tp = e107::getParser(); $name_id = $this->name2id($name); $meta_id = $name_id."-meta"; @@ -1365,6 +1390,8 @@ class e_form */ function mediapicker($name, $default, $parms = '') { + + $tp = e107::getParser(); $name_id = $this->name2id($name); $meta_id = $name_id."-meta"; @@ -1379,6 +1406,7 @@ class e_form $parms = array(); } + if(empty($parms['media'])) { $parms['media'] = '_common'; @@ -1392,7 +1420,7 @@ class e_form // Test Files... // $default = '{e_MEDIA_VIDEO}2018-07/samplevideo_720x480_2mb.mp4'; // $default = '{e_MEDIA_FILE}2016-03/Colony_Harry_Gregson_Williams.mp3'; - $default = '{e_PLUGIN}gallery/images/butterfly.jpg'; + // $default = '{e_PLUGIN}gallery/images/butterfly.jpg'; // $default = 'NuIAYHVeFYs.youtube'; // $default = ''; // empty @@ -1402,6 +1430,7 @@ class e_form switch($type) { + case "video": $preview = $tp->toVideo($default, array('w'=>$width, 'h'=> ($height - 50))); $previewURL = $tp->toVideo($default, array('mode'=>'url')); @@ -1434,11 +1463,11 @@ class e_form // $preview = $tp->toImage($default, array('w'=>$width, 'h'=>$height, 'class'=>'image-selector img-responsive img-fluid')); // $previewURL = $tp->thumbUrl($default, array('w'=>800)); break; - /* + case "glyph": $preview = $tp->toGlyph($default, array('size'=>'3x')); $previewURL = false; - break;*/ + break; default: // blank diff --git a/e107_handlers/media_class.php b/e107_handlers/media_class.php index 209513caa..e4c915a72 100644 --- a/e107_handlers/media_class.php +++ b/e107_handlers/media_class.php @@ -1309,7 +1309,8 @@ class e_media 'thumbUrl' => $defaultThumb, 'title' => '', 'gridClass' => 'span2 col-md-2', - 'bbcode' => '' + 'bbcode' => '', + 'tooltip' => '', ); @@ -1327,13 +1328,20 @@ class e_media
        -
        \n"; +
        \n"; + $caption = $data['title']; + + if(!empty($data['tooltip'])) + { + $data['title'] = $data['tooltip']; + } $linkTag = $this->browserCarouselItemSelector($data); + switch($data['type']) { case "video": @@ -1348,11 +1356,11 @@ class e_media $text .= $tp->toAudio($data['thumbUrl'], array('mime'=>$data['mime'])); } - $text .= "
        + $text .= "
        "; $text .= $this->browserCarouselItemSelector($data); - $text .= "\n".$data['title']; + $text .= "\n".$caption; $text .= "\n
        "; $data['style'] = 'float:right'; @@ -1365,17 +1373,19 @@ class e_media case "image": + + $text .= $linkTag; $text .= ""; $text .= ''; $text .= ""; $text .= "\n\n\n"; - $text .= "
        + $text .= "
        "; $text .= $this->browserCarouselItemSelector($data); - $text .= "\n".$data['title']; + $text .= "\n".$caption; $text .= "\n
        "; $data['style'] = 'float:right'; @@ -1393,8 +1403,9 @@ class e_media case "glyph": $text .= $linkTag; - $text .= "\n".$tp->toGlyph($data['thumbUrl'],false).""; + $text .= "\n".$tp->toGlyph($data['thumbUrl'],array('placeholder'=>'')).""; $text .= "\n\n\n"; + break; @@ -1531,7 +1542,7 @@ class e_media $text .= ' 
        - 1 + 1
        '; @@ -1558,9 +1569,11 @@ class e_media $perPage = vartrue($parm['perPage'],12); $c=0; + $count = 0; $slides = array(); + $totalSlides = 0; if(is_array($data) && count($data) > 0) { @@ -1568,21 +1581,24 @@ class e_media foreach($data as $key=>$val) { + if($c == 0) { $active = (count($slides) <1) ? ' active' : ''; + $totalSlides++; $text .= ' - +
        '; - if(count($slides) > 1) + if($totalSlides > 2) { - $text .= ""; } @@ -1624,9 +1643,7 @@ class e_media $text .= '
        - - - '; + '; diff --git a/e107_themes/bootstrap3/admin_style.css b/e107_themes/bootstrap3/admin_style.css index aa97d8265..dfc460a8e 100644 --- a/e107_themes/bootstrap3/admin_style.css +++ b/e107_themes/bootstrap3/admin_style.css @@ -266,13 +266,19 @@ td.right, th.right { text-align:right } /* media picker */ +#media-browser-container-glyph{ margin-left: 15px } + .media-carousel-item-image .well { height: 200px; overflow:hidden } .media-carousel-item-image span { display:block; height:150px; } .media-carousel-item-image img { width:100%; max-height: 100%; } .media-carousel-item-video .video-responsive { padding-top: 0; } .media-carousel-item-video video { max-width: 100%; max-height: 200px; } +.media-carousel .well:hover { border:1px solid silver } - +.media-carousel-item-container { position: relative; min-height:100px; } +.media-carousel-item-controls { /*position: absolute;bottom:7px; right: 10px */ margin-top:5px;} +.media-carousel-item-container audio { width: 100% } +.media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-right:5px; margin-bottom:5px } .mediaselector-preview img, .mediaselector-preview video, @@ -1412,7 +1418,7 @@ li.rssRow > div { /*.media-carousel { margin-bottom:10px }*/ -.media-carousel-item-glyph { width: 64px; height:64px; overflow:hidden; margin-left:5px; margin-bottom:5px } + .media-manager {padding:20px; min-height:400px } diff --git a/e107_web/js/core/mediaManager.js b/e107_web/js/core/mediaManager.js index 0865e6825..9bf29f49d 100644 --- a/e107_web/js/core/mediaManager.js +++ b/e107_web/js/core/mediaManager.js @@ -80,12 +80,18 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}}; // Ajax keyup search. Used by media-browser. $(context).find('.e-ajax-keyup').once('media-manager-e-ajax-keyup').each(function () { + + $(this).keyup(function () { + var that = this; e107.callbacks.waitForFinalEvent(function () { + + $(that).closest('div').find('.media-carousel-index').text('1'); // reset counter when searching. + e107.mediaManager.eAjaxKeyUp(that); }, 300, "eAjaxKeyUp"); }); @@ -611,6 +617,8 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}}; var src = $this.attr("data-src"); var search = $this.val(); + + if(search !== null) { search = search.replace('https://', 'url:');