https://kodawarisakaba-fan.com/assets/js/modules/pm-hom-4.js

1/******/ (function(modules) { // webpackBootstrap
2/******/ 	// The module cache
3/******/ 	var installedModules = {};
4/******/
5/******/ 	// The require function
6/******/ 	function __webpack_require__(moduleId) {
7/******/
8/******/ 		// Check if module is in cache
9/******/ 		if(installedModules[moduleId]) {
10/******/ 			return installedModules[moduleId].exports;
11/******/ 		}
12/******/ 		// Create a new module (and put it into the cache)
13/******/ 		var module = installedModules[moduleId] = {
14/******/ 			i: moduleId,
15/******/ 			l: false,
16/******/ 			exports: {}
17/******/ 		};
18/******/
19/******/ 		// Execute the module function
20/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21/******/
22/******/ 		// Flag the module as loaded
23/******/ 		module.l = true;
24/******/
25/******/ 		// Return the exports of the module
26/******/ 		return module.exports;
27/******/ 	}
28/******/
29/******/
30/******/ 	// expose the modules object (__webpack_modules__)
31/******/ 	__webpack_require__.m = modules;
32/******/
33/******/ 	// expose the module cache
34/******/ 	__webpack_require__.c = installedModules;
35/******/
36/******/ 	// define getter function for harmony exports
37/******/ 	__webpack_require__.d = function(exports, name, getter) {
38/******/ 		if(!__webpack_require__.o(exports, name)) {
39/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
40/******/ 		}
41/******/ 	};
42/******/
43/******/ 	// define __esModule on exports
44/******/ 	__webpack_require__.r = function(exports) {
45/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47/******/ 		}
48/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
49/******/ 	};
50/******/
51/******/ 	// create a fake namespace object
52/******/ 	// mode & 1: value is a module id, require it
53/******/ 	// mode & 2: merge all properties of value into the ns
54/******/ 	// mode & 4: return value when already ns object
55/******/ 	// mode & 8|1: behave like require
56/******/ 	__webpack_require__.t = function(value, mode) {
57/******/ 		if(mode & 1) value = __webpack_require__(value);
58/******/ 		if(mode & 8) return value;
59/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
60/******/ 		var ns = Object.create(null);
61/******/ 		__webpack_require__.r(ns);
62/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
63/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64/******/ 		return ns;
65/******/ 	};
66/******/
67/******/ 	// getDefaultExport function for compatibility with non-harmony modules
68/******/ 	__webpack_require__.n = function(module) {
69/******/ 		var getter = module && module.__esModule ?
70/******/ 			function getDefault() { return module['default']; } :
71/******/ 			function getModuleExports() { return module; };
72/******/ 		__webpack_require__.d(getter, 'a', getter);
73/******/ 		return getter;
74/******/ 	};
75/******/
76/******/ 	// Object.prototype.hasOwnProperty.call
77/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
78/******/
79/******/ 	// __webpack_public_path__
80/******/ 	__webpack_require__.p = "";
81/******/
82/******/
83/******/ 	// Load entry module and return exports
84/******/ 	return __webpack_require__(__webpack_require__.s = "./js/page-modules/pm-hom-4.js");
85/******/ })
86/************************************************************************/
87/******/ ({
88

89/***/ "./js/page-modules/pm-hom-4.js":
90/*!*************************************!*\
91  !*** ./js/page-modules/pm-hom-4.js ***!
92  \*************************************/
93/*! no exports provided */
94/***/ (function(module, __webpack_exports__, __webpack_require__) {
95
96"use strict";
97__webpack_require__.r(__webpack_exports__);
98/* harmony import */ var _vendor_waterfall__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../vendor/waterfall */ "./js/vendor/waterfall.js");
99// Copied from pm-hom-2.js
100
101
102(function ($) {
103  'use strict';
104
105  function setFade($el) {
106    $el.addClass('fx-fade');
107  }
108
109  ;
110
111  function fadeIn($el) {
112    $el.addClass('fx-in');
113  }
114
115  ;
116  var pmHom2 = {};
117
118  pmHom2.list = function (opt) {
119    var settings = {
120      config: {
121        url: opt.apiList,
122        target: '[data-cscomments="container"]',
123        indicator: '[data-cscomments="indicator"]',
124        error: '[data-cscomments="error"]',
125        trigger: '[data-cscomments="trigger"]',
126        jsonHtmlKey: 'html',
127        preRender: setFade,
128        postRender: fadeIn,
129        masonryObject: opt.masonry
130      },
131      callback: {
132        success: function success() {
133          var json = this.$root.data('jsonData');
134          var meta = json.meta; // check json status
135
136          if (json.status) {
137            if (meta.last) {
138              this.$root.find(this.conf.trigger).addClass('is-hidden');
139            } // AjaxContent.render()
140
141
142            this.render(); // Waterfall
143
144            if (window.matchMedia('(min-width: 701px)').matches) {
145              var updateGrid = function updateGrid() {
146                Object(_vendor_waterfall__WEBPACK_IMPORTED_MODULE_0__["default"])(grid);
147              };
148
149              var grid = document.querySelector('[data-cs-waterfall="items"]');
150              if (!grid) return;
151              ;
152              updateGrid();
153              window.addEventListener('resize', function (event) {
154                if (!window.matchMedia('(min-width: 701px)').matches) {
155                  document.querySelector('[data-cs-waterfall="items"]').removeAttribute('style');
156                  var item = document.querySelectorAll('[data-cs-waterfall="item"]');
157
158                  for (var i = 0; i < item.length; i++) {
159                    item[i].removeAttribute('style');
160                  }
161                }
162              });
163            } // set page parameter
164
165
166            CS.ajaxHistory.setPage(); // Twemoji
167
168            CS.twemoji.parse(document.querySelector(this.conf.target)); // Masonry
169
170            if (this.conf.masonryObject) {
171              this.conf.masonryObject.masonry('reloadItems');
172              this.conf.masonryObject.masonry('layout');
173            }
174
175            ;
176          } else {
177            console.log('json error');
178            return;
179          }
180        }
181      }
182    };
183
184    function loadList(el, config, callback) {
185      var $el = $(el);
186      var $root = $el.data('commentRootElement');
187
188      if (!$root) {
189        $root = $el.closest('[data-cscomments="root"]');
190        $el.data('commentRootElement', $root);
191      }
192
193      var query = $root.data('jsonData') ? $root.data('jsonData').query : $root.find(config.trigger).data('api-query'); // console.log(query);
194
195      var ajax = $root.data('commentAjax');
196
197      if (!ajax) {
198        config.root = $root;
199        ajax = new CS.AjaxContent(config);
200        $root.data('commentAjax', ajax);
201      } // append
202
203
204      ajax.append(query, callback);
205    }
206
207    function setInfiniteScroll(opt) {
208      // require: IntersectionObserver()
209      var button = document.querySelector(opt.selector);
210      if (!button) return;
211
212      var handleIntersect = function handleIntersect(entries) {
213        entries.forEach(function (entry) {
214          if (entry.isIntersecting && !button.classList.contains('is-hidden')) {
215            loadList($(button), settings.config, settings.callback);
216          }
217        });
218      };
219
220      var options = opt.rootMargin ? {
221        rootMargin: opt.rootMargin
222      } : null;
223      var observer = new IntersectionObserver(handleIntersect, options);
224      observer.observe(button);
225    }
226
227    $('#js-hom-list').on('click.cs.loadcomment', '[data-cscomments="trigger"]', function (e) {
228      loadList(e.currentTarget, settings.config, settings.callback);
229    }).on('click.cs.ajaxhistory', '[data-cshistory-id] a', function (e) {
230      e.preventDefault(); // set item parameter
231

232      CS.ajaxHistory.setItem(e.currentTarget);
233    }); // restore page scroll position
234
235    CS.ajaxHistory.restore(); // 無限スクロール設定
236    // setInfiniteScroll({
237    //   selector: '#js-hom-list [data-cscomments="trigger"]',
238    //   rootMargin: '0px'
239    // });
240  };
241
242  $(function () {
243    // Waterfall
244    if (window.matchMedia('(min-width: 701px)').matches) {
245      Object(_vendor_waterfall__WEBPACK_IMPORTED_MODULE_0__["default"])('[data-cs-waterfall="items"]');
246    }
247
248    var swiper = new CS.Swiper('.swiper-container', {
249      slidesPerView: 3,
250      spaceBetween: 25,
251      centerInsufficientSlides: true,
252      navigation: {
253        nextEl: '.swiper-button-next',
254        prevEl: '.swiper-button-prev'
255      },
256      pagination: {
257        el: '.swiper-pagination',
258        clickable: true
259      },
260      breakpoints: {
261        700: {
262          slidesPerView: 1,
263          spaceBetween: 0
264        }
265      }
266    });
267  });
268  window.pmHom2 = pmHom2;
269})(jQuery);
270
271/***/ }),
272

273/***/ "./js/vendor/waterfall.js":
274/*!********************************!*\
275  !*** ./js/vendor/waterfall.js ***!
276  \********************************/
277/*! exports provided: default */
278/***/ (function(module, __webpack_exports__, __webpack_require__) {
279
280"use strict";
281__webpack_require__.r(__webpack_exports__);
282/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return waterfall; });
283/*!
284   --------------------------------
285   Waterfall.js
286   --------------------------------
287   + https://github.com/raphamorim/waterfall
288   + version 1.1.0
289   + Copyright 2016 Raphael Amorim & Israel Teixeira
290   + Licensed under the MIT license
291   + Documentation: https://github.com/raphamorim/waterfall
292*/
293
294/*
295  import (ESM) 式に修正
296*/
297function waterfall(container) {
298  if (typeof container === 'string') {
299    container = document.querySelector(container);
300  }
301
302  function style(el) {
303    return window.getComputedStyle(el);
304  }
305
306  function margin(name, el) {
307    return parseFloat(style(el)['margin' + name]) || 0;
308  }
309
310  function px(n) {
311    return parseFloat(n) + 'px';
312  }
313
314  function y(el) {
315    return parseFloat(el.style.top);
316  }
317
318  function x(el) {
319    return parseFloat(el.style.left);
320  }
321
322  function width(el) {
323    return parseFloat(style(el).width);
324  }
325
326  function height(el) {
327    return parseFloat(style(el).height);
328  }
329
330  function bottom(el) {
331    return y(el) + height(el) + margin('Bottom', el);
332  }
333
334  function right(el) {
335    return x(el) + width(el) + margin('Right', el);
336  }
337
338  function sort(l) {
339    l = l.sort(function (a, b) {
340      var bottomDiff = bottom(b) - bottom(a);
341      return bottomDiff || x(b) - x(a);
342    });
343  }
344
345  function Boundary(firstRow) {
346    var els = firstRow;
347    sort(els);
348
349    this.add = function (el) {
350      els.push(el);
351      sort(els);
352      els.pop();
353    };
354
355    this.min = function () {
356      return els[els.length - 1];
357    };
358
359    this.max = function () {
360      return els[0];
361    };
362  }
363
364  function placeEl(el, top, left) {
365    el.style.position = 'absolute';
366    el.style.top = px(top);
367    el.style.left = px(left);
368  }
369
370  function placeFirstElement(el) {
371    placeEl(el, 0, margin('Left', el));
372  }
373
374  function placeAtTheFirstLine(prev, el) {
375    placeEl(el, prev.style.top, right(prev) + margin('Left', el));
376  }
377
378  function placeAtTheSmallestColumn(minEl, el) {
379    placeEl(el, bottom(minEl) + margin('Top', el), x(minEl));
380  }
381
382  function adjustContainer(container, maxEl) {
383    container.style.position = 'relative';
384    container.style.height = px(bottom(maxEl) + margin('Bottom', maxEl));
385  }
386
387  function thereIsSpace(els, i) {
388    return right(els[i - 1]) + width(els[i]) <= width(container);
389  }
390
391  var els = container.children;
392
393  if (els.length) {
394    placeFirstElement(els[0]);
395  }
396
397  for (var i = 1; i < els.length && thereIsSpace(els, i); i++) {
398    placeAtTheFirstLine(els[i - 1], els[i]);
399  }
400
401  var firstRow = [].slice.call(els, 0, i);
402  var boundary = new Boundary(firstRow);
403
404  for (; i < els.length; i++) {
405    placeAtTheSmallestColumn(boundary.min(), els[i]);
406    boundary.add(els[i]);
407  }
408
409  adjustContainer(container, boundary.max());
410}

410
411
412/***/ })
413
414/******/ });