https://www.muzikant.eu/wa_script/js/bs_overlay.js?_=2026-09-02-11-10

1/**
2 * @name overlay.js
3 *
4 * Objekt pro ztmaveni elementu kolem vybraneho elementu, ktery zustane zobrazeny
5 *
6 *
7 * @copyright Bohemiasoft s.r.o. - 19.9.2012
8 * @author Michal Schwarz <[email protected]>
9 *
10 */
11var BS = BS || {};
12
13/**
14 *
15 * @example
16 * <code>
17 * $overlay = BS.Overlay.init('#page', '#header', {
18 *   $z_index: 9999,
19 *   $background_image_url: null,
20 *   $background_color: "#000000",
21 *   $opacity: 0.3,
22 *   $is_clickable: false
23 * });
24 * $overlay.fade_in();
25 * ...
26 * $overlay.fade_out();
27 * ...
28 * $overlay.reset_to('#masterpage');
29 * ...
30 * $overlay.fade_in();
31 * ...
32 * </code>
33 *
34 * @param {string} $add_to_id ID elementu, ktery bude stmivan
35 * @param {string} $visible_element_id ID elementu, ktery bude pri ztmaveni zobrazen
36 * @param {string} $background_image_url textura, kterou bude prekryvano napr.: /admin/images/textura.png
37 * @param {Number} $z_index (=9999) Bude nastaven stmivacim divum
38 */
39
40BS.Overlay = {
41  /**
42   *Ukazatel na tento objekt
43   */
44  $this: null,
45  /**
46   * Kod stmivacich divu
47   *
48   * @type {String}
49   * @private
50   */
51  $html: '<div id="page_overlay"> \
52      <div id="overlay_left" class="overlays"></div> \
53      <div id="overlay_top" class="overlays"></div> \
54      <div id="overlay_bottom" class="overlays"></div> \
55      <div id="overlay_right" class="overlays"></div> \
56     </div>',
57  /**
58   * Top pozice elementu, ktery ma byt videt
59   *
60   * @type {Number}
61   * @private
62   */
63  $element_top: 0,
64  /**
65   * Left pozice elementu, ktery ma byt videt
66   *
67   * @type {Number}
68   * @private
69   */
70  $element_left: 0,
71  /**
72   * Sirka elementu, ktery ma byt videt
73   *
74   * @type {Number}
75   * @private
76   */
77   $element_width: 0,
78  /**
79   * Vyska elementu, ktery ma byt videt
80   *
81   * @type {Number}
82   * @private
83   */
84   $element_height: 0,
85  /**
86   * Sirka elementu, ktery se ma ztmavit
87   *
88   * @type {Number}
89   * @private
90   */
91   $canvas_width: 0,
92  /**
93   * Vyska elementu, ktery se ma ztmavit
94   *
95   * @type {Number}
96   * @private
97   */
98   $canvas_height: 0,
99  /**
100   *  Top pozice elementu, ktery se ma ztmavit
101   *
102   * @type {Number}
103   * @private
104   */
105   $top_offset: 0,
106  /**
107   * Aktivovat pripocitavani top paddingu k top rozmeru prvku, ktery ma byt videt?
108   *
109   * @type {Boolean}
110   * @private
111   */
112   $padding_top_correction: false,
113  /**
114   * Identifikator prvku, ktery ma byt videt
115   *
116   * @type {String}
117   * @private
118   */
119//   $visible_element_id: $visible_element_id,
120   $visible_element_id: null,
121  /**
122   * Identifikator prvku, ktery se ma ztmavit
123   *
124   * @type {String}
125   * @private
126   */
127//  $canvas_id: $add_to_id,
128  $canvas_id: null,
129  /**
130   *Defaultní nastavení
131   *@type {Object}
132   *@private
133   */
134  $defaults: {
135    $z_index: 9999,
136    $background_image_url: null, // pokud bude nastaveno, bude se ignorovat barava pozadí i opacity
137    $background_color: "#000000",
138    $opacity: 0.3,
139    $is_clickable: false // do nepřekrytého prvku půjde kliknout
140  },
141  /**
142   *Velikost plátna
143   */
144  $max_size: {},
145  /**
146   * Nastavení overlay
147   */
148  settings: {},
149  init: function($add_to_id, $visible_element_id, $locale_settings)
150  {
151    if(   typeof($visible_element_id) == 'undefined'
152       || typeof($add_to_id) == 'undefined'
153       || !jQuery($visible_element_id).length
154       || !jQuery($add_to_id).length)
155    {
156      return false;
157    }
158    var $locale_settings = $locale_settings || {};
159    BS.Overlay.settings = $.extend(false, this.$defaults, $locale_settings),
160    BS.Overlay.$visible_element_id = $visible_element_id,
161    BS.Overlay.$canvas_id = $add_to_id;
162
163    if(BS.Overlay.settings.$is_clickable)
164    {
165      BS.Overlay.settings.$max_size = {
166        width: '0px',
167        height: '0px'
168      };
169    }
170    else
171    {
172      BS.Overlay.settings.$max_size = {
173        width: '100%',
174        height: '100%'
175      };
176    }
177
178    if(jQuery("#page_overlay").is("div") === false)
179    {
180      jQuery(BS.Overlay.$canvas_id).append(BS.Overlay.$html)
181    }
182    else
183    {
184      BS.Overlay.show();
185    }
186
187    jQuery('#page_overlay').css({
188      position: 'absolute',
189      top: '0px',
190      left: '0px',
191      zIndex: BS.Overlay.settings.$z_index,
192      display: 'none'
193    });
194    var $tmp_settings = {
195      position: 'absolute',
196      top: '0px',
197      left: '0px',
198      zIndex: BS.Overlay.settings.$z_index
199    }
200    if(BS.Overlay.settings.$background_image_url === null)
201    {
202      $tmp_settings = $.extend(true, $tmp_settings, {
203        backgroundColor: BS.Overlay.settings.$background_color,
204        opacity: BS.Overlay.settings.$opacity
205      });
206    }
207    else
208    {
209      $tmp_settings = $.extend(true, $tmp_settings, {
210        backgroundImage: 'url(\''+BS.Overlay.settings.$background_image_url+'\')'
211      });
212    }
213    jQuery('.overlays').css($tmp_settings);

214    BS.Overlay.$this = this;
215    return BS.Overlay.$this;
216  },
217
218  /**
219   * Prenastavi prvek, ktery ma byt videt
220   *
221   * @param {String} $visible_element_id
222   */
223  reset_to: function($visible_element_id)
224  {
225    this.settings.$visible_element_id = $visible_element_id;
226
227    this.refresh_coordinates();
228
229    this.setup_overlays_style();
230
231  },
232
233  /**
234   * Aktivovat pripocitavani top paddingu k top rozmeru visible prvku?
235   *
236   * @param {Boolean} $allow Zapnut nebo vypnout
237   */
238  setup_padding_top_correction: function($allow)
239  {
240    this.$padding_top_correction = (typeof($allow) == 'undefined' || $allow) ? true : false;
241  },
242
243  /**
244   * Zobrazit prekryti metodou show()
245   */
246  show: function()
247  {
248    this.refresh_coordinates();
249
250    jQuery('#page_overlay').css(BS.Overlay.settings.$max_size).show();
251    jQuery('.overlays').show();
252
253    this.setup_overlays_style();
254  },
255
256  /**
257   * Zobrazit prekryti metodou fadeIn
258   *
259   * @param {Number} $speed (=300) Rychlost animace
260   */
261  fade_in: function($speed)
262  {
263    this.refresh_coordinates();
264
265    if(typeof($speed) == 'undefined')
266    {
267      var $speed = 300;
268    }
269    jQuery('#page_overlay').css(BS.Overlay.settings.$max_size).fadeIn($speed);
270    this.setup_overlays_style();
271    jQuery('.overlays').fadeIn($speed);
272  },
273
274  /**
275   * Skryt prekryti metodou hide()
276   */
277  hide: function()
278  {
279    jQuery('.overlays').fadeOut();
280    jQuery('#page_overlay').hide();
281  },
282
283  /**
284   * Skryt prekryti metodou fadeOut()
285   *
286   * @param {Number} $speed (=150) Rychlost animace
287   */
288  fade_out: function($speed)
289  {
290    if(typeof($speed) == 'undefined')
291    {
292      var $speed = 150;
293    }
294    jQuery('.overlays').fadeOut($speed);
295    jQuery('#page_overlay').fadeOut($speed);
296  },
297
298  /**
299   * Vrati vstupni parametr $size nebo 0 pokud je $size mensi nebo roven 0
300   *
301   * @param {Number} $size
302   * @private
303   */
304  parse_size: function($size)
305  {
306    return ($size > 0) ? $size : 0;
307  },
308
309  /**
310   * Prekonfiguruje velikosti a pozice skryvacich divu podle aktualni situace
311   */
312  setup_overlays_style: function()
313  {
314    jQuery('#overlay_left').css({
315      height: this.parse_size(BS.Overlay.$canvas_height)+'px',
316      width: this.parse_size(BS.Overlay.$element_left)+'px'
317    });
318    jQuery('#overlay_top').css({
319      height: this.parse_size(BS.Overlay.$element_top)+'px',
320      width: this.parse_size(BS.Overlay.$element_width)+'px',
321      left: BS.Overlay.$element_left+'px'
322    });
323
324    jQuery('#overlay_right').css({
325      height: this.parse_size(BS.Overlay.$canvas_height)+'px',
326      width: this.parse_size(BS.Overlay.$canvas_width - (BS.Overlay.$element_left+BS.Overlay.$element_width))+'px',
327      left: (BS.Overlay.$element_left+BS.Overlay.$element_width)+'px'
328    });
329
330    jQuery('#overlay_bottom').css({
331      height: this.parse_size(BS.Overlay.$canvas_height-(BS.Overlay.$element_height+BS.Overlay.$element_top))+'px',
332      width: this.parse_size(BS.Overlay.$element_width)+'px',
333      left: BS.Overlay.$element_left+'px',
334      top: this.parse_size(BS.Overlay.$element_top)+BS.Overlay.$element_height+'px'
335    });
336  },
337
338  /**
339   * Nastavi vsechny potrebne rozmery potrebne pro nastaveni ztmaveni podle aktualniho rozvrzeni stranky
340   */
341  refresh_coordinates: function()
342  {
343    if(typeof(BS.Overlay.$visible_element_id) == 'undefined')
344    {
345      return false;
346    }
347
348    BS.Overlay.$element_top_border = parseInt(jQuery(BS.Overlay.$visible_element_id).css('border-top-width'));
349    BS.Overlay.$element_left_border = parseInt(jQuery(BS.Overlay.$visible_element_id).css('border-left-width'));
350
351    BS.Overlay.$element_left_padding = parseInt(jQuery(BS.Overlay.$visible_element_id).css('paddingLeft'));
352    BS.Overlay.$element_top_padding = (BS.Overlay.$padding_top_correction)

353      ? parseInt(jQuery(BS.Overlay.$visible_element_id).css('paddingTop'))
354      : 0;
355
356    BS.Overlay.$top_offset = jQuery(BS.Overlay.$canvas_id).offset().top;
357
358    var $offset = jQuery(BS.Overlay.$visible_element_id).offset();
359
360    BS.Overlay.$element_top = $offset.top - BS.Overlay.$top_offset + BS.Overlay.$element_top_border + BS.Overlay.$element_top_padding;
361    BS.Overlay.$element_left = $offset.left + BS.Overlay.$element_left_border + BS.Overlay.$element_left_padding;
362    BS.Overlay.$element_width = jQuery(BS.Overlay.$visible_element_id).width();
363    BS.Overlay.$element_height = jQuery(BS.Overlay.$visible_element_id).height();
364
365    BS.Overlay.$canvas_width = jQuery(BS.Overlay.$canvas_id).width() + BS.Overlay.$top_offset;
366    BS.Overlay.$canvas_height = jQuery(BS.Overlay.$canvas_id).height() + BS.Overlay.$top_offset;
367
368    return true;
369  }
370}