From a530b18455fa1c726e26cf77a5feb4d40103800e Mon Sep 17 00:00:00 2001 From: dziudek Date: Sun, 5 Jan 2014 17:16:49 +0100 Subject: [PATCH] [v.1.3.5] Ready to release * Added the Video Gallery portal mode * Updated polish language file --- .../language/en-GB.mod_news_pro_gk5.ini | 4 + .../language/pl-PL.mod_news_pro_gk5.ini | 35 +- mod_news_pro_gk5/mod_news_pro_gk5.xml | 42 ++- .../videogallery/configuration.json | 9 + .../portal_modes/videogallery/controller.php | 215 +++++++++++ .../portal_modes/videogallery/index.html | 1 + .../videogallery/script.jquery.js | 140 +++++++ .../videogallery/script.mootools.js | 141 +++++++ .../portal_modes/videogallery/style.css | 350 ++++++++++++++++++ 9 files changed, 931 insertions(+), 6 deletions(-) create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/configuration.json create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/controller.php create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/index.html create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/script.jquery.js create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/script.mootools.js create mode 100644 mod_news_pro_gk5/portal_modes/videogallery/style.css diff --git a/mod_news_pro_gk5/language/en-GB.mod_news_pro_gk5.ini b/mod_news_pro_gk5/language/en-GB.mod_news_pro_gk5.ini index 7546789..c306229 100644 --- a/mod_news_pro_gk5/language/en-GB.mod_news_pro_gk5.ini +++ b/mod_news_pro_gk5/language/en-GB.mod_news_pro_gk5.ini @@ -630,6 +630,10 @@ NSP_PORTAL_MODE_HIGHLIGHTS_TITLE_LIMIT_TYPE="Type of title limit" COM_MODULES_NSP_PORTAL_MODE_VIDEOGALLERY_FIELDSET_LABEL="Video Gallery - Portal Mode Settings" MOD_NEWS_PRO_GK5_VIDEOGALLERY="Video Gallery" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP="Video popup" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_DESC="You can disable the video popup which is displayed when article contains a video in K2 component." +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_X="Popup width" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_Y="Popup height" NSP_PORTAL_MODE_VIDEO_GALLERY_PAGES="Amount of pages" NSP_PORTAL_MODE_VIDEO_GALLERY_PAGES_DESC="Amount of pages with articles. When bigger than 1 - then the auto-animation will be automatically enabled." NSP_PORTAL_MODE_VIDEO_GALLERY_PER_PAGE="Articles per page" diff --git a/mod_news_pro_gk5/language/pl-PL.mod_news_pro_gk5.ini b/mod_news_pro_gk5/language/pl-PL.mod_news_pro_gk5.ini index e8069df..a49bc3e 100644 --- a/mod_news_pro_gk5/language/pl-PL.mod_news_pro_gk5.ini +++ b/mod_news_pro_gk5/language/pl-PL.mod_news_pro_gk5.ini @@ -126,6 +126,7 @@ MOD_NEWS_PRO_GK5_TITLE="Według tytułów" MOD_NEWS_PRO_GK5_ORDER="Według kolejności" MOD_NEWS_PRO_GK5_RANDOM="Losowo" MOD_NEWS_PRO_GK5_HITS="Według wyświetleń" +MOD_NEWS_PRO_GK5_RATING="Według ocen" MOD_NEWS_PRO_GK5_NEWS_SORT_ORDER="Kierunek sortowania" MOD_NEWS_PRO_GK5_NEWS_SORT_ORDER_DESC="Kierunek sortowania artykułów" MOD_NEWS_PRO_GK5_ASC="Rosnąco" @@ -597,7 +598,7 @@ MOD_NEWS_PRO_GK5_PORTAL_MODE_CENTERED_TITLE_OVERLAY_TEXT_BG_DESC="Opcja ta pozwa ; - Tytuły nad zdjęciami - siatka -COM_MODULES_NSP_PORTAL_MODE_GRID_TITLE_OVERLAY_FIELDSET_LABEL="Tytuły nad zdjęciami - siatka - Portal Mode Settings" +COM_MODULES_NSP_PORTAL_MODE_GRID_TITLE_OVERLAY_FIELDSET_LABEL="Tytuły nad zdjęciami - siatka - Ustawienia trybu portalowego" MOD_NEWS_PRO_GK5_GRID_TITLE_OVERLAY="Tytuły nad zdjęciami - siatka" MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_TEXT_POS="Pozycja bloku z tekstem" MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_TEXT_POS_DESC="Opcja ta pozwala określić pozycję bloku z tekstem" @@ -610,3 +611,35 @@ MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_TEXT_COLOR="Kolor tekstu" MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_TEXT_COLOR_DESC="Opcja ta pozwala określić kolor tekstu tak samo jak określa się właściwość color w CSS." MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_DARK="Ciemny" MOD_NEWS_PRO_GK5_PORTAL_MODE_GRID_TITLE_OVERLAY_LIGHT="Jasny" + +; - Najważniejsze wpisy + +COM_MODULES_NSP_PORTAL_MODE_HIGHLIGHTS_FIELDSET_LABEL="Najważniejsze wpisy - Ustawienia trybu portalowego" +MOD_NEWS_PRO_GK5_HIGHLIGHTS="Najważniejsze wpisy" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_READMORE="Link 'Więcej'" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_READMORE_DESC="Wartość linka 'Więcej' - pozostaw to pole pustym aby ukryć link" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_READMORE_VALUE="Więcej…" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_AMOUNT="Liczba wpisów" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_AMOUNT_DESC="Wyświetlana liczba wpisów" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_DATE_FORMAT="Format daty" +MOD_NEWS_PRO_GK5_PORTAL_MODE_HIGHLIGHTS_DATE_FORMAT_DESC="To pole działa dokładnie tak samo jak pole formatu daty w bloku informacji. Pozostaw to pole pustym aby ukryć blok daty." +NSP_PORTAL_MODE_HIGHLIGHTS_TITLE_LIMIT="Długość tytułu" +NSP_PORTAL_MODE_HIGHLIGHTS_TITLE_LIMIT_TYPE="Rodzaj limitu dla tytułu" + +; - Video Gallery + +COM_MODULES_NSP_PORTAL_MODE_VIDEOGALLERY_FIELDSET_LABEL="Galeria Wideo - Ustawienia trybu portalowego" +MOD_NEWS_PRO_GK5_VIDEOGALLERY="Galeria Wideo" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP="Popup Wideo" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_DESC="Pozwala wyłączyć popup wideo który jest wyświetlany dla artykułów z komponentu K2, które posiadają zdefiniowane wideo." +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_X="Szerokość popupu" +MOD_NEWS_PRO_GK5_PORTAL_MODE_VIDEO_GALLERY_POPUP_Y="Wysokość popupu" +NSP_PORTAL_MODE_VIDEO_GALLERY_PAGES="Liczba stron" +NSP_PORTAL_MODE_VIDEO_GALLERY_PAGES_DESC="Liczba stron z artykułami. Gdy jest większa od 1 - automatycznie zostanie uruchomiona automatyczna animacja stron z wpisami." +NSP_PORTAL_MODE_VIDEO_GALLERY_PER_PAGE="Liczba artykułów na stronę" +NSP_PORTAL_MODE_VIDEO_GALLERY_PER_PAGE_DESC="Liczba artykułów wyświetlanych na jednej stronie" +NSP_PORTAL_MODE_VIDEO_GALLERY_TITLE_LIMIT_TYPE="Rodzaj limitu dla tytułu" +NSP_PORTAL_MODE_VIDEO_GALLERY_TEXT_LIMIT_TYPE="Rodzaj limitu dla tekstu" +NSP_PORTAL_MODE_VIDEO_GALLERY_TITLE_LIMIT="Długość tytułu" +NSP_PORTAL_MODE_VIDEO_GALLERY_TEXT_LIMIT="Długość tekstu" +NSP_PORTAL_MODE_VIDEO_GALLERY_AUTOANIMATION="Interwał czasowy dla autoanimacji" diff --git a/mod_news_pro_gk5/mod_news_pro_gk5.xml b/mod_news_pro_gk5/mod_news_pro_gk5.xml index f16437e..6729244 100644 --- a/mod_news_pro_gk5/mod_news_pro_gk5.xml +++ b/mod_news_pro_gk5/mod_news_pro_gk5.xml @@ -1,13 +1,13 @@ News Show Pro GK5 - 07/12/2013 + 05/01/2014 Gavick.com - (C) 2009-2013 Gavick.com + (C) 2009-2014 Gavick.com http://www.gnu.org/copyleft/gpl.html GNU/GPL info@gavick.com www.gavick.com - 1.3.4 + 1.3.5 @@ -19,7 +19,7 @@ span.readonly p.license { border-top: 1px solid #eee; font-size: 11px; margin: 30px 26px 0; padding: 6px 0; } -

