https://karpowership.com/Content/Scripts/Modules/Feux.Expand.Base.js

1Feux.Expand = {
2    Props: {
3        expandSenderSelector: 'data-expand',
4        expandContentSelector: 'data-expand-content',
5        expandContentHolderSelector: 'data-expand-content-holder',
6        queryStringPrefix: 'exp',
7
8        Animation: {
9            height_duration_on: 500,
10            height_duration_off: 350,
11            opacity_duration_on: 600,
12            opacity_duration_on_delay: 300,
13            opacity_duration_off: 300
14        }
15    },
16
17    Current: {},
18
19    ready: function () {
20        // Initiate configuration setup 
21        Feux.Expand.Actions.init();
22    },
23
24    Actions: {
25        init: function () {
26            Feux.Expand.Helper.setListeners();
27            Feux.Expand.Actions.prepareByUrl();
28        },
29
30        prepareByUrl: function () {
31            // Sample URL:
32            // ?exp=1|2
33
34            var props = Feux.Expand.Props;
35            var urlParams = new URLSearchParams(window.location.search);
36            var expParams = urlParams.get(props.queryStringPrefix); // 1|2
37
38            if (expParams !== null) {
39                var paramArr = expParams.split('|');
40
41                for (const expContentNo of paramArr) {
42                    var expandSender = document.querySelector("[" + props.expandSenderSelector + "-id='" + expContentNo + "']");
43                    Feux.Expand.Actions.showOrHide({ sender: expandSender });
44                }
45            }
46        },
47
48        showOrHide: function (arg) {
49            // Programatik açılış olup olmadığını kontrol ediyoruz. Programatik açılışlarda
50            // expand içerik numarası iletilmektedir. 
51            if (arg.hasOwnProperty("content")) {
52                arg.sender = document.querySelector("[data-expand-id='" + arg.content + "']")
53            }
54            // End
55
56            var props = Feux.Expand.Props;
57            var sender = arg.sender;
58
59            // Tıklanan expand düğmesinden spesifikasyonları alıyoruz.
60            var specs = JSON.parse(sender.dataset.expand);
61
62            // Expand özelliğinin belli bir media query aralığında çalışmasını istiyorsak...
63            if (specs.hasOwnProperty("mq")) {
64                var specMqArray = specs.mq.split(','); // { "mq": "sm,md,lg,xl" }
65                var currentMq = Feux.Base.Props.MediaQ.Curr.key;
66
67                if (!specMqArray.includes(currentMq)) return;
68            }
69            // End
70
71            // Ä°lgili elementleri belirliyoruz.
72            var contentEl = document.querySelector("[" + props.expandContentSelector + "='" + specs.content + "']");
73            var holderEl = contentEl.querySelector("[" + props.expandContentHolderSelector + "]");
74
75            // İlgili expand içeriğin yüksekliğini buluyoruz ve animasyon için stil özelliği olarak ekliyoruz.
76            var contentHeight = holderEl.offsetHeight;
77            contentEl.style.height = contentHeight + "px";
78
79            // Show content
80            if (!contentEl.classList.contains("expand-content-on")) {
81                sender.classList.add("expand-sender-on");
82                contentEl.classList.add("expand-content-on");
83
84                // Bir süre sonra height stil özelliğini kaldırıyoruz ve height-auto özelliği almasını sağlıyoruz.
85                setTimeout(function () { contentEl.style.removeProperty("height") }, props.Animation.height_duration_on);
86
87                // Özel bir js fonksiyonu belirtilmişse çağırıyoruz.
88                if (specs.hasOwnProperty("fn")) {
89                    var funcName = specs.fn;
90                    var funcParam = specs.fnParam;
91                    executeFunction(funcName, funcParam);
92                }
93                // End
94            }
95            // Hide content
96            else if (contentEl.classList.contains("expand-content-on")) {
97                sender.classList.remove("expand-sender-on");
98                contentEl.classList.remove("expand-content-on");
99                setTimeout(function () { contentEl.style.removeProperty("height") }, 10);
100            }
101        },
102
103        hide: function (arg) {
104
105        }
106    },
107
108    Helper: {
109        setListeners: function (arg) {
110            // Sayfadaki epxand içeriğini açan düğmelere çağırma fonksiyonu ekleniyor.
111            var props = Feux.Expand.Props;
112            var expandSenders;
113
114            if (arg && arg.hasOwnProperty("id")) {
115                // Init a specific container.
116                var container = document.getElementById(arg.id);
117                expandSenders = container.querySelectorAll("[" + props.expandSenderSelector + "]");
118            }
119            else {
120                var expandSenders = document.querySelectorAll("[" + props.expandSenderSelector + "]");
121            }
122
123            for (const expandSender of expandSenders) {
124                var specs = JSON.parse(expandSender.dataset.expand);
125                expandSender.dataset.expandId = specs.content;
126
127                expandSender.addEventListener("click", function (e) {
128                    e.preventDefault();
129                    expandSender.disabled = true;
130                    setTimeout(function () { expandSender.disabled = false; }, 500);
131                    Feux.Expand.Actions.showOrHide({ sender: expandSender });
132                });
133            }
134        }
135    }
136}
137
138// Functions to call as DOM ready
139
140Feux.Expand.ready();
141
142// End