https://anapa-official.ru/simai/asset/simai.framework/sf4.master/core/js/sf-full.js

1/*!
2 * Waves v0.7.5
3 * http://fian.my.id/Waves
4 *
5 * Copyright 2014-2016 Alfiana E. Sibuea and other contributors
6 * Released under the MIT license
7 * https://github.com/fians/Waves/blob/master/LICENSE
8 */
9
10;
11(function (window, factory) {
12    'use strict';
13
14    // AMD. Register as an anonymous module.  Wrap in function so we have access
15    // to root via `this`.
16    if (typeof define === 'function' && define.amd) {
17        define([], function () {
18            return factory.apply(window);
19        });
20    }
21
22    // Node. Does not work with strict CommonJS, but only CommonJS-like
23    // environments that support module.exports, like Node.
24    else if (typeof exports === 'object') {
25        module.exports = factory.call(window);
26    }
27
28    // Browser globals.
29    else {
30        window.Waves = factory.call(window);
31    }
32})(typeof global === 'object' ? global : this, function () {
33    'use strict';
34
35    var Waves = Waves || {};
36    var $$ = document.querySelectorAll.bind(document);
37    var toString = Object.prototype.toString;
38    var isTouchAvailable = 'ontouchstart' in window;
39
40
41    // Find exact position of element
42    function isWindow(obj) {
43        return obj !== null && obj === obj.window;
44    }
45
46    function getWindow(elem) {
47        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
48    }
49
50    function isObject(value) {
51        var type = typeof value;
52        return type === 'function' || type === 'object' && !!value;
53    }
54
55    function isDOMNode(obj) {
56        return isObject(obj) && obj.nodeType > 0;
57    }
58
59    function getWavesElements(nodes) {
60        var stringRepr = toString.call(nodes);
61
62        if (stringRepr === '[object String]') {
63            return $$(nodes);
64        } else if (isObject(nodes) && /^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(stringRepr) && nodes.hasOwnProperty('length')) {
65            return nodes;
66        } else if (isDOMNode(nodes)) {
67            return [nodes];
68        }
69
70        return [];
71    }
72
73    function offset(elem) {
74        var docElem, win,
75            box = {
76                top: 0,
77                left: 0
78            },
79            doc = elem && elem.ownerDocument;
80
81        docElem = doc.documentElement;
82
83        if (typeof elem.getBoundingClientRect !== typeof undefined) {
84            box = elem.getBoundingClientRect();
85        }
86        win = getWindow(doc);
87        return {
88            top: box.top + win.pageYOffset - docElem.clientTop,
89            left: box.left + win.pageXOffset - docElem.clientLeft
90        };
91    }
92
93    function convertStyle(styleObj) {
94        var style = '';
95
96        for (var prop in styleObj) {
97            if (styleObj.hasOwnProperty(prop)) {
98                style += (prop + ':' + styleObj[prop] + ';');
99            }
100        }
101
102        return style;
103    }
104
105    var Effect = {
106
107        // Effect duration
108        duration: 750,
109
110        // Effect delay (check for scroll before showing effect)
111        delay: 200,
112
113        show: function (e, element, velocity) {
114
115            // Disable right click
116            if (e.button === 2) {
117                return false;
118            }
119
120            element = element || this;
121
122            // Create ripple
123            var ripple = document.createElement('div');
124            ripple.className = 'waves-ripple waves-rippling';
125            element.appendChild(ripple);
126
127            // Get click coordinate and element width
128            var pos = offset(element);
129            var relativeY = 0;
130            var relativeX = 0;
131            // Support for touch devices
132            if ('touches' in e && e.touches.length) {
133                relativeY = (e.touches[0].pageY - pos.top);
134                relativeX = (e.touches[0].pageX - pos.left);
135            }
136            //Normal case
137            else {
138                relativeY = (e.pageY - pos.top);
139                relativeX = (e.pageX - pos.left);
140            }
141            // Support for synthetic events
142            relativeX = relativeX >= 0 ? relativeX : 0;
143            relativeY = relativeY >= 0 ? relativeY : 0;
144
145            var scale = 'scale(' + ((element.clientWidth / 100) * 3) + ')';
146            var translate = 'translate(0,0)';
147
148            if (velocity) {
149                translate = 'translate(' + (velocity.x) + 'px, ' + (velocity.y) + 'px)';
150            }
151
152            // Attach data to element
153            ripple.setAttribute('data-hold', Date.now());
154            ripple.setAttribute('data-x', relativeX);
155            ripple.setAttribute('data-y', relativeY);
156            ripple.setAttribute('data-scale', scale);
157            ripple.setAttribute('data-translate', translate);
158
159            // Set ripple position
160            var rippleStyle = {
161                top: relativeY + 'px',
162                left: relativeX + 'px'
163            };
164
165            ripple.classList.add('waves-notransition');
166            ripple.setAttribute('style', convertStyle(rippleStyle));
167            ripple.classList.remove('waves-notransition');
168
169            // Scale the ripple
170            rippleStyle['-webkit-transform'] = scale + ' ' + translate;
171            rippleStyle['-moz-transform'] = scale + ' ' + translate;
172            rippleStyle['-ms-transform'] = scale + ' ' + translate;
173            rippleStyle['-o-transform'] = scale + ' ' + translate;
174            rippleStyle.transform = scale + ' ' + translate;
175            rippleStyle.opacity = '1';
176
177            var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
178            rippleStyle['-webkit-transition-duration'] = duration + 'ms';
179            rippleStyle['-moz-transition-duration'] = duration + 'ms';
180            rippleStyle['-o-transition-duration'] = duration + 'ms';
181            rippleStyle['transition-duration'] = duration + 'ms';
182
183            ripple.setAttribute('style', convertStyle(rippleStyle));
184        },
185
186        hide: function (e, element) {
187            element = element || this;
188
189            var ripples = element.getElementsByClassName('waves-rippling');
190
191            for (var i = 0, len = ripples.length; i < len; i++) {
192                removeRipple(e, element, ripples[i]);
193            }
194        }
195    };
196
197    /**
198     * Collection of wrapper for HTML element that only have single tag
199     * like <input> and <img>
200     */
201    var TagWrapper = {
202
203        // Wrap <input> tag so it can perform the effect
204        input: function (element) {
205
206            /*var parent = element.parentNode;
207
208            // If input already have parent just pass through
209            if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
210                return;
211            }
212
213            // Put element class and style to the specified parent
214            var wrapper = document.createElement('i');
215            wrapper.className = element.className + ' waves-input-wrapper';
216            element.className = 'waves-button-input';
217
218            // Put element as child
219            parent.replaceChild(wrapper, element);
220            wrapper.appendChild(element);
221
222            // Apply element color and background color to wrapper
223            var elementStyle = window.getComputedStyle(element, null);
224            var color = elementStyle.color;
225            var backgroundColor = elementStyle.backgroundColor;
226
227            wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
228            element.setAttribute('style', 'background-color:rgba(0,0,0,0);');*/
229
230        },
231
232        // Wrap <img> tag so it can perform the effect
233        img: function (element) {
234
235            var parent = element.parentNode;
236
237            // If input already have parent just pass through
238            if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
239                return;
240            }
241
242            // Put element as child
243            var wrapper = document.createElement('i');
244            parent.replaceChild(wrapper, element);
245            wrapper.appendChild(element);
246
247        }
248    };
249
250    /**
251     * Hide the effect and remove the ripple. Must be
252     * a separate function to pass the JSLint...
253     */
254    function removeRipple(e, el, ripple) {
255
256        // Check if the ripple still exist
257        if (!ripple) {
258            return;
259        }
260
261        ripple.classList.remove('waves-rippling');
262
263        var relativeX = ripple.getAttribute('data-x');
264        var relativeY = ripple.getAttribute('data-y');
265        var scale = ripple.getAttribute('data-scale');
266        var translate = ripple.getAttribute('data-translate');
267
268        // Get delay beetween mousedown and mouse leave
269        var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
270        var delay = 350 - diff;
271
272        if (delay < 0) {
273            delay = 0;
274        }
275
276        if (e.type === 'mousemove') {
277            delay = 150;
278        }
279
280        // Fade out ripple after delay
281        var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
282
283        setTimeout(function () {
284
285            var style = {
286                top: relativeY + 'px',
287                left: relativeX + 'px',
288                opacity: '0',
289
290                // Duration
291                '-webkit-transition-duration': duration + 'ms',
292                '-moz-transition-duration': duration + 'ms',
293                '-o-transition-duration': duration + 'ms',
294                'transition-duration': duration + 'ms',
295                '-webkit-transform': scale + ' ' + translate,
296                '-moz-transform': scale + ' ' + translate,
297                '-ms-transform': scale + ' ' + translate,
298                '-o-transform': scale + ' ' + translate,
299                'transform': scale + ' ' + translate
300            };
301
302            ripple.setAttribute('style', convertStyle(style));
303
304            setTimeout(function () {
305                try {
306                    el.removeChild(ripple);
307                } catch (e) {
308                    return false;
309                }
310            }, duration);
311
312        }, delay);
313    }
314
315
316    /**
317     * Disable mousedown event for 500ms during and after touch
318     */
319    var TouchHandler = {
320
321        /* uses an integer rather than bool so there's no issues with
322         * needing to clear timeouts if another touch event occurred
323         * within the 500ms. Cannot mouseup between touchstart and
324         * touchend, nor in the 500ms after touchend. */
325        touches: 0,
326
327        allowEvent: function (e) {
328
329            var allow = true;
330
331            if (/^(mousedown|mousemove)$/.test(e.type) && TouchHandler.touches) {
332                allow = false;
333            }
334
335            return allow;
336        },
337        registerEvent: function (e) {
338            var eType = e.type;
339
340            if (eType === 'touchstart') {
341
342                TouchHandler.touches += 1; // push
343
344            } else if (/^(touchend|touchcancel)$/.test(eType)) {
345
346                setTimeout(function () {
347                    if (TouchHandler.touches) {
348                        TouchHandler.touches -= 1; // pop after 500ms
349                    }
350                }, 500);
351
352            }
353        }
354    };
355
356
357    /**
358     * Delegated click handler for .waves-effect element.
359     * returns null when .waves-effect element not in "click tree"
360     */
361    function getWavesEffectElement(e) {
362
363        if (TouchHandler.allowEvent(e) === false) {
364            return null;
365        }
366
367        var element = null;
368        var target = e.target || e.srcElement;
369
370        while (target.parentElement !== null) {
371            if (target.classList.contains('waves-effect') && (!(target instanceof SVGElement))) {
372                element = target;
373                break;
374            }
375            target = target.parentElement;
376        }
377
378        return element;
379    }
380
381    /**
382     * Bubble the click and show effect if .waves-effect elem was found
383     */
384    function showEffect(e) {
385
386        // Disable effect if element has "disabled" property on it
387        // In some cases, the event is not triggered by the current element
388        // if (e.target.getAttribute('disabled') !== null) {
389        //     return;
390        // }
391
392        var element = getWavesEffectElement(e);
393
394        if (element !== null) {
395
396            // Make it sure the element has either disabled property, disabled attribute or 'disabled' class
397            if (element.disabled || element.getAttribute('disabled') || element.classList.contains('disabled')) {
398                return;
399            }
400
401            TouchHandler.registerEvent(e);
402
403            if (e.type === 'touchstart' && Effect.delay) {
404
405                var hidden = false;
406
407                var timer = setTimeout(function () {
408                    timer = null;

409                    Effect.show(e, element);
410                }, Effect.delay);
411
412                var hideEffect = function (hideEvent) {
413
414                    // if touch hasn't moved, and effect not yet started: start effect now
415                    if (timer) {
416                        clearTimeout(timer);
417                        timer = null;
418                        Effect.show(e, element);
419                    }
420                    if (!hidden) {
421                        hidden = true;
422                        Effect.hide(hideEvent, element);
423                    }
424                };
425
426                var touchMove = function (moveEvent) {
427                    if (timer) {
428                        clearTimeout(timer);
429                        timer = null;
430                    }
431                    hideEffect(moveEvent);
432                };
433
434                element.addEventListener('touchmove', touchMove, false);
435                element.addEventListener('touchend', hideEffect, false);
436                element.addEventListener('touchcancel', hideEffect, false);
437
438            } else {
439

440                Effect.show(e, element);
441
442                if (isTouchAvailable) {
443                    element.addEventListener('touchend', Effect.hide, false);
444                    element.addEventListener('touchcancel', Effect.hide, false);
445                }
446
447                element.addEventListener('mouseup', Effect.hide, false);
448                element.addEventListener('mouseleave', Effect.hide, false);
449            }
450        }
451    }
452
453    Waves.init = function (options) {
454        var body = document.body;
455
456        options = options || {};
457
458        if ('duration' in options) {
459            Effect.duration = options.duration;
460        }
461
462        if ('delay' in options) {
463            Effect.delay = options.delay;
464        }
465
466        if (isTouchAvailable) {
467            body.addEventListener('touchstart', showEffect, false);
468            body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
469            body.addEventListener('touchend', TouchHandler.registerEvent, false);
470        }
471
472        body.addEventListener('mousedown', showEffect, false);
473    };
474
475
476    /**
477     * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
478     * waves classes to a set of elements. Set drag to true if the ripple mouseover
479     * or skimming effect should be applied to the elements.
480     */
481    Waves.attach = function (elements, classes) {
482
483        elements = getWavesElements(elements);
484
485        if (toString.call(classes) === '[object Array]') {
486            classes = classes.join(' ');
487        }
488
489        classes = classes ? ' ' + classes : '';
490
491        var element, tagName;
492
493        for (var i = 0, len = elements.length; i < len; i++) {
494
495            element = elements[i];
496            tagName = element.tagName.toLowerCase();
497
498            if (['input', 'img'].indexOf(tagName) !== -1) {
499                TagWrapper[tagName](element);
500                element = element.parentElement;
501            }
502
503            if (element.className.indexOf('waves-effect') === -1) {
504                element.className += ' waves-effect' + classes;
505            }
506        }
507    };
508
509
510    /**
511     * Cause a ripple to appear in an element via code.
512     */
513    Waves.ripple = function (elements, options) {
514        elements = getWavesElements(elements);
515        var elementsLen = elements.length;
516
517        options = options || {};
518        options.wait = options.wait || 0;
519        options.position = options.position || null; // default = centre of element
520
521
522        if (elementsLen) {
523            var element, pos, off, centre = {},
524                i = 0;
525            var mousedown = {
526                type: 'mousedown',
527                button: 1
528            };
529            var hideRipple = function (mouseup, element) {
530                return function () {
531                    Effect.hide(mouseup, element);
532                };
533            };
534
535            for (; i < elementsLen; i++) {
536                element = elements[i];
537                pos = options.position || {
538                    x: element.clientWidth / 2,
539                    y: element.clientHeight / 2
540                };
541
542                off = offset(element);
543                centre.x = off.left + pos.x;
544                centre.y = off.top + pos.y;
545
546                mousedown.pageX = centre.x;
547                mousedown.pageY = centre.y;
548
549                Effect.show(mousedown, element);
550
551                if (options.wait >= 0 && options.wait !== null) {
552                    var mouseup = {
553                        type: 'mouseup',
554                        button: 1
555                    };
556
557                    setTimeout(hideRipple(mouseup, element), options.wait);
558                }
559            }
560        }
561    };
562
563    /**
564     * Remove all ripples from an element.
565     */
566    Waves.calm = function (elements) {
567        elements = getWavesElements(elements);
568        var mouseup = {
569            type: 'mouseup',
570            button: 1
571        };
572
573        for (var i = 0, len = elements.length; i < len; i++) {

574            Effect.hide(mouseup, elements[i]);
575        }
576    };
577
578    /**
579     * Deprecated API fallback
580     */
581    Waves.displayEffect = function (options) {
582        console.error('Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect');
583        Waves.init(options);
584    };
585
586    return Waves;
587});
588window.onload = function() {
589    //Initialization
590    Waves.attach('.wave', ['waves-effect']);	
591	Waves.attach('.btn-flat', ['waves-effect']);
592    Waves.attach('.pagination .page-item .page-link', ['waves-effect']);
593    Waves.attach('.btn', ['waves-light']);
594    Waves.attach('.view .mask', ['waves-light']);
595    Waves.attach('.wave-light', ['waves-light']);
596    Waves.attach('.navbar-nav a, .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']);
597    Waves.attach('.navbar-brand', ['waves-light']);
598    Waves.attach('.pager li a', ['waves-light']);
599    Waves.init();
600}
601
602document.addEventListener('DOMContentLoaded', function() {
603    //Initialization
604    Waves.attach('.wave', ['waves-effect']);	
605	Waves.attach('.btn-flat', ['waves-effect']);
606    Waves.attach('.pagination .page-item .page-link', ['waves-effect']);
607    Waves.attach('.btn', ['waves-light']);
608    Waves.attach('.view .mask', ['waves-light']);
609    Waves.attach('.wave-light', ['waves-light']);
610    Waves.attach('.navbar-nav a, .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']);
611    Waves.attach('.navbar-brand', ['waves-light']);
612    Waves.attach('.pager li a', ['waves-light']);
613    Waves.init();
614});
615var WOW = function (properties) {
616
617  var config = properties || {};
618
619  this._boxClass = config.boxClass || 'wow';
620  this._animateClass = config.animateClass || 'animated',
621  this._offset = config.offset || 0,
622  this._mobile = (config.mobile === undefined) ? true : false;
623  this._live = (config.live === undefined) ? true : false;
624
625  this._seoFixEnabled = (config.seoFixEnabled === undefined) ? true : false;
626  this._animationDuration = config.animationDuration || "1s";
627  this._animationDelay = config.animationDelay || "0s";
628
629  this._initStorageVariables();
630
631};
632
633WOW.prototype._initStorageVariables = function () {
634
635  this._animation = [];
636  this._boxes = [];
637  this._cleanupBoxListener = [];
638  this._cleanupBoxVisibleListener = [];
639
640};
641
642WOW.prototype.init = function () {
643
644  if (!this._mobile && this._isMobile()) {
645    return;
646  }
647
648  this._eachBoxInit(this._prepareBox.bind(this));
649
650  this._startWow();
651
652};
653
654WOW.prototype._isMobile = function () {
655  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
656};
657
658
659WOW.prototype._eachBoxInit = function (each) {
660
661  var boxes = document.getElementsByClassName(this._boxClass);
662
663  for (var i = 0; i < boxes.length; i++) {
664
665    (function (i) {
666      each(boxes[i], i);
667    })(i);
668
669  }
670
671};
672
673WOW.prototype._prepareBox = function (box) {
674
675  var index = this._boxes.push(box) - 1;
676  this._animation[index] = {
677    animationName: box.style.animationName || window.getComputedStyle(box, null).animationName
678  };
679  box.style.animationName = 'none';
680  box.style.visibility = 'hidden';
681
682};
683
684WOW.prototype._startWow = function () {
685
686  if (this._live) {
687    this._checkForChanges();
688  }
689  if (this._scrollY() === 0 && this._seoFixEnabled) {
690    this._seoFix();
691  }
692
693  this._appearInView();
694
695  this._scrollHandler();
696
697};
698
699WOW.prototype._scrollY = function () {
700
701  if (this._isInt(window.pageYOffset)) {
702    return window.pageYOffset;
703  }
704  if (this._isInt(document.documentElement.scrollTop)) {
705    return document.documentElement.scrollTop;
706  }
707  if (this._isInt(document.body.scrollTop)) {
708    return document.body.scrollTop;
709  }
710
711};
712
713WOW.prototype._isInt = function(value) {
714  return typeof value === 'number' && 
715    isFinite(value) && 
716    Math.floor(value) === value;
717};
718
719WOW.prototype._seoFix = function () {
720
721  this._showNotInView();
722
723};
724
725
726WOW.prototype._appear = function (box, i) {
727
728  var animationState = box.style.animationPlayState || box.style.WebkitAnimationPlayState;
729
730  if (box.className.indexOf(this._animateClass) === -1) {
731
732    delete this._boxes[i];
733
734    this._onStartAnimation(box, i);
735    this._onStopAnimation(box, i);
736
737    this._animate(box, i, this._getAnimationConfig(box));
738
739  }
740
741};
742
743WOW.prototype._onStartAnimation = function (box, i) {
744  
745  this._cleanupBoxVisibleListener[i] = this._boxVisible.bind(this, box, i);
746    
747  box.addEventListener('animationstart', this._cleanupBoxVisibleListener[i]);
748  box.addEventListener('webkitAnimationStart', this._cleanupBoxVisibleListener[i]);
749
750};
751
752WOW.prototype._onStopAnimation = function (box, i) {
753
754  this._cleanupBoxListener[i] = this._cleanupBox.bind(this, box, i);
755
756  box.addEventListener('animationend', this._cleanupBoxListener[i]);
757  box.addEventListener('webkitAnimationEnd', this._cleanupBoxListener[i]);
758
759};
760
761WOW.prototype._getAnimationConfig = function (box) {
762
763  return {
764
765    delay: this._getDelay(box),
766    duration: this._getDuration(box),
767    iterations: this._getIterations(box)
768      
769  }
770
771};
772
773WOW.prototype._getDelay = function (box) {
774
775  return box.getAttribute('data-wow-delay') || this._animationDelay;
776
777};
778
779WOW.prototype._getDuration = function (box) {
780
781  return box.getAttribute('data-wow-duration') || this._animationDuration;
782
783};
784
785WOW.prototype._getIterations = function (box) {
786
787  return box.getAttribute('data-wow-iteration') || 
788    box.style.animationIterationCount || 
789    window.getComputedStyle(box, null).animationIterationCount || 
790    1;
791
792};
793
794WOW.prototype._animate = function (box, i, config) {
795
796  box.style.animationDelay = config.delay;
797  box.style.animationDuration = config.duration;
798  box.style.animationIterationCount = config.iterations;
799  box.style.animationName = this._animation[i].animationName;
800  box.className += (' ' + this._animateClass);
801
802};
803
804WOW.prototype._boxVisible = function (box, i) {
805
806  box.style.visibility = 'visible';
807
808  box.removeEventListener('animationstart', this._cleanupBoxVisibleListener[i]);
809  box.removeEventListener('webkitAnimationStart', this._cleanupBoxVisibleListener[i]);
810
811  delete this._cleanupBoxVisibleListener[i];
812
813};
814
815WOW.prototype._cleanupBox = function (box, i) {
816
817  box.style.animationDelay = '';
818  box.style.animationDuration = '';
819  box.style.animationIterationCount = '';
820  box.style.animationName = 'none';
821
822  this._cleanupClass(box);
823
824  box.removeEventListener('animationend', this._cleanupBoxListener[i]);
825  box.removeEventListener('webkitAnimationEnd', this._cleanupBoxListener[i]);
826
827  delete this._cleanupBoxListener[i];
828
829};
830
831WOW.prototype._cleanupClass = function (box) {
832
833  var classArray = box.className.split(' ');
834  var animateIndex = classArray.indexOf(this._animateClass);
835
836  if (animateIndex !== -1) {
837
838    classArray.splice(animateIndex, 1);
839    box.className = classArray.join(' ');
840    
841  }
842
843};
844