News Show Pro GK5 ver. 1.3.4

+

News Show Pro GK5 ver. 1.3.5

GK5 is new generation of our extensions dedicated to Joomla 2.5+.

Basing on experiences gathered, we created probably the best tool to present articles for Joomla! Huge amount of options and possibilities of formatting causes News Show Pro GK5 is a complex tool in making www pages content attractive. News Show Pro is appropriate while preparing simple structures with an individual article, the same as, complex arrangements including few articles and a list of links.

Learn more at the NSP GK5 project website.

@@ -433,7 +433,39 @@ - + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/mod_news_pro_gk5/portal_modes/videogallery/configuration.json b/mod_news_pro_gk5/portal_modes/videogallery/configuration.json new file mode 100644 index 0000000..fcb8820 --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/configuration.json @@ -0,0 +1,9 @@ +{ + "name": "VideoGallery", + "full_name": "VIDEOGALLERY", + "support": [ + "com_content", + "com_k2" + ], + "thumbnails": true +} \ No newline at end of file diff --git a/mod_news_pro_gk5/portal_modes/videogallery/controller.php b/mod_news_pro_gk5/portal_modes/videogallery/controller.php new file mode 100644 index 0000000..6e8d29b --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/controller.php @@ -0,0 +1,215 @@ +parent = $parent; + // detect the supported Data Sources + if(stripos($this->parent->config['data_source'], 'com_content_') !== FALSE) { + $this->mode = 'com_content'; + } else if(stripos($this->parent->config['data_source'], 'k2_') !== FALSE) { + $this->mode = 'com_k2'; + } else { + $this->mode = false; + } + // get videos + $this->videos = $this->get_videos(); + } + // static function which returns amount of articles to render - VERY IMPORTANT!! + static function amount_of_articles($parent) { + return $parent->config['portal_mode_video_gallery_pages'] * $parent->config['portal_mode_video_gallery_per_page']; + } + // output generator + function output() { + // check if any article to display exists + if(count($this->parent->content)) { + // output the HTML code + echo '
'; + // render blocks + for($i = 0; $i < count($this->parent->content); $i++) { + $title = NSP_GK5_Utils::cutText(strip_tags($this->parent->content[$i]['title']), $this->parent->config, 'portal_mode_video_gallery_title_limit', '…'); + $text = NSP_GK5_Utils::cutText(strip_tags($this->parent->content[$i]['text']), $this->parent->config, 'portal_mode_video_gallery_text_limit', '…'); + // generating big block content on the first slide + if($i == 0) { + echo '
'; + echo ''; + echo '
'; + echo ''.htmlspecialchars(strip_tags($this->parent->content[$i]['title'])).''; + echo '
'; + echo '' . $this->parent->content[$i]['catname'] . ''; + echo '

