Skip to content

Commit

Permalink
[add, fix] more robust code for clickable features, lightbox mode added
Browse files Browse the repository at this point in the history
  • Loading branch information
@rvalitov
rvalitov committed Feb 3, 2016
1 parent 4e037d2 commit b7ee961
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 34 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@
### Unique Features
The new features that the SlideshowEx has and that are not available in the original Slideshow widget:

* **Clickable image** - a link can be attached to the slide's image (media), [read more](https://github.com/rvalitov/widgetkit-slideshow-ex/wiki/How-to-make-the-whole-slide-clickable).
* **Clickable overlay** - a link can be attached to whole overlay, [read more](https://github.com/rvalitov/widgetkit-slideshow-ex/wiki/How-to-make-the-whole-slide-clickable).
* **Clickable slide** - mixing two features 'Clickable image' and 'Clickable overlay' allows to make the whole slide clickable, [read more](https://github.com/rvalitov/widgetkit-slideshow-ex/wiki/How-to-make-the-whole-slide-clickable).
* **Clickable slide** - allows to make the whole slide clickable, [read more](https://github.com/rvalitov/widgetkit-slideshow-ex/wiki/How-to-make-the-whole-slide-clickable).
* **Lightbox mode** - allows to open content in a lightbox, [read more](https://github.com/rvalitov/widgetkit-slideshow-ex/wiki/How-to-use-a-lightbox).
* **Tooltips for all options** - it's much easier to use the widget, because tooltips are available for all settings.
* **Update notifications** - you will be notified if new versions of the widget are available.

Expand Down Expand Up @@ -44,5 +43,6 @@ Having trouble with SlideshowEx Widget? May be something has already been descri
Being a free project which I do in my spare time, I hope you understand that I can't offer 24/7 support:) You may contact me via e-mail [email protected], I will try to answer to all of them (if such messages imply an answer), however, not immediately, it may take a few days or a week... so, just be patient.

Note, that I can answer only to questions and problems directly related to this widget. Answers to basic questions about the widgetkit nature and simple help about how to use widgets in general or how to use Joomla you can find in appropriate forums:

* [Joomla](http://forum.joomla.org/)
* [Widgetkits](https://yootheme.com/support)
4 changes: 2 additions & 2 deletions slideshow_ex/assets/updater.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ jQuery(document).ready(function($){
/* Start of widget specific settings */
var distr_name='widgetkit-slideshow-ex';
var widget_name='SlideshowEx';
var widget_version='v1.2';
var widget_version='v1.2.5';
/*CAUTION: the month is zero-based*/
var widget_date=printNiceDate(new Date(2016,01,02));
var widget_date=printNiceDate(new Date(2016,01,03));
var widget_logo='https://raw.githubusercontent.com/wiki/rvalitov/widgetkit-slideshow-ex/images/logo.jpg';
var widget_wiki=git_url+distr_name+'/wiki';
var widget_website=git_url+distr_name;
Expand Down
4 changes: 2 additions & 2 deletions slideshow_ex/plugin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
'badge' => true,
'badge_style' => 'badge',

'image_link' => false,
'overlay_link' => false,
'slide_link' => false,
'lightbox' => '',

'link_target' => false,
'class' => ''
Expand Down
29 changes: 22 additions & 7 deletions slideshow_ex/views/edit.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,13 @@
</div>
</div>

<div class="uk-form-row">
<span class="uk-form-label">{{'Clickable Slide' | trans}}<span data-uk-tooltip style="margin-top: 5px;" title="If checked, then the whole slide becomes clickable."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
<div class="uk-form-controls uk-form-controls-text">
<label><input type="checkbox" ng-model="widget.data['slide_link']"> {{'Make the whole slide clickable.' | trans}}</label>
</div>
</div>

<h3 class="wk-form-heading">{{'Animations' | trans}}</h3>

<div class="uk-form-row">
Expand Down Expand Up @@ -194,10 +201,13 @@
</div>
</div>

<div class="uk-form-row" ng-if="widget.data.media">
<span class="uk-form-label">{{'Link' | trans}}<span data-uk-tooltip title="Makes the whole image clickable. If you use an overlay, probably you will want to activate 'Add link to overlay' option (see below) to make the whole area of the slide clickable."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
<div class="uk-form-controls uk-form-controls-text">
<label><input type="checkbox" ng-model="widget.data['image_link']"> {{'Add link to image' | trans}}</label>
<div class="uk-form-row">
<span class="uk-form-label" for="wk-media-lightbox">{{'Lightbox Type' | trans}}<span data-uk-tooltip style="margin-top: 5px;" title="Enables/disables the lightbox mode."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
<div class="uk-form-controls">
<select id="wk-media-lightbox" class="uk-form-width-medium" ng-model="widget.data['lightbox']">
<option value="">{{'None' | trans}}</option>
<option value="lightbox">{{'Lightbox' | trans}}</option>
</select>
</div>
</div>

Expand All @@ -223,9 +233,6 @@
</p>
<p class="uk-form-controls-condensed" ng-if="widget.data.overlay != 'none'">
<span><input type="checkbox" ng-model="widget.data['overlay_background']"> {{'Show panel background' | trans}}<span data-uk-tooltip style="margin-top: 5px;" title="A background (usually dark) is added to the overlay."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
</p>
<p class="uk-form-controls-condensed" ng-if="widget.data.overlay != 'none'">
<span><input type="checkbox" ng-model="widget.data['overlay_link']"> {{'Add link to overlay' | trans}}<span data-uk-tooltip title="Makes the whole overlay clickable. Probably you will want to activate this feature both with 'Add link to image' option (see above) to make the whole area of the slide clickable. <strong>Notice:</strong> this feature strips all links ('a' tags) from your overlay, otherwise it can't work properly."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
</p>
</div>
</div>
Expand Down Expand Up @@ -275,6 +282,10 @@

<h3 class="wk-form-heading">{{'Link' | trans}}</h3>

<div class="uk-panel uk-panel-box uk-alert uk-alert-warning" ng-if="widget.data['lightbox'] != ''">
<p class="uk-text-center"><i class="uk-icon uk-icon-warning uk-margin-small-right"></i>The settings in this "Link" section are ignored, because you have activated the "Lightbox" mode in the "Media" tab.</p>
</div>

<div class="uk-form-row">
<span class="uk-form-label">{{'Display' | trans}}<span data-uk-tooltip style="margin-top: 5px;" title="Display the Read More link. The link URL is added to each item in the Content Manager."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
<div class="uk-form-controls uk-form-controls-text">
Expand All @@ -296,6 +307,10 @@
</div>
</div>

<div class="uk-panel uk-panel-box uk-alert uk-alert-warning" ng-if="widget.data['slide_link'] && widget.data['lightbox'] == ''">
<p class="uk-text-center"><i class="uk-icon uk-icon-warning uk-margin-small-right"></i>The "Text" setting below is ignored, because you have made the whole slide clickable in the "Slideshow" tab.</p>
</div>

<div class="uk-form-row">
<span class="uk-form-label" for="wk-link-text">{{'Text' | trans}}<span data-uk-tooltip style="margin-top: 5px;" title="Define the link text."><i class="uk-icon uk-icon-question-circle uk-margin-small-left" style="color:#ffb105"></i></span></span>
<div class="uk-form-controls">
Expand Down
59 changes: 39 additions & 20 deletions slideshow_ex/views/widget.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,10 @@
// Custom Class
$class = $settings['class'] ? ' class="' . $settings['class'] . '"' : '';

if ($settings['lightbox']=='lightbox')
//Creating unique $groupcode variable to be used as a lightbox group id.
$groupcode=uniqid('wk-slideshow-lightbox');

?>

<div<?php echo $class; ?> data-uk-slideshow="<?php echo $options; ?>">
Expand Down Expand Up @@ -158,24 +162,31 @@

<?php if ($item['media'] && $settings['media']) : ?>

<?php if ( ($settings['image_link']) && ($item['link']) ): ?>
<a href="<?php echo $item->escape('link'); ?>">
<?php echo $media; ?>
</a>
<?php
else:
echo $media;
endif;
?>

<?php if ($item['media.poster']) : ?>
<div class="uk-cover-background uk-position-cover uk-hidden-notouch" style="background-image: url(<?php echo $item['media.poster'] ?>);"></div>
<?php endif ?>

<?php
$the_link='';
if ($settings['lightbox']=='lightbox'){
$the_link.='data-uk-lightbox="{group:\''.$groupcode.'\'}" href="'.$item->get('media').'"';
}
else
if ($item['link']) {
$the_link.='href="'.$item->escape('link').'"'.$link_target;
if ( ($settings['link']) && ($link_style) && (!$settings['slide_link']) )
$the_link.=' class="slideshow-ex ' . $link_style . '"';
}

if ( ($settings['slide_link']) && (strlen($the_link)>0) ){
$the_link.=' class="slideshow-ex uk-position-cover"';
echo '<a '.$the_link.'>';
}
?>

<?php if ($settings['overlay'] != 'none' && (($item['title'] && $settings['title']) || ($item['content'] && $settings['content']) || ($item['link'] && ($settings['link'] || $settings['overlay_link'])))) : ?>
<?php if ($item['link'] && $settings['overlay_link']):?>
<a href="<?php echo $item->escape('link'); ?>" class="slideshow-ex">
<?php endif; ?>
<div class="<?php echo $overlay; ?>">

<?php if (in_array($settings['overlay'], array('center', 'middle-left'))) : ?>
Expand All @@ -196,7 +207,7 @@

<?php if ($item['content'] && $settings['content']) : ?>
<div class="<?php echo $content_size; ?> uk-margin"><?php
if ($item['link'] && $settings['overlay_link'])
if ($item['link'] && $settings['slide_link'])
/*
We must strip <a> tags from the text, otherwise such tags will corrupt everything and break our approach.
Our approach is to use the HTML5 <a> tag on the whole <div> - this is allowed in HTML5 (before that <a> tags couldn't be set on block elements).
Expand All @@ -208,19 +219,20 @@
echo $item['content']; ?></div>
<?php endif; ?>

<?php if ($item['link'] && $settings['link'] && (!$settings['overlay_link']) ) : ?>
<p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>
<?php if ($item['link'] && $settings['link'] && (!$settings['slide_link']) ) : ?>
<p><a <?php echo $the_link; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>
<?php endif; ?>

<?php if (in_array($settings['overlay'], array('center', 'middle-left'))) : ?>
</div>
<?php endif; ?>

</div>
<?php if ($item['link'] && $settings['overlay_link']):?>
<?php endif; ?>

<?php if ( ($settings['slide_link']) && (strlen($the_link)>0) ):?>
</a>
<?php endif; ?>
<?php endif; ?>

<?php elseif(($item['title'] && $settings['title']) || ($item['content'] && $settings['content'])) : ?>

Expand All @@ -239,10 +251,17 @@
<?php if ($item['content'] && $settings['content']) : ?>
<div class="uk-margin"><?php echo $item['content']; ?></div>
<?php endif; ?>

<?php if ($item['link'] && $settings['link']) : ?>
<p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>
<?php endif; ?>
<?php
if ($item['link'] && $settings['link']){
$the_link='';
if ($settings['slide_link'])
$the_link.=' class="slideshow-ex uk-position-cover"';
else
if ($link_style)
$the_link.=' class="slideshow-ex ' . $link_style . '"';
echo '<p><a '.$the_link.' href="'.$item->escape('link').'"'.$link_target.'>'.(($settings['slide_link'])? '' : $app['translator']->trans($settings['link_text'])).'</a></p>';
}
?>

<?php endif; ?>

Expand Down

0 comments on commit b7ee961

Please sign in to comment.