https://micekorea.or.kr/weven_service/asset/js/bm2/com/toolbtn/ToolBtnMotion.js

1/**
2 * created by WEVEN on 2020-03-02
3 * 아래의 소스는 WEVEN에 저작권이 있으므로 무단 사용 및 재 배포를 금합니다.
4 */
5var ToolBtnMotion = function() {
6    var _this = this;
7    this.type = "ToolBtnMotion";
8    this.defaultMotionType = 'fade-up';
9    this.motionType = this.defaultMotionType;
10    this.motionTypeNode = document.querySelectorAll('[tool-motion-type]');
11    this.motionTypeCls = [];
12
13    for(let i=0; i< this.motionTypeNode.length; i++) {
14        this.motionTypeCls.push(this.motionTypeNode[i].getAttribute('tool-motion-type'));
15    }
16
17    if(isExpertMode) {
18        this.onBtnClick = function(e, prop) {
19            if(prop === "template") {
20                this.showTemplate();
21            }
22        }
23
24        this.onWindowDown = function(e){
25            if($(e.target).closest('#motionTemplate').length === 0) _this.hideTemplate();
26        }
27    } else {
28        this.addOption(new ToolOpMotion(), "motion");
29    }
30
31    this.onOptionChange = function(type, option) {
32
33        var currentTarget = this.target;
34        if( bm.toolManager.isMultiSelectMode ){
35            currentTarget = bm.toolManager.targetElementList.concat();
36        }
37        bm.toolManager.toolBtnEditBefore(this, currentTarget, HistoryType.EDITOR_MOTION);
38
39        $(currentTarget).removeClass("aos-init aos-animate"); // 이미 모션이 적용되어있는 경우 해당 클래스를 제거 해야 변경된 모션을 확인할 수 있음
40
41        if(type == "delete") {
42            $(currentTarget).removeAttr("data-aos");
43            $(currentTarget).removeAttr("data-aos-duration");
44            $(currentTarget).removeAttr("data-aos-delay");
45            $(currentTarget).removeAttr("data-aos-easing");
46            $('[tool-motion-type]').removeClass('active');
47            // 21.08.19 ymg - 삭제 버튼 클릭 시 옵션 닫음
48            $(this.btnList[0]).trigger('click');
49        } else {
50            let selectedMotionTemp = $('#motionTemplate').find('[tool-motion-type="'+option.type+'"]');
51            this.setSelectedMotion(selectedMotionTemp);
52
53            $(currentTarget).attr("data-aos", option.type);
54            $(currentTarget).attr("data-aos-duration", option.duration);
55            $(currentTarget).attr("data-aos-delay", option.delay);
56            $(currentTarget).attr("data-aos-easing", option.easing);
57
58            // 템플릿 모션 시작이 자연스럽게
59            $(currentTarget).css({opacity: 0, transition: 'opacity 0s'});
60            setTimeout(function(){
61                $(currentTarget).css({opacity: '', transition: ''});
62            }, option.duration + option.delay);
63
64            // 적용된 모션을 보여준 후에 초기화
65            setTimeout(function() {
66                $("#WEVEN_IFRAME")[0].contentWindow.AOS.init();
67            }, option.duration + option.delay);
68        }
69
70        bm.toolManager.toolBtnEditAfter(this, currentTarget, HistoryType.EDITOR_MOTION);
71    }
72
73    this.showTab = function() {
74        this.setMotion();
75    }
76
77    this.setMotion = function() {
78        var duration = parseFloat($(this.btnList['duration']).val());
79        var delay = parseFloat($(this.btnList['delay']).val());
80
81        var activeType = $('#motionTemplate').find('[tool-motion-type].active');
82
83        if(!this.motionType && activeType.length === 0) {
84            bm.toast(systemLangPack.getMessage('SLSATTB0077'), systemLangPack.getMessage('SLSATTB0078')); //종류를 선택해주세요., 등장모션
85            return;
86        }
87
88        if(!delay) {
89            bm.toast(systemLangPack.getMessage('SLSATTB0136'), systemLangPack.getMessage('SLSATTB0078')); //지연시간(초)을 입력해주세요., 등장모션
90            $(this.btnList['delay']).focus();
91            return;
92        }
93        if(!duration) {
94            bm.toast(systemLangPack.getMessage('SLSATTB0137'), systemLangPack.getMessage('SLSATTB0078')); //진행시간(초)을 입력해주세요., 등장모션
95            $(this.btnList['duration']).focus();
96            return;
97        }
98
99        if(activeType.length > 0){
100            this.motionType = activeType.attr('tool-motion-type');
101        }
102        var option = {type: this.motionType, duration: duration * 1000, delay: delay * 1000, easing: 'ease-in-cubic'};
103        this.onOptionChange('apply', option);
104    }
105
106    this.resetCls = function () {

107        this.motionTypeCls.forEach(className => {
108            this.btnList.exmotion.classList.remove(className); // 각 클래스 제거
109        });
110    }
111
112    this.showTemplate = function() {
113        $('#motionTemplate').show();
114    }
115
116    this.hideTemplate = function() {
117        $('#motionTemplate').hide();
118    }
119
120    this.setSelectedMotion = function(node) {
121        var _this = this;
122
123        function capitalizeFirstLetter(str) {
124            return str.charAt(0).toUpperCase() + str.slice(1);
125        }
126
127        var motionType = $(node).attr('tool-motion-type');
128        var motionTypeList = $('#motionTemplate').find('[tool-motion-type]');
129        motionTypeList.removeClass('active');
130        $(node).addClass('active');
131        _this.motionType = motionType;
132        $('#motionType').val(capitalizeFirstLetter(motionType.replace('-', ' ')));
133        _this.btnList['exmotion'].value = motionType;
134        var classes = $(_this.btnList['exmotion']).attr('class').split(' ');
135        classes = classes.filter(function(className) {
136            return !className.startsWith('fade-');
137        });
138
139        _this.resetCls();
140
141        $(_this.btnList['exmotion']).attr('class', classes.join(' '));
142        $(_this.btnList['exmotion']).addClass(motionType);
143    }
144}
145
146bm.extend(ToolBtnBase , ToolBtnMotion);
147
148ToolBtnMotion.prototype.setStyleBtn = function() {
149    var _this = this;
150
151    if( !this.target || this.target.length ) {
152        this.resetStyleBtn();
153        return false;
154    }
155
156    var optionElement;
157    if(isExpertMode) {
158        optionElement = $('[data-wv-toolset=ToolMotion]');
159    } else {
160        optionElement = this.optionList["motion"].element;
161    }
162
163    var motionType = $(this.target).attr('data-aos') ? $(this.target).attr('data-aos') : null;
164    var motionDuration = $(this.target).attr('data-aos-duration') ? parseFloat($(this.target).attr('data-aos-duration') / 1000) : 0.4;
165    var motionDelay = $(this.target).attr('data-aos-delay') ? parseFloat($(this.target).attr('data-aos-delay') / 1000) : 0.2;
166    /*var motionEasing = $(this.target).attr('data-aos-easing') ? $(this.target).attr('data-aos-easing') : null;*/
167
168    $('[tool-motion-type]').removeClass('active');
169    if(motionType){
170        optionElement.find('[tool-motion-type="' + motionType +'"]').addClass('active');
171        if(isExpertMode) bm.toolManager.toolList['ToolMotion'].openControl(null, true);
172    } else {
173        this.motionType = this.defaultMotionType;
174        if(isExpertMode) bm.toolManager.toolList['ToolMotion'].openControl(null, false);
175    }
176    
177    this.resetCls();
178    this.btnList.exmotion.value = motionType ? motionType : this.motionTypeCls[0];
179    this.btnList.exmotion.classList.add(motionType ? motionType : this.motionTypeCls[0]);
180    optionElement.find('#motionDuration').val(motionDuration);
181    optionElement.find('#motionDelay').val(motionDelay);
182    /*optionElement.find('#motionEasing').val(motionEasing);*/
183
184}
185
186ToolBtnMotion.prototype.resetStyleBtn = function() {
187    var _this = this;
188}
189
190ToolBtnMotion.prototype.addEvent = function() {
191    const _this = this;
192
193    if(isExpertMode) {
194        $(window).on("mousedown", this.onWindowDown);
195
196        $(this.btnList['duration']).on("keydown", function(e) {
197            if( e.keyCode == 13 ){
198                var duration = parseFloat(this.value);
199
200                if(!duration) {
201                    bm.toast(systemLangPack.getMessage('SLSATTB0138'), systemLangPack.getMessage('SLSATTB0078')); //진행시간을 입력해주세요., 등장모션
202                }
203
204                _this.setMotion();
205            }
206        });
207        $(this.btnList['duration']).on("keyup", function (e) {
208            var duration = $(this).val().replace('s', '');
209            if (bm.valid.isOnlyNumDot(duration)) {
210                if (duration > 3) {
211                    $(this).val('3s');
212                    bm.toast(systemLangPack.getMessage('SLSATTB0139'), systemLangPack.getMessage('SLSATTB0078')); //Duration(진행시간)은 최대 3초입니다., 등장모션
213                    return;
214                }
215                if (duration < 0) {
216                    $(this).val('0s');
217                    bm.toast(systemLangPack.getMessage('SLSATTB0140'), systemLangPack.getMessage('SLSATTB0078')); //Duration(진행시간)은 최소 0초입니다., 등장모션
218                    return;
219                }
220
221                if (e.keyCode == 13) {
222                    $(this).val(duration + 's');
223                }
224            } else {
225                $(this).focus();
226                $(this).val('0.4s');
227                bm.toast(systemLangPack.getMessage('SLSATTB0058'), systemLangPack.getMessage('SLSATTB0078')); //숫자를 입력해주세요., 등장모션
228                return; 
229            }
230        });
231
232        $(this.btnList['delay']).on("keydown", function(e) {
233            if( e.keyCode == 13 ){

234                var delay = parseFloat(this.value);
235
236                if(!delay) {
237                    bm.toast(systemLangPack.getMessage('SLSATTB0141'), systemLangPack.getMessage('SLSATTB0078')); //지연시간을 입력해주세요., 등장모션
238                    return;
239                }
240
241                _this.setMotion();
242            }
243        });
244        $(this.btnList['delay']).on("keyup", function (e) {
245            var delay = $(this).val().replace('s', '');
246            if (bm.valid.isOnlyNumDot(delay)) {
247                if (delay > 3) {
248                    $(this).val('3s');
249                    bm.toast(systemLangPack.getMessage('SLSATTB0142'), systemLangPack.getMessage('SLSATTB0078')); //Delay(지연시간)은 최대 3초입니다., 등장모션
250                    return;
251                }
252                if (delay < 0) {
253                    $(this).val('0s');
254                    bm.toast(systemLangPack.getMessage('SLSATTB0143'), systemLangPack.getMessage('SLSATTB0078')); //Delay(지연시간)은 최소 0초입니다., 등장모션
255                    return;
256                }
257
258                if (e.keyCode == 13) {
259                    $(this).val(delay + 's');
260                }
261            } else {
262                $(this).focus();
263                $(this).val('0.2s');
264                bm.toast(systemLangPack.getMessage('SLSATTB0058'), systemLangPack.getMessage('SLSATTB0078')); //숫자를 입력해주세요., 등장모션
265                return;
266            }
267        });
268
269        $('#motionTemplate').find('[tool-motion-type]').on('click', function (e) {
270            if ($(this).hasClass('active')) {
271                _this.onOptionChange("delete");
272                bm.toolManager.toolList['ToolMotion'].openControl(null, false);
273            } else {
274                _this.setSelectedMotion(this);
275                _this.setMotion();
276            }
277
278            _this.hideTemplate();
279        });
280    }
281}
282
283ToolBtnMotion.prototype.removeEvent = function() {
284    var _this = this;
285
286    if(isExpertMode) {
287        $(window).off("mousedown", this.onWindowDown);
288        $(this.btnList['duration']).off("keyup");
289        $(this.btnList['duration']).off("keydown");
290        $(this.btnList['delay']).off("keyup");
291        $(this.btnList['delay']).off("keydown");
292        $('#motionTemplate').find('[tool-motion-type]').off('click');
293    }
294}
295
296ToolBtnMotion.prototype.showOption = function(option, btn){
297    var _this = this;
298    ToolBtnBase.prototype.showOption.call(this, option, btn);
299
300    if(!isExpertMode) {
301        if(!bm.toolManager.isMultiSelectMode) { // 단일
302            _this.setStyleBtn();
303        } else { // 멀티
304            var optionElement = _this.optionList["motion"].element;
305            $('[tool-motion-type]').removeClass('active');
306            optionElement.find('#motionDuration').val(0.4);
307            optionElement.find('#motionDelay').val(0.2);
308        }
309    }
310}
311
312ToolBtnMotion.prototype.resetProperty = function() {
313    this.onOptionChange('delete');
314}