'.$title.'

'; + echo '

'.$text.'

'; + echo '' . $this->parent->content[$i]['hits'] . ''; + echo '
'; + echo '
'; + + echo '
'; + } + // + if($i == 0) { + echo '
'; + } + // + echo '
'; + echo ''.htmlspecialchars(strip_tags($this->parent->content[$i]['title'])).''; + + echo '
'; + echo '' . $this->parent->content[$i]['catname'] . ''; + echo '

'.$title.'

'; + echo '

'.$text.'

'; + echo '' . $this->parent->content[$i]['hits'] . ''; + echo '
'; + echo '
'; + + if(($i > 0 && (($i+1) % $this->parent->config['portal_mode_video_gallery_per_page'] == 0) && $i != count($this->parent->content) - 1) || ($this->parent->config['portal_mode_video_gallery_per_page'] == 1 && $i != count($this->parent->content) - 1)) { + echo '
'; + echo '
'; + } elseif($i == count($this->parent->content) - 1) { + echo '
'; + } + } + echo '
'; + echo '
'; + } else { + echo 'Error: No articles to display'; + } + } + // function used to retrieve all items videos + function get_videos() { + if($this->mode == 'com_k2') { + // prepare the array with IDs + $IDs = array(); + + for($i = 0; $i < count($this->parent->content); $i++) { + array_push($IDs, $this->parent->content[$i]['id']); + } + + $IDs = implode(',', $IDs); + // use the array in the query + $db = JFactory::getDBO(); + $query_videos = ' + SELECT + c.id AS id, + c.video AS video + FROM + #__k2_items AS c + WHERE + c.id IN ('.$IDs.') + '; + // Executing SQL Query + $db->setQuery($query_videos); + + // check if some categories was detected + $results = array(); + if($videos = $db->loadObjectList()) { + // prepare the results + foreach($videos as $v) { + $vid = $v->video; + if(trim($vid) != '') { + $vid_matches = array(); + preg_match('@src="(.*?)"@mi', $vid, $vid_matches); + if(count($vid_matches) >= 1) { + $vid = $vid_matches[1]; + } else { + $vid = '#'; + } + } else { + $vid = '#'; + } + $results[$v->id] = $vid; + } + } + // return the results + return $results; + } else { + return false; + } + } + // function used to retrieve the item video + function get_video($num) { + if($this->mode == 'com_k2' && $this->parent->config['portal_mode_video_gallery_popup'] == 1) { + return str_replace('&', '&', $this->videos[$this->parent->content[$num]['id']]); + } else { + return '#'; + } + } + // function used to retrieve the item URL + function get_link($num) { + if($this->mode == 'com_content') { + return ($this->parent->content[$num]['id'] != 0) ? JRoute::_(ContentHelperRoute::getArticleRoute($this->parent->content[$num]['id'], $this->parent->content[$num]['cid'])) : JRoute::_('index.php?option=com_users&view=login'); + } else if($this->mode == 'com_k2') { + // + require_once (JPATH_SITE.DS.'components'.DS.'com_k2'.DS.'helpers'.DS.'route.php'); + // + return urldecode(JRoute::_(K2HelperRoute::getItemRoute($this->parent->content[$num]['id'].':'.urlencode($this->parent->content[$num]['alias']), $this->parent->content[$num]['cid'].':'.urlencode($this->parent->content[$num]['cat_alias'])))); + } else { + return false; + } + } + // image generator + function get_image($num) { + // used variables + $url = false; + $output = ''; + // select the proper image function + if($this->mode == 'com_content') { + // load necessary com_content View class + if(!class_exists('NSP_GK5_com_content_View')) { + require_once(JModuleHelper::getLayoutPath('mod_news_pro_gk5', 'com_content/view')); + } + // generate the com_content image URL only + $url = NSP_GK5_com_content_View::image($this->parent->config, $this->parent->content[$num], true, true); + } else if($this->mode == 'com_k2') { + // load necessary k2 View class + if(!class_exists('NSP_GK5_com_k2_View')) { + require_once(JModuleHelper::getLayoutPath('mod_news_pro_gk5', 'com_k2/view')); + } + // generate the K2 image URL only + $url = NSP_GK5_com_k2_View::image($this->parent->config, $this->parent->content[$num], true, true); + } + // check if the URL exists + if($url === FALSE) { + return false; + } else { + // if URL isn't blank - return it! + if($url != '') { + return $url; + } else { + return false; + } + } + } + // function to generate blank transparent PNG images + public function generateBlankImage($width, $height){ + $image = imagecreatetruecolor($width, $height); + imagesavealpha($image, true); + $transparent = imagecolorallocatealpha($image, 0, 0, 0, 127); + imagefill($image, 0, 0, $transparent); + // cache the output + ob_start(); + imagepng($image); + $img = ob_get_contents(); + ob_end_clean(); + // return the string + return base64_encode($img); + } +} + +// EOF \ No newline at end of file diff --git a/mod_news_pro_gk5/portal_modes/videogallery/index.html b/mod_news_pro_gk5/portal_modes/videogallery/index.html new file mode 100644 index 0000000..fa6d84e --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mod_news_pro_gk5/portal_modes/videogallery/script.jquery.js b/mod_news_pro_gk5/portal_modes/videogallery/script.jquery.js new file mode 100644 index 0000000..4d81438 --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/script.jquery.js @@ -0,0 +1,140 @@ +jQuery(window).load(function() { + setTimeout(function() { + jQuery(document).find('.gkNspPM-VideoGallery').each(function(i, module) { + module = jQuery(module); + + if(!module.hasClass('active')) { + module.addClass('active'); + } + + var mod = new GKNSPVideoGallery(); + mod.init(module); + }); + }, 1000); +}); + +// module initializer +var GKNSPVideoGallery = function(module) { + var API = { + // basic variables + bigarea: null, + smallarea: null, + interval: null, + current: 0, + currentPage: 0, + blank: false, + + init: function(wrapper) { + // + $this = this; + this.bigarea = jQuery(wrapper.find('.gkBigBlock')); + this.smallarea = jQuery(wrapper.find('.gkSmallBlock')); + this.interval = wrapper.attr('data-autoanim'); + // add video popup event + this.bigarea.click(function(e) { + if(jQuery(e.target).prop("tagName").toLowerCase() == 'figure') { + var target_img = jQuery(e.target).find('img'); + var url = target_img.attr('data-url'); + if(url != '#') { + SqueezeBox.open(url, {handler: 'iframe', size: {x: target_img.attr('data-x'),y: target_img.attr('data-y') }}); + } else { + window.location.href = $this.bigarea.find('h3 a').attr('href'); + } + } + }); + // add news resizer event + this.smallarea.find('.gkItem').each(function(i, item) { + item = jQuery(item); + item.click(function(e) { + if(e) e.preventDefault(); + // replace current big slide with the new one + $this.bigarea.removeClass('active'); + $this.blank = true; + $this.bigarea.animate({ + 'opacity': 0 + }, 250, function() { + item.clone().appendTo($this.bigarea); + $this.bigarea.find('figure').first().remove(); + $this.current = item.attr('data-num'); + setTimeout(function() { + $this.bigarea.animate({ + 'opacity': 1 + }, 250); + $this.bigarea.addClass('active'); + }, 100); + }); + }); + }); + // autoanimation + setTimeout(function() { + $this.next(); + }, this.interval); + }, + + next: function() { + if(!this.blank) { + // check amount of pages and elements + var pagesAmount = this.smallarea.find('.gkItemsPage').length; + var itemsAmount = this.smallarea.find('.gkItem').length; + var perPage = Math.ceil(itemsAmount / pagesAmount); + // + if(this.current > itemsAmount - 2) { + this.current = 0; + + if(this.currentPage != Math.floor(this.current / perPage)) { + var toHide = jQuery(this.smallarea.find('.gkItemsPage')[this.currentPage]); + var toShow = jQuery(this.smallarea.find('.gkItemsPage')[0]); + + toHide.animate({ + 'opacity': 0 + }, 250, function() { + toHide.removeClass('active'); + $this.currentPage = 0; + + toShow.css('opacity', 0); + toShow.addClass('active'); + + toShow.animate({ + 'opacity': 1 + }, 250); + }); + } + + jQuery(this.smallarea.find('.gkItem').first()).trigger('click'); + } else { + this.current = this.current * 1 + 1; + + if(this.currentPage != Math.floor(this.current / perPage)) { + var toHide = jQuery(this.smallarea.find('.gkItemsPage')[this.currentPage]); + this.currentPage = Math.floor(this.current / perPage); + var toShow = jQuery(this.smallarea.find('.gkItemsPage')[this.currentPage]); + + toHide.animate({ + 'opacity': 0 + }, 250, function() { + toHide.removeClass('active'); + toShow.css('opacity', 0); + toShow.addClass('active'); + + toShow.animate({ + 'opacity': 1 + }, 250); + }); + } + + jQuery(this.smallarea.find('.gkItem')[this.current]).trigger('click'); + } + } else { + this.blank = false; + } + // autoanimation + setTimeout(function() { + $this.next(); + }, this.interval); + } + }; + + return API; +}; + +// EOF \ No newline at end of file diff --git a/mod_news_pro_gk5/portal_modes/videogallery/script.mootools.js b/mod_news_pro_gk5/portal_modes/videogallery/script.mootools.js new file mode 100644 index 0000000..18f654b --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/script.mootools.js @@ -0,0 +1,141 @@ +window.addEvent('load', function() { + setTimeout(function() { + document.getElements('.gkNspPM-VideoGallery').each(function(module) { + if(!module.hasClass('active')) { + module.addClass('active'); + } + + var mod = new GKNSPVideoGallery(); + mod.init(module); + }); + }, 1000); +}); +// module initializer +var GKNSPVideoGallery = function(module) { + var API = { + // basic variables + bigarea: null, + smallarea: null, + interval: null, + current: 0, + currentPage: 0, + blank: false, + + init: function(wrapper) { + // + $this = this; + this.bigarea = wrapper.getElement('.gkBigBlock'); + this.smallarea = wrapper.getElement('.gkSmallBlock'); + this.interval = wrapper.getProperty('data-autoanim'); + // add video popup event + this.bigarea.addEvent('click', function(e) { + if(e.target.get('tag') == 'figure') { + var target_img = e.target.getElement('img'); + var url = target_img.getProperty('data-url'); + if(url != '#') { + SqueezeBox.open(url, {handler: 'iframe', size: {x: target_img.getProperty('data-x'),y: target_img.getProperty('data-y') }}); + } else { + window.location.href = $this.bigarea.getElement('h3 a').getProperty('href'); + } + } + }); + // add news resizer event + this.smallarea.getElements('.gkItem').each(function(item) { + item.addEvent('click', function(e) { + if(e) e.stop(); + // replace current big slide with the new one + $this.bigarea.removeClass('active'); + $this.blank = true; + new Fx.Tween($this.bigarea, { + duration: 250, + property: 'opacity', + onComplete: function() { + item.clone().inject($this.bigarea, 'bottom'); + $this.bigarea.getElement('figure').dispose(); + $this.current = item.getProperty('data-num'); + setTimeout(function() { + new Fx.Tween($this.bigarea, { + duration: 250, + property: 'opacity' + }).start(1); + $this.bigarea.addClass('active'); + }, 100); + } + }).start(0); + }); + }); + // autoanimation + setTimeout(function() { + $this.next(); + }, this.interval); + }, + + next: function() { + if(!this.blank) { + // check amount of pages and elements + var pagesAmount = this.smallarea.getElements('.gkItemsPage').length; + var itemsAmount = this.smallarea.getElements('.gkItem').length; + var perPage = Math.ceil(itemsAmount / pagesAmount); + // + if(this.current > itemsAmount - 2) { + this.current = 0; + + if(this.currentPage != Math.floor(this.current / perPage)) { + var toHide = this.smallarea.getElements('.gkItemsPage')[this.currentPage]; + var toShow = this.smallarea.getElements('.gkItemsPage')[0]; + + new Fx.Tween(toHide, { + duration: 250, + onComplete: function() { + toHide.removeClass('active'); + $this.currentPage = 0; + + toShow.setStyle('opacity', 0); + toShow.addClass('active'); + + new Fx.Tween(toShow, { + duration: 250 + }).start('opacity', 1); + } + }).start('opacity', 0); + } + + this.smallarea.getElements('.gkItem')[0].fireEvent('click'); + } else { + this.current = this.current * 1 + 1; + + if(this.currentPage != Math.floor(this.current / perPage)) { + var toHide = this.smallarea.getElements('.gkItemsPage')[this.currentPage]; + this.currentPage = Math.floor(this.current / perPage); + var toShow = this.smallarea.getElements('.gkItemsPage')[this.currentPage]; + + new Fx.Tween(toHide, { + duration: 250, + onComplete: function() { + toHide.removeClass('active'); + toShow.setStyle('opacity', 0); + toShow.addClass('active'); + + new Fx.Tween(toShow, { + duration: 250 + }).start('opacity', 1); + } + }).start('opacity', 0); + } + + this.smallarea.getElements('.gkItem')[this.current].fireEvent('click'); + } + } else { + this.blank = false; + } + // autoanimation + setTimeout(function() { + $this.next(); + }, this.interval); + } + }; + + return API; +}; + +// EOF \ No newline at end of file diff --git a/mod_news_pro_gk5/portal_modes/videogallery/style.css b/mod_news_pro_gk5/portal_modes/videogallery/style.css new file mode 100644 index 0000000..410b77d --- /dev/null +++ b/mod_news_pro_gk5/portal_modes/videogallery/style.css @@ -0,0 +1,350 @@ +/* Portal Mode - VideoGallery */ + +.gkNspPM-VideoGallery { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: relative; + width: 100%; +} + +.gkNspPM-VideoGallery .gkBigBlock { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + float: left; + overflow: hidden; + padding: 0 50px 0 0; + position: relative; + width: 50%; +} + +.gkNspPM-VideoGallery .gkSmallBlock { + cursor: pointer; + float: right; + width: 48%; +} + +.gkNspPM-VideoGallery .gkItemsPage { + display: none; +} + +.gkNspPM-VideoGallery .gkItemsPage.active { + display: block; +} + +.gkNspPM-VideoGallery .gkSmallBlock figcaption { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + padding: 0 120px 0 170px; + position: relative; +} + +.gkNspPM-VideoGallery .gkBigBlock figure { + cursor: pointer; + left: 0; + position: absolute; + top: 0; + z-index: 1; +} + +.gkNspPM-VideoGallery .gkBigBlock figcaption { + bottom: -20%; + opacity: 0; + padding: 30px; + position: absolute; + -webkit-transition: all .25s ease-out; + -moz-transition: all .25s ease-out; + -ms-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; + z-index: 2; +} +.gkNspPM-VideoGallery .gkBigBlock.active figcaption { + bottom: 0; + opacity: 1; +} + +.gkNspPM-VideoGallery .gkBigBlock strong { + background: #f7a834; + color: #fff; + font-size: 11px; + font-weight: bold; + padding: 3px 5px; + line-height: 20px; + text-transform: uppercase; +} + +.gkNspPM-VideoGallery .gkSmallBlock .gkItem { + cursor: pointer; + padding: 16px 0; +} + +.gkNspPM-VideoGallery .gkSmallBlock h3 { + font-size: 18px; + font-weight: 300; + margin: 0 0 5px 0; + padding: 0; + text-transform: none; +} + +.gkNspPM-VideoGallery .gkBigBlock h3 { + margin: 10px 0 0 0; + font-weight: 300; + line-height: 1; +} + +.gkNspPM-VideoGallery .gkBigBlock h3 a { + color: #f5f5f5!important; + font-size: 24px; + font-weight: 300!important; +} + +.gkNspPM-VideoGallery .gkBigBlock h3 a:active, +.gkNspPM-VideoGallery .gkBigBlock h3 a:focus, +.gkNspPM-VideoGallery .gkBigBlock h3 a:hover { + color: #d82731!important; +} + +.gkNspPM-VideoGallery .gkSmallBlock p { + font-size: 14px; + margin: 0; +} + +.gkNspPM-VideoGallery .gkBigBlock img, +.gkNspPM-VideoGallery .gkBigBlock .gkImageWrap { + cursor: pointer; + display: block; + height: auto; + width: 100%; +} + +.gkNspPM-VideoGallery .gkSmallBlock img, +.gkNspPM-VideoGallery .gkSmallBlock .gkImageWrap { + height: auto; + float: left; + max-width: 120px; +} +.gkNspPM-VideoGallery .gkSmallBlock .gkImageWrap { + margin: 0 35px 0 0; +} +.gkNspPM-VideoGallery .gkImageWrap { + overflow: hidden; + position: relative; + z-index: 1; +} +.gkNspPM-VideoGallery .gkImageWrap img { + -webkit-transform: scale(1) rotate(0deg); + -moz-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + -o-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.gkNspPM-VideoGallery .gkImageWrap:hover img, +.gkNspPM-VideoGallery .gkBigBlock:hover img { + -webkit-transform: scale(1.2) rotate(-5deg); + -moz-transform: scale(1.2) rotate(-5deg); + -ms-transform: scale(1.2) rotate(-5deg); + -o-transform: scale(1.2) rotate(-5deg); + transform: scale(1.2) rotate(-5deg); +} + +.gkNspPM-VideoGallery .gkBigBlock p, +.gkNspPM-VideoGallery .gkBigBlock small, +.gkNspPM-VideoGallery .gkSmallBlock strong { + display: none; +} + +.gkNspPM-VideoGallery .gkBigBlock figure:before { + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); /* Chrome,Safari4+ */ + background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* W3C */ + + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 2; +} +.gkNspPM-VideoGallery .gkBigBlock figure:after { + background: transparent; + background: rgba(0, 0, 0, .1); + border: 3px solid #fff; + border-radius: 50%; + color: #fff; + content: "\f0c1"; + font-family: FontAwesome; + font-size: 48px; + left: 50%; + line-height: 100px; + margin: -50px 0 0 -50px; + opacity: 0; + position: absolute; + text-indent: 28px; + top: 20%; + -webkit-transition: all .25s ease-out; + -moz-transition: all .25s ease-out; + -ms-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; + width: 100px; + z-index: 3; +} +.gkNspPM-VideoGallery .gkBigBlock figure.video:after { + content: "\f04b"; + text-indent: 34px; +} + +.gkNspPM-VideoGallery .gkBigBlock.active figure:after { + opacity: 1; + top: 40%; +} + +.gkNspPM-VideoGallery .gkSmallBlock small { + border: 1px solid #d82731; + font-size: 14px; + height: 45px; + line-height: 45px; + margin: -22px 0 0 0; + position: absolute; + right: 20px; + text-align: center; + top: 50%; + width: 45px; +} + +.gkNspPM-VideoGallery .gkSmallBlock small:after { + border-style: solid; + border-width: 8px 8px 8px 0; + border-color: transparent #d82731 transparent transparent; + content: ""; + height: 0px; + left: -8px; + position: absolute; + top: 15px; + width: 0px; +} +.gkNspPM-VideoGallery .gkSmallBlock small:before { + border-style: solid; + border-width: 7px 7px 7px 0; + border-color: transparent #fff transparent transparent; + content: ""; + height: 0px; + left: -6px; + position: absolute; + top: 16px; + width: 0px; + z-index: 1; +} +.gkNspPM-VideoGallery .gkBigBlock .gkIsHelperImage { + display: block; + height: auto; + width: 100%; +} + +/* styles for the portal mode in the dark areas */ +.dark-area .gkNspPM-VideoGallery .gkSmallBlock small { + color: #f5f5f5; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock small:before { + border-color: transparent #000 transparent transparent; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock h3 a { + color: #f5f5f5!important; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock h3 a:active, +.dark-area .gkNspPM-VideoGallery .gkSmallBlock h3 a:focus, +.dark-area .gkNspPM-VideoGallery .gkSmallBlock h3 a:hover { + color: #d82731!important; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock p { + color: #777; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock .gkItem { + border-top: 1px solid #333; +} +.dark-area .gkNspPM-VideoGallery .gkSmallBlock .gkItem:first-child { + border-top: none; +} + +/* Mobile devices */ +@media (max-width: 1100px) { + .gkNspPM-VideoGallery .gkSmallBlock figcaption { + padding: 0 60px 0 80px; + } + .gkNspPM-VideoGallery .gkSmallBlock .gkImageWrap { + margin: 0 10px 0 0; + } + .gkNspPM-VideoGallery .gkSmallBlock img, + .gkNspPM-VideoGallery .gkSmallBlock .gkImageWrap { + max-width: 70px; + } + .gkNspPM-VideoGallery .gkSmallBlock h3 { + font-size: 15px; + } + .gkNspPM-VideoGallery .gkSmallBlock p { + font-size: 11px; + } + .gkNspPM-VideoGallery .gkSmallBlock .gkItem { + padding: 10px 0; + } + .gkNspPM-VideoGallery .gkBigBlock figcaption { + padding: 10px; + } + .gkNspPM-VideoGallery .gkBigBlock { + padding: 0; + } + .gkNspPM-VideoGallery .gkSmallBlock small { + right: 2px; + } + .gkNspPM-VideoGallery .gkBigBlock h3 a { + font-size: 18px; + line-height: 1!important; + } + .gkNspPM-VideoGallery .gkBigBlock h3 { + margin: 0; + } + .gkNspPM-VideoGallery .gkBigBlock figure:after { + border: 2px solid #fff; + font-size: 20px; + line-height: 60px; + margin: -30px 0 0 -30px; + text-indent: 25px; + width: 60px; + } + .gkNspPM-VideoGallery .gkBigBlock figure.video:after { + text-indent: 25px; + } +} + +@media (max-width: 760px) { + .gkNspPM-VideoGallery .gkSmallBlock figcaption { + padding: 0 0 0 80px; + } + .gkNspPM-VideoGallery .gkSmallBlock small, + .gkNspPM-VideoGallery .gkBigBlock figure.video:after { + display: none; + } +} + +@media (max-width: 600px) { + .gkNspPM-VideoGallery .gkBigBlock, + .gkNspPM-VideoGallery .gkSmallBlock { + width: 100%; + } +}