845WOW.prototype._eachBox = function (each) {
846
847  for (var i = 0; i < this._boxes.length; i++) {
848
849    var box = this._boxes[i];
850
851    if (box) {
852
853      (function (i) {
854         each(this._boxes[i], i);
855      }.bind(this))(i);
856      
857    }
858
859  }
860
861};
862
863WOW.prototype._scrollHandler = function () {
864
865  this._hideSeoFixListener = this._hideSeoFix.bind(this);
866
867  window.addEventListener('scroll', this._hideSeoFixListener);
868  window.addEventListener('scroll', this._appearInView.bind(this));
869  window.addEventListener('resize', this._appearInView.bind(this));
870
871};
872
873WOW.prototype._hideSeoFix = function () {
874  
875  window.removeEventListener('scroll', this._hideSeoFixListener);
876  delete this._hideSeoFixListener;
877
878  this._eachBox(function (box, i) {
879
880    if (!this._isInView(box)) {
881      box.style.visibility = "hidden";
882    }
883
884  }.bind(this));
885
886};
887
888WOW.prototype._appearInView = function () {
889
890  this._eachBox(function (box, i) {
891    this._animateBox(box, i);
892  }.bind(this));
893
894};
895
896WOW.prototype._animateBox = function (box, i) {
897
898  if (this._isInView(box)) {
899    delete this._boxes[i];
900    this._appear(box, i);
901  }
902
903};
904
905WOW.prototype._showNotInView = function () {
906
907  this._eachBox(function (box, i) {
908    this._makeVisible(box, i);
909  }.bind(this));
910
911};
912
913WOW.prototype._makeVisible = function (box, i) {
914
915  if (!this._isInView(box)) {
916    this._boxes[i].style.visibility = 'visible';
917  }
918
919};
920
921WOW.prototype._isInView = function (box) {
922
923  var offset = box.getAttribute('data-wow-offset') || this._offset;
924  var boxTopOffset = this._getElementOffset(box);
925
926  var triggerOffset = boxTopOffset + ~~offset;
927
928  var bottomPosition = window.innerHeight + this._scrollY();
929
930  return triggerOffset <= bottomPosition && (triggerOffset === 0 ? 10 : triggerOffset) >= this._scrollY();
931
932};
933
934WOW.prototype._getElementOffset = function (box) {
935
936  var clientRect = box.getBoundingClientRect();
937
938  var body = document.body;
939
940  var scrollTop = this._scrollY();
941  var clientTop = document.documentElement.clientTop || body.clientTop || 0;
942
943  var top  = clientRect.top +  scrollTop - clientTop;
944
945  return Math.round(top);
946
947};
948
949WOW.prototype._checkForChanges = function () {
950
951  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
952
953  var observer = new MutationObserver(this._mutations.bind(this));
954
955  var config = {
956    childList: true,
957    subtree: true
958  };
959  window.onload = function() {
960    observer.observe(document.body, config);
961  }
962};
963
964WOW.prototype._mutations = function (mutations) {
965  
966  mutations.forEach(function (mutation) {
967
968    for (var i = 0; i < mutation.addedNodes.length; i++) {
969      this.doSync(mutation.addedNodes[i]);
970    }
971
972  }.bind(this));
973
974};
975
976WOW.prototype.doSync = function (node) {
977  if (typeof node.className == "string") {
978    var classes = node.className.split(' ');
979    if (classes.indexOf(this._boxClass) !== -1) {
980      this._prepareBox(node);
981    }
982  }
983};
984
985window.addEventListener("DOMContentLoaded", function(e) {
986  new WOW().init();
987});
988$(document).on('lazybeforeunveil', function(e){
989    var ajax = $(e.target).data('ajax');
990    if(ajax){
991        $(e.target).load(ajax);
992    }
993});
994try {
995    window.SF = SF || {};
996} catch (error) {
997    window.SF = {};    
998}
999/*============================= */
1000
1001SF.Methods = function() {
1002
1003    /**
1004     * extend() - 
1005     * @param {*} defaults 
1006     * @param {*} options 
1007     */
1008    this.extend = function(defaults, options) {
1009        for(var key in options)
1010            if(options.hasOwnProperty(key))
1011                if(Object.prototype.toString.call(options[key]) == '[object Object]')
1012                    this.extend(defaults[key], options[key]);
1013                else defaults[key] = options[key];
1014        return defaults;
1015    }
1016
1017    /**
1018     * Поиск наивысшего z-index в документе
1019     */
1020    this.topZIndex = function() {
1021        var e = document.querySelectorAll('*'),
1022            z = 1,
1023            style = '';
1024        for(var k = 0; k < e.length; k++) {
1025            style = getComputedStyle(e[k]);
1026            if(parseInt(style.zIndex) > z)
1027                z = parseInt(style.zIndex);
1028        }
1029        return z;
1030    }
1031
1032    this.topZIndexElement = function(el) {
1033        var z = 1,
1034            e = false,
1035            style = '';
1036        for(var k = 0; k < el.length; k++) {
1037            style = getComputedStyle(el[k]);
1038            if(parseInt(style.zIndex) > z) {
1039                z = parseInt(style.zIndex);
1040                e = el[k];
1041            }
1042        }
1043        return e;
1044    }
1045
1046    /**
1047     * 
1048     */
1049    this.includeScript = function(path) {
1050        var s = document.createElement('script');
1051        s.src = path;
1052        document.querySelector('head').appendChild(s);
1053    }
1054    
1055    this.addcss = function(path) {
1056        var l = document.createElement('link');
1057        l.rel = 'stylesheet';
1058        l.href = path;
1059        document.querySelector('head').appendChild(l);
1060        return l;
1061    }
1062
1063    /**
1064     * 
1065     */
1066    this.cookies = {
1067        /**
1068         * get() - получить куки
1069         */
1070        get: function(name) {
1071            if(document.cookie.length > 0) {
1072                var start = document.cookie.indexOf(name + '=');
1073                if(start != -1) {
1074                    start = start + name.length + 1;
1075                    var end = document.cookie.indexOf(';', start);
1076                    if(end == -1) end = document.cookie.length;
1077                    return encodeURI(document.cookie.substring(start, end));
1078                }
1079            }
1080            return '';
1081        },
1082        /**
1083         * set() - установить куки
1084         */
1085        set: function(name, value, expiredays) {
1086            var exdate = new Date();
1087            exdate.setDate(exdate.getDate() + expiredays);
1088            document.cookie = name + '=' + decodeURI(value) +
1089                ((expiredays == null) ? '' : '; expires=' + exdate.toUTCString()) + '; path=/';
1090        },
1091        /**
1092         * check() - Проверка установлен ли параметр куки
1093         */
1094        check: function(name) {
1095            name = this.cookie.get(name);
1096            if(name != null && name != '') return true;
1097            else return false;

1098        }
1099    }
1100
1101
1102    this.bytelength = function(str) {
1103        var count = 0,
1104            ch = 0;
1105        for(var k = 0; k < str.length; k++) {
1106            ch = str.charCodeAt(k);
1107            if(ch <= 127) count++;
1108            else if(ch <= 2047) count += 2;
1109            else if(ch <= 65535) count += 3;
1110            else if(ch <= 2097151) count += 4;
1111            else if(ch <= 67108863) count += 5;
1112            else count += 6;
1113        }
1114        return count;
1115    }
1116
1117    this.bytelengthlimit = function(str, limit) {
1118        var count = 0,
1119            ch = 0,
1120            strlimit = '',
1121            flaglimit = false,
1122            result = [];
1123        for(var k = 0; k < str.length; k++) {
1124            ch = str.charCodeAt(k);
1125            if(count <= limit) {
1126                flaglimit = true;
1127            }
1128            strlimit += str[k];
1129            if(ch <= 127) count++;
1130            else if(ch <= 2047) count += 2;
1131            else if(ch <= 65535) count += 3;
1132            else if(ch <= 2097151) count += 4;
1133            else if(ch <= 67108863) count += 5;
1134            else count += 6;
1135
1136            if((count > limit && flaglimit) || (flaglimit && k == str.length - 1)) {
1137                //console.log(strlimit)
1138                result.push(strlimit);
1139                strlimit = '';
1140                count = 0;
1141                flaglimit = false;
1142            }
1143        }
1144        //console.log(result.length)
1145        if(result.length > 0) {
1146            //result.push(strlimit);
1147            return result;
1148        } else {
1149            result.push(strlimit);
1150            return result;
1151        }
1152    }
1153}
1154SF.send = function(event, element) {
1155    if(document.createEvent){
1156        var e = document.createEvent('Events');
1157        e.initEvent(event, true, false);
1158    }
1159    else if(document.createEventObject()) {
1160        var e = document.createEventObject();
1161    }
1162    else return;
1163
1164    if(element.dispatchEvent)
1165        element.dispatchEvent(e);
1166    else if(element.fireEvent) element.fireEvent(event, e);
1167}
1168
1169SF.receive = function(event, el, handler) {
1170    if(window.addEventListener)
1171        el.addEventListener(event, handler, false);
1172    else if(window.attachEvent)
1173        el.attachEvent(event, handler);
1174}
1175
1176/*============================= */
1177SF.Events = function() {
1178
1179    /**
1180     * Метод send() - Отправляет событие
1181     * @param {*} event 
1182     */
1183    this.send = function(event, element) {
1184        if(document.createEvent){
1185            var e = document.createEvent('Events');
1186            e.initEvent(event, true, false);
1187        }
1188        else if(document.createEventObject()) {
1189            var e = document.createEventObject();
1190        }
1191        else return;
1192    
1193        if(element.dispatchEvent)
1194            element.dispatchEvent(e);
1195        else if(element.fireEvent) element.fireEvent(event, e);
1196    }
1197
1198    /**
1199     * Метод receive() - регистрирует обработчик события
1200     * @param {*} event 
1201     * @param {*} handler 
1202     */
1203    this.receive = function(event, el, handler) {
1204        if(window.addEventListener)
1205            el.addEventListener(event, handler, false);
1206        else if(window.attachEvent)
1207            el.attachEvent(event, handler);
1208    }
1209
1210    /**
1211     * hotkey() - функция обработки нажатия нескольких клавиш и выполнения фукций обработчика
1212     * @param {*} handler - функтция обработчик события нажатия клавиш
1213     * @param {*} далее может следовать любое количество кодов сочетания клавиш в
1214     * кавычках ("17")
1215     */
1216    this.hotkey = function(handler) {
1217        var codes = [].slice.call(arguments, 1),
1218            pressed = {}; 
1219        document.addEventListener('keydown', function(e) {
1220            e = e || window.event;
1221            pressed[e.keyCode] = true;
1222            for (var i = 0; i < codes.length; i++)
1223                if (!pressed[codes[i]]) return;
1224            pressed = {};
1225            handler();
1226        });
1227        document.addEventListener('keyup',function(e) {
1228            e = e || window.event;
1229            delete pressed[e.keyCode];
1230        });
1231    }
1232
1233    /**
1234     * quickkey() - функция обработки нажатия клавиши и выполнения функции обработчика
1235     * @param {*} handler - функция обработчик события нажатия клавиши 
1236     * @param {*} key - клавиша после нажатия которой срабатывает функция обрботчик
1237     */
1238    this.quickkey = function(handler, key) {
1239        addEventListener('keydown', function(e) {
1240            if(e.keyCode == key)
1241                handler(e);
1242        });
1243    }
1244
1245    SF.Methods.call(this);
1246}
1247
1248SF.Parameters = function() {
1249    /**
1250     * newparams - генерация новых параметров
1251     */
1252    this.newparams = function() {
1253        return this.params;
1254    }
1255    
1256    /**
1257     * Обновление существующих параметров
1258     * @param {*} el 
1259     */
1260    this.updateparams = function(el) {
1261        var par = el.params,
1262            mod = par.modifier,
1263            data = par.data;
1264        for(var key in mod) {
1265            mod[key] = el.hasAttribute(data[key]) ? mod[key] + ' ' + el.getAttribute(data[key]) : mod[key];
1266        }
1267    }
1268
1269// ================ CONSTRUCTOR ================ //
1270    this.params = {
1271        ajax: {
1272            events: {
1273                init: 'ajaxinit',
1274                load: 'endcontentload',
1275            },
1276            method: 'GET',
1277            type: 'html',
1278            timeout: 0,
1279            async: true,
1280            emulateOnload: true,
1281            cache: true
1282        },
1283        controller: {
1284
1285        },
1286        search: {
1287    
1288        },
1289        provider: {
1290            
1291        },
1292        blocks: {
1293            special: {
1294                cookies: {
1295                    specialfont: 'default',
1296                    specialstate: 'off',
1297                    specialcolor: 'specialwhite',
1298                    specialkegl: '16',
1299                    specialinterval: '1.0',
1300                    specialkerning: 'normal',
1301                    specialimage: 'off',
1302                    specialup: 'down',
1303                    specialsound: 'off',
1304                },
1305                events: {
1306                    init: 'specialinit',
1307                    create: 'specialcreate',
1308                    open: 'specialopen',
1309                    close: 'specialoff',
1310                    up: 'specialup',
1311                    soundon: 'specialsoundon',
1312                    soundoff: 'specialsoundoff',
1313                    defaultsetting: 'specialdefaultsetting',
1314                // События панели Special
1315                    fontsans: 'specialfontsans',
1316                    fontserif: 'specialfontserif',
1317                    fontmono: 'specialfontmono',
1318                    keglmore: 'specialkeglmore',
1319                    keglless: 'specialkeglless',
1320                    intervalone: 'specialintervalone',
1321                    intervalhalf: 'specialintervalhalf',
1322                    intervaltwo: 'specialintervaltwo',
1323                    imageoff: 'specialimageoff',
1324                    imageblack: 'specialimageblack',
1325                    imagecolor: 'specialimagecolor',
1326                    imagecolor: 'specialimagecolor',
1327                    colorwhite: 'specialcolorwhite',
1328                    colorblack: 'specialcolorblack',
1329                    coloryellow: 'specialcoloryellow',
1330                    colorblue: 'specialcolorblue',
1331                    colorgreen: 'specialcolorgreen',
1332                    kerningnormal: 'specialkerningnormal',
1333                    kerningmiddle: 'specialkerningmiddle',
1334                    kerningbig: 'specialkerningbig',
1335                },
1336                data: {
1337                    init: 'sf-special',
1338                    panel: 'sf-special-panel',
1339                    kegl: 'sf-special-kegl',
1340                    interval: 'sf-special-interval',
1341                    color: 'sf-special-color',
1342                    img: 'sf-special-img',
1343                    on: 'sf-special-on',
1344                },
1345                attributes: {
1346
1347                },
1348                modifier: {
1349                    panel: 'special-panel d-flex align-items-start justify-content-center flex-wrap flex-row w-100 bb-1',
1350                    font: 'd-flex align-items-center justify-content-center flex-column p-3',
1351                    kegl: 'd-flex align-items-center justify-content-center flex-column p-3',
1352                    interval: "d-flex align-items-center justify-content-center flex-column p-3",
1353                    kerning: 'd-flex align-items-center justify-content-center flex-column p-3',
1354                    color: "d-flex align-items-center justify-content-center flex-column p-3",
1355                    img: "d-flex align-items-center justify-content-center flex-column p-3",
1356                    onoff: "d-flex align-items-center justify-content-center flex-column p-3",
1357                    sound: "d-flex align-items-center justify-content-center flex-column p-3",                    
1358                    black: 'sf-special-black',
1359                    white: 'sf-special-white',
1360                    yellow: 'sf-special-yellow',
1361                    blue: 'sf-special-blue',
1362                    green: 'sf-special-green',
1363                    // Путь до стилей
1364                    specialwhite: '/simai/asset/simai.framework/sf4.master/plugin/special/css/white.min.css',
1365                    specialblack: '/simai/asset/simai.framework/sf4.master/plugin/special/css/black.min.css',
1366                    specialyellow: '/simai/asset/simai.framework/sf4.master/plugin/special/css/yellow.min.css',
1367                    specialblue: '/simai/asset/simai.framework/sf4.master/plugin/special/css/blue.min.css',
1368                    specialgreen: '/simai/asset/simai.framework/sf4.master/plugin/special/css/green.min.css',
1369                    specialsoundscript: 'https://webasr.yandex.net/jsapi/v1/webspeechkit.js',
1370                },
1371            },
1372            modal: {
1373                load: '<div class="sf-progress"><div class="sf-progress-animation"></div></div>',
1374                events: {
1375                    init: 'modalinit',
1376                    create: "modalcreate",
1377                    open: 'modalopen',
1378                    close: 'modalclose',
1379                },
1380                data: {
1381                    init: 'sf-modal',
1382                    src: 'sf-src',
1383                    modal: 'sf-modal-modifier',
1384                    content: 'sf-content-modifier',
1385                    close: "sf-close-modifier",
1386                    overlay: 'sf-overlay-modifier',
1387                    blur: 'sf-blur',
1388                    iframe: 'sf-iframe',
1389                },
1390                attributes: {
1391                    overlay: 'sf-modal-overlay',
1392                    load: 'sf-modal-loadanimation',
1393                    modal: 'sf-modal-area',
1394                    content: 'sf-modal-content',
1395                    close: 'sf-modal-close',
1396                    number: 'sf-modal-number'
1397                },
1398                modifier: {
1399                    src: '',
1400                    service: 'sf-service-bottom-area',
1401                    container: 'sf-modal-container',
1402                    overlay: 'sf-modal-overlay',
1403                    load: 'sf-modal-load',
1404                    modal: 'sf-modal-area',
1405                    content: 'sf-modal-content sf-scroll',
1406                    close: 'sf-close',
1407                    blur: 'blur',
1408                    page: 'sf-pagewrap-area',
1409                },
1410            },
1411            ajaxload: {
1412                load: '<div class="sf-progress"><div class="sf-progress-animation"></div></div>',
1413                events: {
1414                    init: 'ajaxloadinit',
1415                    cancel: 'ajaxloadcanceltrack',
1416                    create: 'ajaxloadcreate',
1417                },
1418                data: {
1419                    init: 'sf-ajaxload',
1420                    src: 'sf-src',
1421                    cancel: 'sf-canceltrack',
1422                    loaded: 'sf-ajaxloaded',
1423                },
1424                attributes: {
1425
1426                },
1427                modifier: {
1428                    src: '',
1429                },
1430            }
1431        },
1432    }
1433// ================ END CONSTRUCTOR ================ //
1434}
1435SF.Controller = function() {
1436    // Constructor
1437
1438        this.stack = stack;
1439        var _this = this;
1440
1441        // Подключение модулей
1442        SF.Events.call(this);
1443        SF.Search.call(this);
1444        SF.Blocks.call(this);
1445        SF.Provider.call(this);
1446        //SF.Property.call(this);
1447
1448        if(this.el) {
1449            this.send('blocksstart', this.el);
1450        } else {
1451            
1452            if(this.stack.ev('specialinit')) {
1453
1454                this.receive('specialinit', window, function(e) {
1455                    new SF.Special(e.target, e.target.params);
1456                });
1457                this.stack.events.push('specialinit');
1458            }
1459
1460            if(this.stack.ev('searchend')) {
1461                this.receive('searchend', window, function(e) {
1462                    _this.send('blocksstart', e.target);
1463                });
1464                this.send('searchstart', window);
1465                this.stack.events.push('searchend');
1466
1467            }
1468        }
1469
1470    // end Constructor    
1471}
1472/**
1473 * Search модуль поиска инициализаций т.е. поиска элементов вызывающих определенные блоки/компоненты    
1474 */
1475SF.Search = function() {
1476    /**
1477     * Search uninitialized Modal Window
1478     * Поиск неинициализированных модальных окон
1479     */
1480    this.search = function() {
1481        var el = document.body.querySelectorAll('*');   // Поиск всех элементов в DOM-дереве
1482        for(var j = 0; j < el.length; j++) {    // Обход найденых элементов
1483            var par = new SF.Parameters();
1484            var params = par.newparams();         // Новые параметры
1485            for(var key in params.blocks) {    // Проверка
1486                var init = el[j],
1487                    block = params.blocks[key];
1488                if(init.hasAttribute(block.data.init)) {    // Проверяем есть ли у элемента инициализация блока
1489                    var i = 0;
1490                    for(var k = 0; k < this.stack.el.length; k++)   // Проверяем был ли инициализированн текущий элемен ранее
1491                        if(this.stack.el[k] == init) i++;
1492                    if(i == 0) {
1493                        init.blocks = key;          // Записываем наименование блока
1494                        init.params = block;  // Присваиваем инициализатору список стандратных параметров
1495                        par.updateparams(init);
1496                        this.send('searchend', init); // Отправка сигнала (события) на элемент для дальнейшего построения
1497                    }
1498                }
1499            }
1500        }
1501    }
1502
1503    this.searchModal = function(element) {
1504        var el = element.querySelectorAll('[sf-modal]');   // Поиск всех элементов в DOM-дереве
1505        for(var j = 0; j < el.length; j++) {    // Обход найденых элементов
1506            var par = new SF.Parameters();
1507            var params = par.newparams();         // Новые параметры
1508            for(var key in params.blocks) {    // Проверка
1509                var init = el[j],
1510                    block = params.blocks[key];
1511                if(init.hasAttribute(block.data.init)) {    // Проверяем есть ли у элемента инициализация блока
1512                    var i = 0;
1513                    for(var k = 0; k < this.stack.el.length; k++)   // Проверяем был ли инициализированн текущий элемен ранее
1514                        if(this.stack.el[k] == init) i++;
1515          

1515          if(i == 0) {
1516                        init.blocks = key;          // Записываем наименование блока
1517                        init.params = block;  // Присваиваем инициализатору список стандратных параметров
1518                        par.updateparams(init);
1519                        this.send('searchend', init); // Отправка сигнала (события) на элемент для дальнейшего построения
1520                    }
1521                }
1522            }
1523        }
1524    }
1525
1526
1527    this.searchdata = function(content) {
1528        var el = content.querySelectorAll('*');   // Поиск всех элементов в DOM-дереве
1529        for(var j = 0; j < el.length; j++) {    // Обход найденых элементов
1530            var par = new SF.Parameters();
1531            var params = par.newparams();         // Новые параметры
1532            for(var key in params.blocks) {    // Проверка
1533                var init = el[j],
1534                    block = params.blocks[key];
1535                if(init.hasAttribute(block.data.init)) {    // Проверяем есть ли у элемента инициализация блока
1536                    var i = 0;
1537                    for(var k = 0; k < this.stack.el.length; k++)   // Проверяем был ли инициализированн текущий элемен ранее
1538                        if(this.stack.el[k] == init) i++;
1539                    if(i == 0) {
1540                        init.blocks = key;          // Записываем наименование блока
1541                        init.params = block;  // Присваиваем инициализатору список стандратных параметров
1542                        par.updateparams(init);
1543                        this.send('searchend', init); // Отправка сигнала (события) на элемент для дальнейшего построения
1544                    }
1545                }
1546            }
1547        }
1548    }
1549
1550    // ================ CONSTRUCTOR ================ //
1551        var _this = this;
1552        if(this.stack.ev('searchstart')) {
1553            this.receive('searchstart', window, function(e) { 
1554                _this.search();
1555            });
1556            this.receive('searchstartmodal', window, function(e) { 
1557                _this.searchModal(document);
1558            });
1559            this.stack.events.push('searchstart');
1560        }
1561    // ================ END CONSTRUCTOR ================ //    
1562}
1563/**
1564 * Blocks - модуль распределения обязанностей
1565 */
1566SF.Blocks = function() {
1567    var _this = this;
1568
1569    if(this.stack.ev('providerend')) {
1570        this.receive('providerend', window, function(e) {
1571            _this.send(e.target.event, e.target);
1572        });
1573        this.stack.events.push('providerend');
1574    }
1575
1576    if(this.stack.ev('blocksstart')) {
1577        this.receive('blocksstart', window, function(e) {
1578            _this.send('providerstart', e.target);
1579        });
1580        this.stack.events.push('blocksstart')
1581    }
1582
1583    
1584}
1585/**
1586 * ProviderDom - модуль создания блоков, другими словами поставщик блоков/компонентов
1587 */
1588SF.Provider = function() {
1589
1590    this.special = function(e) {
1591
1592        function selectcolor() {
1593            switch(_this.cookies.get('specialcolor')) {
1594                case 'specialwhite':
1595                    return BX.message("SF_SPECIAL__SPECIAL_WHITE");
1596                case 'specialblack': 
1597                    return BX.message("SF_SPECIAL__SPECIAL_BLACK");
1598                case 'specialyellow':
1599                    return BX.message("SF_SPECIAL__SPECIAL_YELLOW");
1600                case 'specialblue':
1601                    return BX.message("SF_SPECIAL__SPECIAL_BLUE");
1602                case 'specialgreen':
1603                    return BX.message("SF_SPECIAL__SPECIAL_GREEN");
1604            }
1605            return BX.message("SF_SPECIAL__SPECIAL_WHITE");
1606        }
1607
1608        function selectkegl() {
1609            var v = _this.cookies.get('specialkegl');
1610            if(v != '') return v + BX.message("SF_SPECIAL__SPECIAL_KEGL");
1611            else return BX.message("SF_SPECIAL__KEGL_16");
1612        }
1613
1614        function selectkerning() {
1615            switch(_this.cookies.get('specialkerning')) {
1616                case 'normal':
1617                    return BX.message("SF_SPECIAL__KERNING_NORMAL");
1618                case 'middle':
1619                    return BX.message("SF_SPECIAL__KERNING_MIDDLE");
1620                case 'big':
1621                    return BX.message("SF_SPECIAL__KERNING_BIG");
1622            }
1623            return BX.message("SF_SPECIAL__KERNING_NORMAL");
1624        }
1625
1626        function selectimg() {
1627            switch(_this.cookies.get('specialimage')) {
1628                case 'off':
1629                    return BX.message("SF_SPECIAL__IMG_OFF");
1630                case 'onblack':
1631                    return BX.message("SF_SPECIAL__IMG_ON_BLACK");
1632                case 'oncolor':
1633                    return BX.message("SF_SPECIAL__IMG_ON_COLOR");
1634            }
1635            return BX.message("SF_SPECIAL__IMG_ON_COLOR");
1636        }
1637
1638        function changeStateAlt(state)
1639        {
1640            
1641          if(state == 'off')
1642          {
1643            document.querySelectorAll('.sf-special-hidden').forEach((elem) => {
1644              elem.classList.remove('sf-special-hidden'); 
1645              elem.classList.add('sf-special-show')
1646            });
1647          } else if(state == 'onblack' || state == 'oncolor') {
1648            document.querySelectorAll('.sf-special-show').forEach((elem) => {
1649              elem.classList.add('sf-special-hidden'); 
1650              elem.classList.remove('sf-special-show');
1651            });
1652          }
1653        } 
1654        
1655        function selectinterval() {
1656            switch(_this.cookies.get('specialinterval')) {
1657                case '1.0':
1658                    return BX.message("SF_SPECIAL__INTERVAL_1_0");
1659                case '1.5':
1660                    return BX.message("SF_SPECIAL__INTERVAL_1_5");
1661                case '2.0':
1662                    return BX.message("SF_SPECIAL__INTERVAL_2_0");
1663            }
1664            return BX.message("SF_SPECIAL__INTERVAL_1_0");
1665        }
1666
1667        function addbtn(btn, param) {
1668            btn.className = param.class;
1669            btn.style.backgroundColor = param.background;
1670            btn.style.borderColor = 'black';
1671            btn.style.color = param.border;
1672            btn.style.fontSize = param.font;
1673            btn.innerHTML = param.text;
1674            btn.title = param.title;
1675        }
1676
1677        function selectfont() {
1678            //console.log(_this.cookies.get('specialfont'));
1679            switch(_this.cookies.get('specialfont')) {
1680                case 'default':
1681                    return BX.message("SF_SPECIAL__FONT_DEFAULT");
1682                case 'sans':
1683                    return BX.message("SF_SPECIAL__FONT_SANS");
1684                case 'serif':
1685                    return BX.message("SF_SPECIAL__FONT_SERIF");
1686                case 'mono':
1687                    return BX.message("SF_SPECIAL__FONT_MONO");
1688            }
1689            return BX.message("SF_SPECIAL__FONT_DEFAULT");
1690        }
1691
1692        function selectsound() {
1693            switch(_this.cookies.get('specialsound')) {
1694                case 'on':
1695                    return BX.message("SF_SPECIAL__SOUND_ON");
1696                case 'off':
1697                    return BX.message("SF_SPECIAL__SOUND_OFF");
1698                default:
1699                    return BX.message("SF_SPECIAL__SOUND_OFF");
1700            }
1701        }
1702
1703        var _this = this,
1704            par = e.target.params,
1705            el = e.target;
1706
1707        var panel = {
1708            font: {
1709                name: {},
1710                content: {
1711                    btnsans: {},    // Arial
1712                    btnserif: {},   // Times New Roman
1713                    btnmono: {},    // Courier New
1714                },
1715                status: {},
1716            },
1717            kegl: {
1718                name: {},
1719                content: {
1720                    btnmore: {},
1721                    btnless: {},
1722                },
1723                status: {},
1724            },
1725            interval: {
1726                name: {},
1727                content: {
1728                    btnone: {},
1729                    btnhalf: {},
1730                    btntwo: {},
1731                },
1732                status: {},
1733            },
1734            kerning: {
1735                name: {},
1736                content: {
1737                    btnnormal: {},
1738                    btnmiddle: {},
1739                    btnbig: {},
1740                },
1741                status: {},
1742            },
1743            color: {
1744                name: {},
1745                content: {
1746                    btnwhite: {},
1747                    btnblack: {},
1748                    btnyellow: {},
1749                    btnblue: {},
1750                    btngreen: {},
1751                },
1752                status: {},
1753            },
1754            img: {
1755                name: {},
1756                content: {
1757                    btnoff: {},
1758                    btnbw: {},
1759                    btncolor: {},
1760                },
1761                status: {},
1762            },
1763            sound: {
1764                name: {},
1765                content: {
1766                    btnon:{},
1767                    btnoff: {},
1768                },
1769                status: {},
1770                play: {},
1771            },
1772            onoff: {
1773                name: {},
1774                content: {
1775                    btnup: {},
1776                    btndefault: {},
1777                    btnonoff: {},
1778                },
1779                status: {},
1780            },
1781        };
1782
1783        panel = document.createElement('nav');
1784
1785        panel.className = par.modifier.panel;
1786        panel.setAttribute('sf-special-panel', '');
1787        panel.style.backgroundColor = "#FFFFFF";
1788        panel.style.position = 'relative';
1789        panel.style.transition = 'margin-top 1s ease';
1790
1791        panel.font = document.createElement('div');
1792        panel.font.className = par.modifier.font;
1793
1794        panel.font.name = document.createElement('div');
1795        panel.font.content = document.createElement('div');
1796        panel.font.status = document.createElement('div');
1797
1798        panel.font.name.classList.add('font-text', 'mb-2');
1799        panel.font.name.style.color = 'rgba(0,0,0, 0.87)';
1800        panel.font.name.innerHTML = BX.message("SF_SPECIAL__FONT");
1801
1802        panel.font.appendChild(panel.font.name);
1803
1804        panel.font.content.classList.add('font-content', 'btn-group');
1805        panel.font.content.btnsans = document.createElement('button');
1806        panel.font.content.btnserif = document.createElement('button');
1807        panel.font.content.btnmono = document.createElement('button');
1808
1809        addbtn(
1810            panel.font.content.btnsans,
1811            {
1812                class: 'btn btn-outline px-3',
1813                background: 'white',
1814                border: 'black',
1815                font: '14px',
1816                text: 'Arial',
1817                title: BX.message("SF_SPECIAL__BTN_SANS_ARIAL"),
1818            }
1819        );
1820
1821        panel.font.content.btnsans.addEventListener('click', function(e) {
1822            _this.send(par.events.fontsans, panel.font.content.btnsans);
1823            panel.font.status.innerHTML = BX.message("SF_SPECIAL__BTN_SANS");
1824        });
1825
1826        addbtn(
1827            panel.font.content.btnserif,
1828            {
1829                class: 'btn btn-outline px-3',
1830                background: 'white',
1831                border: 'black',
1832                font: '14px',
1833                text: 'Times',
1834                title: BX.message("SF_SPECIAL__BTN_SERIF_TIMES"),
1835            }
1836        );
1837
1838        panel.font.content.btnserif.addEventListener('click', function(e) {
1839            _this.send(par.events.fontserif, panel.font.content.btnserif);
1840            panel.font.status.innerHTML = BX.message("SF_SPECIAL__BTN_SERIF");
1841        });
1842
1843        addbtn(
1844            panel.font.content.btnmono,
1845            {
1846                class: 'btn btn-outline px-3',
1847                background: 'white',
1848                border: 'black',
1849                font: '14px',
1850                text: 'Courier',
1851                title: BX.message("SF_SPECIAL__BTN_MONO_COURIER"),
1852            }
1853        );
1854
1855        panel.font.content.btnmono.addEventListener('click', function(e) {
1856            _this.send(par.events.fontmono, panel.font.content.btnmono);
1857            panel.font.status.innerHTML = BX.message("SF_SPECIAL__BTN_MONO");
1858        });
1859
1860
1861        panel.font.status.classList.add('status-text', 'mt-2');
1862        panel.font.status.style.color = 'rgba(0,0,0, 0.87)';
1863        panel.font.status.innerHTML = selectfont();
1864
1865        panel.font.content.appendChild(panel.font.content.btnsans);
1866        panel.font.content.appendChild(panel.font.content.btnserif);
1867        panel.font.content.appendChild(panel.font.content.btnmono);
1868
1869        panel.font.appendChild(panel.font.content);
1870        panel.font.appendChild(panel.font.status);
1871        panel.appendChild(panel.font);
1872
1873        // #endregion Font
1874
1875        panel.kegl = document.createElement('div');
1876        panel.kegl.className = par.modifier.kegl;
1877
1878        panel.kegl.name = document.createElement('div');
1879        panel.kegl.content = document.createElement('div');
1880        panel.kegl.status = document.createElement('div');
1881
1882        panel.kegl.name.classList.add('kegl-text', 'mb-2');
1883        panel.kegl.name.style.color = 'rgba(0,0,0,0.87)';
1884        panel.kegl.name.innerHTML = BX.message("SF_SPECIAL__KEGL");
1885
1886        panel.kegl.appendChild(panel.kegl.name);
1887
1888        panel.kegl.content.classList.add('kegl-content', 'btn-group');
1889
1890        panel.kegl.content.btnmore = document.createElement('button');
1891        panel.kegl.content.btnless = document.createElement('button');
1892
1893        addbtn(
1894            panel.kegl.content.btnmore,
1895            {
1896                class: 'btn btn-outline px-3',
1897                background: 'white',
1898                border: 'black',
1899                font: '14px',
1900                text: 'A-',
1901                title: BX.message("SF_SPECIAL__BTN_MORE"),
1902            }
1903        );
1904        panel.kegl.content.btnmore.addEventListener('click', function(e) {
1905            _this.send(par.events.keglmore, panel.kegl.content.btnmore);
1906            panel.kegl.status.innerHTML = selectkegl();            
1907        });
1908        addbtn(
1909            panel.kegl.content.btnless,
1910            {
1911                class: 'btn btn-outline px-3',
1912                background: 'white',
1913                border: 'black',
1914                font: '14px',
1915                text: 'A+',
1916                title: BX.message("SF_SPECIAL__BTN_LESS"),
1917            }
1918        );
1919        panel.kegl.content.btnless.addEventListener('click', function(e) {
1920            _this.send(par.events.keglless, panel.kegl.content.btnless);
1921            panel.kegl.status.innerHTML = selectkegl();
1922        });
1923
1924        panel.kegl.status.classList.add('status-text', 'mt-2');
1925        panel.kegl.status.style.color = 'rgba(0,0,0, 0.87)';
1926        panel.kegl.status.innerHTML = selectkegl();
1927
1928
1929        panel.kegl.content.appendChild(panel.kegl.content.btnmore);
1930        panel.kegl.content.appendChild(panel.kegl.content.btnless)
1931        panel.kegl.appendChild(panel.kegl.content);
1932        panel.kegl.appendChild(panel.kegl.status);
1933        panel.appendChild(panel.kegl);
1934
1935        // #region Kerning ===========================
1936            panel.kerning = document.createElement('div');
1937            panel.kerning.className = par.modifier.kerning;
1938            panel.kerning.name = document.createElement('div');
1939            panel.kerning.content = document.createElement('div');
1940            panel.kerning.status = document.createElement('div');
1941
1942            panel.kerning.name.classList.add('name-text', 'mb-2');
1943            panel.kerning.name.style.color = 'rgba(0,0,0,0.87)';
1944            panel.kerning.name.innerHTML = BX.message("SF_SPECIAL__KERNING");
1945            
1946            panel.kerning.appendChild(panel.kerning.name);
1947
1948            panel.kerning.content.classList.add('kerning-content', 'btn-group');
1949
1950            panel.kerning.status.classList.add('status-text', 'mt-2');
1951            panel.kerning.status.style.color = 'rgba(0,0,0,0.87)';
1952            panel.kerning.status.

1952innerHTML = selectkerning();
1953
1954            panel.kerning.content.btnnormal = document.createElement('button');
1955            panel.kerning.content.btnmiddle = document.createElement('button');
1956            panel.kerning.content.btnbig = document.createElement('button');
1957
1958            addbtn(
1959                panel.kerning.content.btnnormal,
1960                {
1961                    class: 'btn btn-outline px-3',
1962                    background: 'white',
1963                    border: 'black',
1964                    font: '14px',
1965                    text: '1.0',
1966                    title: BX.message("SF_SPECIAL__BTN_NORMAL")
1967                }
1968            );
1969    
1970            panel.kerning.content.btnnormal.addEventListener('click', function(e) {
1971                _this.send(par.events.kerningnormal, panel.kerning.content.btnnormal);
1972                panel.kerning.status.innerHTML = selectkerning();            
1973            });
1974
1975            addbtn(
1976                panel.kerning.content.btnmiddle,
1977                {
1978                    class: 'btn btn-outline px-3',
1979                    background: 'white',
1980                    border: 'black',
1981                    font: '14px',
1982                    text: '1.5',
1983                    title: BX.message("SF_SPECIAL__BTN_MIDDLE"),
1984                }
1985            );
1986    
1987            panel.kerning.content.btnmiddle.addEventListener('click', function(e) {
1988                _this.send(par.events.kerningmiddle, panel.kerning.content.btnmiddle);
1989                panel.kerning.status.innerHTML = selectkerning();            
1990            });
1991
1992            addbtn(
1993                panel.kerning.content.btnbig,
1994                {
1995                    class: 'btn btn-outline px-3',
1996                    background: 'white',
1997                    border: 'black',
1998                    font: '14px',
1999                    text: '2.0',
2000                    title: BX.message("SF_SPECIAL__BTN_BIG")
2001                }
2002            );
2003    
2004            panel.kerning.content.btnbig.addEventListener('click', function(e) {
2005                _this.send(par.events.kerningbig, panel.kerning.content.btnbig);
2006                panel.kerning.status.innerHTML = selectkerning();            
2007            });
2008
2009            panel.kerning.content.appendChild(panel.kerning.content.btnnormal);
2010            panel.kerning.content.appendChild(panel.kerning.content.btnmiddle);
2011            panel.kerning.content.appendChild(panel.kerning.content.btnbig);
2012            panel.kerning.appendChild(panel.kerning.content);
2013            panel.kerning.appendChild(panel.kerning.status);
2014            panel.appendChild(panel.kerning);
2015        // #endregion ===========================
2016        
2017        panel.interval = document.createElement('div');
2018        panel.interval.className = par.modifier.interval;
2019        panel.interval.name = document.createElement('div');
2020        panel.interval.name.classList.add('kegl-text', 'mb-2');
2021        panel.interval.name.style.color = 'rgba(0,0,0,0.87)';
2022        panel.interval.name.innerHTML = BX.message("SF_SPECIAL__INTERVAL");;
2023
2024        panel.interval.appendChild(panel.interval.name);
2025
2026        panel.interval.content = document.createElement('div');
2027        panel.interval.status = document.createElement('div');
2028        panel.interval.content.classList.add('interval-content', 'btn-group');
2029        
2030        panel.interval.content.btnone = document.createElement('button');
2031        panel.interval.content.btnhalf = document.createElement('button');
2032        panel.interval.content.btntwo = document.createElement('button');
2033
2034        addbtn(
2035            panel.interval.content.btnone,
2036            {
2037                class: 'btn btn-outline px-3',
2038                background: 'white',
2039                border: 'black',
2040                font: '14px',
2041                text: '1.0',
2042                title: BX.message("SF_SPECIAL__BTN_ONE"),
2043            }
2044        );
2045
2046        panel.interval.content.btnone.addEventListener('click', function(e) {
2047            _this.send(par.events.intervalone, panel.interval.content.btnone);
2048            panel.interval.status.innerHTML = selectinterval();            
2049        });
2050
2051        addbtn(
2052            panel.interval.content.btnhalf,
2053            {
2054                class: 'btn btn-outline px-3',
2055                background: 'white',
2056                border: 'black',
2057                font: '14px',
2058                text: '1.5',
2059                title: BX.message("SF_SPECIAL__BTN_HALF"),
2060            }
2061        );
2062
2063        panel.interval.content.btnhalf.addEventListener('click', function(e) {
2064            _this.send(par.events.intervalhalf, panel.interval.content.btnhalf);
2065            panel.interval.status.innerHTML = selectinterval();            
2066        });
2067
2068        addbtn(
2069            panel.interval.content.btntwo,
2070            {
2071                class: 'btn btn-outline px-3',
2072                background: 'white',
2073                border: 'black',
2074                font: '14px',
2075                text: '2.0',
2076                title: BX.message("SF_SPECIAL__BTN_TWO"),
2077            }
2078        );
2079
2080        panel.interval.content.btntwo.addEventListener('click', function(e) {
2081            _this.send(par.events.intervaltwo, panel.interval.content.btntwo);
2082            panel.interval.status.innerHTML = selectinterval();
2083        });
2084
2085        panel.interval.status.classList.add('status-text', 'mt-2');
2086        panel.interval.status.style.color = 'rgba(0,0,0, 0.87)';
2087        panel.interval.status.innerHTML = selectinterval(); 
2088
2089        panel.interval.content.appendChild(panel.interval.content.btnone);
2090        panel.interval.content.appendChild(panel.interval.content.btnhalf);
2091        panel.interval.content.appendChild(panel.interval.content.btntwo);
2092        panel.interval.appendChild(panel.interval.content);
2093        panel.interval.appendChild(panel.interval.status);
2094        panel.appendChild(panel.interval);
2095
2096        // =================================
2097        
2098        panel.color = document.createElement('div');
2099
2100        panel.color.className = par.modifier.color;
2101
2102        panel.color.name = document.createElement('div');
2103        panel.color.name.classList.add('color-text', 'mb-2');
2104        panel.color.name.style.color = 'rgba(0,0,0,0.87)';
2105        panel.color.name.innerHTML = BX.message("SF_SPECIAL__COLOR");
2106
2107        panel.color.appendChild(panel.color.name);
2108
2109        panel.color.content = document.createElement('div');
2110        panel.color.status = document.createElement('div');
2111
2112        panel.color.content.classList.add('color-content', 'btn-group');
2113
2114
2115        panel.color.status.classList.add('status-text', 'mt-2');
2116        panel.color.status.style.color = 'rgba(0,0,0, 0.87)';
2117
2118        panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");
2119
2120        // #region Кнопки управления цветовой схемой
2121        
2122        panel.color.content.btnwhite = document.createElement('button');
2123        panel.color.content.btnblack = document.createElement('button');
2124        panel.color.content.btnyellow = document.createElement('button');
2125        panel.color.content.btnblue = document.createElement('button');
2126        panel.color.content.btngreen = document.createElement('button');
2127
2128        addbtn(
2129            panel.color.content.btnwhite,
2130            {
2131                class: 'btn btn-outline px-2',
2132                background: 'white',
2133                border: 'black',
2134                font: '14px',
2135                text: 'C',
2136                title: BX.message("SF_SPECIAL__BTN_WHITE"),
2137            }
2138        );
2139
2140        panel.color.content.btnwhite.addEventListener('click', function(e) {
2141            if(_this.cookies.get('specialcolor') != par.events.colorwhite) {
2142                _this.send(par.events.colorwhite, e.target);
2143                panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");
2144            }
2145        });
2146
2147        addbtn(
2148            panel.color.content.btnblack,
2149            {
2150                class: 'btn btn-outline px-2',
2151                background: 'black',
2152                border: 'white',
2153                font: '14px',
2154                text: 'C',
2155                title: BX.message("SF_SPECIAL__BTN_BLACK"),
2156            }
2157        );
2158
2159        panel.color.content.btnblack.addEventListener('click', function(e) {
2160            if(_this.cookies.get('specialcolor') != par.events.colorblack) {
2161                _this.send(par.events.colorblack, e.target);
2162                panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");
2163            }
2164        });
2165
2166        addbtn(
2167            panel.color.content.btnyellow,
2168            {
2169                class: 'btn btn-outline px-2',
2170                background: '#FF0',
2171                border: 'black',
2172                font: '14px',
2173                text: 'C',
2174                title: BX.message("SF_SPECIAL__BTN_YELLOW"),
2175            }
2176        );
2177
2178        panel.color.content.btnyellow.addEventListener('click', function(e) {
2179            if(_this.cookies.get('specialcolor') != par.events.coloryellow) {
2180                _this.send(par.events.coloryellow, e.target);
2181                panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");                
2182            }
2183        });
2184
2185        addbtn(
2186            panel.color.content.btnblue,
2187            {
2188                class: 'btn btn-outline px-2',
2189                background: '#9fd7ff',
2190                border: 'black',
2191                font: '14px',
2192                text: 'C',
2193                title: BX.message("SF_SPECIAL__BTN_BLUE"),
2194            }
2195        );
2196        panel.color.content.btnblue.addEventListener('click', function(e) {
2197            if(_this.cookies.get('specialcolor') != par.events.colorblue) {
2198                _this.send(par.events.colorblue, e.target);
2199                panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");
2200            }
2201        });
2202        addbtn(
2203            panel.color.content.btngreen,
2204            {
2205                class: 'btn btn-outline px-2',
2206                background: 'black',
2207                border: '#a9dd38',
2208                font: '14px',
2209                text: 'C',
2210                title: BX.message("SF_SPECIAL__BTN_GREEN"),
2211            }
2212        );
2213
2214        panel.color.content.btngreen.addEventListener('click', function(e) {
2215            if(_this.cookies.get('specialcolor') != par.events.colorgreen) {
2216                _this.send(par.events.colorgreen, e.target);
2217                panel.color.status.innerHTML = selectcolor() + BX.message("SF_SPECIAL__SCHEMA");
2218            }                
2219        });
2220
2221        panel.color.content.appendChild(panel.color.content.btnwhite);
2222        panel.color.content.appendChild(panel.color.content.btnblack);
2223        panel.color.content.appendChild(panel.color.content.btnyellow);
2224        panel.color.content.appendChild(panel.color.content.btnblue);
2225        panel.color.content.appendChild(panel.color.content.btngreen);
2226
2227        // #endregion
2228
2229
2230        panel.color.appendChild(panel.color.content);
2231        panel.color.appendChild(panel.color.status);
2232        panel.appendChild(panel.color);
2233
2234        // #region Image =================================
2235        panel.img = document.createElement('div');
2236
2237        panel.img.className = par.modifier.img;
2238
2239        panel.img.name = document.createElement('div');
2240        panel.img.name.classList.add('color-text', 'mb-2');
2241        panel.img.name.style.color = 'rgba(0,0,0,0.87)';
2242        panel.img.name.innerHTML = BX.message("SF_SPECIAL__IMG");
2243
2244        panel.img.appendChild(panel.img.name);
2245
2246        panel.img.content = document.createElement('div');
2247
2248        panel.img.status = document.createElement('div');
2249        panel.img.status.classList.add('status-text', 'mt-2');
2250        panel.img.status.style.color = 'rgba(0,0,0,0.87)';
2251
2252        panel.img.status.innerHTML = selectimg();
2253
2254
2255        panel.img.content.classList.add('img-content', 'btn-group');
2256        
2257        panel.img.content.btnoff = document.createElement('button');
2258        panel.img.content.btnbw = document.createElement('button');
2259        panel.img.content.btncolor = document.createElement('button');
2260
2261        addbtn(
2262            panel.img.content.btnoff,
2263            {
2264                class: 'btn btn-outline px-3',
2265                background: 'white',
2266                border: 'black',
2267                font: '14px',
2268                text: BX.message("SF_SPECIAL__BTN_OFF_TEXT"),
2269                title: BX.message("SF_SPECIAL__BTN_OFF"),
2270            }
2271        );
2272        panel.img.content.btnoff.addEventListener('click', function(e) {
2273            _this.send(par.events.imageoff, panel.img.content.btnoff);
2274            panel.img.status.innerHTML = selectimg();
2275            changeStateAlt('off');
2276        });
2277        addbtn(
2278            panel.img.content.btnbw,
2279            {
2280                class: 'btn btn-outline px-3',
2281                background: 'white',
2282                border: 'black',
2283                font: '14px',
2284                text: BX.message("SF_SPECIAL__BTN_BW_TEXT"),
2285                title: BX.message("SF_SPECIAL__IMG_BTN_BW"),
2286            }
2287        );
2288        panel.img.content.btnbw.addEventListener('click', function(e) {
2289            _this.send(par.events.imageblack, panel.img.content.btnbw);
2290            panel.img.status.innerHTML = selectimg();
2291            changeStateAlt('onblack');
2292        });
2293        addbtn(
2294            panel.img.content.btncolor,
2295            {
2296                class: 'btn btn-outline px-3',
2297                background: 'white',
2298                border: 'black',
2299                font: '14px',
2300                text: BX.message("SF_SPECIAL__IMG_BTN_COLOR_TEXT"),
2301                title: BX.message("SF_SPECIAL__IMG_BTN_COLOR"),
2302            }
2303        );
2304        panel.img.content.btncolor.addEventListener('click', function(e) {
2305            _this.send(par.events.imagecolor, panel.img.content.btncolor);
2306            panel.img.status.innerHTML = selectimg();
2307            changeStateAlt('oncolor');
2308        });
2309        panel.img.content.appendChild(panel.img.content.btnoff);
2310        panel.img.content.appendChild(panel.img.content.btnbw);
2311        panel.img.content.appendChild(panel.img.content.btncolor);
2312
2313
2314        panel.img.appendChild(panel.img.content);
2315        panel.img.appendChild(panel.img.status);
2316        panel.appendChild(panel.img);
2317
2318        // =================================
2319        
2320        /*
2321            sound: {
2322                name: {},
2323                content: {
2324                    btnon:{},
2325                    btnoff: {},
2326                },
2327                status: {},
2328            },
2329        */
2330        /*if(_this.getproperty('special_speech') == 'Y') {
2331            
2332            panel.sound = document.createElement('div');
2333            panel.sound.className = par.modifier.sound;
2334    
2335            // ========== name
2336            panel.sound.name = document.createElement('div');
2337            panel.sound.name.classList.add('sound-text', 'mb-2')
2338            panel.sound.name.style.color = 'rgba(0,0,0,0.87)';
2339            panel.sound.name.innerHTML = 'Звук';
2340    
2341            panel.sound.appendChild(panel.sound.name);
2342            // ===========
2343            panel.sound.content = document.createElement('div');
2344            panel.sound.content.classList.add('sound-content', 'btn-group');
2345            panel.sound.content.btnon = document.createElement('button');
2346            panel.sound.content.btnoff = document.createElement('button');
2347    
2348            addbtn(
2349                panel.sound.content.btnon,
2350                {
2351                    class: 'btn btn-outline px-3',
2352                    background: 'white',
2353                    border: 'black',
2354                    font: '14px',
2355                    text: 'Вкл',
2356                    title: "Включить озвучивание текста",
2357                }
2358            );
2359    
2360            panel.sound.content.btnon.addEventListener('click', function(e) {
2361                _this.send(par.events.soundon, panel);
2362                panel.sound.status.innerHTML = selectsound();            
2363            });
2364    
2365            addbtn(
2366                panel.sound.content.btnoff,
2367                {
2368                    class: 'btn btn-outline px-3',
2369                    background: 'white',
2370                    border: 'black',
2371                    font: '14px',
2372                    text: 'Выкл',
2373                    title: "Ð

2373’ыключить озвучивание текста",
2374                }
2375            );
2376    
2377            panel.sound.content.btnoff.addEventListener('click', function(e) {
2378                _this.send(par.events.soundoff, panel);
2379                panel.sound.status.innerHTML = selectsound();
2380            });
2381    
2382            // ===========
2383            panel.sound.status = document.createElement('div');
2384            panel.sound.status.classList.add('status-text', 'mt-2');
2385            panel.sound.status.style.color = 'rgba(0,0,0,0.87)';
2386            panel.sound.status.innerHTML = selectsound();
2387            // ===========
2388    
2389            panel.sound.content.appendChild(panel.sound.content.btnon);
2390            panel.sound.content.appendChild(panel.sound.content.btnoff);
2391    
2392            panel.sound.appendChild(panel.sound.content);
2393            panel.sound.appendChild(panel.sound.status);
2394            panel.appendChild(panel.sound);
2395    
2396            this.includeScript(par.modifier.specialsoundscript);
2397        }*/
2398
2399
2400
2401        // =================================
2402
2403        panel.onoff = document.createElement('div');
2404
2405        panel.onoff.className = par.modifier.onoff;
2406
2407        panel.onoff.name = document.createElement('div');
2408        panel.onoff.name.classList.add('onoff-text', 'mb-2');
2409        panel.onoff.name.style.color = 'rgba(0,0,0,0.87)';
2410        panel.onoff.name.innerHTML = BX.message("SF_SPECIAL__PANEL");
2411
2412        panel.onoff.appendChild(panel.onoff.name);
2413
2414        panel.onoff.content = document.createElement('div');
2415        panel.onoff.content.classList.add('onoff-content', 'btn-group');
2416        
2417        panel.onoff.content.btnup = document.createElement('button');
2418        panel.onoff.content.btndefault = document.createElement('button');
2419        panel.onoff.content.btnonoff = document.createElement('button');
2420
2421
2422        addbtn(
2423            panel.onoff.content.btndefault,
2424            {
2425                class: 'btn btn-outline px-3',
2426                background: 'white',
2427                border: 'black',
2428                font: '14px',
2429                text: '<i class="fas fa-sync-alt" style="color:black!important"></i>',
2430                title: BX.message("SF_SPECIAL__BTN_DEFAULT"),
2431            }
2432        );
2433
2434        panel.onoff.content.btndefault.addEventListener('click', function(e) {
2435            _this.send(par.events.defaultsetting, panel);
2436        });
2437
2438        addbtn(
2439            panel.onoff.content.btnonoff,
2440            {
2441                class: 'btn btn-outline px-3',
2442                background: 'white',
2443                border: 'black',
2444                font: '14px',
2445                text: BX.message("SF_SPECIAL__BTN_OFF_TEXT"),
2446                title: BX.message("SF_SPECIAL__BTN_OFF"),
2447            }
2448        );
2449
2450        panel.onoff.content.btnonoff.addEventListener('click', function(e) {
2451            _this.send(par.events.close, panel);
2452            changeStateAlt('onblack'); 
2453        });
2454
2455        addbtn(
2456            panel.onoff.content.btnup,
2457            {
2458                class: 'btn btn-outline px-3',
2459                background: 'white',
2460                border: 'black',
2461                font: '14px',
2462                text: '<i class="far fa-angle-up" style="color:black!important"></i>',
2463                title: BX.message("SF_SPECIAL__BTN_UP"),
2464            }
2465        )
2466
2467        panel.onoff.content.btnup.style.position = 'absolute';
2468        panel.onoff.content.btnup.style.bottom = '0';
2469        panel.onoff.content.btnup.style.right = '0';
2470        panel.onoff.content.btnup.style.borderBottom = '0 solid black';
2471        panel.onoff.content.btnup.style.borderRadius = '0';
2472        panel.onoff.content.btnup.style.zIndex = '10';
2473
2474        if(_this.cookies.get('specialup') == 'down') {
2475            panel.style.marginTop = '-' + panel.clientHeight + 'px';
2476            panel.onoff.content.btnup.style.bottom = '-' + panel.onoff.content.btnup.clientHeight + 'px';
2477            panel.onoff.content.btnup.style.transform = 'rotate(180deg)';
2478            _this.cookies.set('specialup', 'up', 7);
2479        } else {
2480            panel.style.marginTop = '0';
2481            panel.onoff.content.btnup.style.bottom = '0';
2482            panel.onoff.content.btnup.style.transform = 'rotate(0deg)';
2483            _this.cookies.set('specialup', 'down', 7);
2484        }
2485
2486        panel.onoff.content.btnup.addEventListener('click', function(e) {
2487            _this.send(par.events.up, panel);
2488        });
2489
2490        panel.onoff.content.appendChild(panel.onoff.content.btndefault);
2491        panel.onoff.content.appendChild(panel.onoff.content.btnonoff);
2492
2493        panel.onoff.appendChild(panel.onoff.content);
2494        panel.appendChild(panel.onoff);
2495        panel.appendChild(panel.onoff.content.btnup);
2496
2497        // #endregion =================================
2498
2499        return panel;
2500    }
2501
2502    // #endregion Panel Special
2503
2504    /**
2505     * 
2506     * @param {*} e 
2507     */
2508    this.modal = function(e) {

2509        var overlay = {
2510            load: {},
2511            area: {
2512                content: {},
2513                close: {},
2514            },
2515        },
2516        _this = this,
2517        par = e.target.params,
2518        page = document.body.querySelector('.sf-pagewrap-area'),
2519        el = e.target;
2520
2521        overlay = document.createElement('div');
2522        overlay.load = document.createElement('div');
2523        overlay.load.innerHTML = par.load;
2524        overlay.area = document.createElement('div');
2525        overlay.area.content = document.createElement('div');
2526        overlay.area.close = document.createElement('button');
2527
2528        overlay.load.setAttribute(par.attributes.load, '');
2529        overlay.className = par.modifier.overlay;
2530        overlay.style.display = 'flex';
2531        overlay.load.style.position = 'fixed';
2532        overlay.load.style.top = '0';
2533        overlay.load.style.left = '0';
2534        overlay.load.style.width = '100%';
2535        overlay.setAttribute(par.attributes.overlay, '');
2536
2537        overlay.addEventListener('click', function(e) {
2538            if(e.target.hasAttribute(par.attributes.overlay))
2539                _this.send(par.events.close, overlay);
2540        });
2541
2542        overlay.classList = par.modifier.overlay;
2543        overlay.setAttribute(par.data.src, par.modifier.src);
2544        overlay.style.zIndex = this.topZIndex() + 1;
2545        
2546        overlay.area.setAttribute(par.attributes.modal, '');
2547        overlay.area.className = par.modifier.modal;
2548        overlay.area.content.setAttribute(par.attributes.content, '');
2549        overlay.area.content.className = par.modifier.content;
2550        overlay.area.style.opacity = '0';
2551        overlay.area.appendChild(overlay.area.content);
2552
2553        overlay.area.close.addEventListener('click', function(e) {
2554            _this.send(par.events.close, overlay);
2555        });
2556
2557        overlay.area.close.setAttribute(par.attributes.close, '');
2558        overlay.area.close.className = par.modifier.close;
2559        overlay.area.appendChild(overlay.area.close);
2560        overlay.appendChild(overlay.load);
2561        overlay.appendChild(overlay.area);
2562
2563        // Событие происходит перед открытием окна
2564        this.receive(par.events.open, overlay, function(e) {
2565            overlay.style.display = 'flex';
2566            document.body.style.overflow = 'hidden';
2567
2568            try {
2569                if(el.hasAttribute(par.data.blur) || (par.attributes.blur != null && par.attributes.blur != undefined)) {
2570                    //console.log(page)
2571                    if(page !== null && page !== undefined) {
2572                        //console.log(par.modifier.blur)
2573                        page.classList.add(par.modifier.blur.replace(" ", ''));
2574                    }
2575                }
2576            } catch(exp) {
2577                
2578            }
2579
2580            
2581        });
2582
2583        // Событие происходит перед закрытием окна
2584        this.receive(par.events.close, overlay, function(e) {
2585            if(overlay.parentNode != null) {
2586                overlay.area.style.opacity = '0';
2587                overlay.area.content.innerHTML = '';
2588                overlay.load.style.display = 'flex';
2589                overlay.parentNode.removeChild(overlay);
2590            }
2591            document.body.style.overflow = 'auto';
2592            try {
2593                if(el.hasAttribute(par.data.blur) || (par.attributes.blur != null && par.attributes.blur != undefined))
2594                if(page !== null && page !== undefined)
2595                    page.classList.remove(par.modifier.blur.replace(" ", ""));
2596            } catch(exp) {
2597
2598            }
2599            
2600        });
2601        
2602        return overlay;
2603    }
2604
2605    this.iframe = function(e) {
2606        /*var overlay = {
2607            load: {},
2608            area: {
2609                content: {},
2610                close: {},
2611            },
2612        },
2613        _this = this,
2614        page= document.body.querySelector('.sf-pagewrap-area'),
2615        el = e.target;*/
2616        var overlay = {
2617            load: {},
2618            area: {
2619                content: {},
2620                close: {},
2621            },
2622        },
2623        _this = this,
2624        par = e.target.params,
2625        page = document.body.querySelector('.sf-pagewrap-area'),
2626        el = e.target;
2627
2628
2629

2630        overlay = document.createElement('div');
2631        overlay.load = document.createElement('div');
2632        overlay.load.innerHTML = par.load;
2633        overlay.area = document.createElement('div');
2634        overlay.area.content = document.createElement('iframe');
2635        overlay.area.content.src = par.modifier.src;
2636        overlay.area.close = document.createElement('button');
2637
2638        overlay.load.setAttribute(par.attributes.load, '');
2639        overlay.load.className = par.modifier.load;
2640        overlay.load.style.position = 'fixed';
2641        overlay.load.style.top = '0';
2642        overlay.load.style.left = '0';
2643        overlay.load.style.width = '100%';
2644        overlay.setAttribute(par.attributes.overlay, '');
2645
2646        overlay.addEventListener('click', function(e) {    
2647            if(e.target.hasAttribute(par.attributes.overlay))
2648                _this.send(par.events.close, overlay);
2649            /*console.log(par.attributes.overlay)           
2650            if(el.hasAttribute(par.attributes.overlay)) {
2651                console.log(overlay)
2652                overlay.parenNode.removeChild(overlay);
2653                document.body.style.overflow = 'auto';
2654                if(el.hasAttribute(par.data.blur) || par.attributes.blur)
2655                    if(page !== null && page !== undefined)
2656                        page.classList.remove(par.modifier.opt);
2657            }*/
2658        });
2659
2660        overlay.classList = par.modifier.overlay;
2661        overlay.setAttribute(par.data.src, par.modifier.src);
2662        overlay.style.zIndex = this.topZIndex() + 1;
2663
2664        overlay.area.setAttribute(par.attributes.content, "");
2665        overlay.area.className = par.modifier.modal;
2666        overlay.area.content.setAttribute(par.attributes.content, "");
2667        overlay.area.content.className = par.modifier.content;
2668        overlay.area.style.opacity = "0";
2669        overlay.area.appendChild(overlay.area.content);
2670
2671        /*overlay.area.close.addEventListener('click', function(e) {
2672            overlay.parenNode.removeChild(overlay);
2673            document.body.style.overflowY = 'auto';
2674            if(el.hasAttribute(par.data.blur) || par.attributes.blur)
2675                if(page !== null && page !== undefined)
2676                    page.classList.remove(par.modifier.blur);
2677         });*/
2678
2679         overlay.area.close.addEventListener('click', function(e) {
2680            _this.send(par.events.close, overlay);
2681        });
2682
2683
2684         overlay.area.close.setAttribute(par.attributes.close, '');
2685         overlay.area.close.className = par.modifier.close;
2686         overlay.area.appendChild(overlay.area.close);
2687         overlay.appendChild(overlay.load);
2688         overlay.appendChild(overlay.area);
2689
2690         this.receive(par.events.open, el || window, function(e) {
2691            overlay.style.opacity = 1;
2692            document.body.style.overflow = 'hidden';
2693            overlay.style.display = 'flex';
2694            if(el.hasAttribute(par.data.blur) || par.attributes.blur)
2695                if(page !== null && page !== undefined)
2696                    page.classList.add(par.modifier.blur);
2697         });
2698
2699         this.receive(par.events.close, overlay, function(e) {
2700            if(overlay.parentNode != null) {
2701                overlay.area.style.opacity = '0';
2702                overlay.area.content.innerHTML = '';
2703                overlay.load.style.display = 'flex';
2704                overlay.parentNode.removeChild(overlay);
2705            }
2706            document.body.style.overflow = 'auto';
2707            if(el.hasAttribute(par.data.blur) || par.attributes.blur)
2708                if(page !== null && page !== undefined)
2709                    page.classList.add(par.modifier.blur);
2710         });
2711
2712         /*if(el.hasAttribute(par.data.blur) || par.attributes.blur)
2713            if(page !== null && page !== undefined)
2714                page.classList.add(par.modifier.blur);*/
2715        
2716        this.send(par.events.open, el);
2717        return overlay;
2718    }
2719
2720    this.providercreate = function(e) {
2721        var b = e.target.blocks,
2722            el = e.target,
2723            par = el.params;
2724        switch(b) {
2725            case 'modal':
2726                el.modal = this.modal(e);
2727                el.event = par.events.init;
2728                this.send("providerend", el);
2729                break;
2730            case "special":
2731                el.special = this.special(e);
2732                el.event = par.events.init;
2733                this.send('providerend', el);
2734                break;
2735            case 'ajaxload':
2736                el.event = par.events.init;
2737                this.send('providerend', el);
2738                break;
2739        }
2740    }
2741
2742    var _this = this;
2743
2744    if(this.stack.ev('providerstart')) {
2745        this.receive('providerstart', window, function(e) {
2746            _this.providercreate(e);
2747        });
2748        this.stack.events.push('providerstart');        
2749    }
2750
2751}
2752SF.Modal = function(el, opt) {
2753
2754    this.createNew = function(e) {
2755        var par = new SF.Parameters(),
2756            modPar = par.newparams();
2757        window.blocks = 'modal';
2758        window.params = this.extend(modPar.blocks.modal, window.params);
2759        e.target.blocks = 'modal';
2760        e.target.params = this.extend(modPar.blocks.modal, window.params);
2761        e.target.modal = _this.modal(e);
2762        window.modal = _this.modal(e);
2763        _this.create(e);
2764    }
2765
2766    this.create = function(e) {
2767        //console.log(e.target)
2768        var modal = e.target.modal,
2769            el = e.target,
2770            container = null,
2771            opt = el.params;
2772        
2773            try {
2774                if(el.hasAttribute(opt.data.iframe))
2775                modal = this.iframe(e);
2776            } catch(ex) {
2777
2778            }
2779        
2780
2781        //console.log(modal)
2782
2783        var service = document.body.querySelector('.sf-service-bottom-area');
2784
2785        if(service == null || service == undefined) {
2786            service = document.createElement('div');
2787            service.classList.add(el.params.modifier.service);
2788            document.body.appendChild(service);
2789        } else container = service.querySelector('.sf-modal-container');
2790
2791        if(container == null || container == undefined) {
2792            container = document.createElement('section');
2793            container.setAttribute('modal-container', '');
2794            container.className = opt.modifier.container;
2795        }
2796        //console.log(container)
2797        try {
2798            container.appendChild(modal);
2799        } catch(ex) {
2800            container.innerHTML = modal;
2801        }
2802        
2803        service.appendChild(container);
2804
2805        setTimeout(function() {
2806            if(modal.hasAttribute(el.params.data.src)) {
2807                var link = modal.getAttribute(el.params.data.src).replace(" ", '');
2808
2809                function simbol(ch) {
2810                    var str = 'abcdefghijklmnopqrstuvwxyz',
2811                        i = 0;
2812                    for(var k = 0; k < str.length; k++)
2813                        if(str[k] == ch) i++;
2814                    if(i > 0) return true;
2815                    else return false;