Changeset 2667994
- Timestamp:
- 01/28/2022 09:53:42 AM (5 months ago)
- Location:
- hash-elements
- Files:
-
- 210 added
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
hash-elements/trunk/assets/js/frontend.js
r2561080 r2667994 23 23 24 24 elementor.hooks.addAction('frontend/element_ready/column', HashElements.elementorColumn); 25 //elementorFrontend.hooks.addAction('frontend/element_ready/section', HashElements.setStickySection);26 25 }, 27 26 ticker: function ($scope) { … … 276 275 }, 277 276 elementorColumn: function ($scope) { 278 var columnId = $scope.data('id');279 277 var editMode = Boolean(elementor.isEditMode()); 280 var stickyInstanceOptions = { 281 topSpacing: 50, 282 bottomSpacing: 50, 283 innerWrapperSelector: '.elementor-widget-wrap' 284 }; 285 if (!editMode) { 286 if ($scope.hasClass('he-elementor-sticky-column')) { 287 var adminbarHeight = 0; 288 if ($('body').hasClass('admin-bar')) { 289 adminbarHeight = 32; 290 } 291 var $stickywrap = $scope.find('> .elementor-column-wrap'); 292 $scope.find('> .elementor-column-wrap,> .elementor-widget-wrap').addClass('ht-clearfix'); 293 if ($stickywrap.length > 0) { 294 stickyInstanceOptions.innerWrapperSelector = '.elementor-column-wrap'; 295 } else { 296 stickyInstanceOptions.innerWrapperSelector = '.elementor-widget-wrap'; 297 } 298 $scope.css({display: 'block'}); 299 stickyInstanceOptions.topSpacing = parseInt($scope.attr('data-top-spacing')) + adminbarHeight; 300 stickyInstanceOptions.bottomSpacing = parseInt($scope.attr('data-bottom-spacing')); 301 stickyInstanceOptions.containerSelector = '.elementor-container'; 302 303 var stickyInstance = new StickySidebar($scope[0], stickyInstanceOptions); 304 $scope.attr('data-sticky-column', 'true'); 305 306 $(window).resize(function () { 307 var currentDeviceMode = elementorFrontend.getCurrentDeviceMode(), 308 availableDevices = ['desktop', 'tablet'], 309 isInit = $scope.attr('data-sticky-column'); 310 311 if (-1 !== availableDevices.indexOf(currentDeviceMode)) { 312 if (isInit === 'false') { 313 $scope.attr('data-sticky-column', 'true'); 314 stickyInstance = new StickySidebar($scope[0], stickyInstanceOptions); 315 stickyInstance.updateSticky(); 316 } 317 } else { 318 $scope.attr('data-sticky-column', 'false'); 319 stickyInstance.destroy(); 320 } 321 }).resize(); 278 var enable_sticky = false; 279 var adminbarHeight = 0; 280 var topSpacing = 0; 281 var bottomSpacing = 0; 282 if ($('body').hasClass('admin-bar')) { 283 adminbarHeight = 32; 284 } 285 if (editMode) { 286 var $sticky = $scope.find('.he-elementor-sticky-column'); 287 if ($sticky.length) { 288 enable_sticky = true; 289 if ($sticky.attr('data-top-spacing')) { 290 topSpacing = $sticky.attr('data-top-spacing'); 291 } 292 293 if ($sticky.attr('data-bottom-spacing')) { 294 bottomSpacing = $sticky.attr('data-bottom-spacing'); 295 } 322 296 } 323 297 } else { 324 var settings = HashElements.columnEditorSettings(columnId); 325 if ('true' === settings['sticky']) { 326 $scope.addClass('he-elementor-sticky-column'); 327 var $stickywrap = $scope.find('> .elementor-column-wrap'); 328 $scope.find('> .elementor-column-wrap,> .elementor-widget-wrap').addClass('ht-clearfix'); 329 if ($stickywrap.length > 0) { 330 stickyInstanceOptions.innerWrapperSelector = '.elementor-column-wrap'; 331 } else { 332 stickyInstanceOptions.innerWrapperSelector = '.elementor-widget-wrap'; 333 } 334 $scope.css({display: 'block'}); 335 336 stickyInstanceOptions.topSpacing = settings['topSpacing']; 337 stickyInstanceOptions.bottomSpacing = settings['bottomSpacing']; 338 339 var stickyInstance = new StickySidebar($scope[0], stickyInstanceOptions); 340 $scope.attr('data-sticky-column', 'true'); 341 stickyInstance.updateSticky(); 342 343 $(window).resize(function () { 344 var currentDeviceMode = elementorFrontend.getCurrentDeviceMode(), 345 availableDevices = ['desktop', 'tablet'], 346 isInit = $scope.attr('data-sticky-column'); 347 348 if (-1 !== availableDevices.indexOf(currentDeviceMode)) { 349 if (isInit === 'false') { 350 $scope.attr('data-sticky-column', 'true'); 351 stickyInstance = new StickySidebar($scope[0], stickyInstanceOptions); 352 stickyInstance.updateSticky(); 353 } 354 } else { 355 $scope.attr('data-sticky-column', 'false'); 356 stickyInstance.destroy(); 357 } 358 }).resize(); 359 } else { 360 $scope.removeClass('he-elementor-sticky-column'); 298 if ($scope.hasClass('he-elementor-sticky-column')) { 299 enable_sticky = true; 300 if ($scope.attr('data-top-spacing')) { 301 topSpacing = $scope.attr('data-top-spacing'); 302 } 303 304 if ($scope.attr('data-bottom-spacing')) { 305 bottomSpacing = $scope.attr('data-bottom-spacing'); 306 } 361 307 } 362 308 } 363 309 364 365 366 }, 367 columnEditorSettings: function (columnId) { 368 var editorElements = null, 369 columnData = {}; 370 371 if (!window.elementor.hasOwnProperty('elements')) { 372 return false; 373 } 374 375 editorElements = window.elementor.elements; 376 377 if (!editorElements.models) { 378 return false; 379 } 380 381 $.each(editorElements.models, function (index, obj) { 382 383 $.each(obj.attributes.elements.models, function (index, obj) { 384 if (columnId == obj.id) { 385 columnData = obj.attributes.settings.attributes; 386 } 387 }); 388 389 }); 390 391 return { 392 'sticky': columnData['hash_elements_sidebar_sticky'] || false, 393 'topSpacing': columnData['hash_elements_sidebar_sticky_top_spacing'] || 50, 394 'bottomSpacing': columnData['hash_elements_sidebar_sticky_bottom_spacing'] || 50, 395 } 396 }, 397 resizeSticky: function ($target) { 398 var currentDeviceMode = elementorFrontend.getCurrentDeviceMode(); 399 400 if (-1 !== availableDevices.indexOf(currentDeviceMode)) { 401 $target.data('stickyColumnInit', true); 402 stickyInstance = new StickySidebar($target[0], stickyInstanceOptions); 403 stickyInstance.updateSticky(); 404 } else { 405 $target.data('stickyColumnInit', false); 406 stickyInstance.destroy(); 407 } 408 } 310 if (enable_sticky) { 311 $scope.find('.elementor-column-wrap').addClass('theiaStickySidebar'); 312 $scope.css({display: 'block'}); 313 314 $scope.theiaStickySidebar({ 315 additionalMarginTop: parseInt(topSpacing) + adminbarHeight, 316 additionalMarginBottom: parseInt(bottomSpacing) 317 }); 318 } 319 }, 409 320 }; 410 321 $(window).on('elementor/frontend/init', HashElements.init); 411 322 412 var JetStickyTools = {413 debounce: function (threshold, callback) {414 var timeout;415 416 return function debounced($event) {417 function delayed() {418 callback.call(this, $event);419 timeout = null;420 }421 422 if (timeout) {423 clearTimeout(timeout);424 }425 426 timeout = setTimeout(delayed, threshold);427 };428 }429 }430 323 }(jQuery, window.elementorFrontend)); 431 324 -
hash-elements/trunk/assets/js/theia-sticky-sidebar.js
r2610065 r2667994 1 (function (global, factory) { 2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 3 typeof define === 'function' && define.amd ? define(['exports'], factory) : 4 (factory((global.StickySidebar = {}))); 5 }(this, (function (exports) { 'use strict'; 6 7 var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 8 9 10 11 function unwrapExports (x) { 12 return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; 13 } 14 15 function createCommonjsModule(fn, module) { 16 return module = { exports: {} }, fn(module, module.exports), module.exports; 17 } 18 19 var stickySidebar = createCommonjsModule(function (module, exports) { 20 (function (global, factory) { 21 if (typeof undefined === "function" && undefined.amd) { 22 undefined(['exports'], factory); 23 } else { 24 factory(exports); 25 } 26 })(commonjsGlobal, function (exports) { 27 Object.defineProperty(exports, "__esModule", { 28 value: true 29 }); 30 31 function _classCallCheck(instance, Constructor) { 32 if (!(instance instanceof Constructor)) { 33 throw new TypeError("Cannot call a class as a function"); 1 /*! 2 * Theia Sticky Sidebar v1.7.0 3 * https://github.com/WeCodePixels/theia-sticky-sidebar 4 * 5 * Glues your website's sidebars, making them permanently visible while scrolling. 6 * 7 * Copyright 2013-2016 WeCodePixels and other contributors 8 * Released under the MIT license 9 */ 10 11 (function ($) { 12 $.fn.theiaStickySidebar = function (options) { 13 var defaults = { 14 'containerSelector': '', 15 'additionalMarginTop': 0, 16 'additionalMarginBottom': 0, 17 'updateSidebarHeight': true, 18 'minWidth': 0, 19 'disableOnResponsiveLayouts': true, 20 'sidebarBehavior': 'modern', 21 'defaultPosition': 'relative', 22 'namespace': 'TSS' 23 }; 24 options = $.extend(defaults, options); 25 26 // Validate options 27 options.additionalMarginTop = parseInt(options.additionalMarginTop) || 0; 28 options.additionalMarginBottom = parseInt(options.additionalMarginBottom) || 0; 29 30 tryInitOrHookIntoEvents(options, this); 31 32 // Try doing init, otherwise hook into window.resize and document.scroll and try again then. 33 function tryInitOrHookIntoEvents(options, $that) { 34 var success = tryInit(options, $that); 35 36 if (!success) { 37 console.log('TSS: Body width smaller than options.minWidth. Init is delayed.'); 38 39 $(document).on('scroll.' + options.namespace, function (options, $that) { 40 return function (evt) { 41 var success = tryInit(options, $that); 42 43 if (success) { 44 $(this).unbind(evt); 45 } 46 }; 47 }(options, $that)); 48 $(window).on('resize.' + options.namespace, function (options, $that) { 49 return function (evt) { 50 var success = tryInit(options, $that); 51 52 if (success) { 53 $(this).unbind(evt); 54 } 55 }; 56 }(options, $that)) 57 } 58 } 59 60 // Try doing init if proper conditions are met. 61 function tryInit(options, $that) { 62 if (options.initialized === true) { 63 return true; 64 } 65 66 if ($('body').width() < options.minWidth) { 67 return false; 68 } 69 70 init(options, $that); 71 72 return true; 73 } 74 75 // Init the sticky sidebar(s). 76 function init(options, $that) { 77 options.initialized = true; 78 79 // Add CSS 80 var existingStylesheet = $('#theia-sticky-sidebar-stylesheet-' + options.namespace); 81 if (existingStylesheet.length === 0) { 82 $('head').append($('<style id="theia-sticky-sidebar-stylesheet-' + options.namespace + '">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')); 83 } 84 85 $that.each(function () { 86 var o = {}; 87 88 o.sidebar = $(this); 89 90 // Save options 91 o.options = options || {}; 92 93 // Get container 94 o.container = $(o.options.containerSelector); 95 if (o.container.length == 0) { 96 o.container = o.sidebar.parent(); 97 } 98 99 // Create sticky sidebar 100 o.sidebar.parents().css('-webkit-transform', 'none'); // Fix for WebKit bug - https://code.google.com/p/chromium/issues/detail?id=20574 101 o.sidebar.css({ 102 'position': o.options.defaultPosition, 103 'overflow': 'visible', 104 // The "box-sizing" must be set to "content-box" because we set a fixed height to this element when the sticky sidebar has a fixed position. 105 '-webkit-box-sizing': 'border-box', 106 '-moz-box-sizing': 'border-box', 107 'box-sizing': 'border-box' 108 }); 109 110 // Get the sticky sidebar element. If none has been found, then create one. 111 o.stickySidebar = o.sidebar.find('.theiaStickySidebar'); 112 if (o.stickySidebar.length == 0) { 113 // Remove <script> tags, otherwise they will be run again when added to the stickySidebar. 114 var javaScriptMIMETypes = /(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i; 115 o.sidebar.find('script').filter(function (index, script) { 116 return script.type.length === 0 || script.type.match(javaScriptMIMETypes); 117 }).remove(); 118 119 o.stickySidebar = $('<div>').addClass('theiaStickySidebar').append(o.sidebar.children()); 120 o.sidebar.append(o.stickySidebar); 121 } 122 123 // Get existing top and bottom margins and paddings 124 o.marginBottom = parseInt(o.sidebar.css('margin-bottom')); 125 o.paddingTop = parseInt(o.sidebar.css('padding-top')); 126 o.paddingBottom = parseInt(o.sidebar.css('padding-bottom')); 127 128 // Add a temporary padding rule to check for collapsable margins. 129 var collapsedTopHeight = o.stickySidebar.offset().top; 130 var collapsedBottomHeight = o.stickySidebar.outerHeight(); 131 o.stickySidebar.css('padding-top', 1); 132 o.stickySidebar.css('padding-bottom', 1); 133 collapsedTopHeight -= o.stickySidebar.offset().top; 134 collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight; 135 if (collapsedTopHeight == 0) { 136 o.stickySidebar.css('padding-top', 0); 137 o.stickySidebarPaddingTop = 0; 138 } else { 139 o.stickySidebarPaddingTop = 1; 140 } 141 142 if (collapsedBottomHeight == 0) { 143 o.stickySidebar.css('padding-bottom', 0); 144 o.stickySidebarPaddingBottom = 0; 145 } else { 146 o.stickySidebarPaddingBottom = 1; 147 } 148 149 // We use this to know whether the user is scrolling up or down. 150 o.previousScrollTop = null; 151 152 // Scroll top (value) when the sidebar has fixed position. 153 o.fixedScrollTop = 0; 154 155 // Set sidebar to default values. 156 resetSidebar(); 157 158 o.onScroll = function (o) { 159 // Stop if the sidebar isn't visible. 160 if (!o.stickySidebar.is(":visible")) { 161 return; 162 } 163 164 // Stop if the window is too small. 165 if ($('body').width() < o.options.minWidth) { 166 resetSidebar(); 167 return; 168 } 169 170 // Stop if the sidebar width is larger than the container width (e.g. the theme is responsive and the sidebar is now below the content) 171 if (o.options.disableOnResponsiveLayouts) { 172 var sidebarWidth = o.sidebar.outerWidth(o.sidebar.css('float') == 'none'); 173 174 if (sidebarWidth + 50 > o.container.width()) { 175 resetSidebar(); 176 return; 177 } 178 } 179 180 var scrollTop = $(document).scrollTop(); 181 var position = 'static'; 182 183 // If the user has scrolled down enough for the sidebar to be clipped at the top, then we can consider changing its position. 184 if (scrollTop >= o.sidebar.offset().top + (o.paddingTop - o.options.additionalMarginTop)) { 185 // The top and bottom offsets, used in various calculations. 186 var offsetTop = o.paddingTop + options.additionalMarginTop; 187 var offsetBottom = o.paddingBottom + o.marginBottom + options.additionalMarginBottom; 188 189 // All top and bottom positions are relative to the window, not to the parent elemnts. 190 var containerTop = o.sidebar.offset().top; 191 var containerBottom = o.sidebar.offset().top + getClearedHeight(o.container); 192 193 // The top and bottom offsets relative to the window screen top (zero) and bottom (window height). 194 var windowOffsetTop = 0 + options.additionalMarginTop; 195 var windowOffsetBottom; 196 197 var sidebarSmallerThanWindow = (o.stickySidebar.outerHeight() + offsetTop + offsetBottom) < $(window).height(); 198 if (sidebarSmallerThanWindow) { 199 windowOffsetBottom = windowOffsetTop + o.stickySidebar.outerHeight(); 200 } else { 201 windowOffsetBottom = $(window).height() - o.marginBottom - o.paddingBottom - options.additionalMarginBottom; 202 } 203 204 var staticLimitTop = containerTop - scrollTop + o.paddingTop; 205 var staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom; 206 207 var top = o.stickySidebar.offset().top - scrollTop; 208 var scrollTopDiff = o.previousScrollTop - scrollTop; 209 210 // If the sidebar position is fixed, then it won't move up or down by itself. So, we manually adjust the top coordinate. 211 if (o.stickySidebar.css('position') == 'fixed') { 212 if (o.options.sidebarBehavior == 'modern') { 213 top += scrollTopDiff; 214 } 215 } 216 217 if (o.options.sidebarBehavior == 'stick-to-top') { 218 top = options.additionalMarginTop; 219 } 220 221 if (o.options.sidebarBehavior == 'stick-to-bottom') { 222 top = windowOffsetBottom - o.stickySidebar.outerHeight(); 223 } 224 225 if (scrollTopDiff > 0) { // If the user is scrolling up. 226 top = Math.min(top, windowOffsetTop); 227 } else { // If the user is scrolling down. 228 top = Math.max(top, windowOffsetBottom - o.stickySidebar.outerHeight()); 229 } 230 231 top = Math.max(top, staticLimitTop); 232 233 top = Math.min(top, staticLimitBottom - o.stickySidebar.outerHeight()); 234 235 // If the sidebar is the same height as the container, we won't use fixed positioning. 236 var sidebarSameHeightAsContainer = o.container.height() == o.stickySidebar.outerHeight(); 237 238 if (!sidebarSameHeightAsContainer && top == windowOffsetTop) { 239 position = 'fixed'; 240 } else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.outerHeight()) { 241 position = 'fixed'; 242 } else if (scrollTop + top - o.sidebar.offset().top - o.paddingTop <= options.additionalMarginTop) { 243 // Stuck to the top of the page. No special behavior. 244 position = 'static'; 245 } else { 246 // Stuck to the bottom of the page. 247 position = 'absolute'; 248 } 249 } 250 251 /* 252 * Performance notice: It's OK to set these CSS values at each resize/scroll, even if they don't change. 253 * It's way slower to first check if the values have changed. 254 */ 255 if (position == 'fixed') { 256 var scrollLeft = $(document).scrollLeft(); 257 258 o.stickySidebar.css({ 259 'position': 'fixed', 260 'width': getWidthForObject(o.stickySidebar) + 'px', 261 'transform': 'translateY(' + top + 'px)', 262 'left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left')) - scrollLeft) + 'px', 263 'top': '0px' 264 }); 265 } else if (position == 'absolute') { 266 var css = {}; 267 268 if (o.stickySidebar.css('position') != 'absolute') { 269 css.position = 'absolute'; 270 css.transform = 'translateY(' + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)'; 271 css.top = '0px'; 272 } 273 274 css.width = getWidthForObject(o.stickySidebar) + 'px'; 275 css.left = ''; 276 277 o.stickySidebar.css(css); 278 } else if (position == 'static') { 279 resetSidebar(); 280 } 281 282 if (position != 'static') { 283 if (o.options.updateSidebarHeight == true) { 284 o.sidebar.css({ 285 'min-height': o.stickySidebar.outerHeight() + o.stickySidebar.offset().top - o.sidebar.offset().top + o.paddingBottom 286 }); 287 } 288 } 289 290 o.previousScrollTop = scrollTop; 291 }; 292 293 // Initialize the sidebar's position. 294 o.onScroll(o); 295 296 // Recalculate the sidebar's position on every scroll and resize. 297 $(document).on('scroll.' + o.options.namespace, function (o) { 298 return function () { 299 o.onScroll(o); 300 }; 301 }(o)); 302 $(window).on('resize.' + o.options.namespace, function (o) { 303 return function () { 304 o.stickySidebar.css({'position': 'static'}); 305 o.onScroll(o); 306 }; 307 }(o)); 308 309 // Recalculate the sidebar's position every time the sidebar changes its size. 310 if (typeof ResizeSensor !== 'undefined') { 311 new ResizeSensor(o.stickySidebar[0], function (o) { 312 return function () { 313 o.onScroll(o); 314 }; 315 }(o)); 316 } 317 318 // Reset the sidebar to its default state 319 function resetSidebar() { 320 o.fixedScrollTop = 0; 321 o.sidebar.css({ 322 'min-height': '1px' 323 }); 324 o.stickySidebar.css({ 325 'position': 'static', 326 'width': '', 327 'transform': 'none' 328 }); 329 } 330 331 // Get the height of a div as if its floated children were cleared. Note that this function fails if the floats are more than one level deep. 332 function getClearedHeight(e) { 333 var height = e.height(); 334 335 e.children().each(function () { 336 height = Math.max(height, $(this).height()); 337 }); 338 339 return height; 340 } 341 }); 342 } 343 344 function getWidthForObject(object) { 345 var width; 346 347 try { 348 width = object[0].getBoundingClientRect().width; 349 } catch (err) { 350 } 351 352 if (typeof width === "undefined") { 353 width = object.width(); 354 } 355 356 return width; 357 } 358 359 return this; 34 360 } 35 } 36 37 var _createClass = function () { 38 function defineProperties(target, props) { 39 for (var i = 0; i < props.length; i++) { 40 var descriptor = props[i]; 41 descriptor.enumerable = descriptor.enumerable || false; 42 descriptor.configurable = true; 43 if ("value" in descriptor) descriptor.writable = true; 44 Object.defineProperty(target, descriptor.key, descriptor); 45 } 46 } 47 48 return function (Constructor, protoProps, staticProps) { 49 if (protoProps) defineProperties(Constructor.prototype, protoProps); 50 if (staticProps) defineProperties(Constructor, staticProps); 51 return Constructor; 52 }; 53 }(); 54 55 /** 56 * Sticky Sidebar JavaScript Plugin. 57 * @version 3.3.4 58 * @author Ahmed Bouhuolia <a.bouhuolia@gmail.com> 59 * @license The MIT License (MIT) 60 */ 61 var StickySidebar = function () { 62 63 // --------------------------------- 64 // # Define Constants 65 // --------------------------------- 66 // 67 var EVENT_KEY = '.stickySidebar'; 68 var DEFAULTS = { 69 /** 70 * Additional top spacing of the element when it becomes sticky. 71 * @type {Numeric|Function} 72 */ 73 topSpacing: 0, 74 75 /** 76 * Additional bottom spacing of the element when it becomes sticky. 77 * @type {Numeric|Function} 78 */ 79 bottomSpacing: 0, 80 81 /** 82 * Container sidebar selector to know what the beginning and end of sticky element. 83 * @type {String|False} 84 */ 85 containerSelector: false, 86 87 /** 88 * Inner wrapper selector. 89 * @type {String} 90 */ 91 innerWrapperSelector: '.inner-wrapper-sticky', 92 93 /** 94 * The name of CSS class to apply to elements when they have become stuck. 95 * @type {String|False} 96 */ 97 stickyClass: 'is-affixed', 98 99 /** 100 * Detect when sidebar and its container change height so re-calculate their dimensions. 101 * @type {Boolean} 102 */ 103 resizeSensor: true, 104 105 /** 106 * The sidebar returns to its normal position if its width below this value. 107 * @type {Numeric} 108 */ 109 minWidth: false 110 }; 111 112 // --------------------------------- 113 // # Class Definition 114 // --------------------------------- 115 // 116 /** 117 * Sticky Sidebar Class. 118 * @public 119 */ 120 121 var StickySidebar = function () { 122 123 /** 124 * Sticky Sidebar Constructor. 125 * @constructor 126 * @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector. 127 * @param {Object} options - The options of sticky sidebar. 128 */ 129 function StickySidebar(sidebar) { 130 var _this = this; 131 132 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 133 134 _classCallCheck(this, StickySidebar); 135 136 this.options = StickySidebar.extend(DEFAULTS, options); 137 138 // Sidebar element query if there's no one, throw error. 139 this.sidebar = 'string' === typeof sidebar ? document.querySelector(he-elementor-sticky-column) : sidebar; 140 if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element."); 141 142 this.sidebarInner = false; 143 this.container = this.sidebar.parentElement; 144 145 // Current Affix Type of sidebar element. 146 this.affixedType = 'STATIC'; 147 this.direction = 'down'; 148 this.support = { 149 transform: false, 150 transform3d: false 151 }; 152 153 this._initialized = false; 154 this._reStyle = false; 155 this._breakpoint = false; 156 157 // Dimensions of sidebar, container and screen viewport. 158 this.dimensions = { 159 translateY: 0, 160 maxTranslateY: 0, 161 topSpacing: 0, 162 lastTopSpacing: 0, 163 bottomSpacing: 0, 164 lastBottomSpacing: 0, 165 sidebarHeight: 0, 166 sidebarWidth: 0, 167 containerTop: 0, 168 containerHeight: 0, 169 viewportHeight: 0, 170 viewportTop: 0, 171 lastViewportTop: 0 172 }; 173 174 // Bind event handlers for referencability. 175 ['handleEvent'].forEach(function (method) { 176 _this[method] = _this[method].bind(_this); 177 }); 178 179 // Initialize sticky sidebar for first time. 180 this.initialize(); 181 } 182 183 /** 184 * Initializes the sticky sidebar by adding inner wrapper, define its container, 185 * min-width breakpoint, calculating dimensions, adding helper classes and inline style. 186 * @private 187 */ 188 189 190 _createClass(StickySidebar, [{ 191 key: 'initialize', 192 value: function initialize() { 193 var _this2 = this; 194 195 this._setSupportFeatures(); 196 197 // Get sticky sidebar inner wrapper, if not found, will create one. 198 if (this.options.innerWrapperSelector) { 199 this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector); 200 201 if (null === this.sidebarInner) this.sidebarInner = false; 202 } 203 204 if (!this.sidebarInner) { 205 var wrapper = document.createElement('div'); 206 wrapper.setAttribute('class', 'inner-wrapper-sticky'); 207 this.sidebar.appendChild(wrapper); 208 209 while (this.sidebar.firstChild != wrapper) { 210 wrapper.appendChild(this.sidebar.firstChild); 211 }this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky'); 212 } 213 214 // Container wrapper of the sidebar. 215 if (this.options.containerSelector) { 216 var containers = document.querySelectorAll(this.options.containerSelector); 217 containers = Array.prototype.slice.call(containers); 218 219 containers.forEach(function (container, item) { 220 if (!container.contains(_this2.sidebar)) return; 221 _this2.container = container; 222 }); 223 224 if (!containers.length) throw new Error("The container does not contains on the sidebar."); 225 } 226 227 // If top/bottom spacing is not function parse value to integer. 228 if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0; 229 230 if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0; 231 232 // Breakdown sticky sidebar if screen width below `options.minWidth`. 233 this._widthBreakpoint(); 234 235 // Calculate dimensions of sidebar, container and viewport. 236 this.calcDimensions(); 237 238 // Affix sidebar in proper position. 239 this.stickyPosition(); 240 241 // Bind all events. 242 this.bindEvents(); 243 244 // Inform other properties the sticky sidebar is initialized. 245 this._initialized = true; 246 } 247 }, { 248 key: 'bindEvents', 249 value: function bindEvents() { 250 window.addEventListener('resize', this, { passive: true, capture: false }); 251 window.addEventListener('scroll', this, { passive: true, capture: false }); 252 253 this.sidebar.addEventListener('update' + EVENT_KEY, this); 254 255 if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) { 256 new ResizeSensor(this.sidebarInner, this.handleEvent); 257 new ResizeSensor(this.container, this.handleEvent); 258 } 259 } 260 }, { 261 key: 'handleEvent', 262 value: function handleEvent(event) { 263 this.updateSticky(event); 264 } 265 }, { 266 key: 'calcDimensions', 267 value: function calcDimensions() { 268 if (this._breakpoint) return; 269 var dims = this.dimensions; 270 271 // Container of sticky sidebar dimensions. 272 dims.containerTop = StickySidebar.offsetRelative(this.container).top; 273 dims.containerHeight = this.container.clientHeight; 274 dims.containerBottom = dims.containerTop + dims.containerHeight; 275 276 // Sidebar dimensions. 277 dims.sidebarHeight = this.sidebarInner.offsetHeight; 278 dims.sidebarWidth = this.sidebar.offsetWidth; 279 280 // Screen viewport dimensions. 281 dims.viewportHeight = window.innerHeight; 282 283 // Maximum sidebar translate Y. 284 dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight; 285 286 this._calcDimensionsWithScroll(); 287 } 288 }, { 289 key: '_calcDimensionsWithScroll', 290 value: function _calcDimensionsWithScroll() { 291 var dims = this.dimensions; 292 293 dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left; 294 295 dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop; 296 dims.viewportBottom = dims.viewportTop + dims.viewportHeight; 297 dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 298 299 dims.topSpacing = this.options.topSpacing; 300 dims.bottomSpacing = this.options.bottomSpacing; 301 302 if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0; 303 304 if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0; 305 306 if ('VIEWPORT-TOP' === this.affixedType) { 307 // Adjust translate Y in the case decrease top spacing value. 308 if (dims.topSpacing < dims.lastTopSpacing) { 309 dims.translateY += dims.lastTopSpacing - dims.topSpacing; 310 this._reStyle = true; 311 } 312 } else if ('VIEWPORT-BOTTOM' === this.affixedType) { 313 // Adjust translate Y in the case decrease bottom spacing value. 314 if (dims.bottomSpacing < dims.lastBottomSpacing) { 315 dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing; 316 this._reStyle = true; 317 } 318 } 319 320 dims.lastTopSpacing = dims.topSpacing; 321 dims.lastBottomSpacing = dims.bottomSpacing; 322 } 323 }, { 324 key: 'isSidebarFitsViewport', 325 value: function isSidebarFitsViewport() { 326 var dims = this.dimensions; 327 var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing; 328 return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight; 329 } 330 }, { 331 key: 'observeScrollDir', 332 value: function observeScrollDir() { 333 var dims = this.dimensions; 334 if (dims.lastViewportTop === dims.viewportTop) return; 335 336 var furthest = 'down' === this.direction ? Math.min : Math.max; 337 338 // If the browser is scrolling not in the same direction. 339 if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down'; 340 } 341 }, { 342 key: 'getAffixType', 343 value: function getAffixType() { 344 this._calcDimensionsWithScroll(); 345 var dims = this.dimensions; 346 var colliderTop = dims.viewportTop + dims.topSpacing; 347 var affixType = this.affixedType; 348 349 if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) { 350 dims.translateY = 0; 351 affixType = 'STATIC'; 352 } else { 353 affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown(); 354 } 355 356 // Make sure the translate Y is not bigger than container height. 357 dims.translateY = Math.max(0, dims.translateY); 358 dims.translateY = Math.min(dims.containerHeight, dims.translateY); 359 dims.translateY = Math.round(dims.translateY); 360 361 dims.lastViewportTop = dims.viewportTop; 362 return affixType; 363 } 364 }, { 365 key: '_getAffixTypeScrollingDown', 366 value: function _getAffixTypeScrollingDown() { 367 var dims = this.dimensions; 368 var sidebarBottom = dims.sidebarHeight + dims.containerTop; 369 var colliderTop = dims.viewportTop + dims.topSpacing; 370 var colliderBottom = dims.viewportBottom - dims.bottomSpacing; 371 var affixType = this.affixedType; 372 373 if (this.isSidebarFitsViewport()) { 374 if (dims.sidebarHeight + colliderTop >= dims.containerBottom) { 375 dims.translateY = dims.containerBottom - sidebarBottom; 376 affixType = 'CONTAINER-BOTTOM'; 377 } else if (colliderTop >= dims.containerTop) { 378 dims.translateY = colliderTop - dims.containerTop; 379 affixType = 'VIEWPORT-TOP'; 380 } 381 } else { 382 if (dims.containerBottom <= colliderBottom) { 383 dims.translateY = dims.containerBottom - sidebarBottom; 384 affixType = 'CONTAINER-BOTTOM'; 385 } else if (sidebarBottom + dims.translateY <= colliderBottom) { 386 dims.translateY = colliderBottom - sidebarBottom; 387 affixType = 'VIEWPORT-BOTTOM'; 388 } else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) { 389 affixType = 'VIEWPORT-UNBOTTOM'; 390 } 391 } 392 393 return affixType; 394 } 395 }, { 396 key: '_getAffixTypeScrollingUp', 397 value: function _getAffixTypeScrollingUp() { 398 var dims = this.dimensions; 399 var sidebarBottom = dims.sidebarHeight + dims.containerTop; 400 var colliderTop = dims.viewportTop + dims.topSpacing; 401 var colliderBottom = dims.viewportBottom - dims.bottomSpacing; 402 var affixType = this.affixedType; 403 404 if (colliderTop <= dims.translateY + dims.containerTop) { 405 dims.translateY = colliderTop - dims.containerTop; 406 affixType = 'VIEWPORT-TOP'; 407 } else if (dims.containerBottom <= colliderBottom) { 408 dims.translateY = dims.containerBottom - sidebarBottom; 409 affixType = 'CONTAINER-BOTTOM'; 410 } else if (!this.isSidebarFitsViewport()) { 411 412 if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) { 413 affixType = 'VIEWPORT-UNBOTTOM'; 414 } 415 } 416 417 return affixType; 418 } 419 }, { 420 key: '_getStyle', 421 value: function _getStyle(affixType) { 422 if ('undefined' === typeof affixType) return; 423 424 var style = { inner: {}, outer: {} }; 425 var dims = this.dimensions; 426 427 switch (affixType) { 428 case 'VIEWPORT-TOP': 429 style.inner = { position: 'fixed', top: dims.topSpacing, 430 left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth }; 431 break; 432 case 'VIEWPORT-BOTTOM': 433 style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft, 434 bottom: dims.bottomSpacing, width: dims.sidebarWidth }; 435 break; 436 case 'CONTAINER-BOTTOM': 437 case 'VIEWPORT-UNBOTTOM': 438 var translate = this._getTranslate(0, dims.translateY + 'px'); 439 440 if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth }; 441 break; 442 } 443 444 switch (affixType) { 445 case 'VIEWPORT-TOP': 446 case 'VIEWPORT-BOTTOM': 447 case 'VIEWPORT-UNBOTTOM': 448 case 'CONTAINER-BOTTOM': 449 style.outer = { height: dims.sidebarHeight, position: 'relative' }; 450 break; 451 } 452 453 style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer); 454 style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '', 455 bottom: '', width: '', transform: '' }, style.inner); 456 457 return style; 458 } 459 }, { 460 key: 'stickyPosition', 461 value: function stickyPosition(force) { 462 if (this._breakpoint) return; 463 464 force = this._reStyle || force || false; 465 466 var offsetTop = this.options.topSpacing; 467 var offsetBottom = this.options.bottomSpacing; 468 469 var affixType = this.getAffixType(); 470 var style = this._getStyle(affixType); 471 472 if ((this.affixedType != affixType || force) && affixType) { 473 var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY; 474 StickySidebar.eventTrigger(this.sidebar, affixEvent); 475 476 if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass); 477 478 for (var key in style.outer) { 479 var unit = 'number' === typeof style.outer[key] ? 'px' : ''; 480 this.sidebar.style[key] = style.outer[key] + unit; 481 } 482 483 for (var _key in style.inner) { 484 var _unit = 'number' === typeof style.inner[_key] ? 'px' : ''; 485 this.sidebarInner.style[_key] = style.inner[_key] + _unit; 486 } 487 488 var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY; 489 StickySidebar.eventTrigger(this.sidebar, affixedEvent); 490 } else { 491 if (this._initialized) this.sidebarInner.style.left = style.inner.left; 492 } 493 494 this.affixedType = affixType; 495 } 496 }, { 497 key: '_widthBreakpoint', 498 value: function _widthBreakpoint() { 499 500 if (window.innerWidth <= this.options.minWidth) { 501 this._breakpoint = true; 502 this.affixedType = 'STATIC'; 503 504 this.sidebar.removeAttribute('style'); 505 StickySidebar.removeClass(this.sidebar, this.options.stickyClass); 506 this.sidebarInner.removeAttribute('style'); 507 } else { 508 this._breakpoint = false; 509 } 510 } 511 }, { 512 key: 'updateSticky', 513 value: function updateSticky() { 514 var _this3 = this; 515 516 var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 517 518 if (this._running) return; 519 this._running = true; 520 521 (function (eventType) { 522 requestAnimationFrame(function () { 523 switch (eventType) { 524 // When browser is scrolling and re-calculate just dimensions 525 // within scroll. 526 case 'scroll': 527 _this3._calcDimensionsWithScroll(); 528 _this3.observeScrollDir(); 529 _this3.stickyPosition(); 530 break; 531 532 // When browser is resizing or there's no event, observe width 533 // breakpoint and re-calculate dimensions. 534 case 'resize': 535 default: 536 _this3._widthBreakpoint(); 537 _this3.calcDimensions(); 538 _this3.stickyPosition(true); 539 break; 540 } 541 _this3._running = false; 542 }); 543 })(event.type); 544 } 545 }, { 546 key: '_setSupportFeatures', 547 value: function _setSupportFeatures() { 548 var support = this.support; 549 550 support.transform = StickySidebar.supportTransform(); 551 support.transform3d = StickySidebar.supportTransform(true); 552 } 553 }, { 554 key: '_getTranslate', 555 value: function _getTranslate() { 556 var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 557 var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 558 var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; 559 560 if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false; 561 } 562 }, { 563 key: 'destroy', 564 value: function destroy() { 565 window.removeEventListener('resize', this, { capture: false }); 566 window.removeEventListener('scroll', this, { capture: false }); 567 568 this.sidebar.classList.remove(this.options.stickyClass); 569 this.sidebar.style.minHeight = ''; 570 571 this.sidebar.removeEventListener('update' + EVENT_KEY, this); 572 573 var styleReset = { inner: {}, outer: {} }; 574 575 styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' }; 576 styleReset.outer = { height: '', position: '' }; 577 578 for (var key in styleReset.outer) { 579 this.sidebar.style[key] = styleReset.outer[key]; 580 }for (var _key2 in styleReset.inner) { 581 this.sidebarInner.style[_key2] = styleReset.inner[_key2]; 582 }if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) { 583 ResizeSensor.detach(this.sidebarInner, this.handleEvent); 584 ResizeSensor.detach(this.container, this.handleEvent); 585 } 586 } 587 }], [{ 588 key: 'supportTransform', 589 value: function supportTransform(transform3d) { 590 var result = false, 591 property = transform3d ? 'perspective' : 'transform', 592 upper = property.charAt(0).toUpperCase() + property.slice(1), 593 prefixes = ['Webkit', 'Moz', 'O', 'ms'], 594 support = document.createElement('support'), 595 style = support.style; 596 597 (property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) { 598 if (style[property] !== undefined) { 599 result = property; 600 return false; 601 } 602 }); 603 return result; 604 } 605 }, { 606 key: 'eventTrigger', 607 value: function eventTrigger(element, eventName, data) { 608 try { 609 var event = new CustomEvent(eventName, { detail: data }); 610 } catch (e) { 611 var event = document.createEvent('CustomEvent'); 612 event.initCustomEvent(eventName, true, true, data); 613 } 614 element.dispatchEvent(event); 615 } 616 }, { 617 key: 'extend', 618 value: function extend(defaults, options) { 619 var results = {}; 620 for (var key in defaults) { 621 if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key]; 622 } 623 return results; 624 } 625 }, { 626 key: 'offsetRelative', 627 value: function offsetRelative(element) { 628 var result = { left: 0, top: 0 }; 629 630 do { 631 var offsetTop = element.offsetTop; 632 var offsetLeft = element.offsetLeft; 633 634 if (!isNaN(offsetTop)) result.top += offsetTop; 635 636 if (!isNaN(offsetLeft)) result.left += offsetLeft; 637 638 element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent; 639 } while (element); 640 return result; 641 } 642 }, { 643 key: 'addClass', 644 value: function addClass(element, className) { 645 if (!StickySidebar.hasClass(element, className)) { 646 if (element.classList) element.classList.add(className);else element.className += ' ' + className; 647 } 648 } 649 }, { 650 key: 'removeClass', 651 value: function removeClass(element, className) { 652 if (StickySidebar.hasClass(element, className)) { 653 if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 654 } 655 } 656 }, { 657 key: 'hasClass', 658 value: function hasClass(element, className) { 659 if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className); 660 } 661 }, { 662 key: 'defaults', 663 get: function () { 664 return DEFAULTS; 665 } 666 }]); 667 668 return StickySidebar; 669 }(); 670 671 return StickySidebar; 672 }(); 673 674 exports.default = StickySidebar; 675 676 677 // Global 678 // ------------------------- 679 window.StickySidebar = StickySidebar; 680 }); 681 }); 682 683 var stickySidebar$1 = unwrapExports(stickySidebar); 684 685 exports['default'] = stickySidebar$1; 686 exports.__moduleExports = stickySidebar; 687 688 Object.defineProperty(exports, '__esModule', { value: true }); 689 690 }))); 361 })(jQuery); -
hash-elements/trunk/hash-elements.php
r2642973 r2667994 4 4 * Plugin Name: Hash Elements - Addons for Elementor 5 5 * Description: Elementor addons for WordPress Themes developed by HashThemes https://hashthemes.com 6 * Version: 1.1. 76 * Version: 1.1. 7 7 * Author: HashThemes 8 8 * Author URI: https://hashthemes.com/ … … 18 18 } 19 19 20 define('HASHELE_VERSION', '1.1. 7');20 define('HASHELE_VERSION', '1.1.'); 21 21 22 22 define('HASHELE_FILE', __FILE__); -
hash-elements/trunk/inc/sticky-column.php
r2543654 r2667994 25 25 add_filter('elementor/element/column/layout/after_section_start', [$this, 'add_controls']); 26 26 add_action('elementor/frontend/column/before_render', [$this, 'render_attribute'], 10); 27 27 28 } 28 29 … … 89 90 } 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 91 111 } 92 112 -
hash-elements/trunk/readme.txt
r2642973 r2667994 3 3 Tags: elementor, hashthemes, drag and drop, page builder 4 4 Requires at least: 5.0 5 Tested up to: 5. 86 Stable tag: 1.1. 75 Tested up to: 5. 6 Stable tag: 1.1. 7 7 Requires PHP: 5.0 8 8 License: GPLv2 or later … … 26 26 27 27 == Changelog == 28 29 30 31 28 32 = 1.1.7, Dec 12 2021 = 29 33 * Material Design font icon updated and optimized
Note: See TracChangeset
for help on using the changeset viewer.