https://u-car.toyota-mobi-tokyo.co.jp/file/special/03601/14374/original-header/js/original-header.js

1"use strict";
2function _classCallCheck(e, a) {
3    if (!(e instanceof a))
4        throw new TypeError("Cannot call a class as a function")
5}
6function _defineProperties(e, a) {
7    for (var r = 0; r < a.length; r++) {
8        var n = a[r];
9        n.enumerable = n.enumerable || !1,
10        n.configurable = !0,
11        "value"in n && (n.writable = !0),
12        Object.defineProperty(e, n.key, n)
13    }
14}
15function _createClass(e, a, r) {
16    return a && _defineProperties(e.prototype, a),
17    r && _defineProperties(e, r),
18    e
19}
20var ORIGNAL_HEADER_UPLOAD_DIR = "/original-header"
21  , ORIGNAL_HEADER_UPLOAD_DIR = "https://www.toyota-mobi-tokyo.co.jp/file/special/03601/14374/original-header"
22  , ORIGINAL_HEADER_JSON_NAME = "original-header-car-list.json"
23  , ORIGNAL_HEADER_CAR_LIST_JSON = "".concat(ORIGNAL_HEADER_UPLOAD_DIR, "/data/").concat(ORIGINAL_HEADER_JSON_NAME);
24!function() {
25    var e = window.GALFSRAM || {};
26    e.mfx = e.mfx || {},
27    e.mfx.router_mode = "history",
28    window.GALFSRAM = e
29}();
30var OriginalHeader = function() {
31    function a() {
32        _classCallCheck(this, a);
33        var e = window.navigator.userAgent.toLowerCase();
34        this.$header = $("header"),
35        this.$hamburger = $(".header-nav-button"),
36        this.selector = {
37            item: ".header-global-nav-item > a",
38            accordion: {
39                parent: ".dmssm-original-header-accordion_parent",
40                toggle: ".dmssm-original-header-accordion_toggle",
41                target: ".dmssm-original-header-accordion_target"
42            }
43        },
44        this.isIE = e.match("msie") || e.match("trident"),
45        this.MarsFinderConfig = {
46            ajaxUrl: "//mf2ap003.marsflag.com/toyota_mobi_tokyo__all__customelement/x_search.x",
47            resultUrl: "/search_results/"
48        },
49        this.isShowSearchArea = !1
50    }
51    return _createClass(a, [{
52        key: "init",
53        value: function() {
54            var a = this;
55            $("#header-container").length && (this.removeThemeClassName(),
56            this.prepare(),
57            this.$child.addClass("original"),
58            this.$header.attr("id", "originalHeader"),
59            this.addLogoImg(),
60            this.conversionRuledLine(),
61            this.isIE || (this.addSearchBtn(),
62            this.addSearchArea()),
63            $(".header-global-nav-item").off("mouseover"),
64            $(".header-global-nav").off("mousemove"),
65            $(".header-global-nav").off("mouseleave"),
66            this.$header.append('<div class="originalHeader_bg"></div>'),
67            this.addEvents(),
68            this.$child && 0 < this.$child.length && $.ajax(ORIGNAL_HEADER_CAR_LIST_JSON).done(function(e) {
69                a.data = e;
70                e = a.getHtml();
71                a.$list.append(e).append(a.$block),
72                a.addCarListEvents(),
73                setInterval(function() {
74                    a.setRightAreaHeight()
75                }, 500)
76            }))
77        }
78    }, {
79        key: "removeThemeClassName",
80        value: function() {
81            $('header *[class*="key-color"]').each(function(e, a) {
82                $(a).removeClass(function(e, a) {
83                    return (a.match(/\b(key|bg|txt)-color-\S+/g) || []).join(" ")
84                })
85            }),
86            this.$header.removeClass(function(e, a) {
87                return (a.match(/\b(theme|fontfamily-id)-\S+/g) || []).join(" ")
88            })
89        }
90    }, {
91        key: "prepare",
92        value: function() {
93            var t = this
94              , s = ".header-global-nav-item"
95              , o = ".header-global-nav-item-child"
96              , c = ".header-global-nav-item-child-list"
97              , l = ".header-global-nav-item-child-wrap";
98            $(".header-global-nav-item-inner").each(function(e, a) {
99                var r, n, i = $(a);
100                i.text().replace(/\s/g, "").match(/新車(をさがす|を探す|情報)/) && (i = (a = (n = (r = i.parents(s)).find(o)).find(c)).find("".concat(l, ":last")),
101                t.$parent = r,
102                t.$child = n,
103                t.$list = a,
104                t.$block = i)
105            })
106        }
107    }, {
108        key: "addEvents",
109        value: function() {
110            var e = this;
111            this.$searchBtn && this.$searchBtn.length && !this.isIE && (this.$searchBtn.on("click", this.onClickSearchBtn.bind(this)),
112            $(document).on("click", "#originalHeader .mf_finder_searchBox_submit", this.onSubmitSearch.bind(this))),
113            $(this.selector.item).on("click", this.onClickNavItem.bind(this)),
114            this.$hamburger.on("click", this.onClickHamburger.bind(this)),
115            $(".originalHeader_bg").on("click", function() {
116                $(".header-global-nav-item").removeClass("header-global-nav-item-open"),
117                e.isIE || e.onSubmitSearch()
118            })
119        }
120    }, {
121        key: "addCarListEvents",
122        value: function() {
123            var e = $(document)
124              , a = this.selector.accordion;
125            e.on("click", a.toggle, this.accordion.bind(this))
126        }
127    }, {
128        key: "getHtml",
129        value: function() {
130            var a = this
131              , r = ""
132              , n = {
133                parent: this.getClassName(this.selector.accordion.parent),
134                toggle: this.getClassName(this.selector.accordion.toggle),
135                target: this.getClassName(this.selector.accordion.target)
136            };
137            r += '\n    <div class="originalHeaderCarList '.concat(n.parent, '">\n      <p class="originalHeaderCarList_bodyTypeToggle ').concat(n.toggle, '">ボディタイプから探す<span></span></p>

137\n      <div class="originalHeaderCarList_container ').concat(n.target, '">\n    ');
138            var i = ORIGNAL_HEADER_UPLOAD_DIR;
139            return this.data.forEach(function(e) {
140                e = '\n        <div class="originalHeaderCarList_block '.concat(e.type, " ").concat(n.parent, '">\n          <div class="originalHeaderCarList_bodyType ').concat(n.toggle, '">\n            <p>').concat(e.name, '</p>\n            <img src="').concat(i, "/img/img_").concat(e.type, '.png">\n            <span></span>\n          </div>\n          <ul class="').concat(n.target, '">').concat(a.getItemHtml(e), "</ul>\n        </div>\n      ");
141                r += e
142            }),
143            r += '<img src="'.concat(i, '/img/arrow_bodyType.svg" class="originalHeaderCarList_arrow">'),
144            r += "</div></div>"
145        }
146    }, {
147        key: "getItemHtml",
148        value: function(e) {
149            var a = "";
150            return e.list.forEach(function(e) {
151                e = '\n        <li class="originalHeaderCarList_car originalHeaderCar">\n          <a href="'.concat(e.url, '">').concat(e.name, "</a>\n          <span></span>\n        </li>\n      ");
152                a += e
153            }),
154            a
155        }
156    }, {
157        key: "getClassName",
158        value: function(e) {
159            return e.replace(/\.|#/, "")
160        }
161    }, {
162        key: "accordion",
163        value: function(e) {
164            var a = $(e.currentTarget)
165              , r = a.parent(this.selector.accordion.parent)
166              , e = r.children(this.selector.accordion.target);
167            1280 <= window.innerWidth ? this.showChild(a, r, e) : (a.toggleClass("open"),
168            e.slideToggle(250))
169        }
170    }, {
171        key: "showChild",
172        value: function(e, a, r) {
173            var n = $(".originalHeaderCarList_arrow")
174              , i = 1520 <= window.innerWidth ? -20 : 108;
175            $(".originalHeaderCarList_block .dmssm-original-header-accordion_target").hide(),
176            r.show(),
177            $(".originalHeaderCarList_bodyType").removeClass("active"),
178            e.addClass("active"),
179            n.css("top", e.offset().top - i - $(window).scrollTop()),
180            this.setRightAreaHeight()
181        }
182    }, {
183        key: "setRightAreaHeight",
184        value: function() {
185            var e = ".originalHeaderCarList_block .dmssm-original-header-accordion_target";
186            $(e).parents(".header-global-nav-item-open").length && (1520 <= window.innerWidth ? $(e).height($(".originalHeaderCarList").height() + $(".header-global-nav-item-child.original .header-global-nav-item-child-wrap").height()) : $(e).css("height", ""))
187        }
188    }, {
189        key: "addLogoImg",
190        value: function() {
191            var e = $(".header-logo-item")
192              , a = ORIGNAL_HEADER_UPLOAD_DIR;
193            e.empty(),
194            e.append('\n      <a href="/">\n        <img src="'.concat(a, '/img/logo_tmt-white.png" class="small">\n        <img src="').concat(a, '/img/logo_tmt-large-en.svg" class="large">\n      </a>\n      '))
195        }
196    }, {
197        key: "conversionRuledLine",
198        value: function() {
199            $(".header-global-nav-item-child-item").each(function(e, a) {
200                a = $(a);
201                a.text().replace(/\s/g, "").match("罫線") && (a.empty(),
202                a.addClass("dmssm-original-header_ruledLine"))
203            })
204        }
205    }, {
206        key: "addSearchBtn",
207        value: function() {
208            var e = $(".header-subnav")
209              , a = ORIGNAL_HEADER_UPLOAD_DIR;
210            e.append('\n      <div class="originalHeader_search headerSearch">\n        \n        \n        '.concat(this.getMFHtml("サイト内検索"), '\n        <div class="headerSearch_btn">\n          <img src="').concat(a, '/img/ico_search.svg">\n          <span class="close">\n            <span></span><span></span>\n          </span>\n        </div>\n      </div>\n    ')),
211            this.$searchBtn = $(".originalHeader_search")
212        }
213    }, {
214        key: "addSearchArea",
215        value: function() {
216            this.$header.append('\n    <div class="headerSearchArea">\n      <div class="headerSearchArea_inner">\n        '.concat(this.getMFHtml("キーワードを入力してください"), '\n        <div class="headerSearchArea_btn headerSearchAreaBtn">\n          <p class="headerSearchAreaBtn_txt">検索\n            <img src="').concat(ORIGNAL_HEADER_UPLOAD_DIR, '/img/ico_search.svg">\n          </p>\n        </div>\n        \n      </div>\n    </div>\n    '));

217            var e = document.createElement("script");
218            e.src = "//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js",
219            document.body.append(e),
220            this.$searchArea = $(".headerSearchArea"),
221            this.$searchArea.hide()
222        }
223    }, {
224        key: "getMFHtml",
225        value: function(e) {
226            return '\n    <div class="mf_finder_container">\n      <mf-search-box\n        submit-text=""\n        ajax-url="'.concat(this.MarsFinderConfig.ajaxUrl, '"\n        serp-url="').concat(this.MarsFinderConfig.resultUrl, '"\n        placeholder="').concat(e, '"\n        doctype-hidden\n        options-hidden\n      ></mf-search-box>\n    </div>\n    ')
227        }
228    }, {
229        key: "onClickHamburger",
230        value: function() {
231            var e, a = $("#wrapper");
232            a.hasClass("headerOpen") ? (e = a.attr("style").match(/,.*,/i)[0].replace(/,|\s/g, ""),
233            a.css("top", e)) : a.css("top", "")
234        }
235    }, {
236        key: "onClickNavItem",
237        value: function(e) {
238            var a, r, n, i = $(e.currentTarget);
239            i.attr("href") || (r = i.parent(a = ".header-global-nav-item"),
240            n = "header-global-nav-item-open",
241            e = $(".originalHeader_bg"),
242            i = r.hasClass(n),
243            $(a).removeClass(n),
244            e.removeClass(n).removeClass("open"),
245            i ? (r.removeClass(n),
246            e.removeClass(n).removeClass("open")) : (r.addClass(n),
247            e.addClass(n)),
248            this.isShowSearchArea && this.onClickSearchBtn())
249        }
250    }, {
251        key: "onClickSearchBtn",
252        value: function(e) {
253            var a, r;
254            this.$searchArea.length && (a = $("#originalHeader .mf_finder_searchBox_query_input"),
255            r = $(".originalHeader_bg"),
256            this.isShowSearchArea ? (this.$searchArea.hide(),
257            this.$searchBtn.removeClass("open"),
258            r.removeClass("open").removeClass("header-global-nav-item-open"),
259            this.isShowSearchArea = !1) : (this.$searchArea.css("display", ""),
260            this.$searchBtn.addClass("open"),
261            r.addClass("open"),
262            a.trigger("focus"),
263            $(".header-global-nav-item").removeClass("header-global-nav-item-open"),
264            this.isShowSearchArea = !0))
265        }
266    }, {
267        key: "onSubmitSearch",
268        value: function() {
269            var e = $(".originalHeader_bg");
270            this.$searchArea.hide(),
271            this.$searchBtn.removeClass("open"),
272            e.removeClass("open").removeClass("header-global-nav-item-open"),
273            window.innerWidth < 1280 && $(".header-nav-button").trigger("click"),
274            this.isShowSearchArea = !1
275        }
276    }]),
277    a
278}();
279$(function() {
280    (new OriginalHeader).init()
281});