https://shikishima-home.com/assets/js/kcevents.js

1const API_TOKEN = "50bdcf48-fdcb-40a4-bee9-f8f901a479b3"; // APIトークン 敷島住宅株式会社様
2
3const API_ACCESS_KEY =
4  "https://www.ie-miru.jp/api/v1/events?token=" + API_TOKEN + "&include_event_tags=true"; // APIアクセスキー
5const API_ACCESS_KEY_FINISHED =
6  "https://www.ie-miru.jp/api/v1/events?token=" +
7  API_TOKEN +
8  "&include_finished_events=true&include_event_tags=true"; // APIアクセスキー 終了イベントも含む
9const IMG_FOLDER = "./img/"; // imgフォルダのパス
10const TOP_EVENTS_NUM = 4; // トップページのイベントの最大表示件数
11const KC_SOURCE = "shikishima-home.com/";
12const HEADER_BACK_URL = "https://shikishima-home.com/";
13const Spinner = window.VueSimpleSpinner;
14
15var utilityMixin = {
16  methods: {
17    formatDateStr(p_event_date) {
18      let format_str = p_event_date;
19      format_str = format_str.replace(/\)〜/g, "\)〜<br>");
20      return format_str;
21    },
22    checkImg(p_url) {
23      if (p_url) {
24        return p_url;
25      }
26      return "https://www.ie-miru.jp/custom/images/base/photo_no_image_02.png";
27    },
28
29    checkDisplayAddressText(p_address, p_display_address_text) {
30      // 表示用住所が入力されている場合はそちらを表示
31      let ret_address = p_address;
32      if (p_display_address_text) {
33        ret_address = p_display_address_text;
34      }
35      return ret_address;
36    },
37
38    shopTagsOf(tag) {
39      return (tag || []).some(t => {
40        const name = t && typeof t === 'object' ? t.name : t;
41        return typeof name === 'string' && name.includes('RECO');
42      });
43    },
44
45  },
46};
47
48let componentTopEvents = {
49  mixins: [utilityMixin],
50  template: `
51  <div class="kc-content">
52    <spinner class="kc-spinner" v-show="isEventLoading"></spinner>
53    <div v-if="events.length > 0">
54      <div id="kcTopEventsSlider" class="kc-slider progressSlider splide">
55        <div class="splide__track">
56          <ul v-show="!isEventLoading" class="kc-cards splide__list">
57              <li v-for="event in events" class="kc-card splide__slide" :class="event.finished ? 'endDateTime' : '' ">
58                  <a :href="event.url + (event.url.indexOf('?') != -1 ? '&' : '?') + 'kc_source=' + KC_SOURCE + '&utm_store_kc=true' + '&header_back_url=' +  HEADER_BACK_URL" class="kc-link">
59                    <div class="kc-image">
60                      <img :src="checkImg(event.image_url)" alt="">
61                    </div>
62                    <div class="kc-info">
63                      <span class="kc-date" v-html="formatDateStr(event.event_open_date_from_to_string)"></span>
64                      <div class="kc-name"><span class="linkTextUnderline">{{event.name}}</span></div>
65                    </div>
66                  </a>
67              </li>
68          </ul>
69        </div>
70      </div>
71    </div>
72    <div v-show="!isEventLoading" class="kc-none" v-else>現在、開催中のイベントはございません。</div>
73  </div>
74  `,
75  components: {
76    spinner: Spinner,
77  },
78  data() {
79    return {
80      events: [],
81      isEventLoading: true,
82      // imgfolder: "",
83      splide: null,
84    };
85  },
86  mounted() {
87    this.EventSlider();
88    // this.imgfolder = IMG_FOLDER;
89  },
90  methods: {
91    EventSlider: async function () {
92      // 先にKCイベントを表示する
93      let result = await this.Kcevent();
94      this.SplideEvent();
95    },
96    Kcevent: async function () {
97      // this.imgfolder = IMG_FOLDER;
98      await axios
99        .get(API_ACCESS_KEY)
100        .then(
101          function (response) {
102            getEvents = response.data.events;
103            for (normalItem in getEvents) {
104              if (this.shopTagsOf(getEvents[normalItem].event_tags)) {
105                this.events.push(getEvents[normalItem]);
106              }
107            }
108            this.isEventLoading = false;
109          }.bind(this)
110        )
111        .catch(
112          function (response) {
113            console.log("error");
114            console.log(response.data);
115          }.bind(this)
116        );
117    },
118    // Splideスライダー生成＋スクロールバー（_progressSlider.scssと同仕様）
119    SplideEvent: function () {
120      var el = this.$el.querySelector("#kcTopEventsSlider");
121      if (!el) return;
122
123      var splide = new Splide(el, {
124        flickMaxPages: 0.3,
125        speed: 700,
126        perMove: 1,
127        fixedWidth: "4.00rem",
128        gap: "0.40rem",

129        arrows: false,
130        padding: {
131        right: '1.22rem',
132        },
133        pagination: false,
134        mediaQuery: "max",
135        breakpoints: {
136          767: {
137            fixedWidth: "71.4%",
138            gap: "0.20rem",
139            padding: {
140              right: '0.2rem',
141            },
142          },
143        },
144      });
145
146      splide.mount();
147      this.splide = splide;
148
149      var track = el.querySelector(".splide__track");
150      if (!track) return;
151
152      var scrollbarContainer = document.createElement("div");
153      scrollbarContainer.className = "scrollbar-container";
154      var scrollbarDrag = document.createElement("div");
155      scrollbarDrag.className = "scrollbar-drag";
156      scrollbarContainer.appendChild(scrollbarDrag);
157      track.parentNode.insertBefore(scrollbarContainer, track.nextSibling);
158
159      var updateScrollbar = function () {
160        var slideCount = splide.Components.Slides.getLength();
161        var currentIndex = splide.index;
162        var trackEl = splide.Components.Elements.track;
163        if (!trackEl) return;
164
165        var trackWidth = trackEl.getBoundingClientRect().width;
166        var listEl = splide.Components.Elements.list;
167        var listWidth = (listEl && listEl.scrollWidth) || 0;
168        if (listWidth === 0) return;
169
170        var visibleRatio = trackWidth / listWidth;
171        var scrollbarWidth = scrollbarContainer.offsetWidth;
172        var dragWidth = Math.max(scrollbarWidth * visibleRatio, 40);
173        var maxDragPosition = scrollbarWidth - dragWidth;
174        var dragPosition = (currentIndex / Math.max(slideCount - 1, 1)) * maxDragPosition;
175
176        scrollbarDrag.style.width = dragWidth + "px";
177        scrollbarDrag.style.transform = "translate3d(" + dragPosition + "px, 0px, 0px)";
178      };
179
180      splide.on("move", updateScrollbar);
181      splide.on("mounted", updateScrollbar);
182      splide.on("updated", updateScrollbar);
183      splide.on("resize", updateScrollbar);
184
185      var isDragging = false;
186
187      var handleScrollbarPosition = function (e) {
188        var rect = scrollbarContainer.getBoundingClientRect();
189        var position = e.clientX - rect.left;
190        var scrollbarWidth = scrollbarContainer.offsetWidth;
191        var dragWidth = scrollbarDrag.offsetWidth;
192        var maxDragPosition = scrollbarWidth - dragWidth;
193        var clampedPosition = Math.max(0, Math.min(position - dragWidth / 2, maxDragPosition));
194        var ratio = maxDragPosition > 0 ? clampedPosition / maxDragPosition : 0;
195        var slideCount = splide.Components.Slides.getLength();
196        var targetIndex = Math.round(ratio * Math.max(slideCount - 1, 0));
197        splide.go(targetIndex);
198      };
199
200      var handleMouseMove = function (e) {
201        if (!isDragging) return;
202        handleScrollbarPosition(e);
203      };
204
205      var handleMouseUp = function () {
206        isDragging = false;
207        document.removeEventListener("mousemove", handleMouseMove);
208        document.removeEventListener("mouseup", handleMouseUp);
209      };
210
211      scrollbarContainer.addEventListener("mousedown", function (e) {
212        if (e.button !== 0) return;
213        isDragging = true;
214        handleScrollbarPosition(e);
215        document.addEventListener("mousemove", handleMouseMove);
216        document.addEventListener("mouseup", handleMouseUp);
217      });
218
219      updateScrollbar();
220    },
221  },
222  created() {
223  },
224  destroyed() {
225    if (this.splide) {
226      this.splide.destroy();
227      this.splide = null;
228    }
229  },
230};
231
232
233
234
235let componentAllEvents = {
236  mixins: [utilityMixin],
237  template: `
238  <div class="kc-content -all">
239    <div class="kc-filter" v-show="!isEventLoading && allEvents.length > 0">
240      <p class="kc-filter-title">カテゴリ</p>
241      <div class="kc-filter-list">
242        <button type="button" class="kc-filter-item" :class="{ '-active': !selectedType }" @click="setFilter('')">すべて</button>
243        <button
244          v-for="type in eventTypes"
245          :key="type"
246          type="button"
247          class="kc-filter-item"
248          :class="{ '-active': selectedType === type }"
249          @click="setFilter(type)"
250        >{{ type }}</button>
251      </div>
252    </div>
253    <div class="kc-filter-sp" v-show="!isEventLoading && allEvents.length > 0">
254      <p class="kc-filter-sp-title">カテゴリ</p>
255      <div class="kc-filter-sp-select" :class="{ '-open': isFilterOpen }">
256        <button type="button" class="kc-filter-sp-trigger" @click="toggleFilter">

257          <span>{{ selectedType || 'すべて' }}</span>
258          <span class="kc-filter-sp-arrow"></span>
259        </button>
260        <ul class="kc-filter-sp-list" v-show="isFilterOpen">
261          <li>
262            <button type="button" class="kc-filter-sp-item" :class="{ '-active': !selectedType }" @click="setFilter('')">すべて</button>
263          </li>
264          <li v-for="type in eventTypes" :key="type">
265            <button
266              type="button"
267              class="kc-filter-sp-item"
268              :class="{ '-active': selectedType === type }"
269              @click="setFilter(type)"
270            >{{ type }}</button>
271          </li>
272        </ul>
273      </div>
274    </div>
275    <spinner class="kc-spinner" v-show="isEventLoading"></spinner>
276    <div v-if="filteredEvents.length > 0">
277      <ul v-show="!isEventLoading" class="kc-cards -all">
278          <li v-for="event in filteredEvents" class="kc-card -all" :class="event.finished ? 'endDateTime' : '' ">
279              <a :href="event.url + (event.url.indexOf('?') != -1 ? '&' : '?') + 'kc_source=' + KC_SOURCE + '&utm_store_kc=true' + '&header_back_url=' +  HEADER_BACK_URL" class="kc-link">
280                <div class="kc-image -all">
281                  <img :src="checkImg(event.image_url)" alt="">
282                </div>
283                <div class="kc-info -all">
284                  <div class="kc-tags">
285                    <span class="kc-type">{{event.event_type}}</span>
286                  </div>
287                  <div class="kc-name -all"><span class="linkTextUnderline">{{event.name}}</span></div>
288                  <span class="kc-address -all">{{checkDisplayAddressText(event.event_rough_address,event.display_address_text)}}</span>
289                  <span class="kc-date -all" v-html="formatDateStr(event.event_open_date_from_to_string)"></span>
290                </div>
291              </a>
292          </li>
293      </ul>
294    </div>
295    <div v-show="!isEventLoading" class="kc-none" v-else>現在、開催中のイベントはございません。</div>
296  </div>
297  `,
298  components: {
299    spinner: Spinner,
300  },
301  data() {
302    return {
303      allEvents: [],
304      eventTypes: [],
305      selectedType: "",
306      isEventLoading: true,
307      isFilterOpen: false,
308    };
309  },
310  computed: {
311    filteredEvents() {
312      if (!this.selectedType) {
313        return this.allEvents;
314      }
315      return this.allEvents.filter(function (event) {
316        return event.event_type === this.selectedType;
317      }.bind(this));
318    },
319  },
320  mounted() {
321    this.getData();
322    document.addEventListener("click", this.onDocumentClick);
323  },
324
325  methods: {
326    toggleFilter: function () {
327      this.isFilterOpen = !this.isFilterOpen;
328    },
329    setFilter: function (type) {
330      this.selectedType = type;
331      this.isFilterOpen = false;
332    },
333    onDocumentClick: function (e) {
334      var filterSp = this.$el.querySelector(".kc-filter-sp");
335      if (filterSp && !filterSp.contains(e.target)) {
336        this.isFilterOpen = false;
337      }
338    },
339    getData: function () {
340      this.allEvents = [];
341      this.eventTypes = [];
342      this.selectedType = "";
343      this.isEventLoading = true;
344      axios
345        .get(API_ACCESS_KEY)
346        .then(
347          function (response) {
348            getEvents = response.data.events;
349            var types = [];
350            for (normalItem in getEvents) {
351              var event = getEvents[normalItem];
352              if (this.shopTagsOf(event.event_tags)) {
353                this.allEvents.push(event);
354                if (event.event_type && types.indexOf(event.event_type) === -1) {
355                  types.push(event.event_type);
356                }
357              }
358            }
359            this.eventTypes = types;
360            this.isEventLoading = false;
361          }.bind(this)
362        )
363        .catch(
364          function (response) {
365            console.log("error");
366            console.log(response.data);
367          }.bind(this)
368        );
369    },
370  },
371  created() {
372    document.addEventListener("turbolinks:before-cache", this.onBrowserBack);
373  },
374  destroyed() {
375    document.removeEventListener("turbolinks:before-cache", this.onBrowserBack);
376    document.removeEventListener("click", this.onDocumentClick);
377  },
378};
379
380
381
382
383var kcapp = new Vue({
384  el: "#kcapp",
385  components: {
386    "top-events": componentTopEvents,
387    "all-events": componentAllEvents,
388  },
389  data: {},
390  mounted() { },
391  beforeDestroy() { },
392  methods: {},
393});
394