From 8b316837c7363b276de9e63a39f8475e109fad23 Mon Sep 17 00:00:00 2001 From: Rodrigo Ferreira de Souza Date: Mon, 4 Jul 2016 17:57:19 -0300 Subject: [PATCH 1/2] Use collective.js.cycle2 Cycle2SlideShow utils class --- CHANGES.rst | 3 + buildout.cfg | 1 - setup.py | 2 +- .../browser/static/photogallery.css | 68 ++++++++++++++----- .../browser/static/photogallery.js | 54 +-------------- src/sc/photogallery/config.py | 1 + src/sc/photogallery/logger.py | 7 ++ src/sc/photogallery/upgrades/__init__.py | 16 +++++ .../photogallery/upgrades/v1001/__init__.py | 6 +- 9 files changed, 80 insertions(+), 78 deletions(-) create mode 100644 src/sc/photogallery/logger.py diff --git a/CHANGES.rst b/CHANGES.rst index 767c1b9..32f5b9e 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -6,6 +6,9 @@ There's a frood who really knows where his towel is. 1.0b2 (unreleased) ------------------ +- Use collective.js.cycle2 Cycle2SlideShow utils class. + [rodfersou] + - Use HTML entities in Unicode Normalization Form C to avoid warnings when validating. [hvelarde] diff --git a/buildout.cfg b/buildout.cfg index ad4acb8..51b03e1 100644 --- a/buildout.cfg +++ b/buildout.cfg @@ -42,6 +42,5 @@ eggs = ${test:eggs} # use latest version of coverage and setuptools coverage = setuptools = -collective.js.cycle2 = 1.0b1 # suppress unassociated template warnings for collective.cover on tests grokcore.view = 2.9 diff --git a/setup.py b/setup.py index f711fac..8b0c0e3 100644 --- a/setup.py +++ b/setup.py @@ -37,7 +37,7 @@ include_package_data=True, zip_safe=False, install_requires=[ - 'collective.js.cycle2', + 'collective.js.cycle2 >=1.0b2', 'plone.api', 'plone.app.dexterity [grok, relations]', 'plone.app.relationfield', diff --git a/src/sc/photogallery/browser/static/photogallery.css b/src/sc/photogallery/browser/static/photogallery.css index 972bacd..e188efa 100644 --- a/src/sc/photogallery/browser/static/photogallery.css +++ b/src/sc/photogallery/browser/static/photogallery.css @@ -10,6 +10,7 @@ body.portaltype-photo-gallery .slideshow-description, body.portaltype-photo-gallery .slideshow-carrossel { float: left; + width: 50%; } @@ -17,6 +18,7 @@ body.portaltype-photo-gallery .slideshow-carrossel .photogallery-tile .slideshow-carrossel { float: left; + width: 45%; } @@ -26,16 +28,21 @@ body.portaltype-photo-gallery .slideshow-download, float: left; } -.photogallery-tile .photogallery-url +#content .photogallery-tile .photogallery-url { + font-size: .8rem; font-weight: bold; + line-height: .8rem; + display: block; float: left; + width: 10%; padding: 6px 0; + text-align: center; - color: white; - background-color: #0094cc; + + border-bottom: none; } body.portaltype-photo-gallery .cycle-slideshow, @@ -52,13 +59,17 @@ body.portaltype-photo-gallery .cycle-slideshow, .photogallery-tile .cycle-slideshow { position: relative; + width: 100%; max-width: 768px; height: auto; padding: 0; + background: #f1f1f1; } -body.portaltype-photo-gallery .cycle-description.cycle-slideshow { +body.portaltype-photo-gallery .cycle-description.cycle-slideshow, +.photogallery-tile .cycle-description.cycle-slideshow +{ background: transparent; } @@ -68,13 +79,15 @@ body.portaltype-photo-gallery .cycle-player img, position: absolute; top: 0; left: 0; + display: block; - width: 100%; + + width: auto; max-width: 100%; height: auto; max-height: 100%; - padding: 0; margin: 0 auto; + padding: 0; } body.portaltype-photo-gallery .cycle-player .cycle-slide, @@ -84,16 +97,14 @@ body.portaltype-photo-gallery .cycle-player .cycle-slide, } body.portaltype-photo-gallery .thumb-itens, -.photogallery-tile .thumb-itens { - max-height: 50px; +.photogallery-tile .thumb-itens +{ overflow: hidden; + + max-height: 50px; margin-right: 5px; - cursor: pointer; -} -body.portaltype-photo-gallery .thumb-itens img, -.photogallery-tile .thumb-itens img { - width: 96px; + cursor: pointer; } body.portaltype-photo-gallery .cycle-slideshow img:first-child, @@ -115,8 +126,11 @@ body.portaltype-photo-gallery .cycle-pager, position: absolute; z-index: 500; top: 10px; + overflow: hidden; + width: 100%; + text-align: center; } @@ -125,10 +139,14 @@ body.portaltype-photo-gallery .cycle-pager span, { font-family: arial; font-size: 50px; + display: inline-block; + width: 16px; height: 16px; + cursor: pointer; + color: #ddd; } @@ -151,6 +169,7 @@ body.portaltype-photo-gallery .cycle-caption, z-index: 700; right: 15px; bottom: 15px; + color: white; } @@ -167,15 +186,20 @@ body.portaltype-photo-gallery a.cycle-next, .photogallery-tile a.cycle-next { font-size: 50px; + position: absolute; z-index: 800; top: 0; + width: 10%; height: 87%; + cursor: pointer; text-align: center; + opacity: 0; border-bottom: 0 !important; + filter: alpha(opacity=0); } @@ -239,23 +263,31 @@ body.portaltype-photo-gallery .disabled, filter: alpha(opacity=50); } -body.portaltype-photo-gallery .slideshow-download .cycle-slideshow { +body.portaltype-photo-gallery .slideshow-download .cycle-slideshow +{ background: transparent; } -body.portaltype-photo-gallery .slideshow-download { +body.portaltype-photo-gallery .slideshow-download +{ position: relative; + clear: both; } body.portaltype-photo-gallery .download.album, -body.portaltype-photo-gallery .slideshow-download a { +body.portaltype-photo-gallery .slideshow-download a +{ display: inline-block; + margin-top: 10px; + border: none; } -body.portaltype-photo-gallery .slideshow-container { +body.portaltype-photo-gallery .slideshow-container +{ margin: 10px auto 50px auto; } -body.portaltype-photo-gallery .download.album { +body.portaltype-photo-gallery .download.album +{ margin-left: 25px; } diff --git a/src/sc/photogallery/browser/static/photogallery.js b/src/sc/photogallery/browser/static/photogallery.js index d5a0fc4..c902db1 100644 --- a/src/sc/photogallery/browser/static/photogallery.js +++ b/src/sc/photogallery/browser/static/photogallery.js @@ -1,60 +1,8 @@ -var PhotoGallery = (function() { - function PhotoGallery(el) { - var self = this; - self.$el = $(el); - self.proportion = 3 / 2; - self.bind_events(); - self.fix_image_size(); - } - PhotoGallery.prototype.$ = function(selector) { - var self = this; - return $(selector, self.$el); - }; - PhotoGallery.prototype.bind_events = function() { - var self = this; - self.$('.cycle-player').on('cycle-next cycle-prev', self, self.sync_slideshows); - self.$('.cycle-carrossel .thumb-itens').on('click', self, self.thumbs_click); - }; - PhotoGallery.prototype.fix_image_size = function() { - var self, max_height, max_width, $player, $imgs; - self = this; - - // Calc max_with and max_height - $player = self.$('.cycle-player'); - max_width = $player.width(); - max_height = max_width / self.proportion; - // Calc max_with and max_height - - $imgs = self.$('.cycle-player img'); - $imgs.css({ - 'max-width': max_width, - 'max-height': max_height - }); - }; - - PhotoGallery.prototype.sync_slideshows = function(e, opts) { - var self, index, $player, $slideshows; - self = e.data; - $slideshows = self.$('.cycle-slideshow'); - $slideshows.cycle('goto', opts.currSlide); - }; - - PhotoGallery.prototype.thumbs_click = function(e) { - var self, index, $thumbs, $slideshows; - self = e.data; - e.preventDefault(); - $thumbs = self.$('.cycle-carrossel'); - index = $thumbs.data('cycle.API').getSlideIndex(this); - $slideshows = self.$('.cycle-slideshow'); - $slideshows.cycle('goto', index); - }; - return PhotoGallery; -})(); $(window).load(function() { var i, len, ref, slideshow; ref = $('.slideshow-container'); for (i = 0, len = ref.length; i < len; i++) { slideshow = ref[i]; - new PhotoGallery(slideshow); + new cycle2SlideShow(slideshow); } }); diff --git a/src/sc/photogallery/config.py b/src/sc/photogallery/config.py index 3b0daea..32d5b30 100644 --- a/src/sc/photogallery/config.py +++ b/src/sc/photogallery/config.py @@ -9,6 +9,7 @@ '++resource++collective.js.cycle2/jquery.cycle2.min.js', '++resource++collective.js.cycle2/jquery.cycle2.carousel.min.js', '++resource++collective.js.cycle2/jquery.cycle2.swipe.min.js', + '++resource++collective.js.cycle2/utils.min.js', ) HAS_ZIPEXPORT = True diff --git a/src/sc/photogallery/logger.py b/src/sc/photogallery/logger.py new file mode 100644 index 0000000..a09cc69 --- /dev/null +++ b/src/sc/photogallery/logger.py @@ -0,0 +1,7 @@ +# -*- coding:utf-8 -*- +from sc.photogallery.config import PROJECTNAME + +import logging + + +logger = logging.getLogger(PROJECTNAME) diff --git a/src/sc/photogallery/upgrades/__init__.py b/src/sc/photogallery/upgrades/__init__.py index 40a96af..601dd16 100644 --- a/src/sc/photogallery/upgrades/__init__.py +++ b/src/sc/photogallery/upgrades/__init__.py @@ -1 +1,17 @@ # -*- coding: utf-8 -*- +from plone import api +from sc.photogallery.logger import logger + + +def cook_css_resources(context): # pragma: no cover + """Cook CSS resources.""" + css_tool = api.portal.get_tool('portal_css') + css_tool.cookResources() + logger.info('CSS resources were cooked') + + +def cook_javascript_resources(context): # pragma: no cover + """Cook JavaScript resources.""" + js_tool = api.portal.get_tool('portal_javascripts') + js_tool.cookResources() + logger.info('JavaScript resources were cooked') diff --git a/src/sc/photogallery/upgrades/v1001/__init__.py b/src/sc/photogallery/upgrades/v1001/__init__.py index 80a7562..840ab57 100644 --- a/src/sc/photogallery/upgrades/v1001/__init__.py +++ b/src/sc/photogallery/upgrades/v1001/__init__.py @@ -3,11 +3,7 @@ from plone.app.upgrade.utils import loadMigrationProfile from sc.photogallery.config import PROJECTNAME from sc.photogallery.interfaces import IPhotoGallery - -import logging - - -logger = logging.getLogger(PROJECTNAME) +from sc.photogallery.logger import logger def apply_profile(context): From 7b786e2488fb46feecc0ad93c7c7faf18f00d93f Mon Sep 17 00:00:00 2001 From: Rodrigo Ferreira de Souza Date: Fri, 15 Jul 2016 16:38:08 -0300 Subject: [PATCH 2/2] Fade in gallery to avoid show big galleries without cycle2 loaded --- CHANGES.rst | 3 +++ src/sc/photogallery/browser/static/photogallery.css | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/CHANGES.rst b/CHANGES.rst index 32f5b9e..b691d56 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -6,6 +6,9 @@ There's a frood who really knows where his towel is. 1.0b2 (unreleased) ------------------ +- Fade in gallery to avoid show big galleries without cycle2 loaded. + [rodfersou] + - Use collective.js.cycle2 Cycle2SlideShow utils class. [rodfersou] diff --git a/src/sc/photogallery/browser/static/photogallery.css b/src/sc/photogallery/browser/static/photogallery.css index e188efa..34ca159 100644 --- a/src/sc/photogallery/browser/static/photogallery.css +++ b/src/sc/photogallery/browser/static/photogallery.css @@ -4,6 +4,10 @@ body.portaltype-photo-gallery .slideshow-container, width: 100%; max-width: 748px; margin: 10px auto; + + opacity: 0; + + filter: alpha(opacity=0); } body.portaltype-photo-gallery .slideshow-description,