summaryrefslogtreecommitdiff
path: root/_includes/scripts/lib/gallery.js
diff options
context:
space:
mode:
authorKarl Hallsby <karl@hallsby.com>2021-10-03 00:10:58 -0500
committerKarl Hallsby <karl@hallsby.com>2021-10-03 02:16:53 -0500
commita10ad0a99ba6e44a35253c3bcaff80c90e99348e (patch)
tree005e05a70fb1fe24a5a7c44dc1d2d14c9e1d88ed /_includes/scripts/lib/gallery.js
parentb9b34a65fbe55ce78d353ce2b7eb51f6884bd272 (diff)
Revert ALL jekyll-text-theme configuration files
I am changing the theme of the site, and need to revert these changes to make everything work. Revert "Add jekyll-text-theme YAML files" This reverts commit 61b34a5f260db45575d448d766ea29c0fb273ed3. Revert "Bring all of jekyll-text-theme _includes into site" This reverts commit c6bf5f7c895287d2028f6024265913b59784a154. Revert "Bring all of jekyll-text-theme assets to site" This reverts commit 7b69c2e5975f98da09d932ba6c70bdd71b1601a7. Remove jekyll text theme from Gemfile
Diffstat (limited to '_includes/scripts/lib/gallery.js')
-rw-r--r--_includes/scripts/lib/gallery.js192
1 files changed, 0 insertions, 192 deletions
diff --git a/_includes/scripts/lib/gallery.js b/_includes/scripts/lib/gallery.js
deleted file mode 100644
index 1793f04..0000000
--- a/_includes/scripts/lib/gallery.js
+++ /dev/null
@@ -1,192 +0,0 @@
-(function() {
- {%- include scripts/lib/swiper.js -%}
- var SOURCES = window.TEXT_VARIABLES.sources;
- window.Lazyload.js(SOURCES.jquery, function() {
- var template =
- '<div class="swiper gallery__swiper">' +
- '<div class="swiper__wrapper">' +
- '</div>' +
- '<div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>' +
- '<div class="swiper__button swiper__button--next fas fa-chevron-right"></div>' +
- '</div>';
- function setState($item, zoom, translate) {
- $item.css('transform', 'scale(' + zoom + ') translate(' + translate.x + 'px,' + translate.y + 'px)');
- }
- function Gallery(root, items) {
- this.$root = $(root);
- this.$swiper = null;
- this.$swiperWrapper = null;
- this.$activeItem = null;
- this.$items = [];
- this.contentWidth = 0;
- this.contentHeight = 0;
- this.swiper = null;
- this.items = items;
- this.disabled = false;
- this.curIndex = 0;
- this.touchCenter = null;
- this.lastTouchCenter = null;
- this.zoomRect = null;
- this.lastZoomRect = null;
- this.lastTranslate = null;
- this.translate = null;
- this.lastZoom = 1;
- this.preZoom = 1;
- this.zoom = 1;
- }
- Gallery.prototype.init = function() {
- var i, item, items = this.items, size, self = this, touchstartFingerCount = 0;
- this.$root.append(template);
- this.$swiper = this.$root.find('.gallery__swiper');
- this.$swiperWrapper = this.$root.find('.swiper__wrapper');
- this.contentWidth = this.$swiperWrapper && this.$swiperWrapper.width();
- this.contentHeight = this.$swiperWrapper && this.$swiperWrapper.height();
- for (i = 0; i < items.length; i++) {
- item = items[i];
- size = this._calculateImageSize(item.w, item.h);
- this.$items.push($(
- '<div class="swiper__slide">' +
- '<div class="gallery-item">' +
- '<div class="gallery-item__content">' +
- '<img src="' + item.src + '" style="width:' + size.w + 'px;height:' + size.h + 'px"/>' +
- '</div>' +
- '</div>' +
- '</div>'
- ));
- }
- this.$swiperWrapper && this.$swiperWrapper.append(this.$items);
- this.swiper = this.$swiper && this.$swiper.swiper({
- onChangeEnd: function() {
- self._handleChangeEnd.apply(self, Array.prototype.slice.call(arguments));
- }
- });
- $(window).on('resize', function() {
- if (self.disabled) { return; }
- self._resizeImageSize();
- });
- // Char Code: 37 ⬅, 39 ➡
- $(window).on('keyup', function(e) {
- if (window.isFormElement(e.target || e.srcElement) || self.disabled) { return; }
- if (e.which === 37) {
- self.swiper && self.swiper.previous();
- } else if (e.which === 39) {
- self.swiper && self.swiper.next();
- }
- });
- function getRect(touch0, touch1) {
- return {
- o: {
- x: (touch0.pageX + touch1.pageX) / 2,
- y: (touch0.pageY + touch1.pageY) / 2
- },
- w: Math.abs(touch0.pageX - touch1.pageX),
- h: Math.abs(touch0.pageY - touch1.pageY)
- };
- }
- function getTouches(e) {
- return e.touches || e;
- }
- function getTouchesCount(e) {
- if (e.touches) {
- return e.touches.length;
- } else {
- return 1;
- }
- }
- this.$swiperWrapper.on('touchstart', function(e) {
- var touch0, touch1, rect;
- touchstartFingerCount = getTouchesCount(e);
- if (touchstartFingerCount > 1) {
- touch0 = e.touches[0];
- touch1 = e.touches[1];
- rect = getRect(touch0, touch1);
- self.lastZoomRect = { w: rect.w, h: rect.h };
- self.lastTouchCenter = rect.o;
- } else {
- var touch = getTouches(e)[0];
- self.lastTouchCenter = { x: touch.pageX, y: touch.pageY };
- }
- });
- this.$swiperWrapper.on('touchmove', function(e) {
- if (touchstartFingerCount === getTouchesCount(e)) {
- if (touchstartFingerCount > 1) {
- var touch0 = e.touches[0];
- var touch1 = e.touches[1];
- var rect = getRect(touch0, touch1);
- self.zoomRect = { w: rect.w, h: rect.h };
- self.touchCenter = rect.o;
- self._zoom(); self._translate();
- setState(self.$activeItem, self.zoom, self.translate);
- } else {
- var touch = getTouches(e)[0];
- self.touchCenter = { x: touch.pageX, y: touch.pageY };
- self._translate();
- setState(self.$activeItem, self.zoom, self.translate);
- }
- }
- });
- this.$swiperWrapper.on('touchend', function(e) {
- self.lastZoom = self.zoom;
- self.lastTranslate = self.translate;
- touchstartFingerCount = 0;
- });
- this.$root.on('touchmove', function(e) {
- if (self.disabled) { return; }
- e.preventDefault();
- });
- };
-
- Gallery.prototype._translate = function() {
- this.translate = this.touchCenter && this.lastTouchCenter && this.lastTranslate ? {
- x: (this.touchCenter.x - this.lastTouchCenter.x) / this.zoom + this.lastTranslate.x,
- y: (this.touchCenter.y - this.lastTouchCenter.y) / this.zoom + this.lastTranslate.y
- } : { x: 0, y: 0 };
- }
- Gallery.prototype._zoom = function() {
- this.zoom = (this.zoomRect.w + this.zoomRect.h) / (this.lastZoomRect.w + this.lastZoomRect.h) * this.lastZoom;
- this.zoom > 1 ? this.$activeItem.addClass('zoom') : this.$activeItem.removeClass('zoom');
- this.preZoom = this.zoom;
- }
-
- Gallery.prototype._calculateImageSize = function(w, h) {
- var scale = 1;
- if (this.contentWidth > 0 && this.contentHeight > 0 && w > 0 && h > 0) {
- scale = Math.min(
- Math.min(w, this.contentWidth) / w,
- Math.min(h, this.contentHeight) / h);
- }
- return { w: Math.floor(w * scale), h: Math.floor(h * scale) };
- };
-
- Gallery.prototype._resizeImageSize = function() {
- var i, $item, $items = this.$items, item, size;
- this.contentWidth = this.$swiperWrapper && this.$swiperWrapper.width();
- this.contentHeight = this.$swiperWrapper && this.$swiperWrapper.height();
- if ($items.length < 1) { return; }
- for (i = 0; i < $items.length; i++) {
- item = this.items[i], $item = $items[i];
- size = this._calculateImageSize(item.w, item.h);
- item.width = size.w; item.height = size.h;
- $item && $item.find('img').css({ width: size.w, height: size.h });
- }
- };
- Gallery.prototype._handleChangeEnd = function(index, $dom, preIndex, $preDom) {
- this.curIndex = index;
- this.lastZoomRect = null; this.lastZoomRect = null;
- this.lastTranslate = this.translate = { x: 0, y:0 };
- this.lastZoom = this.preZoom = this.zoom = 1;
- this.$activeItem = $dom.find('.gallery-item__content');
- setState($preDom.find('.gallery-item__content'), this.zoom, this.translate);
- };
-
- Gallery.prototype.refresh = function() {
- this.swiper && this.swiper.refresh();
- this._resizeImageSize();
- };
- Gallery.prototype.setOptions = function(options) {
- this.disabled = options.disabled;
- this.swiper && this.swiper.setOptions(options);
- };
- window.Gallery = Gallery;
- });
-})(); \ No newline at end of file