From ad1f872daa53e2ca02f6d7bda436e18990a7b989 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Fri, 30 Mar 2018 20:54:45 +0200 Subject: [PATCH] WIP #1945 @4 --- images/slick/ajax-loader.gif | Bin 0 -> 4178 bytes js/libs/fluidbook/fluidbook.js | 1 + js/libs/fluidbook/fluidbook.menu.js | 42 +- js/libs/fluidbook/fluidbook.slideshow.js | 44 + js/libs/fluidbook/fluidbook.utils.js | 2 +- js/libs/slick/slick.js | 3025 ++++++++++++++++++++++ style/fluidbook.slideshow.less | 73 + style/fonts/slick/slick.eot | Bin 0 -> 2048 bytes style/fonts/slick/slick.svg | 14 + style/fonts/slick/slick.ttf | Bin 0 -> 1892 bytes style/fonts/slick/slick.woff | Bin 0 -> 1380 bytes style/slick/slick-bundle.less | 2 + style/slick/slick-theme.less | 168 ++ style/slick/slick.less | 100 + 14 files changed, 3467 insertions(+), 4 deletions(-) create mode 100755 images/slick/ajax-loader.gif create mode 100644 js/libs/fluidbook/fluidbook.slideshow.js create mode 100644 js/libs/slick/slick.js create mode 100644 style/fluidbook.slideshow.less create mode 100755 style/fonts/slick/slick.eot create mode 100755 style/fonts/slick/slick.svg create mode 100755 style/fonts/slick/slick.ttf create mode 100755 style/fonts/slick/slick.woff create mode 100644 style/slick/slick-bundle.less create mode 100755 style/slick/slick-theme.less create mode 100755 style/slick/slick.less diff --git a/images/slick/ajax-loader.gif b/images/slick/ajax-loader.gif new file mode 100755 index 0000000000000000000000000000000000000000..e0e6e9760bc04861cc4771e327f22ed7962e0858 GIT binary patch literal 4178 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 literal 0 HcmV?d00001 diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 686daa37..6d52f0e0 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -54,6 +54,7 @@ Fluidbook.prototype = { this.tooltip = new FluidbookTooltip(this); this.audiodescription = new FluidbookAudioDescription(this); this.sound = new FluidbookSound(this); + this.slideshow = new FluidbookSlideshow(this); if (this.datas.form == 'bulle') { this.form = new FluidbookBulleForm(this); diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index c48741c5..c86c7a45 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -96,6 +96,8 @@ FluidbookMenu.prototype = { this.openArchives($("#nav #archives").data('tooltip'), cb); } else if (view == 'text') { this.openText(param1, cb); + } else if (view == 'slideshow') { + this.openSlideshow(param1, cb); } else { this['open' + camelView](param1, param2, cb); } @@ -168,8 +170,37 @@ FluidbookMenu.prototype = { callback(); } this.fluidbook.hideLoader(5); - } - , + }, + + openSlideshow: function (slideshow, callback) { + var a = $('a[href="#/slideshow/' + slideshow + '"]'); + var markup = decodeURIComponent($(a).attr('data-slideshow')); + var view = '
' + this.closeButton() + '
'; + view += '
'; + view += markup; + view += '
'; + $("#view").append('
' + view + '
'); + + // TODO: check which type should be passed to fluidbook.stats.track() ??? + // this.fluidbook.stats.track(11); + + //this.fluidbook.initSlideshow(); + + var $this = this; + var times = [250, 500, 750, 1000, 1250]; + $.each(times, function (k, v) { + setTimeout(function () { + $this.resize(); + }, v); + }); + + if (callback != undefined) { + callback(); + } + + this.fluidbook.hideLoader(5); + }, + closeButton: function (c) { if (c == undefined) { c = ''; @@ -557,6 +588,11 @@ FluidbookMenu.prototype = { m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({scale: [s, s], origin: [0, 0]}).css('text-align', 'left'); break; + case 'slideshow': + // ToDo: resize slideshow to fit inside view, accounting for image, caption and thumbnail grid + // w contains max width of popup + // h contains max height of popup + break; default: break; } @@ -633,4 +669,4 @@ FluidbookMenu.prototype = { $("#viewOverlay").css('opacity', 1); }, 10); } -}; \ No newline at end of file +}; diff --git a/js/libs/fluidbook/fluidbook.slideshow.js b/js/libs/fluidbook/fluidbook.slideshow.js new file mode 100644 index 00000000..80adc799 --- /dev/null +++ b/js/libs/fluidbook/fluidbook.slideshow.js @@ -0,0 +1,44 @@ +function FluidbookSlideshow(fluidbook) { + this.fluidbook = fluidbook; +} + +FluidbookSlideshow.prototype = { + initSlideshow: function(id) { + var $slideshow = $('#' + id), + thumbnailsID = id +'_thumbnails', + $thumbnails; + + if ($slideshow.length == 0) return false; + + // Dynamically add thumbnails from full sized images + // Images have to load anyway so we can reuse full images for thumbnails + $('
').appendTo($slideshow.parent()); + $thumbnails = $('#' + thumbnailsID); + + $slideshow.find('img').each(function() { + var img = $(this).clone(); + $thumbnails.append(img); + }); + + // Main image slider + $slideshow.slick({ + variableWidth: false, + asNavFor: '#'+ thumbnailsID, // Synced with thumbnails slider + infinite: false, + draggable: true + }); + + // Thumbnails slider + $thumbnails.slick({ + slidesToShow: 6, + asNavFor: '#'+ id, // Synced with main slider + focusOnSelect: true, + variableWidth: true, + arrows: false, + draggable: true, + swipeToSlide: true, + infinite: false, + centerMode: false + }); + } +} diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js index 9ff2ff9e..27e7659b 100644 --- a/js/libs/fluidbook/fluidbook.utils.js +++ b/js/libs/fluidbook/fluidbook.utils.js @@ -100,4 +100,4 @@ function array_diff(a, b) { return a.filter(function (i) { return b.indexOf(i) < 0; }); -} \ No newline at end of file +} diff --git a/js/libs/slick/slick.js b/js/libs/slick/slick.js new file mode 100644 index 00000000..d0937bdc --- /dev/null +++ b/js/libs/slick/slick.js @@ -0,0 +1,3025 @@ +/* + _ _ _ _ + ___| (_) ___| | __ (_)___ + / __| | |/ __| |/ / | / __| + \__ \ | | (__| < _ | \__ \ + |___/_|_|\___|_|\_(_)/ |___/ + |__/ + + Version: 1.8.1 + Author: Ken Wheeler + Website: http://kenwheeler.github.io + Docs: http://kenwheeler.github.io/slick + Repo: http://github.com/kenwheeler/slick + Issues: http://github.com/kenwheeler/slick/issues + + */ +/* global window, document, define, jQuery, setInterval, clearInterval */ +;(function(factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (typeof exports !== 'undefined') { + module.exports = factory(require('jquery')); + } else { + factory(jQuery); + } + +}(function($) { + 'use strict'; + var Slick = window.Slick || {}; + + Slick = (function() { + + var instanceUid = 0; + + function Slick(element, settings) { + + var _ = this, dataSettings; + + _.defaults = { + accessibility: true, + adaptiveHeight: false, + appendArrows: $(element), + appendDots: $(element), + arrows: true, + asNavFor: null, + prevArrow: '', + nextArrow: '', + autoplay: false, + autoplaySpeed: 3000, + centerMode: false, + centerPadding: '50px', + cssEase: 'ease', + customPaging: function(slider, i) { + return $('