diff --git a/.gitignore b/.gitignore index 4814e579..a0c42916 100644 --- a/.gitignore +++ b/.gitignore @@ -44,4 +44,9 @@ drupal/sites/simpletest # simpletest -legacy_files \ No newline at end of file +legacy_files + +#ignore node_module and compiled files +node_modules +dist +stats.json diff --git a/infinite.info.yml b/infinite.info.yml index ef162cdf..84d048ba 100644 --- a/infinite.info.yml +++ b/infinite.info.yml @@ -7,44 +7,7 @@ core: 8.x screenshot: images/infinite.png libraries: - infinite/infinite.header - - infinite/blockadblock - - infinite/swiper - - infinite/infinite.libs - infinite/infinite.init - - infinite/infinite.manager.tracking-manager - - infinite/infinite.manager.scroll-manager - - infinite/infinite.manager.marketing-manager - - - infinite/infinite.models.base.base-model - - infinite/infinite.models.base.base-collection-model - - - infinite/infinite.models.ajax-model - - infinite/infinite.models.page-offsets-model - - infinite/infinite.models.device-model - - infinite/infinite.models.infinite-block-data-model - - - infinite/infinite.views.base.base-view - - infinite/infinite.views.base.base-inview-view - - infinite/infinite.views.base.base-dynamic-view - - infinite/infinite.views.base.base-feed-view - - infinite/infinite.views.base.base-sidebar-view - - infinite/infinite.views.base.base-newsletter-view - - infinite/infinite.views.base.base-list-swipeable-view - - - infinite/infinite.views.main-view - - infinite/infinite.views.infinite-block-view - - infinite/infinite.views.menu-main-view - - infinite/infinite.views.menu-sidebar-view - - infinite/infinite.views.modal-search-view - - infinite/infinite.views.article-view - - infinite/infinite.views.gallery-view - - infinite/infinite.views.sticky-view -# - infinite/infinite.views.products-view -# - infinite/infinite.views.anchor-navigation-view - - infinite/infinite.views.marketing-view - - infinite/infinite.views.spinner - - infinite/infinite.views.newsletter.hmnewsletter-view - - infinite/infinite.views.newsletter.newsletter-modal-view regions: head_top: 'Head Top' diff --git a/infinite.libraries.yml b/infinite.libraries.yml index 57937224..dad04006 100644 --- a/infinite.libraries.yml +++ b/infinite.libraries.yml @@ -15,279 +15,13 @@ blockadblock: js: /libraries/blockadblock/blockadblock.js: { } -swiper: - remote: https://github.com/nolimits4web/Swiper - version: 3.4.2 - license: - name: MIT - gpl-compatible: true - js: - /libraries/swiper/dist/js/swiper.jquery.min.js: { } - infinite.social-apis: js: //assets.pinterest.com/js/pinit.js: { type: external, attributes: { async: true} } //platform.twitter.com/widgets.js: { type: external, minified: true, attributes: { async: true} } //platform.instagram.com/en_US/embeds.js: { type: external, minified: true, attributes: { async: true} } -infinite.libs: - js: -# js/infinite/libs/jquery.browser.js: {} - js/infinite/libs/jquery.waypoints.js: {} - js/infinite/libs/shortcuts/infinite_custom.js: {} - js/infinite/libs/shortcuts/sticky.js: {} - js/infinite/libs/shortcuts/inview.js: {} - js/infinite/libs/jquery.easing.1.3.js: {} - js/infinite/libs/jquery.timeago.js: {} -# js/infinite/libs/swiper.jquery.js: {} - js/infinite/libs/jquery.browser.min.js: {} - js/infinite/libs/jquery.sticky-kit.min.js: {} - js/infinite/libs/bootstrap/modal.js: {} - js/infinite/libs/bootstrap/transition.js: {} - js/infinite/libs/jquery.inview.js: {} - infinite.init: css: base: css/infinite-global.css: {} - - js: - js/infinite/backbone-manager.js: {} - js/infinite/burda-infinite.js: { } - js/infinite/utils/base-utils.js: { } - js/infinite/consts/app-config.js: {} - js/infinite/consts/view-ids.js: {} - js/infinite/consts/model-ids.js: {} - js/infinite/consts/manager-ids.js: {} - - dependencies: -# - core/jquery - - core/backbone - - core/drupal - - core/drupal.ajax - - core/drupalSettings - - core/jquery.once - - core/picturefill - - core/jquery.cookie - - blazy/blazy - - -##### manager ##### - -infinite.manager.tracking-manager: - version: 1 - js: - js/infinite/managers/tracking-manager.js: {} - - -infinite.manager.scroll-manager: - version: 1 - js: - js/infinite/managers/scroll-manager.js: {} - -infinite.manager.marketing-manager: - version: 1 - js: - js/infinite/managers/marketing-manager.js: {} - -##### base models ##### - -infinite.models.base.base-model: - version: 1 - js: - js/infinite/models/base/base-model.js: { } - - -infinite.models.base.base-collection-model: - version: 1 - js: - js/infinite/models/base/base-collection-model.js: {} - - -##### models ##### - -infinite.models.ajax-model: - version: 1 - js: - js/infinite/models/ajax-model.js: {} - - -infinite.models.page-offsets-model: - version: 1 - js: - js/infinite/models/page-offsets-model.js: {} - - -infinite.models.device-model: - version: 1 - js: - js/infinite/models/device-model.js: {} - - -infinite.models.infinite-block-data-model: - version: 1 - js: - js/infinite/models/infinite-block-data-model.js: {} - -##### base views ##### - -infinite.views.base.base-view: - version: 1 - js: - js/infinite/views/base/base-view.js: { } - - -infinite.views.base.base-inview-view: - version: 1 - js: - js/infinite/views/base/base-inview-view.js: { } - - -infinite.views.base.base-dynamic-view: - version: 1 - js: - js/infinite/views/base/base-dynamic-view.js: { } - js/infinite/models/base/base-dynamic-view-model.js: {} - - -infinite.views.base.base-feed-view: - version: 1 - js: - js/infinite/views/base/base-feed-view.js: { } - - -infinite.views.base.base-sidebar-view: - version: 1 - js: - js/infinite/views/base/base-sidebar-view.js: { } - js/infinite/models/base/base-sidebar-model.js: {} - - -infinite.views.base.base-newsletter-view: - version: 1 - js: - js/infinite/views/base/base-newsletter-view.js: { } - -infinite.views.base.base-list-swipeable-view: - version: 1 - js: - js/infinite/views/base/base-list-swipeable-view.js: {} - - -##### views ##### - -infinite.views.main-view: - version: 1 - js: - js/infinite/views/main-view.js: { } - - -infinite.views.infinite-block-view: - version: 1 - js: - js/infinite/views/infinite-block-view.js: {} - -infinite.views.menu-main-view: - version: 1 - js: - js/infinite/views/menu-main-view.js: {} - - -infinite.views.menu-sidebar-view: - version: 1 - js: - js/infinite/views/menu-sidebar-view.js: {} - - -infinite.views.modal-search-view: - version: 1 - js: - js/infinite/views/modal-search-view.js: {} - js/infinite/models/modal-search-model.js: {} - - -infinite.views.article-view: - version: 1 - js: - js/infinite/views/article-view.js: {} - - -infinite.views.gallery-view: - version: 1 - js: - js/infinite/views/gallery-view.js: {} - - -infinite.views.sticky-view: - version: 1 - js: - js/infinite/views/sticky-view.js: {} - -infinite.views.teaser-feed-view: - version: 1 - js: - js/infinite/views/teaser-feed-view.js: {} - -infinite.views.product-view: - version: 1 - js: - js/infinite/views/products/product-view.js: {} - -infinite.views.product-slider-view: - version: 1 - js: - js/infinite/views/products/product-slider-view.js: {} - dependencies: - - infinite/infinite.views.product-view - -infinite.views.product-look-view: - version: 1 - js: - js/infinite/views/products/product-look-view.js: {} - dependencies: - - infinite/infinite.views.product-view - -infinite.views.look-view: - version: 1 - js: - js/infinite/views/products/look-view.js: {} - dependencies: - - infinite/infinite.views.product-look-view - - -infinite.views.marketing-view: - version: 1 - js: - js/infinite/views/marketing-view.js: {} - -infinite.views.anchor-navigation-view: - version: 1 - js: - js/infinite/views/anchor-navigation-view.js: {} - - -infinite.views.marketing-view: - version: 1 - js: - js/infinite/views/marketing-view.js: {} - - -infinite.views.spinner: - version: 1 - js: - js/infinite/views/components/spinner-cube-view.js: {} - -infinite.views.newsletter.hmnewsletter-view: - version: 1 - js: - js/infinite/views/newsletter/hmnewsletter-view.js: {} - -infinite.views.newsletter.newsletter-modal-view: - version: 1 - js: - js/infinite/views/newsletter/newsletter-modal-view.js: {} - -infinite.views.ecommerce-slider-view: - version: 1 - js: - js/infinite/views/products/ecommerce-slider-view.js: {} diff --git a/js/infinite/burda-infinite-init.js b/js/infinite/burda-infinite-init.js new file mode 100644 index 00000000..e3382971 --- /dev/null +++ b/js/infinite/burda-infinite-init.js @@ -0,0 +1,14 @@ +"use strict"; + +window.BurdaInfinite = { + views: { + base: {}, + products: {}, + newsletter: {} + }, + utils: {}, + managers: {}, + models: { + base: {} + } +}; diff --git a/js/infinite/burda-infinite.js b/js/infinite/burda-infinite.js index b908ef92..4bd5ff34 100644 --- a/js/infinite/burda-infinite.js +++ b/js/infinite/burda-infinite.js @@ -1,49 +1,35 @@ -(function ($, Drupal, drupalSettings, Backbone, window) { +import ViewIds from './consts/view-ids' +import MainView from './views/main-view' - "use strict"; +"use strict"; - window.BurdaInfinite = { - views: { - base: {}, - products: {}, - newsletter: {} - }, - utils: {}, - managers: {}, - models: { - base: {} - } - }; - - Drupal.behaviors.burdaInfinite = { - attach: function (context) { - var $context = $(context); +Drupal.behaviors.burdaInfinite = { + attach: function (context) { + var $context = $(context); - $('body').once(ViewIds.mainView).each(function () { - var mainView = new MainView({el: $context, id: ViewIds.mainView}); - BM.reuseView(ViewIds.mainView, mainView); - }); + $('body').once(ViewIds.mainView).each(function () { + var mainView = new MainView({el: $context, id: ViewIds.mainView}); + BM.reuseView(ViewIds.mainView, mainView); + }); - this.initBlazyOnContainer('#modal-search'); - }, + this.initBlazyOnContainer('#modal-search'); + }, - initBlazyOnContainer: function(containerSelector){ - if (null === document.querySelector(containerSelector)) { - return; - } - new Blazy({ - container: containerSelector, - success: function (element) { - jQuery(element).parents('.media--loading').removeClass('media--loading') - } - }) + initBlazyOnContainer: function(containerSelector){ + if (null === document.querySelector(containerSelector)) { + return; } - }; - + new Blazy({ + container: containerSelector, + success: function (element) { + jQuery(element).parents('.media--loading').removeClass('media--loading') + } + }) + } +}; - window.addEventListener('acquiaLiftDecision', function(e) { - console.log("%cacquiaLift | decision", "color: blue; font-weight: bold;", e.detail.decision_slot_id); - jQuery(document).trigger('base-utils:update-links', [jQuery('[data-lift-slot="' + e.detail.decision_slot_id + '"]').find('.promotion')]); - }); -})(jQuery, Drupal, drupalSettings, Backbone, window); +window.addEventListener('acquiaLiftDecision', function(e) { + console.log("%cacquiaLift | decision", "color: blue; font-weight: bold;", e.detail.decision_slot_id); + jQuery(document).trigger('base-utils:update-links', [jQuery('[data-lift-slot="' + e.detail.decision_slot_id + '"]').find('.promotion')]); +}); diff --git a/js/infinite/consts/app-config.js b/js/infinite/consts/app-config.js index abff68ec..645d7b34 100644 --- a/js/infinite/consts/app-config.js +++ b/js/infinite/consts/app-config.js @@ -1,4 +1,4 @@ -var AppConfig = { +export default { //searchApiUrl: '/themes/custom/infinite/dummy-content/lazy-loading-article.html', searchApiUrl: '/suche', padding: 10, diff --git a/js/infinite/consts/index.js b/js/infinite/consts/index.js new file mode 100644 index 00000000..1b861f24 --- /dev/null +++ b/js/infinite/consts/index.js @@ -0,0 +1,7 @@ +// Beware of circular-dependencies! Order is important here! +// Always import the module, which wants to import other things from this file at last. + +export { default as AppConfig } from './app-config' +export { default as ManagerIds } from './manager-ids' +export { default as ModelIds } from './model-ids' +export { default as ViewIds } from './view-ids' diff --git a/js/infinite/consts/manager-ids.js b/js/infinite/consts/manager-ids.js index d42b7e49..ef67fc47 100644 --- a/js/infinite/consts/manager-ids.js +++ b/js/infinite/consts/manager-ids.js @@ -1,4 +1,4 @@ -var ManagerIds = { +export default { trackingManager: "trackingManager", scrollManager: "scrollManager" } diff --git a/js/infinite/consts/model-ids.js b/js/infinite/consts/model-ids.js index 05ab5b77..cc66bf4c 100644 --- a/js/infinite/consts/model-ids.js +++ b/js/infinite/consts/model-ids.js @@ -1,4 +1,4 @@ -var ModelIds = { +export default { menuSidebarModel: "menuSidebarModel", infiniteViewsModel: "infiniteViewsModel", modalSearchModel: "modalSearchModel", diff --git a/js/infinite/consts/view-ids.js b/js/infinite/consts/view-ids.js index 14375d53..fa2d6364 100644 --- a/js/infinite/consts/view-ids.js +++ b/js/infinite/consts/view-ids.js @@ -1,4 +1,4 @@ -var ViewIds = { +export default { mainView: "mainView", menuMainView: "menuMainView", menuSidebarView: "menuSidebarView", diff --git a/js/infinite/global-legacy.js b/js/infinite/global-legacy.js new file mode 100644 index 00000000..8ed7fa2d --- /dev/null +++ b/js/infinite/global-legacy.js @@ -0,0 +1,11 @@ +// TODO refactor modules to use ES6 modules +// Needed by external modules: infinite_custom, odoscope-manager, infinite_wishlist + +import AppConfig from './consts/app-config' +window.AppConfig = window.AppConfig || AppConfig; + +import TrackingManager from './managers/tracking-manager' +window.TrackingManager = window.TrackingManager || TrackingManager; + +import AjaxModel from './models/ajax-model' +window.AjaxModel = window.AjaxModel || AjaxModel; diff --git a/js/infinite/index.js b/js/infinite/index.js new file mode 100644 index 00000000..4ffc10c7 --- /dev/null +++ b/js/infinite/index.js @@ -0,0 +1,7 @@ +// Beware of circular-dependencies! Order is important here! +// Always import the module, which wants to import other things from this file at last. + +export * from './consts' +export * from './managers' +export * from './models' +export * from './views' diff --git a/js/infinite/infinite-bundle.js b/js/infinite/infinite-bundle.js new file mode 100644 index 00000000..85ab03cc --- /dev/null +++ b/js/infinite/infinite-bundle.js @@ -0,0 +1,24 @@ +// Loaded via infinite.info.yml + +// infinite.header +import './utils/head-utils' + +// infinite.libs +import 'waypoints/lib/jquery.waypoints' +import './libs/shortcuts/infinite_custom' // TODO This is a modified library. Find a way to extract modifications. +import './libs/shortcuts/sticky' +import 'waypoints/lib/shortcuts/inview' +import 'script-loader!timeago' +import 'sticky-kit/dist/sticky-kit' +import './libs/jquery.inview' // Dependency of teaser-feed-view +import 'jquery.easing/jquery.easing.1.3' +import 'script-loader!jquery.browser' +import 'bootstrap/js/modal' +import 'bootstrap/js/transition' + +// infinite.init +import './backbone-manager' +import './burda-infinite-init' +import './global-legacy' +import './burda-infinite' +import './utils/base-utils' diff --git a/js/infinite/managers/index.js b/js/infinite/managers/index.js new file mode 100644 index 00000000..759f3d23 --- /dev/null +++ b/js/infinite/managers/index.js @@ -0,0 +1,6 @@ +// Beware of circular-dependencies! Order is important here! +// Always import the module, which wants to import other things from this file at last. + +export { default as MarketingManager } from './marketing-manager' +export { default as ScrollManager } from './scroll-manager' +export { default as TrackingManager } from './tracking-manager' diff --git a/js/infinite/managers/marketing-manager.js b/js/infinite/managers/marketing-manager.js index 3721f1b7..f886f34c 100644 --- a/js/infinite/managers/marketing-manager.js +++ b/js/infinite/managers/marketing-manager.js @@ -1,144 +1,142 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.managers.MarketingManager = Backbone.View.extend({ - infiniteViewsModel: {}, - deviceModel: {}, - adsObject: {}, - breakpointDeviceModel: {}, - currentBreakpoint: {}, - lastScrollTopPos: -1, - lastEnabledState: [], - firstRun: true, - initialize: function (pOptions) { - _.extend(this, pOptions); - - if (ModelIds != undefined && BM != undefined) { - this.deviceModel = BM.reuseModel(ModelIds.deviceModel); - this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); - this.currentBreakpoint = this.breakpointDeviceModel.id; - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - this.listenTo(this.infiniteViewsModel, 'change:inview', this.inviewChangeHandler, this); - $(window).on('atf:BeforeLoad', _.bind(this.onAtfBeforeLoadHandler, this)); - } - - }, - updateView: function ($pContext) { - var tmpView, - $tmpElement, - tmpArgument, - tmpLoadArguments = [], - tmpTargeting = {}, - tmpIndex = 0, - $tmpAllAds = $('.marketing-view'), - $tmpContext = $pContext || document; - +import { ModelIds } from '../consts' + +"use strict"; + +BurdaInfinite.managers.MarketingManager = Backbone.View.extend({ + infiniteViewsModel: {}, + deviceModel: {}, + adsObject: {}, + breakpointDeviceModel: {}, + currentBreakpoint: {}, + lastScrollTopPos: -1, + lastEnabledState: [], + firstRun: true, + initialize: function (pOptions) { + _.extend(this, pOptions); + + if (ModelIds != undefined && BM != undefined) { + this.deviceModel = BM.reuseModel(ModelIds.deviceModel); + this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); this.currentBreakpoint = this.breakpointDeviceModel.id; + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + this.listenTo(this.infiniteViewsModel, 'change:inview', this.inviewChangeHandler, this); + $(window).on('atf:BeforeLoad', _.bind(this.onAtfBeforeLoadHandler, this)); + } - $('.marketing-view', $tmpContext).each(_.bind(function (pIndex, pItem) { - $tmpElement = $(pItem); - - if ($tmpElement.data('infiniteModel') != undefined) { - tmpView = $tmpElement.data('infiniteModel').get('view'); - - //&& tmpView.isTypeAllowedToWrite() - if (tmpView.isActive() && tmpView.isAllowedToWrite()) { - tmpIndex = $tmpAllAds.index($tmpElement); - tmpView.getAdTechAd().attr('data-slot-number', tmpIndex); - - tmpTargeting = tmpView.getTargeting(); - tmpTargeting.slotNumber = tmpIndex; - tmpTargeting.breakpoint = this.currentBreakpoint; - tmpTargeting.$el = $tmpElement; - tmpTargeting.adContainerType = tmpView.getAdContainerType(); - - tmpArgument = {element: tmpView.getAdTechAd()[0], targeting: tmpTargeting}; - tmpLoadArguments.push(tmpArgument); - } + }, + updateView: function ($pContext) { + var tmpView, + $tmpElement, + tmpArgument, + tmpLoadArguments = [], + tmpTargeting = {}, + tmpIndex = 0, + $tmpAllAds = $('.marketing-view'), + $tmpContext = $pContext || document; + + this.currentBreakpoint = this.breakpointDeviceModel.id; + + $('.marketing-view', $tmpContext).each(_.bind(function (pIndex, pItem) { + $tmpElement = $(pItem); + + if ($tmpElement.data('infiniteModel') != undefined) { + tmpView = $tmpElement.data('infiniteModel').get('view'); + + //&& tmpView.isTypeAllowedToWrite() + if (tmpView.isActive() && tmpView.isAllowedToWrite()) { + tmpIndex = $tmpAllAds.index($tmpElement); + tmpView.getAdTechAd().attr('data-slot-number', tmpIndex); + + tmpTargeting = tmpView.getTargeting(); + tmpTargeting.slotNumber = tmpIndex; + tmpTargeting.breakpoint = this.currentBreakpoint; + tmpTargeting.$el = $tmpElement; + tmpTargeting.adContainerType = tmpView.getAdContainerType(); + + tmpArgument = {element: tmpView.getAdTechAd()[0], targeting: tmpTargeting}; + tmpLoadArguments.push(tmpArgument); } - }, this)); - - if (tmpLoadArguments.length > 0) { - this.writeMarketing(tmpLoadArguments); } - }, - writeMarketing: function (pLoadArguments) { - if (typeof atf_lib !== 'undefined') { - window.atf_lib.load_tag(pLoadArguments); - console.log("%c marketing | write ", 'background-color: black; color: yellow; font-weight: bold;', pLoadArguments, "window.atf_lib", typeof window.atf_lib); - } else { - console.log(">>> atf_lib is not defined > try again"); - _.delay(_.bind(this.writeMarketing, this), 100, pLoadArguments); - } - }, - inviewChangeHandler: function (pModel) { - if (this.lastEnabledState == pModel.get('inview').state) return; - //|| this.lastScrollTopPos == $(window).scrollTop() - - var $tmpElement = pModel.get('el'), - tmpInviewModel = pModel.get('inview'); - - if (tmpInviewModel.state == 'enter') { - _.delay(_.bind(function () { - this.updateView($tmpElement); - }, this), 1); - // console.log("MarketingManager INVIEW CHANGED", tmpInviewModel.state); - } - - this.lastEnabledState = pModel.get('inview').state; - this.lastScrollTopPos = $(window).scrollTop(); + }, this)); - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; - _.delay(_.bind(function () { - this.updateView(); - }, this), 1); - }, - onAtfBeforeLoadHandler: function (pEvent, pElements) { - this.beforeAtfLoad(pElements); - } - }); - - window.MarketingManager = window.MarketingManager || BurdaInfinite.managers.MarketingManager; - - window.addEventListener('atf_no_ad_rendered', function (event) { - var $tmpAdContainer = jQuery('#' + event.element_id).closest('.marketing-view'), - tmpModel = {visibility: 'hidden', event: event}, - tmpView; - - if ($tmpAdContainer.data('infiniteModel') != undefined) { - tmpView = $tmpAdContainer.data('infiniteModel').get('view'); - tmpView.setRenderModel(tmpModel); - console.log('No ad rendered for ' + event.element_id, tmpView.adRenderModel.visibility, tmpView.$el); + if (tmpLoadArguments.length > 0) { + this.writeMarketing(tmpLoadArguments); } - }, false); - - window.addEventListener('atf_ad_rendered', function (event) { - var $tmpAdContainer = jQuery('#' + event.element_id).closest('.marketing-view'), - tmpModel = {visibility: 'visible', event: event}, - tmpView; - - console.log('Ad rendered for ' + event.element_id); - - if ($tmpAdContainer.data('infiniteModel') != undefined) { - tmpView = $tmpAdContainer.data('infiniteModel').get('view'); - tmpView.setRenderModel(tmpModel); + }, + writeMarketing: function (pLoadArguments) { + if (typeof atf_lib !== 'undefined') { + window.atf_lib.load_tag(pLoadArguments); + console.log("%c marketing | write ", 'background-color: black; color: yellow; font-weight: bold;', pLoadArguments, "window.atf_lib", typeof window.atf_lib); + } else { + console.log(">>> atf_lib is not defined > try again"); + _.delay(_.bind(this.writeMarketing, this), 100, pLoadArguments); } - }, false); + }, + inviewChangeHandler: function (pModel) { + if (this.lastEnabledState == pModel.get('inview').state) return; + //|| this.lastScrollTopPos == $(window).scrollTop() - window.atf_ad = function (pElement, pType) { - var $tmpAdContainer = $(pElement).closest('.marketing-view'), - tmpView; + var $tmpElement = pModel.get('el'), + tmpInviewModel = pModel.get('inview'); - if ($tmpAdContainer.data('infiniteModel') != undefined) { - tmpView = $tmpAdContainer.data('infiniteModel').get('view'); - tmpView.setRenderedAdType(pType, pElement); + if (tmpInviewModel.state == 'enter') { + _.delay(_.bind(function () { + this.updateView($tmpElement); + }, this), 1); + // console.log("MarketingManager INVIEW CHANGED", tmpInviewModel.state); } - console.log("atf_fba", $tmpAdContainer, pType); - }; - - window.MarketingManager = window.MarketingManager || BurdaInfinite.managers.MarketingManager; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file + this.lastEnabledState = pModel.get('inview').state; + this.lastScrollTopPos = $(window).scrollTop(); + + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; + _.delay(_.bind(function () { + this.updateView(); + }, this), 1); + }, + onAtfBeforeLoadHandler: function (pEvent, pElements) { + this.beforeAtfLoad(pElements); + } +}); + +window.MarketingManager = window.MarketingManager || BurdaInfinite.managers.MarketingManager; + +window.addEventListener('atf_no_ad_rendered', function (event) { + var $tmpAdContainer = jQuery('#' + event.element_id).closest('.marketing-view'), + tmpModel = {visibility: 'hidden', event: event}, + tmpView; + + if ($tmpAdContainer.data('infiniteModel') != undefined) { + tmpView = $tmpAdContainer.data('infiniteModel').get('view'); + tmpView.setRenderModel(tmpModel); + console.log('No ad rendered for ' + event.element_id, tmpView.adRenderModel.visibility, tmpView.$el); + } +}, false); + +window.addEventListener('atf_ad_rendered', function (event) { + var $tmpAdContainer = jQuery('#' + event.element_id).closest('.marketing-view'), + tmpModel = {visibility: 'visible', event: event}, + tmpView; + + console.log('Ad rendered for ' + event.element_id); + + if ($tmpAdContainer.data('infiniteModel') != undefined) { + tmpView = $tmpAdContainer.data('infiniteModel').get('view'); + tmpView.setRenderModel(tmpModel); + } +}, false); + +window.atf_ad = function (pElement, pType) { + var $tmpAdContainer = $(pElement).closest('.marketing-view'), + tmpView; + + if ($tmpAdContainer.data('infiniteModel') != undefined) { + tmpView = $tmpAdContainer.data('infiniteModel').get('view'); + tmpView.setRenderedAdType(pType, pElement); + } + console.log("atf_fba", $tmpAdContainer, pType); +}; + +export default BurdaInfinite.managers.MarketingManager diff --git a/js/infinite/managers/scroll-manager.js b/js/infinite/managers/scroll-manager.js index f40c7fdd..2c23b299 100644 --- a/js/infinite/managers/scroll-manager.js +++ b/js/infinite/managers/scroll-manager.js @@ -1,56 +1,52 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.managers.ScrollManager = Backbone.View.extend({ - infiniteViewsModel: {}, - scrollTopAdSettings: 0, - scrollTop: 0, - initialize: function (pOptions) { - _.extend(this, pOptions); - - if (!Backbone.History.started && _.isFunction(history.pushState)) Backbone.history.start({pushState: true}); - - this.scrollTopAdSettings = $(window).scrollTop(); - this.scrollTop = $(window).scrollTop(); - this.listenTo(this.infiniteViewsModel, 'change:inview', this.onInviewChangeHandler, this); - }, - onInviewChangeHandler: function (pModel) { - if (pModel.get('type') != 'infiniteBlockView') return; - this.urlChangeHandler(pModel); - }, - urlChangeHandler: function (pModel) { - if (this.scrollTop == $(window).scrollTop() || !pModel.get('el').data('history-url')) return; - - var $tmpElement = pModel.get('el'), - tmpInviewModel = pModel.get('inview'), - tmpHistoryURL = $tmpElement.data('history-url'), - tmpDocumentTitle = ''; - - if (tmpInviewModel.state == 'enter' || tmpInviewModel.state == 'exit') { - - if (!_.isUndefined(tmpHistoryURL) && !_.isEmpty(tmpHistoryURL)) { - ScrollManager.pushHistory(tmpHistoryURL, {replace: true}); - tmpDocumentTitle = $tmpElement.data('history-title'); - - if (!_.isUndefined(tmpDocumentTitle) && !_.isEmpty(tmpDocumentTitle)) { - document.title = decodeURIComponent(tmpDocumentTitle); - } +"use strict"; + +var ScrollManager = BurdaInfinite.managers.ScrollManager = Backbone.View.extend({ + infiniteViewsModel: {}, + scrollTopAdSettings: 0, + scrollTop: 0, + initialize: function (pOptions) { + _.extend(this, pOptions); + + if (!Backbone.History.started && _.isFunction(history.pushState)) Backbone.history.start({pushState: true}); + + this.scrollTopAdSettings = $(window).scrollTop(); + this.scrollTop = $(window).scrollTop(); + this.listenTo(this.infiniteViewsModel, 'change:inview', this.onInviewChangeHandler, this); + }, + onInviewChangeHandler: function (pModel) { + if (pModel.get('type') != 'infiniteBlockView') return; + this.urlChangeHandler(pModel); + }, + urlChangeHandler: function (pModel) { + if (this.scrollTop == $(window).scrollTop() || !pModel.get('el').data('history-url')) return; + + var $tmpElement = pModel.get('el'), + tmpInviewModel = pModel.get('inview'), + tmpHistoryURL = $tmpElement.data('history-url'), + tmpDocumentTitle = ''; + + if (tmpInviewModel.state == 'enter' || tmpInviewModel.state == 'exit') { + + if (!_.isUndefined(tmpHistoryURL) && !_.isEmpty(tmpHistoryURL)) { + ScrollManager.pushHistory(tmpHistoryURL, {replace: true}); + tmpDocumentTitle = $tmpElement.data('history-title'); + + if (!_.isUndefined(tmpDocumentTitle) && !_.isEmpty(tmpDocumentTitle)) { + document.title = decodeURIComponent(tmpDocumentTitle); } } - - this.scrollTop = $(window).scrollTop(); - } - }, { - pushHistory: function (pURL, pSettings) { - //console.log(">>> pushHistory", pURL); - var pushStateSupported = _.isFunction(history.pushState); - if (pushStateSupported) { - Backbone.history.navigate(pURL, pSettings); - } } - }); - window.ScrollManager = window.ScrollManager || BurdaInfinite.managers.ScrollManager; + this.scrollTop = $(window).scrollTop(); + } +}, { + pushHistory: function (pURL, pSettings) { + //console.log(">>> pushHistory", pURL); + var pushStateSupported = _.isFunction(history.pushState); + if (pushStateSupported) { + Backbone.history.navigate(pURL, pSettings); + } + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.managers.ScrollManager diff --git a/js/infinite/managers/tracking-manager.js b/js/infinite/managers/tracking-manager.js index ed3904c9..c8e99841 100644 --- a/js/infinite/managers/tracking-manager.js +++ b/js/infinite/managers/tracking-manager.js @@ -1,536 +1,532 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.managers.TrackingManager = Backbone.View.extend({ - infiniteViewsModel: {}, - initialLocation: "", - gtmEventName: "", - gtmIndexEvent: "", - gtmIndexPosEvent: "", - activeInfiniteBlockModel: null, - lastViewState: "", - initialize: function (pOptions) { - _.extend(this, pOptions); - - if (!this.model.has('initialLocation') || !this.model.has('gtmEventName') || !this.model.has('gtmIndexEvent') || !this.model.has('gtmIndexPosEvent')) { - throw new Error("TrackingManager Model Error > initialLocation | gtmEventName | gtmIndexEvent | gtmIndexPosEvent > needed"); - } +"use strict"; + +BurdaInfinite.managers.TrackingManager = Backbone.View.extend({ + infiniteViewsModel: {}, + initialLocation: "", + gtmEventName: "", + gtmIndexEvent: "", + gtmIndexPosEvent: "", + activeInfiniteBlockModel: null, + lastViewState: "", + initialize: function (pOptions) { + _.extend(this, pOptions); + + if (!this.model.has('initialLocation') || !this.model.has('gtmEventName') || !this.model.has('gtmIndexEvent') || !this.model.has('gtmIndexPosEvent')) { + throw new Error("TrackingManager Model Error > initialLocation | gtmEventName | gtmIndexEvent | gtmIndexPosEvent > needed"); + } - this.initialLocation = this.model.get('initialLocation'); - this.gtmEventName = TrackingManager.gtmEventName = this.model.get('gtmEventName'); - this.gtmIndexEvent = this.model.get('gtmIndexEvent'); - this.gtmIndexPosEvent = this.model.get('gtmIndexPosEvent'); + this.initialLocation = this.model.get('initialLocation'); + this.gtmEventName = TrackingManager.gtmEventName = this.model.get('gtmEventName'); + this.gtmIndexEvent = this.model.get('gtmIndexEvent'); + this.gtmIndexPosEvent = this.model.get('gtmIndexPosEvent'); - this.listenTo(this.infiniteViewsModel, 'change:inview', this.inviewChangeHandler, this); - this.initBaseElements(); - this.parseTrackingElements(this.$el); + this.listenTo(this.infiniteViewsModel, 'change:inview', this.inviewChangeHandler, this); + this.initBaseElements(); + this.parseTrackingElements(this.$el); - //parse on lazyloading - this.listenTo(this.infiniteViewsModel, 'change:infiniteBlock', function (pModel) { - if (pModel.get('type') === 'infiniteBlockView' && pModel.get('initialDOMItem') === false) { - this.parseTrackingElements(pModel.get('el')); - } - }, this); - - if (typeof blockAdBlock === 'undefined') { - this.onAdBlockDetected(); - } else { - window.blockAdBlock.on(true, _.bind(this.onAdBlockDetected, this)).onNotDetected(_.bind(this.onAdBlockNotDetected, this)); + //parse on lazyloading + this.listenTo(this.infiniteViewsModel, 'change:infiniteBlock', function (pModel) { + if (pModel.get('type') === 'infiniteBlockView' && pModel.get('initialDOMItem') === false) { + this.parseTrackingElements(pModel.get('el')); } + }, this); - this.listenTo(this.infiniteViewsModel, 'refresh', function (pModel) { - if (pModel.get('type') === 'infiniteBlockView') { - this.parseTrackingElements(pModel.get('el')); - } - }, this); - }, - onAdBlockDetected: function () { - TrackingManager.trackEvent({category: 'marketingBlocker', action: 'active', eventNonInteraction: 'true'}); - }, - onAdBlockNotDetected: function () { - TrackingManager.trackEvent({category: 'marketingBlocker', action: 'inactive', eventNonInteraction: 'true'}); - }, - inviewChangeHandler: function (pModel) { - /** - * use only infiniteBlockView for tracking and complex inview logic - */ - if (this.lastViewState == pModel.get('inview').state || pModel.get('type') != 'infiniteBlockView') return; - - var $tmpElement = pModel.get('el'), - tmpInviewModel = pModel.get('inview'), - tmpHistoryURL = $tmpElement.data('history-url'), - tmpTrackingObject = {}, - tmpIndex = 0; - - if (tmpInviewModel.state == 'enter' || tmpInviewModel.state == 'exit') { - //set current infiniteViewsModel - TrackingManager.activeInfiniteBlockModel = pModel; - } - - if (tmpInviewModel.state == 'enter' && $tmpElement.data('no-track') != true) { - - /** - * track pageView - */ - if (!_.isUndefined(tmpHistoryURL) && pModel.get('scrollDepthTracked') != true && pModel.get('initialDOMItem') != true) { - TrackingManager.trackPageView(tmpHistoryURL, TrackingManager.getAdvTrackingByElement($tmpElement)); - } - - if (pModel.get('scrollDepthTracked') != true) { - tmpIndex = ($('.region-infinite-block').not('.region-infinite-block[data-no-track="true"]').index($tmpElement) + 1).toString(); - tmpTrackingObject.event = tmpTrackingObject.category = 'scroll_depth'; - tmpTrackingObject.depth = 'index_' + tmpIndex; - tmpTrackingObject.location = TrackingManager.getLocationType(this.initialLocation); - tmpTrackingObject.eventNonInteraction = 'false'; - - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpElement)); - pModel.set('scrollDepthTracked', true); - } + if (typeof blockAdBlock === 'undefined') { + this.onAdBlockDetected(); + } else { + window.blockAdBlock.on(true, _.bind(this.onAdBlockDetected, this)).onNotDetected(_.bind(this.onAdBlockNotDetected, this)); + } + this.listenTo(this.infiniteViewsModel, 'refresh', function (pModel) { + if (pModel.get('type') === 'infiniteBlockView') { + this.parseTrackingElements(pModel.get('el')); } + }, this); + }, + onAdBlockDetected: function () { + TrackingManager.trackEvent({category: 'marketingBlocker', action: 'active', eventNonInteraction: 'true'}); + }, + onAdBlockNotDetected: function () { + TrackingManager.trackEvent({category: 'marketingBlocker', action: 'inactive', eventNonInteraction: 'true'}); + }, + inviewChangeHandler: function (pModel) { + /** + * use only infiniteBlockView for tracking and complex inview logic + */ + if (this.lastViewState == pModel.get('inview').state || pModel.get('type') != 'infiniteBlockView') return; + + var $tmpElement = pModel.get('el'), + tmpInviewModel = pModel.get('inview'), + tmpHistoryURL = $tmpElement.data('history-url'), + tmpTrackingObject = {}, + tmpIndex = 0; + + if (tmpInviewModel.state == 'enter' || tmpInviewModel.state == 'exit') { + //set current infiniteViewsModel + TrackingManager.activeInfiniteBlockModel = pModel; + } - this.lastViewState = tmpInviewModel.state; - }, - initBaseElements: function () { - $('#menu-open-btn', this.$el).click(function () { - TrackingManager.trackEvent({ - category: 'click', - action: 'menu_sidebar', - label: 'open', - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-sidebar .icon-close', this.$el).click(function () { - TrackingManager.trackEvent({ - category: 'click', - action: 'menu_sidebar', - label: 'close', - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-sidebar .menu-item a', this.$el).click(function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpText = $tmpItem.text(); - TrackingManager.trackEvent({ - category: 'click', - action: 'menu_sidebar', - label: tmpText, - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-sidebar .logo', this.$el).click(function (pEvent) { - TrackingManager.trackEvent({ - category: 'click', - action: 'menu_sidebar', - label: 'logo', - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-main-navigation .logo', this.$el).click(function (pEvent) { - TrackingManager.trackEvent({ - category: 'click', - action: 'main_navigation', - label: 'logo', - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#header-home .logo', this.$el).click(function (pEvent) { - TrackingManager.trackEvent({ - category: 'click', - action: 'header_home', - label: 'logo', - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-main-navigation .menu-item a', this.$el).click(function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpText = $tmpItem.text(); - TrackingManager.trackEvent({ - category: 'click', - action: 'main_navigation', - label: tmpText, - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - - $('#menu-submenu-navigation .menu-item a', this.$el).click(function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpText = $tmpItem.text(); - TrackingManager.trackEvent({ - category: 'click', - action: 'sub_navigation', - label: tmpText, - eventNonInteraction: 'false' - }, TrackingManager.getAdvTrackingByElement($(this))); - }); - }, - parseTrackingElements: function ($pContainer) { - var tmpSelector = '', - $tmpItems = []; + if (tmpInviewModel.state == 'enter' && $tmpElement.data('no-track') != true) { /** - * Outbrain + * track pageView */ + if (!_.isUndefined(tmpHistoryURL) && pModel.get('scrollDepthTracked') != true && pModel.get('initialDOMItem') != true) { + TrackingManager.trackPageView(tmpHistoryURL, TrackingManager.getAdvTrackingByElement($tmpElement)); + } - $tmpItems = $pContainer.find('.outbrain_div_container'); - $tmpItems.on('click', '.ob-dynamic-rec-link', $.proxy(function (pEvent) { - var $tmpElement = $(pEvent.currentTarget), - tmpIndex = ($tmpElement.parent().index() + 1), - tmpMagazineName = $tmpElement.find('.ob-rec-source').text(), - tmpTrackingObject = { - event: this.gtmEventName, - category: 'mkt-userInteraction', - action: 'outbrainClick', - label: tmpMagazineName, - index: 'index_' + tmpIndex, - eventNonInteraction: 'false' - }; + if (pModel.get('scrollDepthTracked') != true) { + tmpIndex = ($('.region-infinite-block').not('.region-infinite-block[data-no-track="true"]').index($tmpElement) + 1).toString(); + tmpTrackingObject.event = tmpTrackingObject.category = 'scroll_depth'; + tmpTrackingObject.depth = 'index_' + tmpIndex; + tmpTrackingObject.location = TrackingManager.getLocationType(this.initialLocation); + tmpTrackingObject.eventNonInteraction = 'false'; TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpElement)); - }, this)); - - /** - * Presenter Full - */ - tmpSelector = '.teaser-presenter--full .teaser__img-container, .teaser-presenter--full .teaser__title'; - $tmpItems = $pContainer.find(tmpSelector); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onPresenterFullClickHandler).bind('click', $.proxy(this.onPresenterFullClickHandler, this)); - - /** - * Presenter Half - */ - tmpSelector = '.teaser-presenter--lg .teaser__img-container, .teaser-presenter--lg .teaser__title'; - $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onPresenterHalfClickHandler).bind('click', $.proxy(this.onPresenterHalfClickHandler, this)); + pModel.set('scrollDepthTracked', true); + } - /** - * Socials - */ - $tmpItems = $pContainer.find('.item-social'); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onSocialsClickHandler).bind('click', $.proxy(this.onSocialsClickHandler, this)); + } - /** - * Authors - */ - $tmpItems = $pContainer.find('.author[data-internal-url]'); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onAuthorClickHandler).bind('click', $.proxy(this.onAuthorClickHandler, this)); + this.lastViewState = tmpInviewModel.state; + }, + initBaseElements: function () { + $('#menu-open-btn', this.$el).click(function () { + TrackingManager.trackEvent({ + category: 'click', + action: 'menu_sidebar', + label: 'open', + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - /** - * Horizontal Teaser Block - */ - tmpSelector = '.region-teaser-list-horizontal .teaser'; - $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onTeaserHorizontalClickHandler).bind('click', $.proxy(this.onTeaserHorizontalClickHandler, this)); + $('#menu-sidebar .icon-close', this.$el).click(function () { + TrackingManager.trackEvent({ + category: 'click', + action: 'menu_sidebar', + label: 'close', + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - /** - * Feed Teaser - */ - tmpSelector = '.region-teaser-list .img-container, .region-teaser-list .text-headline'; - $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onFeedTeaserClickHandler).bind('click', $.proxy(this.onFeedTeaserClickHandler, this)); + $('#menu-sidebar .menu-item a', this.$el).click(function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpText = $tmpItem.text(); + TrackingManager.trackEvent({ + category: 'click', + action: 'menu_sidebar', + label: tmpText, + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - /** - * Teaser Category Link - */ - tmpSelector = '.teaser__overhead [data-internal-url]'; - $tmpItems = $pContainer.find(tmpSelector); - if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onTeaserCategoryClickHandler).bind('click', $.proxy(this.onTeaserCategoryClickHandler, this)); - }, - onFeedTeaserClickHandler: function (pEvent) { - var $tmpItem = $(pEvent.currentTarget).closest('.teaser'), - tmpIndex, - tmpTrackingObject, - $tmpTeaserParent; - - if ($tmpItem.closest('#content').length > 0) { - $tmpTeaserParent = $tmpItem.closest('#content').find('> .region-infinite-block'); - } else if ($tmpItem.closest('#feed-modal-search').length > 0) { - $tmpTeaserParent = $tmpItem.closest('#feed-modal-search'); - } else { - return; - } + $('#menu-sidebar .logo', this.$el).click(function (pEvent) { + TrackingManager.trackEvent({ + category: 'click', + action: 'menu_sidebar', + label: 'logo', + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - tmpIndex = ($tmpTeaserParent.find('.teaser[data-nid]').index($tmpItem) + 1); + $('#menu-main-navigation .logo', this.$el).click(function (pEvent) { + TrackingManager.trackEvent({ + category: 'click', + action: 'main_navigation', + label: 'logo', + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - tmpTrackingObject = { - event: this.gtmIndexEvent, - category: 'teaser', - action: 'feed_teaser', - index: 'index_' + tmpIndex, + $('#header-home .logo', this.$el).click(function (pEvent) { + TrackingManager.trackEvent({ + category: 'click', + action: 'header_home', + label: 'logo', eventNonInteraction: 'false' - }; + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - TrackingManager.trackEvent(tmpTrackingObject); - }, - onTeaserCategoryClickHandler: function (pEvent) { + $('#menu-main-navigation .menu-item a', this.$el).click(function (pEvent) { var $tmpItem = $(pEvent.currentTarget), tmpText = $tmpItem.text(); - TrackingManager.trackEvent({ category: 'click', - action: 'teaser_category', + action: 'main_navigation', label: tmpText, - location: TrackingManager.getLocationType(), eventNonInteraction: 'false' - }); - }, - onPresenterFullClickHandler: function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpIndex = ($('.region-presenter').index($tmpItem) + 1), - tmpTrackingObject = { - event: this.gtmIndexEvent, - category: 'teaser', - action: 'presenter_full', - index: 'index_' + tmpIndex, - eventNonInteraction: 'false' - }; - - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); - }, - onPresenterHalfClickHandler: function (pEvent) { - var $tmpItem = $(pEvent.currentTarget).parent('.teaser-landscape-medium'), - tmpIndex = ($('.region-presenter .teaser-landscape-medium').index($tmpItem) + 1), - tmpTrackingObject = { - event: this.gtmIndexEvent, - category: 'teaser', - action: 'presenter_half', - index: 'index_' + tmpIndex, - eventNonInteraction: 'false' - }; + }, TrackingManager.getAdvTrackingByElement($(this))); + }); - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); - }, - onTeaserHorizontalClickHandler: function (pEvent) { + $('#menu-submenu-navigation .menu-item a', this.$el).click(function (pEvent) { var $tmpItem = $(pEvent.currentTarget), - tmpIndex = ($('.region-teaser-list-horizontal').index($tmpItem.parents('.region-teaser-list-horizontal')) + 1), - tmpItemIndex = ($tmpItem.index() + 1), + tmpText = $tmpItem.text(); + TrackingManager.trackEvent({ + category: 'click', + action: 'sub_navigation', + label: tmpText, + eventNonInteraction: 'false' + }, TrackingManager.getAdvTrackingByElement($(this))); + }); + }, + parseTrackingElements: function ($pContainer) { + var tmpSelector = '', + $tmpItems = []; + + /** + * Outbrain + */ + + $tmpItems = $pContainer.find('.outbrain_div_container'); + $tmpItems.on('click', '.ob-dynamic-rec-link', $.proxy(function (pEvent) { + var $tmpElement = $(pEvent.currentTarget), + tmpIndex = ($tmpElement.parent().index() + 1), + tmpMagazineName = $tmpElement.find('.ob-rec-source').text(), tmpTrackingObject = { - event: this.gtmIndexPosEvent, - category: 'teaser', - action: 'presenter_multi', + event: this.gtmEventName, + category: 'mkt-userInteraction', + action: 'outbrainClick', + label: tmpMagazineName, index: 'index_' + tmpIndex, - pos: 'pos_' + tmpItemIndex, eventNonInteraction: 'false' }; - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); - }, - onSocialsClickHandler: function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpTrackingObject = {category: 'social_media_buttons'}, - tmpAction = TrackingManager.getItemType($tmpItem); - - tmpTrackingObject.action = tmpAction; - tmpTrackingObject.label = $tmpItem.find('[data-social-type]').addBack().filter('[data-social-type]').data('social-type'); - tmpTrackingObject.eventNonInteraction = 'false'; + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpElement)); + }, this)); + + /** + * Presenter Full + */ + tmpSelector = '.teaser-presenter--full .teaser__img-container, .teaser-presenter--full .teaser__title'; + $tmpItems = $pContainer.find(tmpSelector); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onPresenterFullClickHandler).bind('click', $.proxy(this.onPresenterFullClickHandler, this)); + + /** + * Presenter Half + */ + tmpSelector = '.teaser-presenter--lg .teaser__img-container, .teaser-presenter--lg .teaser__title'; + $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onPresenterHalfClickHandler).bind('click', $.proxy(this.onPresenterHalfClickHandler, this)); + + /** + * Socials + */ + $tmpItems = $pContainer.find('.item-social'); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onSocialsClickHandler).bind('click', $.proxy(this.onSocialsClickHandler, this)); + + /** + * Authors + */ + $tmpItems = $pContainer.find('.author[data-internal-url]'); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onAuthorClickHandler).bind('click', $.proxy(this.onAuthorClickHandler, this)); + + /** + * Horizontal Teaser Block + */ + tmpSelector = '.region-teaser-list-horizontal .teaser'; + $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onTeaserHorizontalClickHandler).bind('click', $.proxy(this.onTeaserHorizontalClickHandler, this)); + + /** + * Feed Teaser + */ + tmpSelector = '.region-teaser-list .img-container, .region-teaser-list .text-headline'; + $tmpItems = $pContainer.find(tmpSelector).addBack().filter(tmpSelector); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onFeedTeaserClickHandler).bind('click', $.proxy(this.onFeedTeaserClickHandler, this)); + + /** + * Teaser Category Link + */ + tmpSelector = '.teaser__overhead [data-internal-url]'; + $tmpItems = $pContainer.find(tmpSelector); + if ($tmpItems.length > 0) $tmpItems.unbind('click', this.onTeaserCategoryClickHandler).bind('click', $.proxy(this.onTeaserCategoryClickHandler, this)); + }, + onFeedTeaserClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget).closest('.teaser'), + tmpIndex, + tmpTrackingObject, + $tmpTeaserParent; + + if ($tmpItem.closest('#content').length > 0) { + $tmpTeaserParent = $tmpItem.closest('#content').find('> .region-infinite-block'); + } else if ($tmpItem.closest('#feed-modal-search').length > 0) { + $tmpTeaserParent = $tmpItem.closest('#feed-modal-search'); + } else { + return; + } - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); - }, - onAuthorClickHandler: function (pEvent) { - var $tmpItem = $(pEvent.currentTarget), - tmpTrackingObject = {category: 'author'}; + tmpIndex = ($tmpTeaserParent.find('.teaser[data-nid]').index($tmpItem) + 1); + + tmpTrackingObject = { + event: this.gtmIndexEvent, + category: 'teaser', + action: 'feed_teaser', + index: 'index_' + tmpIndex, + eventNonInteraction: 'false' + }; + + TrackingManager.trackEvent(tmpTrackingObject); + }, + onTeaserCategoryClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpText = $tmpItem.text(); + + TrackingManager.trackEvent({ + category: 'click', + action: 'teaser_category', + label: tmpText, + location: TrackingManager.getLocationType(), + eventNonInteraction: 'false' + }); + }, + onPresenterFullClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpIndex = ($('.region-presenter').index($tmpItem) + 1), + tmpTrackingObject = { + event: this.gtmIndexEvent, + category: 'teaser', + action: 'presenter_full', + index: 'index_' + tmpIndex, + eventNonInteraction: 'false' + }; - tmpTrackingObject.action = $tmpItem.find('.text-author span').text(); - tmpTrackingObject.label = TrackingManager.getItemType($tmpItem); - tmpTrackingObject.eventNonInteraction = 'false'; + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); + }, + onPresenterHalfClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget).parent('.teaser-landscape-medium'), + tmpIndex = ($('.region-presenter .teaser-landscape-medium').index($tmpItem) + 1), + tmpTrackingObject = { + event: this.gtmIndexEvent, + category: 'teaser', + action: 'presenter_half', + index: 'index_' + tmpIndex, + eventNonInteraction: 'false' + }; - TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); - } - }, { - trackEvent: function (pTrackingObject, pAdvObject) { - var tmpTrackingObject = pTrackingObject, - tmpAdvObject = pAdvObject || TrackingManager.getAdvTrackingByElement(), - tmpCurrentPath = TrackingManager.getCurrentPath(); - - tmpTrackingObject = _.extend({ - 'event': TrackingManager.gtmEventName, - 'location': tmpCurrentPath, - 'label': '', - 'value': '', - 'eventNonInteraction': '', - }, tmpTrackingObject, tmpAdvObject); - - if (typeof window.dataLayer != "undefined") { - - if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { - tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); - } + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); + }, + onTeaserHorizontalClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpIndex = ($('.region-teaser-list-horizontal').index($tmpItem.parents('.region-teaser-list-horizontal')) + 1), + tmpItemIndex = ($tmpItem.index() + 1), + tmpTrackingObject = { + event: this.gtmIndexPosEvent, + category: 'teaser', + action: 'presenter_multi', + index: 'index_' + tmpIndex, + pos: 'pos_' + tmpItemIndex, + eventNonInteraction: 'false' + }; - window.dataLayer.push(tmpTrackingObject); - console.log(">> trackEvent >>", tmpTrackingObject); - } else { - console.log("No Google Tag Manager available"); + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); + }, + onSocialsClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpTrackingObject = {category: 'social_media_buttons'}, + tmpAction = TrackingManager.getItemType($tmpItem); + + tmpTrackingObject.action = tmpAction; + tmpTrackingObject.label = $tmpItem.find('[data-social-type]').addBack().filter('[data-social-type]').data('social-type'); + tmpTrackingObject.eventNonInteraction = 'false'; + + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); + }, + onAuthorClickHandler: function (pEvent) { + var $tmpItem = $(pEvent.currentTarget), + tmpTrackingObject = {category: 'author'}; + + tmpTrackingObject.action = $tmpItem.find('.text-author span').text(); + tmpTrackingObject.label = TrackingManager.getItemType($tmpItem); + tmpTrackingObject.eventNonInteraction = 'false'; + + TrackingManager.trackEvent(tmpTrackingObject, TrackingManager.getAdvTrackingByElement($tmpItem)); + } +}, { + trackEvent: function (pTrackingObject, pAdvObject) { + var tmpTrackingObject = pTrackingObject, + tmpAdvObject = pAdvObject || TrackingManager.getAdvTrackingByElement(), + tmpCurrentPath = TrackingManager.getCurrentPath(); + + tmpTrackingObject = _.extend({ + 'event': TrackingManager.gtmEventName, + 'location': tmpCurrentPath, + 'label': '', + 'value': '', + 'eventNonInteraction': '', + }, tmpTrackingObject, tmpAdvObject); + + if (typeof window.dataLayer != "undefined") { + + if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { + tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); } - }, - trackPageView: function (pPath, pAdvObject) { - var tmpPath = pPath.replace(/([^:]\/)\/+/g, "$1"), - tmpAdvObject = pAdvObject || TrackingManager.getAdvTrackingByElement(), - tmpTrackingObject = _.extend({event: 'page_view', 'location': tmpPath}, tmpAdvObject); - if (typeof window.dataLayer != "undefined") { + window.dataLayer.push(tmpTrackingObject); + console.log(">> trackEvent >>", tmpTrackingObject); + } else { + console.log("No Google Tag Manager available"); + } + }, + trackPageView: function (pPath, pAdvObject) { + var tmpPath = pPath.replace(/([^:]\/)\/+/g, "$1"), + tmpAdvObject = pAdvObject || TrackingManager.getAdvTrackingByElement(), + tmpTrackingObject = _.extend({event: 'page_view', 'location': tmpPath}, tmpAdvObject); - if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { - tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); - } + if (typeof window.dataLayer != "undefined") { - // tmpTrackingObject = _.extend(tmpTrackingObject, pAdvObject); - window.dataLayer.push(tmpTrackingObject); - console.log(">> trackPageView >>", document.title, tmpPath); - } else { - console.log("No Google Tag Manager available"); - } - }, - trackIVW: function (iamDataObject) { - if (window.iam_data == undefined) return; - - iamDataObject = iamDataObject || window.iam_data; - iom.c(iamDataObject, 1); - }, - trackEcommerce: function (pData, pType, pAdvObject) { - var tmpTrackingObject = {}; - - switch (pType) { - case 'impressions': - tmpTrackingObject.event = 'productImpressions'; - tmpTrackingObject.ecommerce = { - 'impressions': [pData] - } - break; - case 'productClick': - tmpTrackingObject.event = 'productClick'; - tmpTrackingObject.ecommerce = { - 'click': { - 'actionField': {'list': pData.list}, - 'products': [pData] - } - } - break; - default: - return; + if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { + tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); } - if (typeof window.dataLayer != "undefined") { - if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { - tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); - } - - tmpTrackingObject = _.extend(tmpTrackingObject, pAdvObject); - console.log(">> trackEcommerce >>", tmpTrackingObject); - window.dataLayer.push(tmpTrackingObject); - } else { - console.log("No Google Tag Manager available"); - } - }, - getCurrentPath: function () { - return Backbone.history.location.pathname; - }, - getItemType: function ($pItem) { - var tmpAction = ""; - - if ($pItem.parents('[data-view-type]').length > 0) { - tmpAction = $pItem.parents('[data-view-type]').data('view-type').replace('TeaserView', '').replace('View', ''); - - if ($pItem.parents('.region-presenter').length > 0) { - tmpAction += '_presenter'; - } else if ($pItem.parents('.teaser').length > 0) { - tmpAction += '_teaser'; - } else if ($pItem.parents('.item-paragraph--media').length > 0) { - tmpAction += '_media'; - } else if ($pItem.parents('.socials-horizontal-bar').length > 0) { - tmpAction += '_horizontal_bar'; - } else if ($pItem.parents('.socials-vertical-bar').length > 0) { - tmpAction += '_vertical_bar'; + // tmpTrackingObject = _.extend(tmpTrackingObject, pAdvObject); + window.dataLayer.push(tmpTrackingObject); + console.log(">> trackPageView >>", document.title, tmpPath); + } else { + console.log("No Google Tag Manager available"); + } + }, + trackIVW: function (iamDataObject) { + if (window.iam_data == undefined) return; + + iamDataObject = iamDataObject || window.iam_data; + iom.c(iamDataObject, 1); + }, + trackEcommerce: function (pData, pType, pAdvObject) { + var tmpTrackingObject = {}; + + switch (pType) { + case 'impressions': + tmpTrackingObject.event = 'productImpressions'; + tmpTrackingObject.ecommerce = { + 'impressions': [pData] } - } else { - if ($pItem.parents('#header-home').length > 0) { - tmpAction = 'header'; - } else if ($pItem.parents('#menu-sidebar').length > 0) { - tmpAction = 'sidebar'; - } else if ($pItem.parents('.region-presenter').length > 0) { - tmpAction = 'presenter'; + break; + case 'productClick': + tmpTrackingObject.event = 'productClick'; + tmpTrackingObject.ecommerce = { + 'click': { + 'actionField': {'list': pData.list}, + 'products': [pData] + } } + break; + default: + return; + } + + if (typeof window.dataLayer != "undefined") { + if (typeof OdoscopeManager != "undefined" && OdoscopeManager.getInstance().getTrackingObject() != null) { + tmpTrackingObject.odoscopelist = OdoscopeManager.getInstance().getTrackingObject(); } - return tmpAction; - }, - getAdvTrackingByElement: function ($pElement) { - var tmpAdvObject, - $tmpUuidElement = [], - tmpUuid = ''; + tmpTrackingObject = _.extend(tmpTrackingObject, pAdvObject); + console.log(">> trackEcommerce >>", tmpTrackingObject); + window.dataLayer.push(tmpTrackingObject); + } else { + console.log("No Google Tag Manager available"); + } + }, + getCurrentPath: function () { + return Backbone.history.location.pathname; + }, + getItemType: function ($pItem) { + var tmpAction = ""; + + if ($pItem.parents('[data-view-type]').length > 0) { + tmpAction = $pItem.parents('[data-view-type]').data('view-type').replace('TeaserView', '').replace('View', ''); + + if ($pItem.parents('.region-presenter').length > 0) { + tmpAction += '_presenter'; + } else if ($pItem.parents('.teaser').length > 0) { + tmpAction += '_teaser'; + } else if ($pItem.parents('.item-paragraph--media').length > 0) { + tmpAction += '_media'; + } else if ($pItem.parents('.socials-horizontal-bar').length > 0) { + tmpAction += '_horizontal_bar'; + } else if ($pItem.parents('.socials-vertical-bar').length > 0) { + tmpAction += '_vertical_bar'; + } + } else { + if ($pItem.parents('#header-home').length > 0) { + tmpAction = 'header'; + } else if ($pItem.parents('#menu-sidebar').length > 0) { + tmpAction = 'sidebar'; + } else if ($pItem.parents('.region-presenter').length > 0) { + tmpAction = 'presenter'; + } + } - /** - * get advanced drupalSettings.datalayer informations - */ - if (drupalSettings.datalayer != undefined) { - $tmpUuidElement = $($pElement).closest('[data-uuid]').addBack(); - tmpUuid = $tmpUuidElement.data('uuid'); + return tmpAction; + }, + getAdvTrackingByElement: function ($pElement) { + var tmpAdvObject, + $tmpUuidElement = [], + tmpUuid = ''; + + /** + * get advanced drupalSettings.datalayer informations + */ + if (drupalSettings.datalayer != undefined) { + $tmpUuidElement = $($pElement).closest('[data-uuid]').addBack(); + tmpUuid = $tmpUuidElement.data('uuid'); + + /** use specific tracking object when parent got an uuid **/ + tmpAdvObject = TrackingManager.getAdvTrackingByUuid(tmpUuid); + } else { + console.log(">>> no drupalSettings.datalayer found"); + } - /** use specific tracking object when parent got an uuid **/ - tmpAdvObject = TrackingManager.getAdvTrackingByUuid(tmpUuid); - } else { - console.log(">>> no drupalSettings.datalayer found"); - } + tmpAdvObject = _.extend(tmpAdvObject, {trackingHelper: {$uuidElement: $tmpUuidElement, uuid: tmpUuid}}); + return tmpAdvObject; + }, + getAdvTrackingByUuid: function (pUuid) { + var tmpAdvObject, + tmpUuid = pUuid, + $tmpUuidElement = []; - tmpAdvObject = _.extend(tmpAdvObject, {trackingHelper: {$uuidElement: $tmpUuidElement, uuid: tmpUuid}}); - return tmpAdvObject; - }, - getAdvTrackingByUuid: function (pUuid) { - var tmpAdvObject, - tmpUuid = pUuid, - $tmpUuidElement = []; + if (drupalSettings.datalayer[tmpUuid]) { + tmpAdvObject = drupalSettings.datalayer[tmpUuid]; + } + /** use active infiniteBlockModel when the parent has no uuid (example: menu open / close in infinite-scrolling) **/ + else if (TrackingManager.activeInfiniteBlockModel != null && TrackingManager.activeInfiniteBlockModel.has('el')) { + $tmpUuidElement = TrackingManager.activeInfiniteBlockModel.get('el'); + tmpUuid = $tmpUuidElement.data('uuid'); if (drupalSettings.datalayer[tmpUuid]) { tmpAdvObject = drupalSettings.datalayer[tmpUuid]; - } - /** use active infiniteBlockModel when the parent has no uuid (example: menu open / close in infinite-scrolling) **/ - else if (TrackingManager.activeInfiniteBlockModel != null && TrackingManager.activeInfiniteBlockModel.has('el')) { - $tmpUuidElement = TrackingManager.activeInfiniteBlockModel.get('el'); - tmpUuid = $tmpUuidElement.data('uuid'); - - if (drupalSettings.datalayer[tmpUuid]) { - tmpAdvObject = drupalSettings.datalayer[tmpUuid]; - } else { - tmpAdvObject = TrackingManager.getAdvTrackingByIndex(0); - } - } - /** use global/initial tracking object **/ - else { + } else { tmpAdvObject = TrackingManager.getAdvTrackingByIndex(0); } + } + /** use global/initial tracking object **/ + else { + tmpAdvObject = TrackingManager.getAdvTrackingByIndex(0); + } - return tmpAdvObject; - }, - getAdvTrackingByIndex: function (pIndex) { - var tmpAdvObject; - - if (typeof drupalSettings.datalayer != 'undefined' && _.values(drupalSettings.datalayer).length >= pIndex) { - tmpAdvObject = _.values(drupalSettings.datalayer)[pIndex]; - } + return tmpAdvObject; + }, + getAdvTrackingByIndex: function (pIndex) { + var tmpAdvObject; - return tmpAdvObject; - }, - getLocationType: function (pDefault) { - var tmpLocation = pDefault; - - if ($('#modal-search').hasClass('is_search_enabled')) { - tmpLocation = '/search_overlay' - } else if ($('body').hasClass('page-article')) { - tmpLocation = '/article'; - } else if (_.isUndefined(tmpLocation)) { - tmpLocation = TrackingManager.getCurrentPath(); - } + if (typeof drupalSettings.datalayer != 'undefined' && _.values(drupalSettings.datalayer).length >= pIndex) { + tmpAdvObject = _.values(drupalSettings.datalayer)[pIndex]; + } - return tmpLocation; + return tmpAdvObject; + }, + getLocationType: function (pDefault) { + var tmpLocation = pDefault; + + if ($('#modal-search').hasClass('is_search_enabled')) { + tmpLocation = '/search_overlay' + } else if ($('body').hasClass('page-article')) { + tmpLocation = '/article'; + } else if (_.isUndefined(tmpLocation)) { + tmpLocation = TrackingManager.getCurrentPath(); } - }); - window.TrackingManager = window.TrackingManager || BurdaInfinite.managers.TrackingManager; + return tmpLocation; + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.managers.TrackingManager diff --git a/js/infinite/models/ajax-model.js b/js/infinite/models/ajax-model.js index 2c96ab30..51e08b11 100644 --- a/js/infinite/models/ajax-model.js +++ b/js/infinite/models/ajax-model.js @@ -1,57 +1,53 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.models.AjaxModel = Backbone.Model.extend({ - defaults: { - url: '', - base: false, - element: null, - callback: $.noop, - progress: { - type: null - } - }, - ajax: null, - settings: null, - initialize: function (pSettings) { - this.settings = _.extend(this.defaults, pSettings); - this.ajax = Drupal.ajax(this.settings); - - //caching enabled - this.ajax.options.type = "GET"; - //this.ajax.options.type = "POST"; - - this.ajax.commands._insert = this.ajax.commands._insert || this.ajax.commands.insert; - this.ajax.commands.insert = $.proxy(function (ajax, response, status) { - - if (response.method == null) { - var new_content_wrapped = $('
').html(response.data); - var new_content = new_content_wrapped.contents(); - - if (new_content.length !== 1 || new_content.get(0).nodeType !== 1) { - new_content = new_content_wrapped; - } - - this.settings.callback(new_content); - } else { - this.ajax.commands._insert(ajax, response, status); - } - }, this); +"use strict"; - - // This command will remove this Ajax object from the page. - this.ajax.commands.destroyObject = function (ajax, response, status) { - Drupal.ajax.instances[this.instanceIndex] = null; - }; - }, - execute: function () { - this.ajax.execute(); +BurdaInfinite.models.AjaxModel = Backbone.Model.extend({ + defaults: { + url: '', + base: false, + element: null, + callback: $.noop, + progress: { + type: null } - }); + }, + ajax: null, + settings: null, + initialize: function (pSettings) { + this.settings = _.extend(this.defaults, pSettings); + this.ajax = Drupal.ajax(this.settings); + + //caching enabled + this.ajax.options.type = "GET"; + //this.ajax.options.type = "POST"; + + this.ajax.commands._insert = this.ajax.commands._insert || this.ajax.commands.insert; + this.ajax.commands.insert = $.proxy(function (ajax, response, status) { + + if (response.method == null) { + var new_content_wrapped = $('
').html(response.data); + var new_content = new_content_wrapped.contents(); + + if (new_content.length !== 1 || new_content.get(0).nodeType !== 1) { + new_content = new_content_wrapped; + } + + this.settings.callback(new_content); + } else { + this.ajax.commands._insert(ajax, response, status); + } + + }, this); - window.AjaxModel = window.AjaxModel || BurdaInfinite.models.AjaxModel; + // This command will remove this Ajax object from the page. + this.ajax.commands.destroyObject = function (ajax, response, status) { + Drupal.ajax.instances[this.instanceIndex] = null; + }; + }, + execute: function () { + this.ajax.execute(); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.models.AjaxModel; diff --git a/js/infinite/models/base/base-collection-model.js b/js/infinite/models/base/base-collection-model.js index 46329f5b..ac5f803c 100644 --- a/js/infinite/models/base/base-collection-model.js +++ b/js/infinite/models/base/base-collection-model.js @@ -1,94 +1,92 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseModel } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.models.base.BaseCollectionModel = BaseModel.extend({ - initialize: function (pAttributes, pOptions) { - BaseModel.prototype.initialize.call(this, pAttributes, pOptions); +BurdaInfinite.models.base.BaseCollectionModel = BaseModel.extend({ + initialize: function (pAttributes, pOptions) { + BaseModel.prototype.initialize.call(this, pAttributes, pOptions); - /** - * Collection in Collection is not possible >:/ - * We need the 'items' property here - */ - this.set('items', new Backbone.Collection()); + /** + * Collection in Collection is not possible >:/ + * We need the 'items' property here + */ + this.set('items', new Backbone.Collection()); - this.listenTo(this.getItems(), 'all', function (pType, pModel) { - this.trigger(pType, pModel); - }, this); - }, - add: function (pItems, pOptions) { - //check if multi items -> array - if (typeof pItems.setParentModel !== 'undefined') { - pItems.setParentModel(this); - } - - this.getItems().add(pItems, pOptions); - }, - getModel: function (pId) { - return this.getItems().get(pId); - }, - getItems: function () { - return this.get('items'); - }, - hasItems: function () { - return this.has('items') && this.getItems().length > 0; - }, - at: function (pIndex) { - return this.getItems().at(pIndex); - }, - findByViewType: function (pViewType) { - return this.getItems().where({"type": pViewType}); - }, - reset: function (pDestroyItems) { - var tmpDestroyItems = pDestroyItems || false; + this.listenTo(this.getItems(), 'all', function (pType, pModel) { + this.trigger(pType, pModel); + }, this); + }, + add: function (pItems, pOptions) { + //check if multi items -> array + if (typeof pItems.setParentModel !== 'undefined') { + pItems.setParentModel(this); + } - if (tmpDestroyItems) this.destroyItems(); - this.getItems().reset(); - }, - destroyItems: function (pItems) { - var tmpItems = pItems || this.getItems(); + this.getItems().add(pItems, pOptions); + }, + getModel: function (pId) { + return this.getItems().get(pId); + }, + getItems: function () { + return this.get('items'); + }, + hasItems: function () { + return this.has('items') && this.getItems().length > 0; + }, + at: function (pIndex) { + return this.getItems().at(pIndex); + }, + findByViewType: function (pViewType) { + return this.getItems().where({"type": pViewType}); + }, + reset: function (pDestroyItems) { + var tmpDestroyItems = pDestroyItems || false; - _.each(tmpItems.models, _.bind(function (pModel, pIndex) { - if (pModel.hasItems()) { - this.destroyItems(pModel.get('items')); - } + if (tmpDestroyItems) this.destroyItems(); + this.getItems().reset(); + }, + destroyItems: function (pItems) { + var tmpItems = pItems || this.getItems(); - if (pModel.has('view') && _.isFunction(pModel.get('view').destroy)) { - pModel.get('view').destroy(); - } - }, this)); - }, - refreshAll: function (pItems) { - var tmpItems = pItems || this.getItems(); + _.each(tmpItems.models, _.bind(function (pModel, pIndex) { + if (pModel.hasItems()) { + this.destroyItems(pModel.get('items')); + } - _.each(tmpItems.models, _.bind(function (pModel, pIndex) { - if (pModel.hasItems()) { - this.refreshAll(pModel.get('items')); - } + if (pModel.has('view') && _.isFunction(pModel.get('view').destroy)) { + pModel.get('view').destroy(); + } + }, this)); + }, + refreshAll: function (pItems) { + var tmpItems = pItems || this.getItems(); - if (_.isFunction(pModel.refresh)) { - this.refresh(pModel); - } - }, this)); - }, - refresh: function (pModel) { - var tmpModel = pModel || this; + _.each(tmpItems.models, _.bind(function (pModel, pIndex) { + if (pModel.hasItems()) { + this.refreshAll(pModel.get('items')); + } - BaseModel.prototype.refresh.call(tmpModel); - }, - inviewEnable: function (pState, pCollection) { - var tmpCollection = pCollection || this.getItems(); + if (_.isFunction(pModel.refresh)) { + this.refresh(pModel); + } + }, this)); + }, + refresh: function (pModel) { + var tmpModel = pModel || this; - _.each(tmpCollection.models, function (pModel, pIndex) { - pModel.set('inviewEnabled', pState); + BaseModel.prototype.refresh.call(tmpModel); + }, + inviewEnable: function (pState, pCollection) { + var tmpCollection = pCollection || this.getItems(); - if (pModel.hasItems()) { - this.inviewEnable(pState, pModel.get('items')); - } - }, this); - } - }); + _.each(tmpCollection.models, function (pModel, pIndex) { + pModel.set('inviewEnabled', pState); - window.BaseCollectionModel = window.BaseCollectionModel || BurdaInfinite.models.base.BaseCollectionModel; + if (pModel.hasItems()) { + this.inviewEnable(pState, pModel.get('items')); + } + }, this); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.models.base.BaseCollectionModel diff --git a/js/infinite/models/base/base-dynamic-view-model.js b/js/infinite/models/base/base-dynamic-view-model.js index 3991dbd2..ab118997 100644 --- a/js/infinite/models/base/base-dynamic-view-model.js +++ b/js/infinite/models/base/base-dynamic-view-model.js @@ -1,105 +1,110 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseCollectionModel } from '../index' - "use strict"; +import { + BaseFeedView, InfiniteBlockView, TeaserFeedView, ArticleView, + StickyView, GalleryView, MarketingView, BaseListSwipeableView, BaseNewsletterView, + HmNewsletterView, NewsletterModalView, ProductView, ProductSliderView, ProductLookView, + AnchorNavigationView, EcommerceSliderView, LookView, BaseView +} from '../../views' - BurdaInfinite.models.base.BaseDynamicViewModel = BaseCollectionModel.extend({ - defaults: { - el: [], - infiniteBlock: false, - initialDOMItem: true - }, - initialize: function (pModel, pOptions) { - BaseCollectionModel.prototype.initialize.call(this, pModel, pOptions); +"use strict"; - if (!_.isUndefined(pModel)) { - this.createDynamicItem(pModel); - } - }, - createDynamicItem: function (pSettings, pOptions) { +BurdaInfinite.models.base.BaseDynamicViewModel = BaseCollectionModel.extend({ + defaults: { + el: [], + infiniteBlock: false, + initialDOMItem: true + }, + initialize: function (pModel, pOptions) { + BaseCollectionModel.prototype.initialize.call(this, pModel, pOptions); - var tmpView = {}, - $tmpElement = pSettings.el, - tmpType = pSettings.type, - tmpSettings = _.extend({ - model: this, - context: $tmpElement.closest('[data-view-context]').length > 0 ? - $tmpElement.closest('[data-view-context]') : $(window) - }, pSettings, pOptions); + if (!_.isUndefined(pModel)) { + this.createDynamicItem(pModel); + } + }, + createDynamicItem: function (pSettings, pOptions) { - /** - * set new values - */ - this.set(pSettings); + var tmpView = {}, + $tmpElement = pSettings.el, + tmpType = pSettings.type, + tmpSettings = _.extend({ + model: this, + context: $tmpElement.closest('[data-view-context]').length > 0 ? + $tmpElement.closest('[data-view-context]') : $(window) + }, pSettings, pOptions); - // console.log(">>> createView", tmpType, tmpSettings); + /** + * set new values + */ + this.set(pSettings); - switch (tmpType) { - case 'feedView': - tmpView = new BaseFeedView(tmpSettings); - break; - case 'infiniteBlockView': - tmpView = new InfiniteBlockView(tmpSettings); - tmpView.delegateInview(); //active inview functions + // console.log(">>> createView", tmpType, tmpSettings); - if (!tmpSettings.initialDOMItem) { - tmpView.delegateElements(); - } + switch (tmpType) { + case 'feedView': + tmpView = new BaseFeedView(tmpSettings); + break; + case 'infiniteBlockView': + tmpView = new InfiniteBlockView(tmpSettings); + tmpView.delegateInview(); //active inview functions - break; - case 'teaserFeedView': - tmpView = new TeaserFeedView(tmpSettings); - break; - case 'articleView': - tmpView = new ArticleView(tmpSettings); - break; - case 'stickyView': - tmpView = new StickyView(tmpSettings); - break; - case 'galleryView': - tmpView = new GalleryView(tmpSettings); - break; - case 'marketingView': - tmpView = new MarketingView(tmpSettings); - break; - case 'listSwipeableView': - tmpView = new BaseListSwipeableView(tmpSettings); - break; - case 'newsletterView': - tmpView = new BaseNewsletterView(tmpSettings); - break; - case 'hmNewsletterView': - tmpView = new HmNewsletterView(tmpSettings); - break; - case 'newsletterModalView': - tmpView = new NewsletterModalView(tmpSettings); - break; - case 'productView': - tmpView = new ProductView(tmpSettings); - break; - case 'productSliderView': - tmpView = new ProductSliderView(tmpSettings); - break; - case 'productLookView': - tmpView = new ProductLookView(tmpSettings); - break; - case 'anchorNavigationView': - tmpView = new AnchorNavigationView(tmpSettings); - break; - case 'ecommerceSlider': - tmpView = new EcommerceSliderView(tmpSettings); - break; - case 'lookView': - tmpView = new LookView(tmpSettings); - break; - default: - tmpView = new BaseView(tmpSettings); - break; - } + if (!tmpSettings.initialDOMItem) { + tmpView.delegateElements(); + } - this.set('view', tmpView); + break; + case 'teaserFeedView': + tmpView = new TeaserFeedView(tmpSettings); + break; + case 'articleView': + tmpView = new ArticleView(tmpSettings); + break; + case 'stickyView': + tmpView = new StickyView(tmpSettings); + break; + case 'galleryView': + tmpView = new GalleryView(tmpSettings); + break; + case 'marketingView': + tmpView = new MarketingView(tmpSettings); + break; + case 'listSwipeableView': + tmpView = new BaseListSwipeableView(tmpSettings); + break; + case 'newsletterView': + tmpView = new BaseNewsletterView(tmpSettings); + break; + case 'hmNewsletterView': + tmpView = new HmNewsletterView(tmpSettings); + break; + case 'newsletterModalView': + tmpView = new NewsletterModalView(tmpSettings); + break; + case 'productView': + tmpView = new ProductView(tmpSettings); + break; + case 'productSliderView': + tmpView = new ProductSliderView(tmpSettings); + break; + case 'productLookView': + tmpView = new ProductLookView(tmpSettings); + break; + case 'anchorNavigationView': + tmpView = new AnchorNavigationView(tmpSettings); + break; + case 'ecommerceSlider': + tmpView = new EcommerceSliderView(tmpSettings); + break; + case 'lookView': + tmpView = new LookView(tmpSettings); + break; + default: + tmpView = new BaseView(tmpSettings); + break; } - }); - window.BaseDynamicViewModel = window.BaseDynamicViewModel || BurdaInfinite.models.base.BaseDynamicViewModel; + this.set('view', tmpView); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.models.base.BaseDynamicViewModel; diff --git a/js/infinite/models/base/base-model.js b/js/infinite/models/base/base-model.js index 44afe261..25afb9eb 100644 --- a/js/infinite/models/base/base-model.js +++ b/js/infinite/models/base/base-model.js @@ -1,40 +1,36 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +"use strict"; - "use strict"; +BurdaInfinite.models.base.BaseModel = Backbone.Model.extend({ + defaults: { + inviewEnabled: true, + initialDOMItem: true, + type: "root" + }, + initialize: function (pModel, pOptions) { + _.extend(this, pOptions); + }, + create: function (pData) { + this.set(pData); + }, + inviewEnable: function (pState) { + this.set('inviewEnabled', pState); + }, + hasItems: function () { + return false; + }, + refresh: function () { + this.trigger('refresh', this); + }, + setParentModel: function (pModel) { + this.set('parentModel', pModel, {silent: true}); + }, + setElement: function ($pElement) { + this.set('el', $pElement, {silent: true}); + this.trigger('elementChanged', this.get('el')); + }, + getParentModel: function () { + return this.get('parentModel'); + } +}); - BurdaInfinite.models.base.BaseModel = Backbone.Model.extend({ - defaults: { - inviewEnabled: true, - initialDOMItem: true, - type: "root" - }, - initialize: function (pModel, pOptions) { - _.extend(this, pOptions); - }, - create: function (pData) { - this.set(pData); - }, - inviewEnable: function (pState) { - this.set('inviewEnabled', pState); - }, - hasItems: function () { - return false; - }, - refresh: function () { - this.trigger('refresh', this); - }, - setParentModel: function (pModel) { - this.set('parentModel', pModel, {silent: true}); - }, - setElement: function ($pElement) { - this.set('el', $pElement, {silent: true}); - this.trigger('elementChanged', this.get('el')); - }, - getParentModel: function () { - return this.get('parentModel'); - } - }); - - window.BaseModel = window.BaseModel || BurdaInfinite.models.base.BaseModel; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.models.base.BaseModel diff --git a/js/infinite/models/base/base-sidebar-model.js b/js/infinite/models/base/base-sidebar-model.js index 932b0054..0737ca4b 100644 --- a/js/infinite/models/base/base-sidebar-model.js +++ b/js/infinite/models/base/base-sidebar-model.js @@ -1,19 +1,17 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - "use strict"; +"use strict"; - BurdaInfinite.models.base.BaseSidebarModel = Backbone.Model.extend({ - defaults: { - "is_open": false - }, - initialize: function (pOptions) { +BurdaInfinite.models.base.BaseSidebarModel = Backbone.Model.extend({ + defaults: { + "is_open": false + }, + initialize: function (pOptions) { - }, - toggleOpenState: function () { - this.set('is_open', !this.get('is_open')); - } - }); + }, + toggleOpenState: function () { + this.set('is_open', !this.get('is_open')); + } +}); - window.BaseSidebarModel = window.BaseSidebarModel || BurdaInfinite.models.base.BaseSidebarModel; +export default BurdaInfinite.models.base.BaseSidebarModel -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); diff --git a/js/infinite/models/device-model.js b/js/infinite/models/device-model.js index 177deda9..fedd0f49 100644 --- a/js/infinite/models/device-model.js +++ b/js/infinite/models/device-model.js @@ -1,231 +1,228 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.models.DeviceModel = Backbone.Model.extend({ - defaults: { - isActive: false, - uid: -1, - uid_cookie_name: "tc_ptid", - basehost: window.location.hostname.split(".")[0], - cookieReferrerName: '_referrer', - isGoogleBot: navigator.userAgent.toLowerCase().indexOf('googlebot') > 0, - useWhatsapp: ((navigator.userAgent.match(/Android|iPhone/i) && !navigator.userAgent.match(/iPod|iPad/i)) ? true : false) - }, - breakpoints: {}, - breakpointValues: [], - breakpointKeys: [], - deviceBreakpointValues: [], - deviceBreakpointKeys: [], - deviceMapping: {}, - deviceValues: [], - deviceKeys: [], - lastBreakpoint: {}, - lastDeviceBreakpoint: {}, - initialize: function (pAttributes, pOptions) { - //var tmpOptions = _.extend(this.defaults, pOptions); - Backbone.Model.prototype.initialize.call(this, pAttributes, pOptions); - - this.breakpoints = pOptions.Breakpoints; - this.breakpointValues = _.values(this.breakpoints); - this.breakpointKeys = _.keys(this.breakpoints); - - this.deviceMapping = pOptions.DeviceMapping; - this.deviceValues = _.values(this.deviceMapping); - this.deviceKeys = _.keys(this.deviceMapping); - this.deviceBreakpointValues = []; - this.deviceBreakpointKeys = []; - - this.set("uuid", this.getCookie(this.get("uid_cookie_name"))); - this.set("cookieReferrerName", this.get("basehost") + this.getReferrerCookieName()); - this.set('breakpoints', new Backbone.Collection()); - this.set('deviceBreakpoints', new Backbone.Collection()); - - this.writeReferrerCookie(); - this.createBreakpoints(); - this.createDeviceBreakpoints(); + +"use strict"; + +BurdaInfinite.models.DeviceModel = Backbone.Model.extend({ + defaults: { + isActive: false, + uid: -1, + uid_cookie_name: "tc_ptid", + basehost: window.location.hostname.split(".")[0], + cookieReferrerName: '_referrer', + isGoogleBot: navigator.userAgent.toLowerCase().indexOf('googlebot') > 0, + useWhatsapp: ((navigator.userAgent.match(/Android|iPhone/i) && !navigator.userAgent.match(/iPod|iPad/i)) ? true : false) + }, + breakpoints: {}, + breakpointValues: [], + breakpointKeys: [], + deviceBreakpointValues: [], + deviceBreakpointKeys: [], + deviceMapping: {}, + deviceValues: [], + deviceKeys: [], + lastBreakpoint: {}, + lastDeviceBreakpoint: {}, + initialize: function (pAttributes, pOptions) { + //var tmpOptions = _.extend(this.defaults, pOptions); + Backbone.Model.prototype.initialize.call(this, pAttributes, pOptions); + + this.breakpoints = pOptions.Breakpoints; + this.breakpointValues = _.values(this.breakpoints); + this.breakpointKeys = _.keys(this.breakpoints); + + this.deviceMapping = pOptions.DeviceMapping; + this.deviceValues = _.values(this.deviceMapping); + this.deviceKeys = _.keys(this.deviceMapping); + this.deviceBreakpointValues = []; + this.deviceBreakpointKeys = []; + + this.set("uuid", this.getCookie(this.get("uid_cookie_name"))); + this.set("cookieReferrerName", this.get("basehost") + this.getReferrerCookieName()); + this.set('breakpoints', new Backbone.Collection()); + this.set('deviceBreakpoints', new Backbone.Collection()); + + this.writeReferrerCookie(); + this.createBreakpoints(); + this.createDeviceBreakpoints(); + this.checkActiveBreakpoint(); + this.checkActiveDevice(); + + $(window).resize(_.bind(_.debounce(function () { this.checkActiveBreakpoint(); this.checkActiveDevice(); + }, 200), this)); + + + this.set('isActive', this.getBreakpoints().length > 0); + // console.log("deviceModelInfo", JSON.parse(this.getReferrerCookie())); + }, + createBreakpoints: function () { + var tmpModelItem = {}, + tmpMinVal = 0, + tmpMaxVal = 0, + tmpKey = ""; + + _.each(this.breakpointValues, _.bind(function (pVal, pIndex) { + tmpKey = this.breakpointKeys[pIndex]; + tmpMinVal = pVal; + tmpModelItem = { + id: tmpKey, + min_width: tmpMinVal, + active: false + }; + + if (pIndex < this.breakpointValues.length - 1) { + tmpMaxVal = (this.breakpointValues[pIndex + 1] - 1); + tmpModelItem.max_width = tmpMaxVal; + } - $(window).resize(_.bind(_.debounce(function () { - this.checkActiveBreakpoint(); - this.checkActiveDevice(); - }, 200), this)); - - - this.set('isActive', this.getBreakpoints().length > 0); - // console.log("deviceModelInfo", JSON.parse(this.getReferrerCookie())); - }, - createBreakpoints: function () { - var tmpModelItem = {}, - tmpMinVal = 0, - tmpMaxVal = 0, - tmpKey = ""; - - _.each(this.breakpointValues, _.bind(function (pVal, pIndex) { - tmpKey = this.breakpointKeys[pIndex]; - tmpMinVal = pVal; - tmpModelItem = { - id: tmpKey, - min_width: tmpMinVal, - active: false - }; - - if (pIndex < this.breakpointValues.length - 1) { - tmpMaxVal = (this.breakpointValues[pIndex + 1] - 1); - tmpModelItem.max_width = tmpMaxVal; - } - - this.getBreakpoints().add(tmpModelItem); - }, this)); - }, - createDeviceBreakpoints: function () { - var tmpModelItem = {}, - tmpKey = "", - tmpNextKey; - - - this.deviceBreakpointValues = []; - this.deviceBreakpointKeys = []; - _.each(this.deviceValues, _.bind(function (pVal, pIndex) { - tmpKey = this.deviceKeys[pIndex]; - tmpModelItem = { - id: tmpKey, - min_width: this.getBreakpoints().get(pVal).get('min_width'), - active: false, - mapping: pVal - }; - - if (pIndex < this.deviceValues.length - 1) { - tmpNextKey = (this.deviceValues[pIndex + 1]); - tmpModelItem.max_width = parseInt(this.getBreakpoints().get(tmpNextKey).get('min_width')) - 1; - } + this.getBreakpoints().add(tmpModelItem); + }, this)); + }, + createDeviceBreakpoints: function () { + var tmpModelItem = {}, + tmpKey = "", + tmpNextKey; + + + this.deviceBreakpointValues = []; + this.deviceBreakpointKeys = []; + _.each(this.deviceValues, _.bind(function (pVal, pIndex) { + tmpKey = this.deviceKeys[pIndex]; + tmpModelItem = { + id: tmpKey, + min_width: this.getBreakpoints().get(pVal).get('min_width'), + active: false, + mapping: pVal + }; + + if (pIndex < this.deviceValues.length - 1) { + tmpNextKey = (this.deviceValues[pIndex + 1]); + tmpModelItem.max_width = parseInt(this.getBreakpoints().get(tmpNextKey).get('min_width')) - 1; + } - this.deviceBreakpointValues.push(tmpModelItem.min_width); - this.deviceBreakpointKeys.push(tmpKey); - this.getDeviceBreakpoints().add(tmpModelItem); - }, this)); - - }, - checkActiveBreakpoint: function () { - var tmpSize = {width: $(window).width(), height: $(window).height()}, - tmpKey = "", - tmpBreakpoint = null, - tmpValues = _.clone(this.breakpointValues).reverse(), - tmpKeys = _.clone(this.breakpointKeys).reverse(); - - /** - * reset active state - */ - _.each(this.getBreakpoints().models, _.bind(function (pItem) { - if (pItem.has('active')) pItem.set({active: false}, {silent: true}); - }, this)); - - /** - * set active state - */ - _.every(tmpValues, _.bind(function (pVal, pIndex) { - if (tmpSize.width >= pVal) { - tmpKey = tmpKeys[pIndex]; - tmpBreakpoint = this.getBreakpoints().get(tmpKey); - tmpBreakpoint.set({active: true}, {silent: true}); - if (tmpBreakpoint.id != this.lastBreakpoint.id) { - this.getBreakpoints().trigger('change:active'); - } - this.lastBreakpoint = tmpBreakpoint; + this.deviceBreakpointValues.push(tmpModelItem.min_width); + this.deviceBreakpointKeys.push(tmpKey); + this.getDeviceBreakpoints().add(tmpModelItem); + }, this)); + + }, + checkActiveBreakpoint: function () { + var tmpSize = {width: $(window).width(), height: $(window).height()}, + tmpKey = "", + tmpBreakpoint = null, + tmpValues = _.clone(this.breakpointValues).reverse(), + tmpKeys = _.clone(this.breakpointKeys).reverse(); + + /** + * reset active state + */ + _.each(this.getBreakpoints().models, _.bind(function (pItem) { + if (pItem.has('active')) pItem.set({active: false}, {silent: true}); + }, this)); + + /** + * set active state + */ + _.every(tmpValues, _.bind(function (pVal, pIndex) { + if (tmpSize.width >= pVal) { + tmpKey = tmpKeys[pIndex]; + tmpBreakpoint = this.getBreakpoints().get(tmpKey); + tmpBreakpoint.set({active: true}, {silent: true}); + if (tmpBreakpoint.id != this.lastBreakpoint.id) { + this.getBreakpoints().trigger('change:active'); } - return tmpSize.width < pVal; - }, this)); - }, - checkActiveDevice: function () { - var tmpSize = {width: $(window).width(), height: $(window).height()}, - tmpValues = _.clone(this.deviceBreakpointValues).reverse(), - tmpKeys = _.clone(this.deviceBreakpointKeys).reverse(), - tmpBreakpoint = null, - tmpKey = ""; - - /** - * reset active state - */ - _.each(this.getDeviceBreakpoints().models, _.bind(function (pItem) { - if (pItem.has('active')) pItem.set({active: false}, {silent: true}); - }, this)); - - /** - * set active state - */ - _.every(tmpValues, _.bind(function (pVal, pIndex) { - if (tmpSize.width >= pVal) { - tmpKey = tmpKeys[pIndex]; - - tmpBreakpoint = this.getDeviceBreakpoints().get(tmpKey); - tmpBreakpoint.set({active: true}, {silent: true}); - if (tmpBreakpoint.id != this.lastDeviceBreakpoint.id) { - this.getDeviceBreakpoints().trigger('change:active', tmpBreakpoint); - } - this.lastDeviceBreakpoint = tmpBreakpoint; + this.lastBreakpoint = tmpBreakpoint; + } + return tmpSize.width < pVal; + }, this)); + }, + checkActiveDevice: function () { + var tmpSize = {width: $(window).width(), height: $(window).height()}, + tmpValues = _.clone(this.deviceBreakpointValues).reverse(), + tmpKeys = _.clone(this.deviceBreakpointKeys).reverse(), + tmpBreakpoint = null, + tmpKey = ""; + + /** + * reset active state + */ + _.each(this.getDeviceBreakpoints().models, _.bind(function (pItem) { + if (pItem.has('active')) pItem.set({active: false}, {silent: true}); + }, this)); + + /** + * set active state + */ + _.every(tmpValues, _.bind(function (pVal, pIndex) { + if (tmpSize.width >= pVal) { + tmpKey = tmpKeys[pIndex]; + + tmpBreakpoint = this.getDeviceBreakpoints().get(tmpKey); + tmpBreakpoint.set({active: true}, {silent: true}); + if (tmpBreakpoint.id != this.lastDeviceBreakpoint.id) { + this.getDeviceBreakpoints().trigger('change:active', tmpBreakpoint); } - return tmpSize.width < pVal; - }, this)); - }, - writeReferrerCookie: function () { - var tmpParams = this.getURLParams(), - tmpCookie = $.extend(this.getCookie(this.getReferrerCookieName()), {}), - tmpReferrer = document.referrer, - tmpHostname = this.parseUrl(tmpReferrer).hostname, - tmpUtmCampaign = tmpParams.utm_campaign; - - tmpCookie.referrer = tmpReferrer; - tmpCookie.currentUtmCampaign = tmpUtmCampaign; //could be undefined if no campaign in usage - - if (tmpUtmCampaign != "" && tmpUtmCampaign != undefined) { - tmpCookie.lastKnownUtmCampaign = tmpUtmCampaign; + this.lastDeviceBreakpoint = tmpBreakpoint; } + return tmpSize.width < pVal; + }, this)); + }, + writeReferrerCookie: function () { + var tmpParams = this.getURLParams(), + tmpCookie = $.extend(this.getCookie(this.getReferrerCookieName()), {}), + tmpReferrer = document.referrer, + tmpHostname = this.parseUrl(tmpReferrer).hostname, + tmpUtmCampaign = tmpParams.utm_campaign; + + tmpCookie.referrer = tmpReferrer; + tmpCookie.currentUtmCampaign = tmpUtmCampaign; //could be undefined if no campaign in usage + + if (tmpUtmCampaign != "" && tmpUtmCampaign != undefined) { + tmpCookie.lastKnownUtmCampaign = tmpUtmCampaign; + } - tmpCookie.referrerIsMe = tmpReferrer != "" && tmpHostname.indexOf(this.get('basehost')) > -1; - tmpCookie.referrerIsFb = tmpHostname.indexOf("facebook") > -1; + tmpCookie.referrerIsMe = tmpReferrer != "" && tmpHostname.indexOf(this.get('basehost')) > -1; + tmpCookie.referrerIsFb = tmpHostname.indexOf("facebook") > -1; - //counting clicks after FB referrer - needed for the FB layer/ads/likegates policy - if (tmpCookie.referrerIsFb) { - tmpCookie.comesFromFB = true; - tmpCookie.clicksAfterFbReferrer = 0; - } else if (tmpCookie.comesFromFB == true) { - tmpCookie.clicksAfterFbReferrer++; - } - - this.setCookieValue(this.getReferrerCookieName(), JSON.stringify(tmpCookie)); - }, - parseUrl: function (pUrl) { - var a = document.createElement('a'); - a.href = pUrl; - return a; - }, - setCookieValue: function (pCookieName, pValue, pOptions) { - var tmpOptions = _.extend({path: '/'}, pOptions); - $.cookie(pCookieName, pValue, tmpOptions); - }, - getCookie: function (pCookieName) { - return $.cookie(pCookieName); - }, - getReferrerCookieName: function () { - return this.get("cookieReferrerName"); - }, - getReferrerCookie: function () { - return $.cookie(this.getReferrerCookieName()); - }, - getURLParams: function (pParam) { - return _.object(_.compact(_.map(location.search.slice(1).split('&'), function (item) { - if (item) return item.split('='); - }))); - }, - getBreakpoints: function () { - return this.get('breakpoints'); - }, - getDeviceBreakpoints: function () { - return this.get('deviceBreakpoints'); + //counting clicks after FB referrer - needed for the FB layer/ads/likegates policy + if (tmpCookie.referrerIsFb) { + tmpCookie.comesFromFB = true; + tmpCookie.clicksAfterFbReferrer = 0; + } else if (tmpCookie.comesFromFB == true) { + tmpCookie.clicksAfterFbReferrer++; } - }); - - window.DeviceModel = window.DeviceModel || BurdaInfinite.models.DeviceModel; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); + this.setCookieValue(this.getReferrerCookieName(), JSON.stringify(tmpCookie)); + }, + parseUrl: function (pUrl) { + var a = document.createElement('a'); + a.href = pUrl; + return a; + }, + setCookieValue: function (pCookieName, pValue, pOptions) { + var tmpOptions = _.extend({path: '/'}, pOptions); + $.cookie(pCookieName, pValue, tmpOptions); + }, + getCookie: function (pCookieName) { + return $.cookie(pCookieName); + }, + getReferrerCookieName: function () { + return this.get("cookieReferrerName"); + }, + getReferrerCookie: function () { + return $.cookie(this.getReferrerCookieName()); + }, + getURLParams: function (pParam) { + return _.object(_.compact(_.map(location.search.slice(1).split('&'), function (item) { + if (item) return item.split('='); + }))); + }, + getBreakpoints: function () { + return this.get('breakpoints'); + }, + getDeviceBreakpoints: function () { + return this.get('deviceBreakpoints'); + } +}); + +export default BurdaInfinite.models.DeviceModel diff --git a/js/infinite/models/index.js b/js/infinite/models/index.js new file mode 100644 index 00000000..3eb595c3 --- /dev/null +++ b/js/infinite/models/index.js @@ -0,0 +1,13 @@ +// Beware of circular-dependencies! Order is important here! +// Always import the module, which wants to import other things from this file at last. + +export { default as BaseModel } from './base/base-model' +export { default as BaseCollectionModel } from './base/base-collection-model' +export { default as BaseDynamicViewModel } from './base/base-dynamic-view-model' +export { default as BaseSidebarModel } from './base/base-sidebar-model' +export { default as AjaxModel } from './ajax-model' +export { default as DeviceModel } from './device-model' +export { default as InfiniteBlockDataModel } from './infinite-block-data-model' +export { default as ModalSearchModel } from './modal-search-model' +export { default as PageOffsetsModel } from './page-offsets-model' +export { default as SidebarModel } from './sidebar-model' diff --git a/js/infinite/models/infinite-block-data-model.js b/js/infinite/models/infinite-block-data-model.js index 7bbe8337..ee3eec3a 100644 --- a/js/infinite/models/infinite-block-data-model.js +++ b/js/infinite/models/infinite-block-data-model.js @@ -1,62 +1,58 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +"use strict"; - "use strict"; - - BurdaInfinite.models.InfiniteBlockDataModel = Backbone.Model.extend({ - $el: [], - defaults: function () { - return { - nid: '', - uuid: '', - path: '', - title: '', - category: '', - subCategory: '', - contentType: '', - contentSubType: '', - noTrack: '' - } - }, - initialize: function (pAttributes, pOptions) { - this.$el = pAttributes.$el || pAttributes.el; - this.parseElement(this.$el); - }, - parseElement: function ($pElement) { - var tmpNid = $pElement.data('nid'), - tmpUuid = $pElement.data('uuid'), - tmpPath = $pElement.data('path') || $pElement.data('history-url'), - tmpTitle = $pElement.data('title') || $pElement.data('history-title'), - tmpCategory = $pElement.data('category'), - tmpSubCategory = $pElement.data('sub-category'), - tmpContentType = $pElement.data('content-type'), - tmpContentSubType = $pElement.data('content-sub-type'), - // tmpClasses = [], - tmpTrackingContainerType = $pElement.data('tr-container-type'), - tmpNoTrack = $pElement.data('no-track'); - - // if ($pElement.find('.item-content').addBack().prop("css")) { - // tmpClasses = $pElement.find('.item-content').addBack().attr('class').split(' ') || []; - // } - - this.set({ - 'nid': tmpNid, - 'uuid': tmpUuid, - 'path': tmpPath, - 'title': tmpTitle, - 'category': tmpCategory, - 'subCategory': tmpSubCategory, - 'contentType': tmpContentType, - 'contentSubType': tmpContentSubType, - // 'cssClass': tmpClasses, - 'trackingContainerType': tmpTrackingContainerType, - 'noTrack': tmpNoTrack - }); - }, - getElement: function () { - return this.get('$el') || []; +BurdaInfinite.models.InfiniteBlockDataModel = Backbone.Model.extend({ + $el: [], + defaults: function () { + return { + nid: '', + uuid: '', + path: '', + title: '', + category: '', + subCategory: '', + contentType: '', + contentSubType: '', + noTrack: '' } - }); + }, + initialize: function (pAttributes, pOptions) { + this.$el = pAttributes.$el || pAttributes.el; + this.parseElement(this.$el); + }, + parseElement: function ($pElement) { + var tmpNid = $pElement.data('nid'), + tmpUuid = $pElement.data('uuid'), + tmpPath = $pElement.data('path') || $pElement.data('history-url'), + tmpTitle = $pElement.data('title') || $pElement.data('history-title'), + tmpCategory = $pElement.data('category'), + tmpSubCategory = $pElement.data('sub-category'), + tmpContentType = $pElement.data('content-type'), + tmpContentSubType = $pElement.data('content-sub-type'), + // tmpClasses = [], + tmpTrackingContainerType = $pElement.data('tr-container-type'), + tmpNoTrack = $pElement.data('no-track'); + + // if ($pElement.find('.item-content').addBack().prop("css")) { + // tmpClasses = $pElement.find('.item-content').addBack().attr('class').split(' ') || []; + // } - window.InfiniteBlockDataModel = window.InfiniteBlockDataModel || BurdaInfinite.models.InfiniteBlockDataModel; + this.set({ + 'nid': tmpNid, + 'uuid': tmpUuid, + 'path': tmpPath, + 'title': tmpTitle, + 'category': tmpCategory, + 'subCategory': tmpSubCategory, + 'contentType': tmpContentType, + 'contentSubType': tmpContentSubType, + // 'cssClass': tmpClasses, + 'trackingContainerType': tmpTrackingContainerType, + 'noTrack': tmpNoTrack + }); + }, + getElement: function () { + return this.get('$el') || []; + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.models.InfiniteBlockDataModel; diff --git a/js/infinite/models/modal-search-model.js b/js/infinite/models/modal-search-model.js index 0992b471..56779909 100644 --- a/js/infinite/models/modal-search-model.js +++ b/js/infinite/models/modal-search-model.js @@ -1,41 +1,40 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { AppConfig } from '../consts' +import { BaseCollectionModel, AjaxModel } from './index' + +"use strict"; + +BurdaInfinite.models.ModalSearchModel = BaseCollectionModel.extend({ + defaults: { + is_open: false, + }, + ajaxModel: null, + url: AppConfig.searchApiUrl, + initialize: function (pOptions) { + BaseCollectionModel.prototype.initialize.call(this, pOptions); + }, + fetch: function (pString, pOptions) { + //_.extend(pOptions, {reset: true, traditional: true}); + //return Backbone.Model.prototype.fetch.apply(this, arguments); + + if (this.ajaxModel != null) this.ajaxModel.destroy(); + this.ajaxModel = new AjaxModel({ + url: this.url + '?fulltext=' + pString, + callback: _.bind(this.parse, this) + }); + + this.trigger('request', this); + this.ajaxModel.execute(); + }, + parse: function (pAjaxContent) { + var $tmpItem = $(pAjaxContent).find('.infinite-item').addBack().filter('.infinite-item'); + this.getItems().add({'el': $tmpItem}); + + this.trigger('sync', this); + }, + toggleOpenState: function () { + this.set('is_open', !this.get('is_open')); + } +}); + +export default BurdaInfinite.models.ModalSearchModel; - "use strict"; - - BurdaInfinite.models.ModalSearchModel = BaseCollectionModel.extend({ - defaults: { - is_open: false, - }, - ajaxModel: null, - url: AppConfig.searchApiUrl, - initialize: function (pOptions) { - BaseCollectionModel.prototype.initialize.call(this, pOptions); - }, - fetch: function (pString, pOptions) { - //_.extend(pOptions, {reset: true, traditional: true}); - //return Backbone.Model.prototype.fetch.apply(this, arguments); - - if (this.ajaxModel != null) this.ajaxModel.destroy(); - this.ajaxModel = new AjaxModel({ - url: this.url + '?fulltext=' + pString, - callback: _.bind(this.parse, this) - }); - - this.trigger('request', this); - this.ajaxModel.execute(); - }, - parse: function (pAjaxContent) { - var $tmpItem = $(pAjaxContent).find('.infinite-item').addBack().filter('.infinite-item'); - this.getItems().add({'el': $tmpItem}); - - this.trigger('sync', this); - }, - toggleOpenState: function () { - this.set('is_open', !this.get('is_open')); - } - }); - - window.ModalSearchModel = window.ModalSearchModel || BurdaInfinite.models.ModalSearchModel; - - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); diff --git a/js/infinite/models/page-offsets-model.js b/js/infinite/models/page-offsets-model.js index 4f06f89f..610c972e 100644 --- a/js/infinite/models/page-offsets-model.js +++ b/js/infinite/models/page-offsets-model.js @@ -1,101 +1,98 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.models.PageOffsetsModel = Backbone.Model.extend({ - initialize: function (pOptions) { - /** - * Collection in Collection is not possible >:/ - * We need the 'items' property here - */ - - /** - * check if this is obsolete - * function calculateOffset(edge) { - * var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']'); - * @type {{top: number, right: number, left: number, bottom: number}} - */ - - this.defaultPageOffset = {top: 0, right: 0, left: 0, bottom: 0, height: 0}; - this.set('items', new Backbone.Collection()); - this.add({id: 'offsetPage', $el: {}, active: false, offsets: this.defaultPageOffset}); - this.add({id: 'offsetToolbar', $el: {}, active: false, offsets: this.defaultPageOffset}, {silent: true}); - this.add({id: 'offsetMenuMain', $el: {}, active: false, offsets: this.defaultPageOffset}, {silent: true}); - - _.extend(this, pOptions); - - this.listenTo(this.getItems(), 'change:offsets change:active', this.onCalculatePageHandler, this); - }, - onCalculatePageHandler: function (pModel) { - if (pModel.id == "offsetPage") return; - - var tmpPageModel = this.getModel('offsetPage'), - tmpPageRelevants = this.getPageRelevantItems(); - - /** - * Only top gap at this moment - * TODO: dynamic left / top / right / bottom gaps - */ - var tmpPageOffsets = _.reduce(tmpPageRelevants, _.bind(function (pMemo, pNum) { - var tmpOffsets = pNum.get('offsets'), - tmpOffsets_2 = pMemo; - - if (!_.has(tmpOffsets_2, 'top')) tmpOffsets_2 = this.defaultPageOffset; - - if (tmpOffsets.height != undefined) { - tmpOffsets.top = tmpOffsets.height; - } - - if (tmpOffsets_2.height != undefined) { - tmpOffsets_2.top = tmpOffsets_2.height; - } - - return { - top: tmpOffsets.top + tmpOffsets_2.top, - left: tmpOffsets.left + tmpOffsets_2.left, - right: tmpOffsets.right + tmpOffsets_2.right, - bottom: tmpOffsets.bottom + tmpOffsets_2.bottom - }; - }, this), this.defaultPageOffset); - - - tmpPageModel.set('offsets', tmpPageOffsets); - }, - add: function (pModel, pOptions) { - var tmpOptions = _.extend(pOptions || {}, {merge: true}), - tmpModel = this.getItems().add(pModel, tmpOptions); - - tmpModel.set('active', true); - }, - deactivate: function (pModel, pOptions) { - if (!pModel || this.getItems().get(pModel.id) === undefined) return; - - this.getModel(pModel.id).set('active', false); - }, - remove: function (pModel, pOptions) { - var tmpOptions = _.extend(pOptions || {}, {merge: true}); - this.deactivate(pModel, pOptions); - this.getItems().remove(pModel, tmpOptions); - }, - getPageRelevantItems: function () { - var tmpItems = []; - - _.find(this.getItems().models, function (pModel) { - if (pModel.attributes.pageRelevant === true && pModel.attributes.active === true) { - tmpItems.push(pModel); - } - }); - - return tmpItems; - }, - getItems: function () { - return this.get('items'); - }, - getModel: function (pModelId) { - return this.getItems().get(pModelId); - } - }); - - window.PageOffsetsModel = window.PageOffsetsModel || BurdaInfinite.models.PageOffsetsModel; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); + +"use strict"; + +BurdaInfinite.models.PageOffsetsModel = Backbone.Model.extend({ + initialize: function (pOptions) { + /** + * Collection in Collection is not possible >:/ + * We need the 'items' property here + */ + + /** + * check if this is obsolete + * function calculateOffset(edge) { + * var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']'); + * @type {{top: number, right: number, left: number, bottom: number}} + */ + + this.defaultPageOffset = {top: 0, right: 0, left: 0, bottom: 0, height: 0}; + this.set('items', new Backbone.Collection()); + this.add({id: 'offsetPage', $el: {}, active: false, offsets: this.defaultPageOffset}); + this.add({id: 'offsetToolbar', $el: {}, active: false, offsets: this.defaultPageOffset}, {silent: true}); + this.add({id: 'offsetMenuMain', $el: {}, active: false, offsets: this.defaultPageOffset}, {silent: true}); + + _.extend(this, pOptions); + + this.listenTo(this.getItems(), 'change:offsets change:active', this.onCalculatePageHandler, this); + }, + onCalculatePageHandler: function (pModel) { + if (pModel.id == "offsetPage") return; + + var tmpPageModel = this.getModel('offsetPage'), + tmpPageRelevants = this.getPageRelevantItems(); + + /** + * Only top gap at this moment + * TODO: dynamic left / top / right / bottom gaps + */ + var tmpPageOffsets = _.reduce(tmpPageRelevants, _.bind(function (pMemo, pNum) { + var tmpOffsets = pNum.get('offsets'), + tmpOffsets_2 = pMemo; + + if (!_.has(tmpOffsets_2, 'top')) tmpOffsets_2 = this.defaultPageOffset; + + if (tmpOffsets.height != undefined) { + tmpOffsets.top = tmpOffsets.height; + } + + if (tmpOffsets_2.height != undefined) { + tmpOffsets_2.top = tmpOffsets_2.height; + } + + return { + top: tmpOffsets.top + tmpOffsets_2.top, + left: tmpOffsets.left + tmpOffsets_2.left, + right: tmpOffsets.right + tmpOffsets_2.right, + bottom: tmpOffsets.bottom + tmpOffsets_2.bottom + }; + }, this), this.defaultPageOffset); + + + tmpPageModel.set('offsets', tmpPageOffsets); + }, + add: function (pModel, pOptions) { + var tmpOptions = _.extend(pOptions || {}, {merge: true}), + tmpModel = this.getItems().add(pModel, tmpOptions); + + tmpModel.set('active', true); + }, + deactivate: function (pModel, pOptions) { + if (!pModel || this.getItems().get(pModel.id) === undefined) return; + + this.getModel(pModel.id).set('active', false); + }, + remove: function (pModel, pOptions) { + var tmpOptions = _.extend(pOptions || {}, {merge: true}); + this.deactivate(pModel, pOptions); + this.getItems().remove(pModel, tmpOptions); + }, + getPageRelevantItems: function () { + var tmpItems = []; + + _.find(this.getItems().models, function (pModel) { + if (pModel.attributes.pageRelevant === true && pModel.attributes.active === true) { + tmpItems.push(pModel); + } + }); + + return tmpItems; + }, + getItems: function () { + return this.get('items'); + }, + getModel: function (pModelId) { + return this.getItems().get(pModelId); + } +}); + +export default BurdaInfinite.models.PageOffsetsModel diff --git a/js/infinite/package-lock.json b/js/infinite/package-lock.json new file mode 100644 index 00000000..b8715d2f --- /dev/null +++ b/js/infinite/package-lock.json @@ -0,0 +1,84 @@ +{ + "name": "infinite", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "bootstrap": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.5.tgz", + "integrity": "sha1-F3ereSmbEo2H3OfL2G/cRqxpwLE=" + }, + "dom7": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.0.3.tgz", + "integrity": "sha512-PP926uetPkWPt8YrvT/Y04xA5w7WG/zX+t6G3o9HiyYFSfnvSB+RGnNZhWEZ687lZ9tDWbnyrPxj237k2fskKg==", + "requires": { + "ssr-window": "1.0.0" + } + }, + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" + }, + "jquery.browser": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/jquery.browser/-/jquery.browser-0.0.8.tgz", + "integrity": "sha1-Q/e52gFydgpn34n2clruyLy6iZA=" + }, + "jquery.easing": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/jquery.easing/-/jquery.easing-1.3.0.tgz", + "integrity": "sha1-4djG4k0W467jnRZymcqpx35SzrY=", + "requires": { + "jquery": "3.3.1" + } + }, + "raw-loader": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz", + "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=" + }, + "script-loader": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz", + "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==", + "requires": { + "raw-loader": "0.5.1" + } + }, + "ssr-window": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.0.tgz", + "integrity": "sha512-WHFyFLegz/NOgwdlFTw93Wd4c/gQ5hkv6amtdK/K0atfZvr28vwfEV7MR3NtWek+gnpiSd/tKXHQVfQRtA6OJg==" + }, + "sticky-kit": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sticky-kit/-/sticky-kit-1.1.2.tgz", + "integrity": "sha1-8xmRm5M2Yi9fcfEWeO5c77+oXoM=" + }, + "swiper": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.1.6.tgz", + "integrity": "sha512-oEpyQc4qCAgQCWlSPCxJd4STQFJqASyVcLCs7CzzZiFc8NnTfBaMt3p9iwqoC8c6KofJmt6zonyUj50KRFWW3g==", + "requires": { + "dom7": "2.0.3", + "ssr-window": "1.0.0" + } + }, + "timeago": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/timeago/-/timeago-1.4.2.tgz", + "integrity": "sha1-C1h5L67fEA2zDop0vOmKygXNMLE=", + "requires": { + "jquery": "3.3.1" + } + }, + "waypoints": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/waypoints/-/waypoints-4.0.0.tgz", + "integrity": "sha1-QDPczPvr+3MmRabrtduXtzNn56A=" + } + } +} diff --git a/js/infinite/package.json b/js/infinite/package.json new file mode 100644 index 00000000..9b1aa4e6 --- /dev/null +++ b/js/infinite/package.json @@ -0,0 +1,22 @@ +{ + "name": "infinite", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": {}, + "dependencies": { + "bootstrap": "3.3.5", + "jquery.browser": "0.0.8", + "jquery.easing": "1.3.0", + "script-loader": "^0.7.2", + "sticky-kit": "1.1.2", + "swiper": "^4.1.6", + "timeago": "1.4.2", + "waypoints": "4.0.0" + } +} diff --git a/js/infinite/utils/base-utils.js b/js/infinite/utils/base-utils.js index 4458e4f2..97708b45 100644 --- a/js/infinite/utils/base-utils.js +++ b/js/infinite/utils/base-utils.js @@ -1,3 +1,5 @@ +import ModelIds from '../consts/model-ids' + (function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { "use strict"; @@ -254,7 +256,7 @@ return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue } }; - + // TODO: why is that lying here? Can't that be put in a function? $('body').once('BaseUtils').each(function () { $(window).bind('base-utils:update', function (pEvent, $pContainer) { BurdaInfinite.utils.BaseUtils.delegateElements($pContainer); diff --git a/js/infinite/views/anchor-navigation-view.js b/js/infinite/views/anchor-navigation-view.js index 63fd3380..217abe35 100644 --- a/js/infinite/views/anchor-navigation-view.js +++ b/js/infinite/views/anchor-navigation-view.js @@ -1,49 +1,48 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.AnchorNavigationView = BaseView.extend({ - $links: [], - pageOffsetsModel: null, - offsetsPageModel: null, - offsetTop: 0, - initialize: function (pOptions) { - this.$links = this.$el.find('li a'); - this.$links.click($.proxy(this.onClickHandler, this)); - - this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); - - if (this.pageOffsetsModel != undefined && this.pageOffsetsModel != null) { - this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); - this.offsetTop = this.offsetsPageModel.get('offsets').top; - this.listenTo(this.offsetsPageModel, 'change:offsets', this.onOffsetHandler, this); - } - - if (window.location.hash && this.$el.find('a[href="' + window.location.hash + '"]').length > 0) { - setTimeout($.proxy(function () { - this.scrollToElement(window.location.hash); - }, this), 1500); - } - }, - scrollToElement: function (pElementId) { - $("html, body").animate({scrollTop: Math.round($(pElementId).offset().top - this.offsetTop - AppConfig.padding)}, { - duration: 1000, - easing: 'easeInOutCubic' - }); - - return false; - }, - onClickHandler: function (pEvent) { - var tmpItemId = $(pEvent.currentTarget).attr('href'); - this.scrollToElement(tmpItemId); - - return false; - }, - onOffsetHandler: function (pModel) { - this.offsetTop = pModel.get('offsets').top; +import { AppConfig, ModelIds } from '../consts' +import { BaseView } from '.' + +"use strict"; + +BurdaInfinite.views.AnchorNavigationView = BaseView.extend({ + $links: [], + pageOffsetsModel: null, + offsetsPageModel: null, + offsetTop: 0, + initialize: function (pOptions) { + this.$links = this.$el.find('li a'); + this.$links.click($.proxy(this.onClickHandler, this)); + + this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); + + if (this.pageOffsetsModel != undefined && this.pageOffsetsModel != null) { + this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); + this.offsetTop = this.offsetsPageModel.get('offsets').top; + this.listenTo(this.offsetsPageModel, 'change:offsets', this.onOffsetHandler, this); } - }); - window.AnchorNavigationView = window.AnchorNavigationView || BurdaInfinite.views.AnchorNavigationView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file + if (window.location.hash && this.$el.find('a[href="' + window.location.hash + '"]').length > 0) { + setTimeout($.proxy(function () { + this.scrollToElement(window.location.hash); + }, this), 1500); + } + }, + scrollToElement: function (pElementId) { + $("html, body").animate({scrollTop: Math.round($(pElementId).offset().top - this.offsetTop - AppConfig.padding)}, { + duration: 1000, + easing: 'easeInOutCubic' + }); + + return false; + }, + onClickHandler: function (pEvent) { + var tmpItemId = $(pEvent.currentTarget).attr('href'); + this.scrollToElement(tmpItemId); + + return false; + }, + onOffsetHandler: function (pModel) { + this.offsetTop = pModel.get('offsets').top; + } +}); + +export default BurdaInfinite.views.AnchorNavigationView; diff --git a/js/infinite/views/article-view.js b/js/infinite/views/article-view.js index 7e28dd51..dceafd90 100644 --- a/js/infinite/views/article-view.js +++ b/js/infinite/views/article-view.js @@ -1,86 +1,86 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { AppConfig } from '../consts' +import { BaseDynamicView } from './index' - "use strict"; +"use strict"; - BurdaInfinite.views.ArticleView = BaseDynamicView.extend({ - articleReadedTrigger: null, - articleReadedDelay: 0, - articleSEOTitle: '', - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.ArticleView = BaseDynamicView.extend({ + articleReadedTrigger: null, + articleReadedDelay: 0, + articleSEOTitle: '', + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); - this.articleReadedDelay = AppConfig.articleReadedDelay || 2000; + this.articleReadedDelay = AppConfig.articleReadedDelay || 2000; - if (this.infiniteBlockDataModel != undefined && this.infiniteBlockDataModel.has('title')) { - this.articleSEOTitle = this.infiniteBlockDataModel.get('title'); - } + if (this.infiniteBlockDataModel != undefined && this.infiniteBlockDataModel.has('title')) { + this.articleSEOTitle = this.infiniteBlockDataModel.get('title'); + } - this.initTracking(); - this.renderParagraphSocials(); - }, - initTracking: function () { - if (this.$el.find('.cet').length <= 0) return; + this.initTracking(); + this.renderParagraphSocials(); + }, + initTracking: function () { + if (this.$el.find('.cet').length <= 0) return; - this.articleReadedTrigger = new Waypoint.Inview({ - element: this.$el.find('.cet'), - exit: _.bind(function (pDirection) { - this.stopArticleReadedInterval(); - }, this), - enter: _.bind(function (pDirection) { - this.stopArticleReadedInterval(); + this.articleReadedTrigger = new Waypoint.Inview({ + element: this.$el.find('.cet'), + exit: _.bind(function (pDirection) { + this.stopArticleReadedInterval(); + }, this), + enter: _.bind(function (pDirection) { + this.stopArticleReadedInterval(); - this.readedInterval = setInterval($.proxy(function () { - this.trackArticleReaded(); - this.stopArticleReadedInterval(); - }, this), this.articleReadedDelay); + this.readedInterval = setInterval($.proxy(function () { + this.trackArticleReaded(); + this.stopArticleReadedInterval(); + }, this), this.articleReadedDelay); - }, this) - }); - }, - renderParagraphSocials: function () { - if (typeof twttr != 'undefined') { - twttr.widgets.load( - this.$el[0] - ); - } + }, this) + }); + }, + renderParagraphSocials: function () { + if (typeof twttr != 'undefined') { + twttr.widgets.load( + this.$el[0] + ); + } - if (typeof PinUtils != 'undefined') { - PinUtils.build(this.$el[0]); - } + if (typeof PinUtils != 'undefined') { + PinUtils.build(this.$el[0]); + } - if (typeof instgrm != 'undefined') { - instgrm.Embeds.process(); - } + if (typeof instgrm != 'undefined') { + instgrm.Embeds.process(); + } - if (typeof tracdelight != "undefined") { - window.tracdelight.then(_.bind(function (td) { - $.each(this.$el.find('.td-widget'), function (pIndex, pItem) { - td.parse(pItem); - }) - }, this)).catch(function (err) { - console.error("Tracdelight Error", err); - }); - } + if (typeof tracdelight != "undefined") { + window.tracdelight.then(_.bind(function (td) { + $.each(this.$el.find('.td-widget'), function (pIndex, pItem) { + td.parse(pItem); + }) + }, this)).catch(function (err) { + console.error("Tracdelight Error", err); + }); + } - }, - stopArticleReadedInterval: function () { - clearInterval(this.readedInterval); - this.readedInterval = 0; - }, - trackArticleReaded: function () { - this.articleReadedTrigger.destroy(); + }, + stopArticleReadedInterval: function () { + clearInterval(this.readedInterval); + this.readedInterval = 0; + }, + trackArticleReaded: function () { + this.articleReadedTrigger.destroy(); - if (typeof TrackingManager != 'undefined') { - TrackingManager.trackEvent({ - category: 'mkt-userInteraction', - action: 'readArticle', - label: this.articleSEOTitle, - 'eventNonInteraction': 'false' - }, TrackingManager.getAdvTrackingByElement(this.$el)); - } + if (typeof TrackingManager != 'undefined') { + TrackingManager.trackEvent({ + category: 'mkt-userInteraction', + action: 'readArticle', + label: this.articleSEOTitle, + 'eventNonInteraction': 'false' + }, TrackingManager.getAdvTrackingByElement(this.$el)); } - }); + } +}); - window.ArticleView = window.ArticleView || BurdaInfinite.views.ArticleView; +export default BurdaInfinite.views.ArticleView; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file diff --git a/js/infinite/views/base/base-dynamic-view.js b/js/infinite/views/base/base-dynamic-view.js index cc681dec..49eec593 100644 --- a/js/infinite/views/base/base-dynamic-view.js +++ b/js/infinite/views/base/base-dynamic-view.js @@ -1,80 +1,82 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseView, BaseInviewView } from '../index' +import { InfiniteBlockDataModel } from '../../models/index' - "use strict"; +"use strict"; - BurdaInfinite.views.base.BaseDynamicView = BaseInviewView.extend({ - type: 'baseDynamicView', - initialCall: false, - initialDOMItem: true, - infiniteBlockDataModel: null, - initialize: function (pOptions) { - BaseInviewView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.base.BaseDynamicView = BaseInviewView.extend({ + type: 'baseDynamicView', + initialCall: false, + initialDOMItem: true, + infiniteBlockDataModel: null, + initialize: function (pOptions) { + BaseInviewView.prototype.initialize.call(this, pOptions); - this.parseInfiniteView(this.$el, {initialCall: this.initialCall}); - }, - parseInfiniteView: function (pContainer, pSettings) { - if (pSettings.initialDOMItem === false) this.initialDOMItem = false; + this.parseInfiniteView(this.$el, {initialCall: this.initialCall}); + }, + parseInfiniteView: function (pContainer, pSettings) { + if (pSettings.initialDOMItem === false) this.initialDOMItem = false; - var tmpSettings = _.extend({ - modelList: this.model, - initialCall: false, //todo find a better name - //delegateElements: false, - initialDOMItem: this.initialDOMItem - }, pSettings), - $tmpContainer = $(pContainer), - $tmpViewTypes = []; + var tmpSettings = _.extend({ + modelList: this.model, + initialCall: false, //todo find a better name + //delegateElements: false, + initialDOMItem: this.initialDOMItem + }, pSettings), + $tmpContainer = $(pContainer), + $tmpViewTypes = []; - if (this.$el[0] == $tmpContainer[0] || tmpSettings.initialCall) { - $tmpViewTypes = $tmpContainer.find("[data-view-type]").not($tmpContainer.find('[data-view-type] [data-view-type]')); - } else { - $tmpViewTypes = $tmpContainer.find("[data-view-type]").addBack().not($tmpContainer.find('[data-view-type]')); - } - - if ($tmpViewTypes.length > 0) { + if (this.$el[0] == $tmpContainer[0] || tmpSettings.initialCall) { + $tmpViewTypes = $tmpContainer.find("[data-view-type]").not($tmpContainer.find('[data-view-type] [data-view-type]')); + } else { + $tmpViewTypes = $tmpContainer.find("[data-view-type]").addBack().not($tmpContainer.find('[data-view-type]')); + } - $.each($tmpViewTypes, $.proxy(function (pIndex, pItem) { - tmpSettings.el = $(pItem); - this.createDynamicItem(tmpSettings); - }, this)); + if ($tmpViewTypes.length > 0) { - } else if (tmpSettings.initialCall == false && _.isUndefined($tmpContainer.data('view-type'))) { - /** - * if no data-type found -> create abstractView -> internal / external / etc / listener - */ - tmpSettings.el = $tmpContainer; + $.each($tmpViewTypes, $.proxy(function (pIndex, pItem) { + tmpSettings.el = $(pItem); this.createDynamicItem(tmpSettings); - } - }, - createDynamicItem: function (pSettings) { - var $tmpItem = pSettings.el, - tmpViewType = $tmpItem.data('view-type'), - tmpModel = new BaseDynamicViewModel(); + }, this)); - if (tmpViewType == "infiniteBlockView" && $tmpItem.data('uuid') || tmpViewType == "infiniteBlockView" && $tmpItem.data('tr-container-type')) { - this.infiniteBlockDataModel = new InfiniteBlockDataModel({$el: $tmpItem}); - } + } else if (tmpSettings.initialCall == false && _.isUndefined($tmpContainer.data('view-type'))) { + /** + * if no data-type found -> create abstractView -> internal / external / etc / listener + */ + tmpSettings.el = $tmpContainer; + this.createDynamicItem(tmpSettings); + } + }, + createDynamicItem: function (pSettings) { + // TODO refactor to ES6 import + // dynamic require needed, because of a circular dependecy + var BaseDynamicViewModel = require('../../models/base/base-dynamic-view-model').default + var $tmpItem = pSettings.el, + tmpViewType = $tmpItem.data('view-type'), + tmpModel = new BaseDynamicViewModel(); - pSettings.modelList.add(tmpModel); + if (tmpViewType == "infiniteBlockView" && $tmpItem.data('uuid') || tmpViewType == "infiniteBlockView" && $tmpItem.data('tr-container-type')) { + this.infiniteBlockDataModel = new InfiniteBlockDataModel({$el: $tmpItem}); + } - //trigger change events - tmpModel.createDynamicItem({ - el: $tmpItem, - type: tmpViewType, - //TODO check performance - initialDOMItem: $tmpItem.closest('.region-feed').length <= 0, - infiniteBlock: tmpViewType == 'infiniteBlockView' - }, { - deviceModel: this.deviceModel, - infiniteBlockDataModel: this.infiniteBlockDataModel - }); + pSettings.modelList.add(tmpModel); - $tmpItem.data('infiniteModel', tmpModel); - }, - destroy: function () { - BaseView.prototype.destroy.call(this); - } - }); + //trigger change events + tmpModel.createDynamicItem({ + el: $tmpItem, + type: tmpViewType, + //TODO check performance + initialDOMItem: $tmpItem.closest('.region-feed').length <= 0, + infiniteBlock: tmpViewType == 'infiniteBlockView' + }, { + deviceModel: this.deviceModel, + infiniteBlockDataModel: this.infiniteBlockDataModel + }); - window.BaseDynamicView = window.BaseDynamicView || BurdaInfinite.views.base.BaseDynamicView; + $tmpItem.data('infiniteModel', tmpModel); + }, + destroy: function () { + BaseView.prototype.destroy.call(this); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseDynamicView; diff --git a/js/infinite/views/base/base-feed-view.js b/js/infinite/views/base/base-feed-view.js index 267bc6ec..8b506910 100644 --- a/js/infinite/views/base/base-feed-view.js +++ b/js/infinite/views/base/base-feed-view.js @@ -1,95 +1,93 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseDynamicView, SpinnerCubeView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.base.BaseFeedView = BaseDynamicView.extend({ - context: $(window), - $feedItemsContainer: {}, - lastInfiniteItem: {}, - preloader: null, - infinite: null, - initFeed: true, - onBeforeLoadCallback: $.noop, - onAfterLoadCallback: $.noop, - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.base.BaseFeedView = BaseDynamicView.extend({ + context: $(window), + $feedItemsContainer: {}, + lastInfiniteItem: {}, + preloader: null, + infinite: null, + initFeed: true, + onBeforeLoadCallback: $.noop, + onAfterLoadCallback: $.noop, + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); - this.context = $(this.context); //force jquery element - this.$feedItemsContainer = this.$el.find('.container-feed-items'); - /** - * auto init - */ - if (this.initFeed) this.rebuildFeed(); + this.context = $(this.context); //force jquery element + this.$feedItemsContainer = this.$el.find('.container-feed-items'); + /** + * auto init + */ + if (this.initFeed) this.rebuildFeed(); - this.listenTo(this.model, "change:is_disabled", this.onDisableHandler); - this.listenTo(this.model, "reset", this.onResetHandler, this); - }, - rebuildFeed: function () { - if (this.infinite !== null) this.infinite.destroy(); + this.listenTo(this.model, "change:is_disabled", this.onDisableHandler); + this.listenTo(this.model, "reset", this.onResetHandler, this); + }, + rebuildFeed: function () { + if (this.infinite !== null) this.infinite.destroy(); - this.infinite = new Waypoint.Infinite({ - context: this.context[0], - element: this.$el, - onBeforePageLoad: _.bind(this.onBeforeLoad, this), - onAfterPageLoad: _.bind(this.onAfterLoad, this), - offset: function () { - return (this.context.innerHeight() * 2) - this.adapter.outerHeight(); - } - }); - }, - onBeforeLoad: function () { - this.lastInfiniteItem = this.$el.find('.infinite-item:last').length > 0 ? this.$el.find('.infinite-item:last') : this.$el; - if (this.preloader != null) this.preloader.hide(true, true); - this.preloader = new SpinnerCubeView({el: this.lastInfiniteItem}); - this.onBeforeLoadCallback(this.lastInfiniteItem); - }, - onAfterLoad: function (pItem) { - //console.log("loading done", " View >> ", this.id || this.$el.attr('id') || this.$el.attr('class')); - - if (this.preloader != null) { - this.preloader.hide(true, true); - this.preloader = null; + this.infinite = new Waypoint.Infinite({ + context: this.context[0], + element: this.$el, + onBeforePageLoad: _.bind(this.onBeforeLoad, this), + onAfterPageLoad: _.bind(this.onAfterLoad, this), + offset: function () { + return (this.context.innerHeight() * 2) - this.adapter.outerHeight(); } - this.onAfterLoadCallback($(pItem)); - this.parseInfiniteView($(pItem), {modelList: this.model, initialDOMItem: false}); //delegateElements: true, - }, - onDisableHandler: function (pDisabled) { - //console.log("AbstractFeedView onDisableHandler", " View >> ", this.id, pDisabled); - if (this.infinite == null || this.infinite.waypoint == undefined) return; + }); + }, + onBeforeLoad: function () { + this.lastInfiniteItem = this.$el.find('.infinite-item:last').length > 0 ? this.$el.find('.infinite-item:last') : this.$el; + if (this.preloader != null) this.preloader.hide(true, true); + this.preloader = new SpinnerCubeView({el: this.lastInfiniteItem}); + this.onBeforeLoadCallback(this.lastInfiniteItem); + }, + onAfterLoad: function (pItem) { + //console.log("loading done", " View >> ", this.id || this.$el.attr('id') || this.$el.attr('class')); - if (pDisabled) { - this.infinite.waypoint.disable(); - } else { - this.infinite.waypoint.enable(); - } - }, - onResetHandler: function () { - this.clear(); - }, - appendElement: function (pElement) { - this.$feedItemsContainer.append(pElement).fadeIn(); + if (this.preloader != null) { + this.preloader.hide(true, true); + this.preloader = null; + } + this.onAfterLoadCallback($(pItem)); + this.parseInfiniteView($(pItem), {modelList: this.model, initialDOMItem: false}); //delegateElements: true, + }, + onDisableHandler: function (pDisabled) { + //console.log("AbstractFeedView onDisableHandler", " View >> ", this.id, pDisabled); + if (this.infinite == null || this.infinite.waypoint == undefined) return; - if (this.infinite == null) { - this.rebuildFeed(); - } else { - this.refreshFeed(); - } - }, - refreshFeed: function () { - this.infinite.refresh(); - }, - clear: function () { - this.$feedItemsContainer.empty(); - if (this.infinite != null) { - this.infinite.destroy(); - } - }, - destroy: function () { - this.infinite.destroy(); - BaseDynamicView.prototype.destroy.call(this); + if (pDisabled) { + this.infinite.waypoint.disable(); + } else { + this.infinite.waypoint.enable(); } - }); + }, + onResetHandler: function () { + this.clear(); + }, + appendElement: function (pElement) { + this.$feedItemsContainer.append(pElement).fadeIn(); - window.BaseFeedView = window.BaseFeedView || BurdaInfinite.views.base.BaseFeedView; + if (this.infinite == null) { + this.rebuildFeed(); + } else { + this.refreshFeed(); + } + }, + refreshFeed: function () { + this.infinite.refresh(); + }, + clear: function () { + this.$feedItemsContainer.empty(); + if (this.infinite != null) { + this.infinite.destroy(); + } + }, + destroy: function () { + this.infinite.destroy(); + BaseDynamicView.prototype.destroy.call(this); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseFeedView; diff --git a/js/infinite/views/base/base-inview-view.js b/js/infinite/views/base/base-inview-view.js index 1bfb9036..25cb2051 100644 --- a/js/infinite/views/base/base-inview-view.js +++ b/js/infinite/views/base/base-inview-view.js @@ -1,60 +1,58 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.base.BaseInviewView = BaseView.extend({ - inview: null, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); - }, - delegateInview: function () { - //this.model.set('inview', 'init'); - // console.log(">>> delegateInview"); +BurdaInfinite.views.base.BaseInviewView = BaseView.extend({ + inview: null, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); + }, + delegateInview: function () { + //this.model.set('inview', 'init'); + // console.log(">>> delegateInview"); - if (this.inview != null) this.inview.destroy(); + if (this.inview != null) this.inview.destroy(); - this.inview = new Waypoint.Inview({ - element: this.$el, - exited: _.bind(function (direction) { - //console.log('Exited triggered with direction ' + direction) - this.model.set('inview', {state: 'exited', direction: direction}); - this.onExitedHandler(direction); - }, this), - exit: _.bind(function (direction) { - //console.log('Exit triggered with direction ' + direction) - this.model.set('inview', {state: 'exit', direction: direction}); - this.onExitHandler(direction); - }, this), - entered: _.bind(function (direction) { - //console.log('Entered triggered with direction ' + direction) - this.model.set('inview', {state: 'entered', direction: direction}); - this.onEnteredHandler(direction); - }, this), - enter: _.bind(function (direction) { - // this.$el.addClass('in'); - _.delay(_.bind(function () { - //console.log('Enter triggered with direction ' + direction) - this.model.set('inview', {state: 'enter', direction: direction}); - this.onEnterHandler(direction); - }, this), 10); - }, this) - }); - }, - onExitedHandler: function (pDirection) { - this.model.inviewEnable(false); - }, - onExitHandler: function (pDirection) { - }, - onEnteredHandler: function (pDirection) { - }, - onEnterHandler: function (pDirection) { - this.model.inviewEnable(true); - }, - destroy: function () { - if (this.inview != null) this.inview.destroy(); - } - }); + this.inview = new Waypoint.Inview({ + element: this.$el, + exited: _.bind(function (direction) { + //console.log('Exited triggered with direction ' + direction) + this.model.set('inview', {state: 'exited', direction: direction}); + this.onExitedHandler(direction); + }, this), + exit: _.bind(function (direction) { + //console.log('Exit triggered with direction ' + direction) + this.model.set('inview', {state: 'exit', direction: direction}); + this.onExitHandler(direction); + }, this), + entered: _.bind(function (direction) { + //console.log('Entered triggered with direction ' + direction) + this.model.set('inview', {state: 'entered', direction: direction}); + this.onEnteredHandler(direction); + }, this), + enter: _.bind(function (direction) { + // this.$el.addClass('in'); + _.delay(_.bind(function () { + //console.log('Enter triggered with direction ' + direction) + this.model.set('inview', {state: 'enter', direction: direction}); + this.onEnterHandler(direction); + }, this), 10); + }, this) + }); + }, + onExitedHandler: function (pDirection) { + this.model.inviewEnable(false); + }, + onExitHandler: function (pDirection) { + }, + onEnteredHandler: function (pDirection) { + }, + onEnterHandler: function (pDirection) { + this.model.inviewEnable(true); + }, + destroy: function () { + if (this.inview != null) this.inview.destroy(); + } +}); - window.BaseInviewView = window.BaseInviewView || BurdaInfinite.views.base.BaseInviewView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseInviewView; diff --git a/js/infinite/views/base/base-list-swipeable-view.js b/js/infinite/views/base/base-list-swipeable-view.js index fcf8dcc1..c23f5558 100644 --- a/js/infinite/views/base/base-list-swipeable-view.js +++ b/js/infinite/views/base/base-list-swipeable-view.js @@ -1,101 +1,104 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.base.BaseListSwipeableView = BaseView.extend({ - $swiperContainer: [], - $swiperNav: [], - swiperApi: null, - isMobileMode: false, - swiperNavUsage: false, - swiperNavActive: false, - settings: { - selector: '.swipeable--horizontal', - slidesPerView: 'auto', - wrapperClass: 'swipeable__wrapper', - slideClass: 'swipeable__item', - grabCursor: true - }, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); - - //init slide navi - this.$swiperNav = this.$el.find('.swiper-navigation'); - if (this.$swiperNav.length > 0) { - this.swiperNavUsage = true; - _.extend(this.settings, { - nextButton: this.$swiperNav.find('.swiper-button-next')[0], - prevButton: this.$swiperNav.find('.swiper-button-prev')[0] - }); - } +import { BaseView } from '../index' +import { Swiper, Navigation } from 'swiper/dist/js/swiper.esm' + +Swiper.use(Navigation) + +"use strict"; + +BurdaInfinite.views.base.BaseListSwipeableView = BaseView.extend({ + $swiperContainer: [], + $swiperNav: [], + swiperApi: null, + isMobileMode: false, + swiperNavUsage: false, + swiperNavActive: false, + settings: { + selector: '.swipeable--horizontal', + slidesPerView: 'auto', + wrapperClass: 'swipeable__wrapper', + slideClass: 'swipeable__item', + grabCursor: true + }, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); + + //init slide navi + this.$swiperNav = this.$el.find('.swiper-navigation'); + if (this.$swiperNav.length > 0) { + this.swiperNavUsage = true; + _.extend(this.settings, { + navigation: { + nextEl: this.$swiperNav.find('.swiper-button-next')[0], + prevEl: this.$swiperNav.find('.swiper-button-prev')[0] + } + }); + } - this.createView(); + this.createView(); - if (this.deviceModel != undefined && this.deviceModel.get('isActive')) { - this.onDeviceBreakpointHandler(this.deviceModel.getDeviceBreakpoints().findWhere({active: true})); - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + if (this.deviceModel != undefined && this.deviceModel.get('isActive')) { + this.onDeviceBreakpointHandler(this.deviceModel.getDeviceBreakpoints().findWhere({active: true})); + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + } + }, + createView: function () { + this.$swiperContainer = this.$el.find('.container-content'); + }, + updateViews: function () { + this.swiperApi = new Swiper(this.$swiperContainer, this.settings); + this.$swiperContainer.data('swiperApi', this.swiperApi); + + if (this.isMobileMode) { + this.enableMobileMode(); + } else { + this.disableMobileMode(); + } + }, + enableMobileMode: function () { + if (Blazy == undefined) return; + + this.swiperApi.on('slideChangeTransitionStart', function () { + var tmpIndex = Math.min(this.swiperApi.activeIndex + 1, this.swiperApi.slides.length - 1), + $tmpSlide = $(this.swiperApi.slides[tmpIndex]).find('.b-lazy'), + $tmpSlideContainer = $(this.swiperApi.slides[tmpIndex]).find('.media--loading'), + tmpBlazy; + + if (!$tmpSlide.hasClass('b-loaded')) { + tmpBlazy = new Blazy(); + tmpBlazy.load($tmpSlide[0]); } - }, - createView: function () { - this.$swiperContainer = this.$el.find('.container-content'); - }, - updateViews: function () { - this.swiperApi = this.$swiperContainer.swiper(this.settings); - this.$swiperContainer.data('swiperApi', this.swiperApi); - - if (this.isMobileMode) { - this.enableMobileMode(); - } else { - this.disableMobileMode(); + + if($tmpSlideContainer.hasClass('media--loading')) { + $tmpSlideContainer.removeClass('media--loading'); } - }, - enableMobileMode: function () { - if (Blazy == undefined) return; - - this.swiperApi.on('onSlideChangeStart', function (pSwiperApi) { - var tmpIndex = Math.min(pSwiperApi.activeIndex + 1, pSwiperApi.slides.length - 1), - $tmpSlide = $(pSwiperApi.slides[tmpIndex]).find('.b-lazy'), - $tmpSlideContainer = $(pSwiperApi.slides[tmpIndex]).find('.media--loading'), - tmpBlazy; - - if (!$tmpSlide.hasClass('b-loaded')) { - tmpBlazy = new Blazy(); - tmpBlazy.load($tmpSlide[0]); - } - - if($tmpSlideContainer.hasClass('media--loading')) { - $tmpSlideContainer.removeClass('media--loading'); - } - }); - }, - disableMobileMode: function () { - if (Blazy == undefined) return; + }.bind(this)); + }, + disableMobileMode: function () { + if (Blazy == undefined) return; - this.swiperApi.off('slideChangeStart'); - }, - removeSwiper: function () { - this.$swiperContainer.data('swiperApi').destroy(true, true); - this.$swiperContainer.removeData('swiperApi'); - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; + this.swiperApi.off('slideChangeTransitionStart'); + }, + removeSwiper: function () { + this.$swiperContainer.data('swiperApi').destroy(true, true); + this.$swiperContainer.removeData('swiperApi'); + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; - if (pModel.id == 'smartphone' && this.isMobileMode == false) { + if (pModel.id == 'smartphone' && this.isMobileMode == false) { - if (this.swiperNavUsage) this.swiperNavActive = true; - this.isMobileMode = true; + if (this.swiperNavUsage) this.swiperNavActive = true; + this.isMobileMode = true; - this.updateViews(); - } else if (pModel.id != 'smartphone' && this.isMobileMode) { + this.updateViews(); + } else if (pModel.id != 'smartphone' && this.isMobileMode) { - if (this.swiperNavUsage) this.swiperNavActive = false; - this.isMobileMode = false; + if (this.swiperNavUsage) this.swiperNavActive = false; + this.isMobileMode = false; - this.removeSwiper(); - } + this.removeSwiper(); } - }); - - window.BaseListSwipeableView = window.BaseListSwipeableView || BurdaInfinite.views.base.BaseListSwipeableView; + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseListSwipeableView; diff --git a/js/infinite/views/base/base-newsletter-view.js b/js/infinite/views/base/base-newsletter-view.js index f9c7f171..66d88b87 100644 --- a/js/infinite/views/base/base-newsletter-view.js +++ b/js/infinite/views/base/base-newsletter-view.js @@ -1,279 +1,277 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.base.BaseNewsletterView = BaseView.extend({ - events: { - "submit": "formSubmit" - }, - useAlerts: true, - useAjaxPermissions: true, - available: false, - settings: null, - useTracking: true, - permissions: null, - $formView: null, - $successView: null, - $privacyView: null, - $alerts: null, - removeTimer: 1000, - removeTimerDelay: 1000, - initialize: function (pOptions) { - this.settings = _.extend({}, drupalSettings.hm_newsletter); - this.settings.groupId = this.$el.data('newsletter-group-id'); - this.useAjaxPermissions = this.$el.data('use-ajax-permissions') == undefined ? true : this.$el.data('use-ajax-permissions'); - this.$el.hide(); - this.permissions = BaseNewsletterView.permissions; - - if (this.settings.clientid == undefined || this.settings.groupId == undefined) { - console.warn("BaseNewsletterView needs settings + groupId", this.settings.clientid, this.settings.groupId); - return; - } - - BaseView.prototype.initialize.call(this, pOptions); - - this.createView(); - this.initializeApi(); - this.delegateEvents(); +import { BaseView } from '../index' + +"use strict"; + +var BaseNewsletterView = BurdaInfinite.views.base.BaseNewsletterView = BaseView.extend({ + events: { + "submit": "formSubmit" + }, + useAlerts: true, + useAjaxPermissions: true, + available: false, + settings: null, + useTracking: true, + permissions: null, + $formView: null, + $successView: null, + $privacyView: null, + $alerts: null, + removeTimer: 1000, + removeTimerDelay: 1000, + initialize: function (pOptions) { + this.settings = _.extend({}, drupalSettings.hm_newsletter); + this.settings.groupId = this.$el.data('newsletter-group-id'); + this.useAjaxPermissions = this.$el.data('use-ajax-permissions') == undefined ? true : this.$el.data('use-ajax-permissions'); + this.$el.hide(); + this.permissions = BaseNewsletterView.permissions; + + if (this.settings.clientid == undefined || this.settings.groupId == undefined) { + console.warn("BaseNewsletterView needs settings + groupId", this.settings.clientid, this.settings.groupId); + return; + } - if (!_.isNull(this.permissions)) { - this.ready(); - } - }, - initializeApi: function () { - if (_.isUndefined(window.thsixtyQ)) { - window.thsixtyQ = window.thsixtyQ || []; - window.thsixtyQ.push(['init', {config: {env: this.settings.env}}]); - var th = document.createElement('script'); - th.type = 'text/javascript'; - th.async = true; - th.src = "//d2528hoa8g0iaj.cloudfront.net/thsixty.min.js"; - var s = document.getElementsByTagName('script')[0]; - s.parentNode.insertBefore(th, s) - } + BaseView.prototype.initialize.call(this, pOptions); - if (!this.permissions) { - window.thsixtyQ.push(['permissions.get', { - success: _.bind(function (pPermissions) { - //TODO remove this after prod permissions fix - if (pPermissions.privacy) { - pPermissions.datenschutzeinwilligung = pPermissions.privacy; - } - - BaseNewsletterView.permissions = pPermissions; - this.permissions = pPermissions; - this.ready(); - }, this), - error: _.bind(function (pErr) { - console.log("PERMISSIONS ERROR", pErr); - }, this) - }]); - } - }, - createView: function () { - this.$formView = this.$el.find('.container-form'); - this.$alerts = this.$el.find('.container-alerts'); - this.$successView = this.$el.find('.container-success'); - this.$privacyView = this.$el.find('.container-privacy'); - }, - ready: function () { - this.$el.show(); - this.available = true; - - if (this.useAjaxPermissions) { - - this.$formView.find('.privacy-link').unbind('click.privacy_open').bind('click.privacy_open', $.proxy(function () { - this.setViewState(BaseNewsletterView.STATE_PRIVACY); - return false; - }, this)); + this.createView(); + this.initializeApi(); + this.delegateEvents(); - this.$privacyView.find('.icon-close').unbind('click.privacy_close').bind('click.privacy_close', $.proxy(function () { - this.setViewState(BaseNewsletterView.STATE_INITIAL); - }, this)); + if (!_.isNull(this.permissions)) { + this.ready(); + } + }, + initializeApi: function () { + if (_.isUndefined(window.thsixtyQ)) { + window.thsixtyQ = window.thsixtyQ || []; + window.thsixtyQ.push(['init', {config: {env: this.settings.env}}]); + var th = document.createElement('script'); + th.type = 'text/javascript'; + th.async = true; + th.src = "//d2528hoa8g0iaj.cloudfront.net/thsixty.min.js"; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(th, s) + } - this.$privacyView.find('.container-content-dynamic').empty().append($(this.permissions.datenschutzeinwilligung.markup.text_body)); - } - }, - formSubmit: function (pEvent) { - var tmpValid = true, - tmpVal = "", - tmpData = { - client: this.settings.clientid, - groups: [this.settings.groupId], - agreements: [], - user: {} - }; - - this.removeAlerts(); - - /** - * collect field values - */ - if (!this.validateFields(tmpData)) return false; - if (!this.validateAgreements(tmpData)) return false; - - this.send(tmpData); - return false; - }, - validateFields: function (pData) { - var tmpField = null, - tmpVal = '', - tmpValid = true; - - _.each(BaseNewsletterView.fields, function (pVal, pKey) { - tmpField = this.formField(pKey); - if (tmpField.length) { - tmpVal = tmpField.val(); - pData.user[pKey] = tmpVal; - - if (tmpVal == '' && tmpField.attr('required')) { - this.addAlert('danger', pKey, 'Das Feld ist erforderlich.'); - tmpValid = false; - return false; - } - } - }, this); - - return tmpValid; - }, - validateAgreements: function (pData) { - var $tmpItem = null, - tmpAgreementVal = '', - tmpValid = true; - - _.each(this.$formView.find('[name="agreements[]"]'), function (pItem, pIndex) { - $tmpItem = $(pItem); - if ($tmpItem.is(':checked')) { - tmpAgreementVal = $tmpItem.val(); - if (tmpAgreementVal == 'datenschutzeinwilligung') { - pData.extra = {acquia_id: $.cookie('tc_ptid')}; + if (!this.permissions) { + window.thsixtyQ.push(['permissions.get', { + success: _.bind(function (pPermissions) { + //TODO remove this after prod permissions fix + if (pPermissions.privacy) { + pPermissions.datenschutzeinwilligung = pPermissions.privacy; } - if (this.permissions[tmpAgreementVal] !== undefined && this.permissions[tmpAgreementVal].version !== undefined) { - pData.agreements.push({ - 'name': tmpAgreementVal, - 'version': this.permissions[tmpAgreementVal].version - }); - } - } else if ($tmpItem.attr('required')) { - this.setValidationState($tmpItem, 'has-error'); - this.addAlert('danger', null, 'Die Auswahl ist erforderlich.'); - tmpValid = false; - return false; - } - }, this); - - return tmpValid; - }, - send: function (pData) { - window.thsixtyQ.push(['newsletter.subscribe', { - params: pData, - success: $.proxy(function () { - this.setViewState(BaseNewsletterView.STATE_SUCCESS); - this.$el.trigger('newsletter:success'); - - this.track({category: 'newsletter', action: 'success'}); + BaseNewsletterView.permissions = pPermissions; + this.permissions = pPermissions; + this.ready(); }, this), - error: $.proxy(function (err) { - var responseData = BaseNewsletterView.responseInterpreter(err); - this.addAlert('danger', responseData.field, responseData.message); - this.$el.trigger('newsletter:error', responseData); - this.track({category: 'newsletter', action: 'error'}); + error: _.bind(function (pErr) { + console.log("PERMISSIONS ERROR", pErr); }, this) }]); - }, - setViewState: function (pState) { - this.$el.removeClass(BaseNewsletterView.STATE_PRIVACY + ' ' + BaseNewsletterView.STATE_SUCCESS); - - switch (pState) { - case BaseNewsletterView.STATE_SUCCESS: - case BaseNewsletterView.STATE_PRIVACY: - this.$el.addClass(pState); - break; - } - }, - setValidationState: function ($pEl, pState) { - $pEl.parents('.form-group').addClass(pState); - }, - formField: function (pName) { - return this.$formView.find('[name="' + pName + '"]'); - }, - addAlert: function (pType, pField, pMessage) { - - var $tmpItem = {}; - - if (pType == 'danger' && pField !== undefined) this.setValidationState(this.formField(pField), 'has-error'); - - if (!this.useAlerts) return; - - $tmpItem = ''; - $tmpItem = $($tmpItem).appendTo(this.$alerts); - - _.delay(_.bind(function () { - $tmpItem.animate({height: 0, paddingTop: 0, paddingBottom: 0}, function () { - $(this).remove(); - }); - }, this), this.removeTimer + (this.removeTimerDelay * $tmpItem.index())); - }, - removeAlerts: function () { - this.$alerts.empty(); - this.$el.find('.form-group').removeClass('has-error'); - }, - track: function (pObject) { - if (typeof TrackingManager != 'undefined' && this.useTracking == true) { - TrackingManager.trackEvent(pObject, TrackingManager.getAdvTrackingByElement(this.$el)); - - if (pObject.category == 'newsletter' && pObject.action == 'success') { - TrackingManager.trackEvent({ - category: 'mkt-conversion', - action: 'newsletterSignup', - 'eventNonInteraction': 'false' - }, TrackingManager.getAdvTrackingByElement(this.$el)); - } - } - }, - destroy: function () { - } - }, { - STATE_INITIAL: 'state-initial', - STATE_PRIVACY: 'state-privacy', - STATE_SUCCESS: 'state-success', - permissions: null, - fields: { - salutation: null, - firstname: null, - lastname: null, - postalcode: null, - city: null, - birthday: null, - email: null - }, - responseInterpreter: function (responseData) { - var interpretedResponse = { - code: responseData.code, - field: null, - message: null + }, + createView: function () { + this.$formView = this.$el.find('.container-form'); + this.$alerts = this.$el.find('.container-alerts'); + this.$successView = this.$el.find('.container-success'); + this.$privacyView = this.$el.find('.container-privacy'); + }, + ready: function () { + this.$el.show(); + this.available = true; + + if (this.useAjaxPermissions) { + + this.$formView.find('.privacy-link').unbind('click.privacy_open').bind('click.privacy_open', $.proxy(function () { + this.setViewState(BaseNewsletterView.STATE_PRIVACY); + return false; + }, this)); + + this.$privacyView.find('.icon-close').unbind('click.privacy_close').bind('click.privacy_close', $.proxy(function () { + this.setViewState(BaseNewsletterView.STATE_INITIAL); + }, this)); + + this.$privacyView.find('.container-content-dynamic').empty().append($(this.permissions.datenschutzeinwilligung.markup.text_body)); + } + }, + formSubmit: function (pEvent) { + var tmpValid = true, + tmpVal = "", + tmpData = { + client: this.settings.clientid, + groups: [this.settings.groupId], + agreements: [], + user: {} }; - switch (responseData.code) { - case 'EmailCannotBeEmpty': - interpretedResponse.field = 'email'; - interpretedResponse.message = 'Die E-Mail-Adresse ist erforderlich.'; - break; - case 'InvalidEmail': - interpretedResponse.field = 'email'; - interpretedResponse.message = 'Die E-Mail-Adresse muss gültig sein.'; - break; - default: - interpretedResponse.message = responseData.code.replace(/([A-Z])/g, ' $1'); - break; + this.removeAlerts(); + + /** + * collect field values + */ + if (!this.validateFields(tmpData)) return false; + if (!this.validateAgreements(tmpData)) return false; + + this.send(tmpData); + return false; + }, + validateFields: function (pData) { + var tmpField = null, + tmpVal = '', + tmpValid = true; + + _.each(BaseNewsletterView.fields, function (pVal, pKey) { + tmpField = this.formField(pKey); + if (tmpField.length) { + tmpVal = tmpField.val(); + pData.user[pKey] = tmpVal; + + if (tmpVal == '' && tmpField.attr('required')) { + this.addAlert('danger', pKey, 'Das Feld ist erforderlich.'); + tmpValid = false; + return false; + } } + }, this); + + return tmpValid; + }, + validateAgreements: function (pData) { + var $tmpItem = null, + tmpAgreementVal = '', + tmpValid = true; + + _.each(this.$formView.find('[name="agreements[]"]'), function (pItem, pIndex) { + $tmpItem = $(pItem); + if ($tmpItem.is(':checked')) { + tmpAgreementVal = $tmpItem.val(); + if (tmpAgreementVal == 'datenschutzeinwilligung') { + pData.extra = {acquia_id: $.cookie('tc_ptid')}; + } - return interpretedResponse; + if (this.permissions[tmpAgreementVal] !== undefined && this.permissions[tmpAgreementVal].version !== undefined) { + pData.agreements.push({ + 'name': tmpAgreementVal, + 'version': this.permissions[tmpAgreementVal].version + }); + } + } else if ($tmpItem.attr('required')) { + this.setValidationState($tmpItem, 'has-error'); + this.addAlert('danger', null, 'Die Auswahl ist erforderlich.'); + tmpValid = false; + return false; + } + }, this); + + return tmpValid; + }, + send: function (pData) { + window.thsixtyQ.push(['newsletter.subscribe', { + params: pData, + success: $.proxy(function () { + this.setViewState(BaseNewsletterView.STATE_SUCCESS); + this.$el.trigger('newsletter:success'); + + this.track({category: 'newsletter', action: 'success'}); + }, this), + error: $.proxy(function (err) { + var responseData = BaseNewsletterView.responseInterpreter(err); + this.addAlert('danger', responseData.field, responseData.message); + this.$el.trigger('newsletter:error', responseData); + this.track({category: 'newsletter', action: 'error'}); + }, this) + }]); + }, + setViewState: function (pState) { + this.$el.removeClass(BaseNewsletterView.STATE_PRIVACY + ' ' + BaseNewsletterView.STATE_SUCCESS); + + switch (pState) { + case BaseNewsletterView.STATE_SUCCESS: + case BaseNewsletterView.STATE_PRIVACY: + this.$el.addClass(pState); + break; + } + }, + setValidationState: function ($pEl, pState) { + $pEl.parents('.form-group').addClass(pState); + }, + formField: function (pName) { + return this.$formView.find('[name="' + pName + '"]'); + }, + addAlert: function (pType, pField, pMessage) { + + var $tmpItem = {}; + + if (pType == 'danger' && pField !== undefined) this.setValidationState(this.formField(pField), 'has-error'); + + if (!this.useAlerts) return; + + $tmpItem = ''; + $tmpItem = $($tmpItem).appendTo(this.$alerts); + + _.delay(_.bind(function () { + $tmpItem.animate({height: 0, paddingTop: 0, paddingBottom: 0}, function () { + $(this).remove(); + }); + }, this), this.removeTimer + (this.removeTimerDelay * $tmpItem.index())); + }, + removeAlerts: function () { + this.$alerts.empty(); + this.$el.find('.form-group').removeClass('has-error'); + }, + track: function (pObject) { + if (typeof TrackingManager != 'undefined' && this.useTracking == true) { + TrackingManager.trackEvent(pObject, TrackingManager.getAdvTrackingByElement(this.$el)); + + if (pObject.category == 'newsletter' && pObject.action == 'success') { + TrackingManager.trackEvent({ + category: 'mkt-conversion', + action: 'newsletterSignup', + 'eventNonInteraction': 'false' + }, TrackingManager.getAdvTrackingByElement(this.$el)); + } + } + }, + destroy: function () { + + } +}, { + STATE_INITIAL: 'state-initial', + STATE_PRIVACY: 'state-privacy', + STATE_SUCCESS: 'state-success', + permissions: null, + fields: { + salutation: null, + firstname: null, + lastname: null, + postalcode: null, + city: null, + birthday: null, + email: null + }, + responseInterpreter: function (responseData) { + var interpretedResponse = { + code: responseData.code, + field: null, + message: null + }; + + switch (responseData.code) { + case 'EmailCannotBeEmpty': + interpretedResponse.field = 'email'; + interpretedResponse.message = 'Die E-Mail-Adresse ist erforderlich.'; + break; + case 'InvalidEmail': + interpretedResponse.field = 'email'; + interpretedResponse.message = 'Die E-Mail-Adresse muss gültig sein.'; + break; + default: + interpretedResponse.message = responseData.code.replace(/([A-Z])/g, ' $1'); + break; } - }); - window.BaseNewsletterView = window.BaseNewsletterView || BurdaInfinite.views.base.BaseNewsletterView; + return interpretedResponse; + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseNewsletterView; diff --git a/js/infinite/views/base/base-sidebar-view.js b/js/infinite/views/base/base-sidebar-view.js index ba38ac01..a954f480 100644 --- a/js/infinite/views/base/base-sidebar-view.js +++ b/js/infinite/views/base/base-sidebar-view.js @@ -1,36 +1,32 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +"use strict"; - "use strict"; - - BurdaInfinite.views.base.BaseSidebar = Backbone.View.extend({ - classStateOpen: "sidebar-open", - classElementOpen: "open", - events: { - "click .icon-close": function (pEvent) { - this.clickHandler(pEvent, 'close'); - } - }, - initialize: function (pOptions) { - _.extend(this, pOptions || {}); - this.listenTo(this.model, "change:is_open", this.stateChangedHandler); - }, - clickHandler: function (pEvent, pType) { - switch (pType) { - case 'close': - this.open(false); - break; - } - }, - stateChangedHandler: function (pModel) { - this.open(pModel.get('is_open')); - }, - open: function (pBool) { - this.model.set('is_open', pBool); - $('body').toggleClass(this.classStateOpen, pBool); - this.$el.toggleClass(this.classElementOpen, pBool); +BurdaInfinite.views.base.BaseSidebar = Backbone.View.extend({ + classStateOpen: "sidebar-open", + classElementOpen: "open", + events: { + "click .icon-close": function (pEvent) { + this.clickHandler(pEvent, 'close'); } - }); - - window.BaseSidebar = window.BaseSidebar || BurdaInfinite.views.base.BaseSidebar; + }, + initialize: function (pOptions) { + _.extend(this, pOptions || {}); + this.listenTo(this.model, "change:is_open", this.stateChangedHandler); + }, + clickHandler: function (pEvent, pType) { + switch (pType) { + case 'close': + this.open(false); + break; + } + }, + stateChangedHandler: function (pModel) { + this.open(pModel.get('is_open')); + }, + open: function (pBool) { + this.model.set('is_open', pBool); + $('body').toggleClass(this.classStateOpen, pBool); + this.$el.toggleClass(this.classElementOpen, pBool); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseSidebar; diff --git a/js/infinite/views/base/base-view.js b/js/infinite/views/base/base-view.js index a5ded076..a0328b83 100644 --- a/js/infinite/views/base/base-view.js +++ b/js/infinite/views/base/base-view.js @@ -1,45 +1,41 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +"use strict"; - "use strict"; +BurdaInfinite.views.base.BaseView = Backbone.View.extend({ + enabled: true, + deviceModel: null, + infiniteBlockDataModel: new Backbone.Model(), + initialize: function (pOptions) { + _.extend(this, pOptions || {}); - BurdaInfinite.views.base.BaseView = Backbone.View.extend({ - enabled: true, - deviceModel: null, - infiniteBlockDataModel: new Backbone.Model(), - initialize: function (pOptions) { - _.extend(this, pOptions || {}); + this.listenTo(this.model, "refresh", this.onRefreshHandler, this); + this.listenTo(this.model, "elementChanged", this.onElementChangedHandler, this); + }, + delegateElements: function ($pElement) { + var $tmpElement = $pElement || this.$el; - this.listenTo(this.model, "refresh", this.onRefreshHandler, this); - this.listenTo(this.model, "elementChanged", this.onElementChangedHandler, this); - }, - delegateElements: function ($pElement) { - var $tmpElement = $pElement || this.$el; - - if (typeof BaseUtils != "undefined") { - BurdaInfinite.utils.BaseUtils.delegateElements($tmpElement); - } - }, - enableView: function () { - this.enabled = true; - }, - onElementChangedHandler: function (pModel) { - this.$el = $(this.model.get('el')); //jQueryObject needed - this.refresh(); - }, - onRefreshHandler: function (pEvent) { - this.refresh(); - }, - refresh: function () { - this.delegateElements(); - }, - disableView: function () { - this.enabled = false; - }, - destroy: function () { - BaseInviewView.prototype.destroy.call(this); + if (typeof BaseUtils != "undefined") { + BurdaInfinite.utils.BaseUtils.delegateElements($tmpElement); } - }); - - window.BaseView = window.BaseView || BurdaInfinite.views.base.BaseView; + }, + enableView: function () { + this.enabled = true; + }, + onElementChangedHandler: function (pModel) { + this.$el = $(this.model.get('el')); //jQueryObject needed + this.refresh(); + }, + onRefreshHandler: function (pEvent) { + this.refresh(); + }, + refresh: function () { + this.delegateElements(); + }, + disableView: function () { + this.enabled = false; + }, + destroy: function () { + BaseInviewView.prototype.destroy.call(this); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.base.BaseView diff --git a/js/infinite/views/components/spinner-cube-view.js b/js/infinite/views/components/spinner-cube-view.js index c4190ae5..1edca906 100644 --- a/js/infinite/views/components/spinner-cube-view.js +++ b/js/infinite/views/components/spinner-cube-view.js @@ -1,69 +1,65 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +"use strict"; - "use strict"; +BurdaInfinite.views.SpinnerCubeView = Backbone.View.extend({ - BurdaInfinite.views.SpinnerCubeView = Backbone.View.extend({ + height: 0, + hidden: false, + $template: {}, + preRenderCallback: {}, + template: _.template(''), - height: 0, - hidden: false, - $template: {}, - preRenderCallback: {}, - template: _.template(''), + initialize: function (pSettings) { + _.extend(this, pSettings); - initialize: function (pSettings) { - _.extend(this, pSettings); - - this.render(); - if (!this.hidden) this.show(); - }, - render: function () { - if (typeof this.preRenderCallback === 'function') { - this.$template = this.preRenderCallback($(this.template())); - } else { - this.$template = $(this.template()).appendTo(this.$el); - } - - //this.height = this.$template.height(); - //this.$template.css('height', 0); - //this.$template.css('opacity', 0); - return this; - }, - show: function (pAnimated) { - this.$template.addClass('in'); - //var tmpDuration = pAnimated == false ? 0 : 350; - //this.$template.stop().animate({opacity: 1, height: this.height}, { - // duration: tmpDuration, - // easing: 'easeInOutCubic' - //}); - }, - hide: function (pAnimated, pRemove) { - this.$template.removeClass('in'); - - //var tmpDuration = pAnimated == false ? 0 : 350, - // tmpRemove = pRemove || false; - // - //this.$template.stop().animate({opacity: 0}, {duration: tmpDuration, easing: 'easeInOutCubic'}); - //this.$template.animate({height: 0}, { - // duration: tmpDuration, - // easing: 'easeInOutCubic', - // complete: $.proxy(function () { - // if (tmpRemove) this.destroy(); - // }, this) - //}); - }, - destroy: function () { - console.log("REMOVE"); - this.$template.remove(); + this.render(); + if (!this.hidden) this.show(); + }, + render: function () { + if (typeof this.preRenderCallback === 'function') { + this.$template = this.preRenderCallback($(this.template())); + } else { + this.$template = $(this.template()).appendTo(this.$el); } - }); - window.SpinnerCubeView = window.SpinnerCubeView || BurdaInfinite.views.SpinnerCubeView; + //this.height = this.$template.height(); + //this.$template.css('height', 0); + //this.$template.css('opacity', 0); + return this; + }, + show: function (pAnimated) { + this.$template.addClass('in'); + //var tmpDuration = pAnimated == false ? 0 : 350; + //this.$template.stop().animate({opacity: 1, height: this.height}, { + // duration: tmpDuration, + // easing: 'easeInOutCubic' + //}); + }, + hide: function (pAnimated, pRemove) { + this.$template.removeClass('in'); + + //var tmpDuration = pAnimated == false ? 0 : 350, + // tmpRemove = pRemove || false; + // + //this.$template.stop().animate({opacity: 0}, {duration: tmpDuration, easing: 'easeInOutCubic'}); + //this.$template.animate({height: 0}, { + // duration: tmpDuration, + // easing: 'easeInOutCubic', + // complete: $.proxy(function () { + // if (tmpRemove) this.destroy(); + // }, this) + //}); + }, + destroy: function () { + console.log("REMOVE"); + this.$template.remove(); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.SpinnerCubeView; diff --git a/js/infinite/views/gallery-view.js b/js/infinite/views/gallery-view.js index c9b3034e..74477a39 100644 --- a/js/infinite/views/gallery-view.js +++ b/js/infinite/views/gallery-view.js @@ -1,55 +1,53 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.GalleryView = BaseView.extend({ - mediaId: null, - slick: null, - $slickElement: [], - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); - - this.mediaId = this.$el.data('media-id').toString(); - this.createView(); - }, - createView: function () { - this.$slickElement = this.$el.find('.slick'); - this.$slickElement.on('init', _.bind(this.initSlick, this)); - this.$slickElement.on('beforeChange', _.bind(this.onBeforeChangeHandler, this)); - }, - initSlick: function (pEvent, pSlick, pCurrentSlide, pNextSlide) { - this.slick = pSlick; - - this.$el.find('.swiper-button-prev').on('click', _.bind(function () { - this.slick.slickPrev(); - }, this)); - - this.$el.find('.swiper-button-next').on('click', _.bind(function () { - this.slick.slickNext(); - }, this)); - }, - onBeforeChangeHandler: function (pEvent, pSlick, pCurrentSlide, pNextSlide) { - var tmpPath = this.infiniteBlockDataModel != null - && this.infiniteBlockDataModel.has('path') - && this.infiniteBlockDataModel.get('path') != "" - ? this.infiniteBlockDataModel.get('path') : Backbone.history.location.pathname; - - this.$el.find('.text-item-count span').text((pNextSlide + 1)); - - if (typeof TrackingManager != 'undefined') { - TrackingManager.trackIVW(); - //TrackingManager.trackPageView(tmpPath + '/gallery_' + this.mediaId); - TrackingManager.trackEvent({ - category: 'click', - action: 'gallery', - label: this.mediaId, - location: tmpPath, - 'eventNonInteraction': 'false' - }); - } +import { BaseView } from './index' + +"use strict"; + +BurdaInfinite.views.GalleryView = BaseView.extend({ + mediaId: null, + slick: null, + $slickElement: [], + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); + + this.mediaId = this.$el.data('media-id').toString(); + this.createView(); + }, + createView: function () { + this.$slickElement = this.$el.find('.slick'); + this.$slickElement.on('init', _.bind(this.initSlick, this)); + this.$slickElement.on('beforeChange', _.bind(this.onBeforeChangeHandler, this)); + }, + initSlick: function (pEvent, pSlick, pCurrentSlide, pNextSlide) { + this.slick = pSlick; + + this.$el.find('.swiper-button-prev').on('click', _.bind(function () { + this.slick.slickPrev(); + }, this)); + + this.$el.find('.swiper-button-next').on('click', _.bind(function () { + this.slick.slickNext(); + }, this)); + }, + onBeforeChangeHandler: function (pEvent, pSlick, pCurrentSlide, pNextSlide) { + var tmpPath = this.infiniteBlockDataModel != null + && this.infiniteBlockDataModel.has('path') + && this.infiniteBlockDataModel.get('path') != "" + ? this.infiniteBlockDataModel.get('path') : Backbone.history.location.pathname; + + this.$el.find('.text-item-count span').text((pNextSlide + 1)); + + if (typeof TrackingManager != 'undefined') { + TrackingManager.trackIVW(); + //TrackingManager.trackPageView(tmpPath + '/gallery_' + this.mediaId); + TrackingManager.trackEvent({ + category: 'click', + action: 'gallery', + label: this.mediaId, + location: tmpPath, + 'eventNonInteraction': 'false' + }); } - }); + } +}); - window.GalleryView = window.GalleryView || BurdaInfinite.views.GalleryView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.GalleryView diff --git a/js/infinite/views/index.js b/js/infinite/views/index.js new file mode 100644 index 00000000..a72f2b86 --- /dev/null +++ b/js/infinite/views/index.js @@ -0,0 +1,29 @@ +// Beware of circular-dependencies! Order is important here! +// Always import the module, which wants to import other things from this file at last. + +export { default as BaseView } from './base/base-view' +export { default as BaseInviewView } from './base/base-inview-view' +export { default as BaseDynamicView } from './base/base-dynamic-view' +export { default as SpinnerCubeView } from './components/spinner-cube-view' +export { default as BaseFeedView } from './base/base-feed-view' +export { default as BaseListSwipeableView } from './base/base-list-swipeable-view' +export { default as BaseNewsletterView } from './base/base-newsletter-view' +export { default as BaseSidebar } from './base/base-sidebar-view' +export { default as HmNewsletterView } from './newsletter/hmnewsletter-view' +export { default as NewsletterModalView } from './newsletter/newsletter-modal-view' +export { default as EcommerceSliderView } from './products/ecommerce-slider-view' +export { default as LookView } from './products/look-view' +export { default as ProductView } from './products/product-view' +export { default as ProductLookView } from './products/product-look-view' +export { default as ProductSliderView } from './products/product-slider-view' +export { default as AnchorNavigationView } from './anchor-navigation-view' +export { default as ArticleView } from './article-view' +export { default as GalleryView } from './gallery-view' +export { default as InfiniteBlockView } from './infinite-block-view' +export { default as MarketingView } from './marketing-view' +export { default as MenuMainView } from './menu-main-view' +export { default as MenuSidebarView } from './menu-sidebar-view' +export { default as ModalSearchView } from './modal-search-view' +export { default as StickyView } from './sticky-view' +export { default as TeaserFeedView } from './teaser-feed-view' +export { default as MainView } from './main-view' diff --git a/js/infinite/views/infinite-block-view.js b/js/infinite/views/infinite-block-view.js index 9727b685..e2c9006e 100644 --- a/js/infinite/views/infinite-block-view.js +++ b/js/infinite/views/infinite-block-view.js @@ -1,13 +1,12 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseDynamicView } from '../views'; - "use strict"; +"use strict"; - BurdaInfinite.views.InfiniteBlockView = BaseDynamicView.extend({ - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); - } - }); +BurdaInfinite.views.InfiniteBlockView = BaseDynamicView.extend({ + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); + } +}); - window.InfiniteBlockView = window.InfiniteBlockView || BurdaInfinite.views.InfiniteBlockView; +export default BurdaInfinite.views.InfiniteBlockView; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); diff --git a/js/infinite/views/main-view.js b/js/infinite/views/main-view.js index 2a45c2f3..80c66bc3 100644 --- a/js/infinite/views/main-view.js +++ b/js/infinite/views/main-view.js @@ -1,196 +1,209 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.MainView = Backbone.View.extend({ - menuSidebarModel: {}, - modalSearchModel: {}, - pageOffsetsModel: {}, - infiniteViewsModel: {}, - deviceModel: {}, - - menuMainView: {}, - menuSidebarView: {}, - infiniteView: {}, - modalSearchView: {}, - - events: {}, - initialize: function (pOptions) { - _.extend(this, pOptions); - - //if ($.cookie != undefined) $.cookie.json = true; - if ($.timeago != undefined) $.timeago.settings.localeTitle = true; - - if (_.isFunction(history.pushState)) Backbone.history.start({pushState: true}); - AppConfig.initialLocation = Backbone.history.location.pathname + Backbone.history.location.search; - //TFM.Debug.start(); - - this.initBeforeUnloadBehavior(); - this.createModels(); - this.createManagers(); - this.createViews(); - - //console.log("UUID", this.deviceModel.get('uuid')); - - - /** - * Blazy Viewport fix - * - * Sometimes in safari browser on a page reload (especially when reloading through browser reload button) - * images that are initially present in the viewport are not loaded by blazy. This snippet is a workaround - * for this bug. - */ - if (typeof jQuery.browser != "undefined" && jQuery.browser.safari && typeof Blazy != "undefined") { - _.delay(function () { - var tmpBlazy = new Blazy(); - tmpBlazy.revalidate(); - }, 100); - } +import { AppConfig, ModelIds, ManagerIds, ViewIds } from '../consts' +import { TrackingManager, ScrollManager, MarketingManager } from '../managers' +import { + BaseSidebarModel, + BaseCollectionModel, + ModalSearchModel, + PageOffsetsModel, + DeviceModel +} from '../models' +import { + BaseDynamicView, + MenuMainView, + MenuSidebarView, + ModalSearchView +} from './index' + + +"use strict"; + +BurdaInfinite.views.MainView = Backbone.View.extend({ + menuSidebarModel: {}, + modalSearchModel: {}, + pageOffsetsModel: {}, + infiniteViewsModel: {}, + deviceModel: {}, + + menuMainView: {}, + menuSidebarView: {}, + infiniteView: {}, + modalSearchView: {}, + + events: {}, + initialize: function (pOptions) { + _.extend(this, pOptions); + + //if ($.cookie != undefined) $.cookie.json = true; + if ($.timeago != undefined) $.timeago.settings.localeTitle = true; + + if (_.isFunction(history.pushState)) Backbone.history.start({pushState: true}); + AppConfig.initialLocation = Backbone.history.location.pathname + Backbone.history.location.search; + //TFM.Debug.start(); + + this.initBeforeUnloadBehavior(); + this.createModels(); + this.createManagers(); + this.createViews(); + + //console.log("UUID", this.deviceModel.get('uuid')); + + + /** + * Blazy Viewport fix + * + * Sometimes in safari browser on a page reload (especially when reloading through browser reload button) + * images that are initially present in the viewport are not loaded by blazy. This snippet is a workaround + * for this bug. + */ + if (typeof jQuery.browser != "undefined" && jQuery.browser.safari && typeof Blazy != "undefined") { + _.delay(function () { + var tmpBlazy = new Blazy(); + tmpBlazy.revalidate(); + }, 100); + } - /** - * Infinite Model Helper - */ - //TODO use for debugging - //this.listenTo(this.infiniteViewsModel, 'update', _.debounce(function (pType) { - // console.info("global infiniteModel", this.infiniteViewsModel); - //}, 100, true), this); - - /** - * adjust sidebar if toolbar activated / displayed - */ - setTimeout(_(function () { - if (typeof Drupal.toolbar !== "undefined" && typeof Drupal.toolbar.models.toolbarModel !== "undefined") { - Backbone.listenTo(Drupal.toolbar.models.toolbarModel, 'change:offsets', _(this.onToolbarHandler).bind(this)); - } - }).bind(this)); - }, - initBeforeUnloadBehavior: function () { - /** - * fix the page reload problems - */ - - if ($('body').hasClass('page-article')) { - window.allowBeforeUnload = true; - window.onbeforeunload = function (pEvent) { - if (!window.allowBeforeUnload) return; - - Waypoint.disableAll(); - - $('body').css({ - top: $(window).scrollTop() * -1 + 'px', - left: $(window).scrollLeft() * -1 + 'px' - }) - window.scrollTo(0, 0); - } + /** + * Infinite Model Helper + */ + //TODO use for debugging + //this.listenTo(this.infiniteViewsModel, 'update', _.debounce(function (pType) { + // console.info("global infiniteModel", this.infiniteViewsModel); + //}, 100, true), this); + + /** + * adjust sidebar if toolbar activated / displayed + */ + setTimeout(_(function () { + if (typeof Drupal.toolbar !== "undefined" && typeof Drupal.toolbar.models.toolbarModel !== "undefined") { + Backbone.listenTo(Drupal.toolbar.models.toolbarModel, 'change:offsets', _(this.onToolbarHandler).bind(this)); } - }, - createModels: function () { - this.menuSidebarModel = new BaseSidebarModel(); - this.infiniteViewsModel = new BaseCollectionModel(); - this.modalSearchModel = new ModalSearchModel(); - this.pageOffsetsModel = new PageOffsetsModel(); - this.deviceModel = new DeviceModel({}, _.extend(JSON.parse(this.$el.find('[data-breakpoint-settings]').text()))); - - /** - * Backbone Manager - push Models - */ - BM.reuseModel(ModelIds.menuSidebarModel, this.menuSidebarModel); - BM.reuseModel(ModelIds.infiniteViewsModel, this.infiniteViewsModel); - BM.reuseModel(ModelIds.modalSearchModel, this.modalSearchModel); - BM.reuseModel(ModelIds.pageOffsetsModel, this.pageOffsetsModel); - BM.reuseModel(ModelIds.deviceModel, this.deviceModel); - }, - createManagers: function () { - new MarketingManager({ - infiniteViewsModel: this.infiniteViewsModel - }); - - /** - * TrackingManager - */ - new TrackingManager({ - id: ManagerIds.trackingManager, - el: this.$el, - infiniteViewsModel: this.infiniteViewsModel, - model: new Backbone.Model({ - initialLocation: AppConfig.initialLocation, - gtmEventName: AppConfig.gtmEventName, - gtmIndexEvent: AppConfig.gtmIndexEvent, - gtmIndexPosEvent: AppConfig.gtmIndexPosEvent - }) - }); - - /** - * ScrollManager - */ - new ScrollManager({ - id: ManagerIds.scrollManager, - el: this.$el, - infiniteViewsModel: this.infiniteViewsModel, - model: new Backbone.Model({ - initialLocation: AppConfig.initialLocation + }).bind(this)); + }, + initBeforeUnloadBehavior: function () { + /** + * fix the page reload problems + */ + + if ($('body').hasClass('page-article')) { + window.allowBeforeUnload = true; + window.onbeforeunload = function (pEvent) { + if (!window.allowBeforeUnload) return; + + Waypoint.disableAll(); + + $('body').css({ + top: $(window).scrollTop() * -1 + 'px', + left: $(window).scrollLeft() * -1 + 'px' }) - }); - }, - createViews: function () { - /** - * InfiniteView - parse and create views by data-view-type - * IMPORTANT - Needed for the initial parsing - */ - this.infiniteView = new BaseDynamicView({ - id: ViewIds.infiniteView, - el: this.$el, - model: this.infiniteViewsModel, - deviceModel: this.deviceModel, - initialCall: true - }); - - this.infiniteView.delegateElements(); - /** **/ - - - /** - * MainMenuView - */ - this.menuMainView = new MenuMainView({ - id: ViewIds.menuMainView, - el: $('#menu-main-navigation', this.$el) - }); - - /** - * MenuSidebarView - */ - this.menuSidebarView = new MenuSidebarView({ - id: ViewIds.menuSidebarView, - el: $('#menu-sidebar', this.$el), - model: this.menuSidebarModel - }); - - - /** - * ModalSearchView - */ - this.modalSearchView = new ModalSearchView({ - id: ViewIds.modalSearchView, - el: this.$el.find('#modal-search'), - model: this.modalSearchModel, - infiniteModel: this.infiniteViewsModel - }); - - /** - * Backbone Manager - push Views - */ - BM.reuseView(ViewIds.menuMainView, this.menuMainView); - BM.reuseView(ViewIds.menuSidebarView, this.menuSidebarView); - BM.reuseView(ViewIds.infiniteView, this.infiniteView); - BM.reuseView(ViewIds.modalSearchView, this.modalSearchView); - }, - onToolbarHandler: function (pModel, pAttr) { - //pModel.set('orientation', 'horizontal'); - this.pageOffsetsModel.add({id: 'offsetToolbar', offsets: pAttr, pageRelevant: true}); + window.scrollTo(0, 0); + } } - }); - - window.MainView = window.MainView || BurdaInfinite.views.MainView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); + }, + createModels: function () { + this.menuSidebarModel = new BaseSidebarModel(); + this.infiniteViewsModel = new BaseCollectionModel(); + this.modalSearchModel = new ModalSearchModel(); + this.pageOffsetsModel = new PageOffsetsModel(); + this.deviceModel = new DeviceModel({}, _.extend(JSON.parse(this.$el.find('[data-breakpoint-settings]').text()))); + + /** + * Backbone Manager - push Models + */ + BM.reuseModel(ModelIds.menuSidebarModel, this.menuSidebarModel); + BM.reuseModel(ModelIds.infiniteViewsModel, this.infiniteViewsModel); + BM.reuseModel(ModelIds.modalSearchModel, this.modalSearchModel); + BM.reuseModel(ModelIds.pageOffsetsModel, this.pageOffsetsModel); + BM.reuseModel(ModelIds.deviceModel, this.deviceModel); + }, + createManagers: function () { + new MarketingManager({ + infiniteViewsModel: this.infiniteViewsModel + }); + + /** + * TrackingManager + */ + new TrackingManager({ + id: ManagerIds.trackingManager, + el: this.$el, + infiniteViewsModel: this.infiniteViewsModel, + model: new Backbone.Model({ + initialLocation: AppConfig.initialLocation, + gtmEventName: AppConfig.gtmEventName, + gtmIndexEvent: AppConfig.gtmIndexEvent, + gtmIndexPosEvent: AppConfig.gtmIndexPosEvent + }) + }); + + /** + * ScrollManager + */ + new ScrollManager({ + id: ManagerIds.scrollManager, + el: this.$el, + infiniteViewsModel: this.infiniteViewsModel, + model: new Backbone.Model({ + initialLocation: AppConfig.initialLocation + }) + }); + }, + createViews: function () { + /** + * InfiniteView - parse and create views by data-view-type + * IMPORTANT - Needed for the initial parsing + */ + this.infiniteView = new BaseDynamicView({ + id: ViewIds.infiniteView, + el: this.$el, + model: this.infiniteViewsModel, + deviceModel: this.deviceModel, + initialCall: true + }); + + this.infiniteView.delegateElements(); + /** **/ + + + /** + * MainMenuView + */ + this.menuMainView = new MenuMainView({ + id: ViewIds.menuMainView, + el: $('#menu-main-navigation', this.$el) + }); + + /** + * MenuSidebarView + */ + this.menuSidebarView = new MenuSidebarView({ + id: ViewIds.menuSidebarView, + el: $('#menu-sidebar', this.$el), + model: this.menuSidebarModel + }); + + + /** + * ModalSearchView + */ + this.modalSearchView = new ModalSearchView({ + id: ViewIds.modalSearchView, + el: this.$el.find('#modal-search'), + model: this.modalSearchModel, + infiniteModel: this.infiniteViewsModel + }); + + /** + * Backbone Manager - push Views + */ + BM.reuseView(ViewIds.menuMainView, this.menuMainView); + BM.reuseView(ViewIds.menuSidebarView, this.menuSidebarView); + BM.reuseView(ViewIds.infiniteView, this.infiniteView); + BM.reuseView(ViewIds.modalSearchView, this.modalSearchView); + }, + onToolbarHandler: function (pModel, pAttr) { + //pModel.set('orientation', 'horizontal'); + this.pageOffsetsModel.add({id: 'offsetToolbar', offsets: pAttr, pageRelevant: true}); + } +}); + +export default BurdaInfinite.views.MainView; diff --git a/js/infinite/views/marketing-view.js b/js/infinite/views/marketing-view.js index 15212bbd..73e21e28 100644 --- a/js/infinite/views/marketing-view.js +++ b/js/infinite/views/marketing-view.js @@ -1,203 +1,201 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseView } from './index' "use strict"; - BurdaInfinite.views.MarketingView = BaseView.extend({ - adType: "", - adEntityType: "", - adContainerType: "", - currentBreakpoint: "", - adRenderModel: null, - breakpointDeviceModel: {}, - $adSlotContainer: [], - $adTechAd: [], - $adEntityContainer: [], - height: 0, - visible: false, - enabled: null, - fbaIsFilled: false, - targeting: null, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); - - this.$adSlotContainer = this.$el.find(".item-marketing"); - this.checkContainerType(); - this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); - this.currentBreakpoint = this.breakpointDeviceModel.id; - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - this.listenTo(this.model, 'change:inviewEnabled', this.onEnabledHandler, this); - }, - updateView: function () { - this.removeFixHeight(); - - if (this.adRenderModel.visibility == "visible") { - this.show(); - } else { - this.hide(); - } - }, - checkContainerType: function () { - this.adEntityType = this.$el.find('[data-atf-format]'); - - if (this.$el.hasClass('container-sidebar-content')) { - this.adContainerType = MarketingView.CONTAINER_TYPE_SIDEBAR; - } else if (this.$el.hasClass('region-full-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_LEADERBOARD) { - this.adContainerType = MarketingView.CONTAINER_TYPE_LEADERBOARD; - } else if (this.$el.hasClass('region-full-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_SPECIAL) { - this.adContainerType = MarketingView.CONTAINER_TYPE_SPECIAL; - } else if (this.$el.hasClass('ad-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_SPECIAL) { - this.adContainerType = MarketingView.CONTAINER_TYPE_SPECIAL; - } - }, - updateEnableView: function () { - /** - * No atf_ad_rendered fired / only enabled - */ - if (this.adRenderModel == null) return; - - - if (this.adRenderModel.visibility == "visible" && this.enabled) { - this.show(); - } else if ( - this.adType != MarketingView.AD_TYPE_FBSA && - this.adType != MarketingView.AD_TYPE_INREAD && - this.adContainerType != MarketingView.CONTAINER_TYPE_SIDEBAR - ) { - this.freeze(); - } - }, - enableView: function () { - if (this.enabled) return; - - this.enabled = true; - this.updateEnableView(); - }, - disableView: function () { - if (!this.enabled) return; - - this.enabled = false; - this.updateEnableView(); - }, - onEnabledHandler: function (pModel) { - if (pModel != this.model) return; //event bubbling - - if (pModel.get('inviewEnabled') == true) { - this.enableView(); - } else { - this.disableView(); - } - }, - checkHeight: function () { - if (this.height != this.$adSlotContainer.height()) { - this.height = this.$adSlotContainer.height(); - this.model.set('contentHeight', this.height); - } - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; - this.currentBreakpoint = this.breakpointDeviceModel.id; - - if (!this.isAllowedToWrite()) return; - +var MarketingView = BurdaInfinite.views.MarketingView = BaseView.extend({ + adType: "", + adEntityType: "", + adContainerType: "", + currentBreakpoint: "", + adRenderModel: null, + breakpointDeviceModel: {}, + $adSlotContainer: [], + $adTechAd: [], + $adEntityContainer: [], + height: 0, + visible: false, + enabled: null, + fbaIsFilled: false, + targeting: null, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); + + this.$adSlotContainer = this.$el.find(".item-marketing"); + this.checkContainerType(); + this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); + this.currentBreakpoint = this.breakpointDeviceModel.id; + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + this.listenTo(this.model, 'change:inviewEnabled', this.onEnabledHandler, this); + }, + updateView: function () { + this.removeFixHeight(); + + if (this.adRenderModel.visibility == "visible") { + this.show(); + } else { this.hide(); - }, - isAllowedToWrite: function () { - if (this.adType == MarketingView.AD_TYPE_FBSA || this.adType == MarketingView.AD_TYPE_INREAD) { - return false; - } + } + }, + checkContainerType: function () { + this.adEntityType = this.$el.find('[data-atf-format]'); + + if (this.$el.hasClass('container-sidebar-content')) { + this.adContainerType = MarketingView.CONTAINER_TYPE_SIDEBAR; + } else if (this.$el.hasClass('region-full-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_LEADERBOARD) { + this.adContainerType = MarketingView.CONTAINER_TYPE_LEADERBOARD; + } else if (this.$el.hasClass('region-full-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_SPECIAL) { + this.adContainerType = MarketingView.CONTAINER_TYPE_SPECIAL; + } else if (this.$el.hasClass('ad-content') && this.adEntityType == MarketingView.AD_ENTITY_TYPE_SPECIAL) { + this.adContainerType = MarketingView.CONTAINER_TYPE_SPECIAL; + } + }, + updateEnableView: function () { + /** + * No atf_ad_rendered fired / only enabled + */ + if (this.adRenderModel == null) return; + + + if (this.adRenderModel.visibility == "visible" && this.enabled) { + this.show(); + } else if ( + this.adType != MarketingView.AD_TYPE_FBSA && + this.adType != MarketingView.AD_TYPE_INREAD && + this.adContainerType != MarketingView.CONTAINER_TYPE_SIDEBAR + ) { + this.freeze(); + } + }, + enableView: function () { + if (this.enabled) return; + + this.enabled = true; + this.updateEnableView(); + }, + disableView: function () { + if (!this.enabled) return; + + this.enabled = false; + this.updateEnableView(); + }, + onEnabledHandler: function (pModel) { + if (pModel != this.model) return; //event bubbling + + if (pModel.get('inviewEnabled') == true) { + this.enableView(); + } else { + this.disableView(); + } + }, + checkHeight: function () { + if (this.height != this.$adSlotContainer.height()) { + this.height = this.$adSlotContainer.height(); + this.model.set('contentHeight', this.height); + } + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; + this.currentBreakpoint = this.breakpointDeviceModel.id; + + if (!this.isAllowedToWrite()) return; + + this.hide(); + }, + isAllowedToWrite: function () { + if (this.adType == MarketingView.AD_TYPE_FBSA || this.adType == MarketingView.AD_TYPE_INREAD) { + return false; + } - return this.enabled; - }, - isActive: function () { - if (this.adContainerType == MarketingView.CONTAINER_TYPE_SIDEBAR && this.currentBreakpoint != "desktop") { - return false; - } + return this.enabled; + }, + isActive: function () { + if (this.adContainerType == MarketingView.CONTAINER_TYPE_SIDEBAR && this.currentBreakpoint != "desktop") { + return false; + } - return this.enabled; - }, - show: function () { - this.$el.removeClass('ad-inactive').addClass('ad-active'); - this.checkHeight(); - this.visible = true; - }, - hide: function () { - this.$el.removeClass('ad-active ad-fba').addClass('ad-inactive'); - this.adType = ""; - this.clear(); - this.removeFixHeight(); - this.visible = false; - }, - freeze: function () { - this.setFixHeight(this.getAdEntityContainer().height()); - this.clear(); - }, - clear: function () { - if (this.adType == MarketingView.AD_TYPE_FBSA && this.fbaIsFilled) { - window.ftNuke(); - this.fbaIsFilled = false; - } else if (this.getAdTechAd().length > 0) { - this.getAdTechAd().empty(); - } - }, - setFixHeight: function (pHeight) { - this.getAdEntityContainer().css('height', pHeight); - }, - removeFixHeight: function () { - if (this.getAdEntityContainer().prop("style") && this.getAdEntityContainer().prop("style")["height"] !== '') { - this.getAdEntityContainer().css('height', 'auto'); - } - }, - getAdEntityContainer: function () { - if (this.$adEntityContainer.length <= 0) { - this.$adEntityContainer = this.$el.find('.ad-entity-container'); - } + return this.enabled; + }, + show: function () { + this.$el.removeClass('ad-inactive').addClass('ad-active'); + this.checkHeight(); + this.visible = true; + }, + hide: function () { + this.$el.removeClass('ad-active ad-fba').addClass('ad-inactive'); + this.adType = ""; + this.clear(); + this.removeFixHeight(); + this.visible = false; + }, + freeze: function () { + this.setFixHeight(this.getAdEntityContainer().height()); + this.clear(); + }, + clear: function () { + if (this.adType == MarketingView.AD_TYPE_FBSA && this.fbaIsFilled) { + window.ftNuke(); + this.fbaIsFilled = false; + } else if (this.getAdTechAd().length > 0) { + this.getAdTechAd().empty(); + } + }, + setFixHeight: function (pHeight) { + this.getAdEntityContainer().css('height', pHeight); + }, + removeFixHeight: function () { + if (this.getAdEntityContainer().prop("style") && this.getAdEntityContainer().prop("style")["height"] !== '') { + this.getAdEntityContainer().css('height', 'auto'); + } + }, + getAdEntityContainer: function () { + if (this.$adEntityContainer.length <= 0) { + this.$adEntityContainer = this.$el.find('.ad-entity-container'); + } - return this.$adEntityContainer; - }, - getAdTechAd: function () { - if (this.$adTechAd.length <= 0) { - this.$adTechAd = this.$el.find('.adtech-factory-ad'); - } + return this.$adEntityContainer; + }, + getAdTechAd: function () { + if (this.$adTechAd.length <= 0) { + this.$adTechAd = this.$el.find('.adtech-factory-ad'); + } - return this.$adTechAd; - }, - getTargeting: function () { - var tmpTargeting = this.getAdTechAd().attr('data-ad-entity-targeting') || {}; - return JSON.parse(tmpTargeting); - }, - getAdContainerType: function () { - return this.adContainerType; - }, - setRenderedAdType: function (pAdType, pElement) { - this.adType = pAdType; - - if (pAdType == MarketingView.AD_TYPE_FBSA) { - this.$el.addClass('ad-' + MarketingView.AD_TYPE_FBSA); - this.fbaIsFilled = true; - - if (pElement != undefined) { - pElement.contentWindow.addEventListener("DOMContentLoaded", _.bind(function (pTest) { - this.checkHeight(); - }, this)); - } + return this.$adTechAd; + }, + getTargeting: function () { + var tmpTargeting = this.getAdTechAd().attr('data-ad-entity-targeting') || {}; + return JSON.parse(tmpTargeting); + }, + getAdContainerType: function () { + return this.adContainerType; + }, + setRenderedAdType: function (pAdType, pElement) { + this.adType = pAdType; + + if (pAdType == MarketingView.AD_TYPE_FBSA) { + this.$el.addClass('ad-' + MarketingView.AD_TYPE_FBSA); + this.fbaIsFilled = true; + + if (pElement != undefined) { + pElement.contentWindow.addEventListener("DOMContentLoaded", _.bind(function (pTest) { + this.checkHeight(); + }, this)); } - - console.log("setRenderedAdType", this.adType); - }, - setRenderModel: function (pAdModel) { - this.adRenderModel = pAdModel; - this.updateView(); } - }, { - CONTAINER_TYPE_SIDEBAR: "CONTAINER_TYPE_SIDEBAR", - CONTAINER_TYPE_SPECIAL: "CONTAINER_TYPE_SPECIAL", - CONTAINER_TYPE_LEADERBOARD: "CONTAINER_TYPE_LEADERBOARD", - AD_ENTITY_TYPE_LEADERBOARD: "AD_ENTITY_TYPE_LEADERBOARD", - AD_ENTITY_TYPE_SPECIAL: "AD_ENTITY_TYPE_SPECIAL", - AD_TYPE_FBSA: "fba", - AD_TYPE_INREAD: "inread" - }); - - window.MarketingView = window.MarketingView || BurdaInfinite.views.MarketingView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); + + console.log("setRenderedAdType", this.adType); + }, + setRenderModel: function (pAdModel) { + this.adRenderModel = pAdModel; + this.updateView(); + } +}, { + CONTAINER_TYPE_SIDEBAR: "CONTAINER_TYPE_SIDEBAR", + CONTAINER_TYPE_SPECIAL: "CONTAINER_TYPE_SPECIAL", + CONTAINER_TYPE_LEADERBOARD: "CONTAINER_TYPE_LEADERBOARD", + AD_ENTITY_TYPE_LEADERBOARD: "AD_ENTITY_TYPE_LEADERBOARD", + AD_ENTITY_TYPE_SPECIAL: "AD_ENTITY_TYPE_SPECIAL", + AD_TYPE_FBSA: "fba", + AD_TYPE_INREAD: "inread" +}); + +export default BurdaInfinite.views.MarketingView; diff --git a/js/infinite/views/menu-main-view.js b/js/infinite/views/menu-main-view.js index 7ab6531b..8a3ad3b7 100644 --- a/js/infinite/views/menu-main-view.js +++ b/js/infinite/views/menu-main-view.js @@ -1,179 +1,177 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { ModelIds } from '../consts' - "use strict"; +"use strict"; - BurdaInfinite.views.MenuMainView = Backbone.View.extend({ - events: { - "click #menu-open-btn": function (pEvent) { - this.clickHandler(pEvent, 'toggle-sidebar'); - }, - "click #search-open-btn": function (pEvent) { - this.clickHandler(pEvent, 'search-open'); - } - }, - $subMenu: {}, - offsetTop: 0, - pageOffsetsModel: {}, - modalSearchModel: {}, - menuSidebarModel: {}, - deviceModel: null, - breakpointDeviceModel: null, - isMobileMode: false, - initialize: function (pOptions) { - _.defaults(this, pOptions || {}); - - this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); - this.modalSearchModel = BM.reuseModel(ModelIds.modalSearchModel); - this.menuSidebarModel = BM.reuseModel(ModelIds.menuSidebarModel); - this.deviceModel = BM.reuseModel(ModelIds.deviceModel); - - this.delegateEvents(); - this.createViews(); - this.createByContext(); - //_.delay(_.bind(this.createByContext, this), 10); - - if (this.deviceModel != undefined && this.deviceModel.get('isActive')) { - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - - //shitty drupal 8 js-menu-active - _.delay(_.bind(function () { - this.onDeviceBreakpointHandler(this.deviceModel.getDeviceBreakpoints().findWhere({active: true})); - }, this), 20); - } - - this.listenTo(this.pageOffsetsModel.getModel('offsetToolbar'), 'change', this.onToolbarHandler, this); - this.listenTo(this.modalSearchModel, 'change:is_open', function (pModel) { - this.onModalSearchHandler(pModel, 'is_open'); - }, this); - - this.listenTo(this.modalSearchModel, 'sync', function (pModel) { - this.onModalSearchHandler(pModel, 'sync'); - }, this); +BurdaInfinite.views.MenuMainView = Backbone.View.extend({ + events: { + "click #menu-open-btn": function (pEvent) { + this.clickHandler(pEvent, 'toggle-sidebar'); }, - createViews: function () { - this.$subMenu = $('#menu-submenu-navigation'); - }, - createByContext: function (pSettings) { - - var tmpSettings = _.extend({ - context: $(window)[0], - element: this.$el, - handler: _.bind(this.onStickyHandler, this), - offset: _.bind(function () { - return this.offsetTop; - }, this) - }, pSettings); + "click #search-open-btn": function (pEvent) { + this.clickHandler(pEvent, 'search-open'); + } + }, + $subMenu: {}, + offsetTop: 0, + pageOffsetsModel: {}, + modalSearchModel: {}, + menuSidebarModel: {}, + deviceModel: null, + breakpointDeviceModel: null, + isMobileMode: false, + initialize: function (pOptions) { + _.defaults(this, pOptions || {}); + + this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); + this.modalSearchModel = BM.reuseModel(ModelIds.modalSearchModel); + this.menuSidebarModel = BM.reuseModel(ModelIds.menuSidebarModel); + this.deviceModel = BM.reuseModel(ModelIds.deviceModel); + + this.delegateEvents(); + this.createViews(); + this.createByContext(); + //_.delay(_.bind(this.createByContext, this), 10); + + if (this.deviceModel != undefined && this.deviceModel.get('isActive')) { + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + + //shitty drupal 8 js-menu-active + _.delay(_.bind(function () { + this.onDeviceBreakpointHandler(this.deviceModel.getDeviceBreakpoints().findWhere({active: true})); + }, this), 20); + } + this.listenTo(this.pageOffsetsModel.getModel('offsetToolbar'), 'change', this.onToolbarHandler, this); + this.listenTo(this.modalSearchModel, 'change:is_open', function (pModel) { + this.onModalSearchHandler(pModel, 'is_open'); + }, this); + + this.listenTo(this.modalSearchModel, 'sync', function (pModel) { + this.onModalSearchHandler(pModel, 'sync'); + }, this); + }, + createViews: function () { + this.$subMenu = $('#menu-submenu-navigation'); + }, + createByContext: function (pSettings) { + + var tmpSettings = _.extend({ + context: $(window)[0], + element: this.$el, + handler: _.bind(this.onStickyHandler, this), + offset: _.bind(function () { + return this.offsetTop; + }, this) + }, pSettings); + + + if (this.sticky !== undefined) { + this.clearStickiness(); + } - if (this.sticky !== undefined) { + this.sticky = new Waypoint.Sticky(tmpSettings); + }, + onStickyHandler: function () { + if (this.$el.hasClass('stuck')) { + this.$el.css('top', this.offsetTop); + this.activateOffset(); + } else { + this.$el.css('top', ''); + this.deactivateOffset(); + } + }, + onToolbarHandler: function (pModel) { + this.offsetTop = pModel.get('offsets').top; + this.sticky.waypoint.context.refresh() + this.onStickyHandler(); + }, + onModalSearchHandler: function (pModel, pType) { + var tmpIsOpen = pModel.get('is_open'), + tmpSettings = {}; + + /** + * Destroy on modal open + * Create and show by search sync + * Create by modal close + */ + + if (pType == 'is_open') { + + if (tmpIsOpen) { this.clearStickiness(); - } - - this.sticky = new Waypoint.Sticky(tmpSettings); - }, - onStickyHandler: function () { - if (this.$el.hasClass('stuck')) { - this.$el.css('top', this.offsetTop); - this.activateOffset(); } else { this.$el.css('top', ''); - this.deactivateOffset(); - } - }, - onToolbarHandler: function (pModel) { - this.offsetTop = pModel.get('offsets').top; - this.sticky.waypoint.context.refresh() - this.onStickyHandler(); - }, - onModalSearchHandler: function (pModel, pType) { - var tmpIsOpen = pModel.get('is_open'), - tmpSettings = {}; - - /** - * Destroy on modal open - * Create and show by search sync - * Create by modal close - */ - - if (pType == 'is_open') { - - if (tmpIsOpen) { - this.clearStickiness(); - } else { - this.$el.css('top', ''); - this.createByContext(tmpSettings); - } - - } else if ('sync') { - tmpSettings.context = BM.reuseView(ViewIds.modalSearchView).$el; - tmpSettings.offset = 2500; this.createByContext(tmpSettings); } - }, - clickHandler: function (pEvent, pType) { - if (pType == 'toggle-sidebar') { - this.menuSidebarModel.toggleOpenState(); - } else if ('search-open') { - if (!this.modalSearchModel.get('is_open')) { - this.modalSearchModel.set('is_open', true); - } - } - }, - clearStickiness: function () { - this.sticky.destroy(); - this.onStickyHandler(); - }, - activateOffset: function () { - this.pageOffsetsModel.add(this.getOffsetManagerModel()); - }, - deactivateOffset: function () { - this.pageOffsetsModel.deactivate(this.getOffsetManagerModel()); - }, - getOffsetManagerModel: function () { - var tmpPosition = this.$el.position(), - tmpElementHeight = this.$el.outerHeight(true); - - return { - id: 'offsetMenuMain', - pageRelevant: true, - $el: this.$el, - offsets: { - top: tmpPosition.top, - left: 0, - right: 0, - bottom: tmpPosition.top + tmpElementHeight, - height: tmpElementHeight - }, - }; - }, - bindMobileListener: function () { - var $tmpActiveItem = this.$subMenu.find('.is-active'); - - $tmpActiveItem.off('click').on('click', $.proxy(function (pEvent) { - pEvent.preventDefault(); - this.$subMenu.toggleClass('is-open', ''); - return false; - }, this)); - }, - unbindMobileListener: function () { - var $tmpActiveItem = this.$subMenu.find('.is-active'); - this.$subMenu.removeClass('is-open'); - $tmpActiveItem.off('click'); - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; - - if (pModel.id == 'smartphone' && this.isMobileMode == false) { - this.isMobileMode = true; - this.bindMobileListener(); - } else if (pModel.id != 'smartphone' && this.isMobileMode) { - this.isMobileMode = false; - this.unbindMobileListener(); + } else if ('sync') { + tmpSettings.context = BM.reuseView(ViewIds.modalSearchView).$el; + tmpSettings.offset = 2500; + this.createByContext(tmpSettings); + } + }, + clickHandler: function (pEvent, pType) { + if (pType == 'toggle-sidebar') { + this.menuSidebarModel.toggleOpenState(); + } else if ('search-open') { + if (!this.modalSearchModel.get('is_open')) { + this.modalSearchModel.set('is_open', true); } } - }); - - window.MenuMainView = window.MenuMainView || BurdaInfinite.views.MenuMainView; + }, + clearStickiness: function () { + this.sticky.destroy(); + this.onStickyHandler(); + }, + activateOffset: function () { + this.pageOffsetsModel.add(this.getOffsetManagerModel()); + }, + deactivateOffset: function () { + this.pageOffsetsModel.deactivate(this.getOffsetManagerModel()); + }, + getOffsetManagerModel: function () { + var tmpPosition = this.$el.position(), + tmpElementHeight = this.$el.outerHeight(true); + + return { + id: 'offsetMenuMain', + pageRelevant: true, + $el: this.$el, + offsets: { + top: tmpPosition.top, + left: 0, + right: 0, + bottom: tmpPosition.top + tmpElementHeight, + height: tmpElementHeight + }, + }; + }, + bindMobileListener: function () { + var $tmpActiveItem = this.$subMenu.find('.is-active'); + + $tmpActiveItem.off('click').on('click', $.proxy(function (pEvent) { + pEvent.preventDefault(); + + this.$subMenu.toggleClass('is-open', ''); + return false; + }, this)); + }, + unbindMobileListener: function () { + var $tmpActiveItem = this.$subMenu.find('.is-active'); + this.$subMenu.removeClass('is-open'); + $tmpActiveItem.off('click'); + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; + + if (pModel.id == 'smartphone' && this.isMobileMode == false) { + this.isMobileMode = true; + this.bindMobileListener(); + } else if (pModel.id != 'smartphone' && this.isMobileMode) { + this.isMobileMode = false; + this.unbindMobileListener(); + } + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.MenuMainView; diff --git a/js/infinite/views/menu-sidebar-view.js b/js/infinite/views/menu-sidebar-view.js index 76ce706d..5856a441 100644 --- a/js/infinite/views/menu-sidebar-view.js +++ b/js/infinite/views/menu-sidebar-view.js @@ -1,42 +1,42 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { ModelIds } from '../consts' +import { BaseSidebar } from './index' - "use strict"; +"use strict"; - BurdaInfinite.views.MenuSidebarView = BaseSidebar.extend({ - pageOffsetsModel: {}, - initialize: function (pOptions) { - BaseSidebar.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.MenuSidebarView = BaseSidebar.extend({ + pageOffsetsModel: {}, + initialize: function (pOptions) { + BaseSidebar.prototype.initialize.call(this, pOptions); - this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); - this.listenTo(this.pageOffsetsModel.getModel("offsetToolbar"), 'change', this.adjustPlacement, this); - this.listenTo(this.model, 'change:is_open', this.onStateHandler, this); - }, - adjustPlacement: function (pModel) { - this.$el.css('padding-top', pModel.get('offsets').top); - }, - onStateHandler: function () { - var tmpIsOpen = this.model.get('is_open'), - $tmpBody = $('body'), - tmpTop = 0, tmpLeft = 0; + this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); + this.listenTo(this.pageOffsetsModel.getModel("offsetToolbar"), 'change', this.adjustPlacement, this); + this.listenTo(this.model, 'change:is_open', this.onStateHandler, this); + }, + adjustPlacement: function (pModel) { + this.$el.css('padding-top', pModel.get('offsets').top); + }, + onStateHandler: function () { + var tmpIsOpen = this.model.get('is_open'), + $tmpBody = $('body'), + tmpTop = 0, tmpLeft = 0; - if (tmpIsOpen) { - Waypoint.disableAll(); - $tmpBody.css({ - top: $(window).scrollTop() * -1 + 'px', - left: $(window).scrollLeft() * -1 + 'px' - }).addClass('no-scroll'); - } else { - tmpTop = parseInt($tmpBody.css('top'), 10); - tmpLeft = parseInt($tmpBody.css('left'), 10); - $tmpBody.css({top: ''}).removeClass('no-scroll'); - window.scrollTo(tmpLeft * -1, tmpTop * -1); + if (tmpIsOpen) { + Waypoint.disableAll(); + $tmpBody.css({ + top: $(window).scrollTop() * -1 + 'px', + left: $(window).scrollLeft() * -1 + 'px' + }).addClass('no-scroll'); + } else { + tmpTop = parseInt($tmpBody.css('top'), 10); + tmpLeft = parseInt($tmpBody.css('left'), 10); + $tmpBody.css({top: ''}).removeClass('no-scroll'); + window.scrollTo(tmpLeft * -1, tmpTop * -1); - Waypoint.enableAll(); - $(window).trigger('resize'); - } + Waypoint.enableAll(); + $(window).trigger('resize'); } - }); + } +}); - window.MenuSidebarView = window.MenuSidebarView || BurdaInfinite.views.MenuSidebarView; +export default BurdaInfinite.views.MenuSidebarView; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); diff --git a/js/infinite/views/modal-search-view.js b/js/infinite/views/modal-search-view.js index 9cde1076..f1bea90a 100644 --- a/js/infinite/views/modal-search-view.js +++ b/js/infinite/views/modal-search-view.js @@ -1,156 +1,157 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { ModelIds } from '../consts' +import { BaseView, SpinnerCubeView } from './index' - "use strict"; +"use strict"; - BurdaInfinite.views.ModalSearchView = BaseView.extend({ - id: 'modal-search', - events: { - "keyup #modal-search-input": "onInputChangeHandler", - "click .close": "close" - }, - offsetsPageModel: {}, - offsetMenuMainModel: {}, - pageOffsetsModel: {}, - feedModel: {}, - feedView: {}, - $feed: {}, - $searchInputField: {}, - isSearchEnabled: false, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.ModalSearchView = BaseView.extend({ + id: 'modal-search', + events: { + "keyup #modal-search-input": "onInputChangeHandler", + "click .close": "close" + }, + offsetsPageModel: {}, + offsetMenuMainModel: {}, + pageOffsetsModel: {}, + feedModel: {}, + feedView: {}, + $feed: {}, + $searchInputField: {}, + isSearchEnabled: false, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); - this.delegateEvents(); - this.createView(); + this.delegateEvents(); + this.createView(); - this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); - this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); - this.offsetMenuMainModel = this.pageOffsetsModel.getModel('offsetMenuMain'); - this.feedModel = this.$feed.data('infiniteModel'); - this.feedView = this.feedModel.get('view'); + this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); + this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); + this.offsetMenuMainModel = this.pageOffsetsModel.getModel('offsetMenuMain'); + this.feedModel = this.$feed.data('infiniteModel'); + this.feedView = this.feedModel.get('view'); - this.listenTo(this.offsetMenuMainModel, 'change:offsets change:active', this.onOffsetHandler, this); - this.listenTo(this.model, 'change:is_open', this.onStateHandler, this); - this.listenTo(this.model, 'request', this.clearFeed, this); - this.listenTo(this.model, 'sync', this.renderFeed, this); - }, - createView: function () { - this.$feed = $('#feed-modal-search', this.$el); - this.$searchInputField = this.$el.find('#modal-search-input'); - }, - onOffsetHandler: function () { - if (this.offsetMenuMainModel.get('active') === true) { - this.$el.css('padding-top', this.offsetMenuMainModel.get('offsets').height); - } else { - this.$el.css('padding-top', ''); - } - }, - clearFeed: function () { - this.model.reset(); - this.feedModel.reset(true); - }, - renderFeed: function (pModel) { - var $tmpElement = this.model.at(0).get('el'); - $tmpElement.fadeTo(0, 0); - $tmpElement.stop().delay(350).fadeTo(350, 1); - - this.preloader.hide(true, true); - this.feedView.appendElement($tmpElement); - this.feedView.onAfterLoad($tmpElement); - this.activateScrollBehavior(); - Drupal.behaviors.burdaInfinite.initBlazyOnContainer('#modal-search'); - }, - onInputChangeHandler: function (pEvent) { - var tmpStringLength = this.$searchInputField.val().length, - tmpMinCharLength = parseInt(this.$searchInputField.data('min-char-length')); + this.listenTo(this.offsetMenuMainModel, 'change:offsets change:active', this.onOffsetHandler, this); + this.listenTo(this.model, 'change:is_open', this.onStateHandler, this); + this.listenTo(this.model, 'request', this.clearFeed, this); + this.listenTo(this.model, 'sync', this.renderFeed, this); + }, + createView: function () { + this.$feed = $('#feed-modal-search', this.$el); + this.$searchInputField = this.$el.find('#modal-search-input'); + }, + onOffsetHandler: function () { + if (this.offsetMenuMainModel.get('active') === true) { + this.$el.css('padding-top', this.offsetMenuMainModel.get('offsets').height); + } else { + this.$el.css('padding-top', ''); + } + }, + clearFeed: function () { + this.model.reset(); + this.feedModel.reset(true); + }, + renderFeed: function (pModel) { + var $tmpElement = this.model.at(0).get('el'); + $tmpElement.fadeTo(0, 0); + $tmpElement.stop().delay(350).fadeTo(350, 1); - if (tmpStringLength >= tmpMinCharLength && this.isSearchEnabled == false) { - this.isSearchEnabled = true; - this.$el.toggleClass('is_search_enabled', this.isSearchEnabled); - } else if (tmpStringLength < tmpMinCharLength) { - this.isSearchEnabled = false; - this.$el.toggleClass('is_search_enabled', this.isSearchEnabled); - } + this.preloader.hide(true, true); + this.feedView.appendElement($tmpElement); + this.feedView.onAfterLoad($tmpElement); + this.activateScrollBehavior(); + Drupal.behaviors.burdaInfinite.initBlazyOnContainer('#modal-search'); + }, + onInputChangeHandler: function (pEvent) { + var tmpStringLength = this.$searchInputField.val().length, + tmpMinCharLength = parseInt(this.$searchInputField.data('min-char-length')); - this.$el.find('.message-char-length .char-count').text(Math.max(0, (tmpMinCharLength - tmpStringLength))); - this.$el.toggleClass('is_info_char', (tmpStringLength > 0 && tmpStringLength < tmpMinCharLength)); - }, - onStateHandler: function (pModel, pIsOpen) { - if (pIsOpen) { - this.onOpenHandler(); - } else { - this.onCloseHandler(); - } + if (tmpStringLength >= tmpMinCharLength && this.isSearchEnabled == false) { + this.isSearchEnabled = true; + this.$el.toggleClass('is_search_enabled', this.isSearchEnabled); + } else if (tmpStringLength < tmpMinCharLength) { + this.isSearchEnabled = false; + this.$el.toggleClass('is_search_enabled', this.isSearchEnabled); + } - //TODO check if we need this - //this.feedModel.set('is_disabled', !pIsOpen); - }, - onOpenHandler: function () { - //Waypoint.destroyAll(); - this.enableBindings(); - this.$el.modal('show'); - setTimeout($.proxy(function () { - this.$searchInputField.trigger('focus'); - }, this), 350); - }, - onCloseHandler: function () { - this.disableBindings(); - this.activateScrollBehavior(); - this.$el.modal('hide'); - this.$searchInputField.focusout(); - setTimeout($.proxy(function () { - this.clear(); - }, this), 350); - }, - onKeyHandler: function (pEvent) { - switch (pEvent.which) { - case 27 : - this.close(); - break; - case 13 : - if (this.isSearchEnabled) this.search(); - break; - } - }, - activateScrollBehavior: function () { - this.deactivateScrollBehavior(); - $("#search-open-btn").on('click', $.proxy(this.scrollToInput, this)); - }, - deactivateScrollBehavior: function () { - $("#search-open-btn").on('off', this.scrollToInput, this); - }, - enableBindings: function () { - this.disableBindings(); - $(window).on('keyup', $.proxy(this.onKeyHandler, this)); - }, - disableBindings: function () { - $(window).off('keyup', this.onKeyHandler, this); - }, - search: function (pVal) { - var tmpSearchString = pVal || this.$searchInputField.val(); + this.$el.find('.message-char-length .char-count').text(Math.max(0, (tmpMinCharLength - tmpStringLength))); + this.$el.toggleClass('is_info_char', (tmpStringLength > 0 && tmpStringLength < tmpMinCharLength)); + }, + onStateHandler: function (pModel, pIsOpen) { + if (pIsOpen) { + this.onOpenHandler(); + } else { + this.onCloseHandler(); + } - if (this.preloader != undefined) this.preloader.destroy(); - this.preloader = new BurdaInfinite.views.SpinnerCubeView({el: this.$el}); - this.model.fetch(tmpSearchString); - }, - scrollToInput: function () { - this.$el.animate({scrollTop: (this.$searchInputField.offset().top)}, { - duration: 'slow', - complete: $.proxy(function () { - this.$searchInputField.trigger('focus'); - }, this) - }); - }, - clear: function () { - this.clearFeed(); - this.$searchInputField.val(''); - this.onInputChangeHandler(); - }, - close: function () { - this.model.set('is_open', false); + //TODO check if we need this + //this.feedModel.set('is_disabled', !pIsOpen); + }, + onOpenHandler: function () { + //Waypoint.destroyAll(); + this.enableBindings(); + this.$el.modal('show'); + setTimeout($.proxy(function () { + this.$searchInputField.trigger('focus'); + }, this), 350); + }, + onCloseHandler: function () { + this.disableBindings(); + this.activateScrollBehavior(); + this.$el.modal('hide'); + this.$searchInputField.focusout(); + setTimeout($.proxy(function () { + this.clear(); + }, this), 350); + }, + onKeyHandler: function (pEvent) { + switch (pEvent.which) { + case 27 : + this.close(); + break; + case 13 : + if (this.isSearchEnabled) this.search(); + break; } - }); + }, + activateScrollBehavior: function () { + this.deactivateScrollBehavior(); + $("#search-open-btn").on('click', $.proxy(this.scrollToInput, this)); + }, + deactivateScrollBehavior: function () { + $("#search-open-btn").on('off', this.scrollToInput, this); + }, + enableBindings: function () { + this.disableBindings(); + $(window).on('keyup', $.proxy(this.onKeyHandler, this)); + }, + disableBindings: function () { + $(window).off('keyup', this.onKeyHandler, this); + }, + search: function (pVal) { + var tmpSearchString = pVal || this.$searchInputField.val(); - window.ModalSearchView = window.ModalSearchView || BurdaInfinite.views.ModalSearchView; + if (this.preloader != undefined) this.preloader.destroy(); + // TODO find out, why window.SpinnderCubeView was not used here + // this.preloader = new BurdaInfinite.views.SpinnerCubeView({el: this.$el}); + this.preloader = new SpinnerCubeView({el: this.$el}); + this.model.fetch(tmpSearchString); + }, + scrollToInput: function () { + this.$el.animate({scrollTop: (this.$searchInputField.offset().top)}, { + duration: 'slow', + complete: $.proxy(function () { + this.$searchInputField.trigger('focus'); + }, this) + }); + }, + clear: function () { + this.clearFeed(); + this.$searchInputField.val(''); + this.onInputChangeHandler(); + }, + close: function () { + this.model.set('is_open', false); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file +export default BurdaInfinite.views.ModalSearchView; diff --git a/js/infinite/views/newsletter/hmnewsletter-view.js b/js/infinite/views/newsletter/hmnewsletter-view.js index 27582287..f982be8a 100644 --- a/js/infinite/views/newsletter/hmnewsletter-view.js +++ b/js/infinite/views/newsletter/hmnewsletter-view.js @@ -1,32 +1,30 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.newsletter.HmNewsletterView = BaseView.extend({ - initialize: function (pOptions) { - Drupal.behaviors.hmNewsletter.attach(pOptions.el.context) +BurdaInfinite.views.newsletter.HmNewsletterView = BaseView.extend({ + initialize: function (pOptions) { + Drupal.behaviors.hmNewsletter.attach(pOptions.el.context) - pOptions.el.on('newsletter:success', function (event) { - if (typeof TrackingManager != 'undefined') { - TrackingManager.trackEvent({ - category: 'newsletter', - action: 'success', - 'eventNonInteraction': 'false' - }, TrackingManager.getAdvTrackingByElement(this.$el)); - } - }) - pOptions.el.on('newsletter:error', function (event) { - if (typeof TrackingManager != 'undefined') { - TrackingManager.trackEvent({ - category: 'newsletter', - action: 'error', - 'eventNonInteraction': 'false' - }, TrackingManager.getAdvTrackingByElement(this.$el)); - } - }) - } - }); + pOptions.el.on('newsletter:success', function (event) { + if (typeof TrackingManager != 'undefined') { + TrackingManager.trackEvent({ + category: 'newsletter', + action: 'success', + 'eventNonInteraction': 'false' + }, TrackingManager.getAdvTrackingByElement(this.$el)); + } + }) + pOptions.el.on('newsletter:error', function (event) { + if (typeof TrackingManager != 'undefined') { + TrackingManager.trackEvent({ + category: 'newsletter', + action: 'error', + 'eventNonInteraction': 'false' + }, TrackingManager.getAdvTrackingByElement(this.$el)); + } + }) + } +}); - window.HmNewsletterView = window.HmNewsletterView || BurdaInfinite.views.newsletter.HmNewsletterView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.newsletter.HmNewsletterView; diff --git a/js/infinite/views/newsletter/newsletter-modal-view.js b/js/infinite/views/newsletter/newsletter-modal-view.js index 34538126..07e39824 100644 --- a/js/infinite/views/newsletter/newsletter-modal-view.js +++ b/js/infinite/views/newsletter/newsletter-modal-view.js @@ -1,127 +1,125 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.newsletter.NewsletterModalView = BaseView.extend({ - events: { - "click .close": "close" - }, - options: {}, - cookieName: '_newsletter_modal', - lastBreakpoint: '', - hasDeviceModel: false, - newsletterSuccess: false, - deviceModel: null, - newsletterView: null, - availableInterval: 0, - availableCheckCount: 0, - initialize: function (pOptions) { - _.extend(this, pOptions || {}); - - this.hasDeviceModel = this.deviceModel != undefined; - this.elementBreakpoints = $(this.$el.data('breakpoints')).toArray(); - - if (!this.hasDeviceModel) return; - - this.cookieName = this.deviceModel.get("basehost") + this.cookieName; - if (this.elementBreakpoints.length <= 0) this.elementBreakpoints.push('tablet', 'desktop'); - this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - - this.delegateEvents(); - this.initNewsletter(); - this.updateView(); - - }, - updateView: function () { - var tmpCurrentBreakpoint = this.breakpointDeviceModel.id; - - console.log("newsletter_modal", - " \n | isGoogleBot", this.deviceModel.get("isGoogleBot"), - " \n | currentBreakpoint >> " + tmpCurrentBreakpoint, 'is allowed > ', this.elementBreakpoints.indexOf(tmpCurrentBreakpoint), - " \n | cookieName", this.cookieName, - " \n | cookie", this.getCookie(), - " \n | lastBreakpoint is NOT the same >> " + this.lastBreakpoint, (this.lastBreakpoint != tmpCurrentBreakpoint), - " \n | referrerIsMe >> " + this.isRefererAccepted(), - " \n | >>> SHOW", (this.deviceModel.isGoogleBot != true && this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 && this.getCookie() === undefined && this.lastBreakpoint != tmpCurrentBreakpoint) && this.isRefererAccepted()); - - if (this.deviceModel.get("isGoogleBot") === false - && this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 - && this.lastBreakpoint != tmpCurrentBreakpoint - && this.isRefererAccepted() == true - && this.getCookie() == undefined) { - - this.availableInterval = setInterval(_.bind(this.availableCheck, this), 1000); - this.availableCheck(); - } +import { BaseView } from '../index' + +"use strict"; + +BurdaInfinite.views.newsletter.NewsletterModalView = BaseView.extend({ + events: { + "click .close": "close" + }, + options: {}, + cookieName: '_newsletter_modal', + lastBreakpoint: '', + hasDeviceModel: false, + newsletterSuccess: false, + deviceModel: null, + newsletterView: null, + availableInterval: 0, + availableCheckCount: 0, + initialize: function (pOptions) { + _.extend(this, pOptions || {}); + + this.hasDeviceModel = this.deviceModel != undefined; + this.elementBreakpoints = $(this.$el.data('breakpoints')).toArray(); + + if (!this.hasDeviceModel) return; + + this.cookieName = this.deviceModel.get("basehost") + this.cookieName; + if (this.elementBreakpoints.length <= 0) this.elementBreakpoints.push('tablet', 'desktop'); + this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + + this.delegateEvents(); + this.initNewsletter(); + this.updateView(); + + }, + updateView: function () { + var tmpCurrentBreakpoint = this.breakpointDeviceModel.id; + + console.log("newsletter_modal", + " \n | isGoogleBot", this.deviceModel.get("isGoogleBot"), + " \n | currentBreakpoint >> " + tmpCurrentBreakpoint, 'is allowed > ', this.elementBreakpoints.indexOf(tmpCurrentBreakpoint), + " \n | cookieName", this.cookieName, + " \n | cookie", this.getCookie(), + " \n | lastBreakpoint is NOT the same >> " + this.lastBreakpoint, (this.lastBreakpoint != tmpCurrentBreakpoint), + " \n | referrerIsMe >> " + this.isRefererAccepted(), + " \n | >>> SHOW", (this.deviceModel.isGoogleBot != true && this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 && this.getCookie() === undefined && this.lastBreakpoint != tmpCurrentBreakpoint) && this.isRefererAccepted()); + + if (this.deviceModel.get("isGoogleBot") === false + && this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 + && this.lastBreakpoint != tmpCurrentBreakpoint + && this.isRefererAccepted() == true + && this.getCookie() == undefined) { + + this.availableInterval = setInterval(_.bind(this.availableCheck, this), 1000); + this.availableCheck(); + } - this.lastBreakpoint = tmpCurrentBreakpoint; - }, - availableCheck: function () { - this.availableCheckCount++; - if (this.newsletterView.available) { - clearInterval(this.availableInterval); - this.show(); - } + this.lastBreakpoint = tmpCurrentBreakpoint; + }, + availableCheck: function () { + this.availableCheckCount++; + if (this.newsletterView.available) { + clearInterval(this.availableInterval); + this.show(); + } - //remove check if not available - if (this.availableCheckCount > 10) { - clearInterval(this.availableInterval); - } - }, - initNewsletter: function () { - var $tmpNewsletter = this.$el.find('[data-view-type="newsletterView"]'); - this.newsletterView = new BaseNewsletterView({el: $tmpNewsletter, useTracking: false}); - - $tmpNewsletter.on('newsletter:success', $.proxy(function (event) { - this.newsletterSuccess = true; - this.deviceModel.setCookieValue(this.cookieName, {newsletterModalSuccess: true}, {expires: 120}); - this.track({category: 'newsletter_modal', action: 'success'}); - }, this)); - - $tmpNewsletter.on('newsletter:error', $.proxy(function (event) { - this.track({category: 'newsletter_modal', action: 'error'}); - }, this)); - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; - this.updateView(); - }, - track: function (pObject) { - if (typeof TrackingManager != 'undefined') { - TrackingManager.trackEvent(pObject, TrackingManager.getAdvTrackingByElement(this.$el)); - - if (pObject.category == 'newsletter_modal' && pObject.action == 'success') { - TrackingManager.trackEvent({ - category: 'mkt-conversion', - action: 'newsletterSignup', - 'eventNonInteraction': 'false' - }, TrackingManager.getAdvTrackingByElement(this.$el)); - } - } - }, - isRefererAccepted: function () { - return this.deviceModel.getReferrerCookie() != undefined && this.deviceModel.getReferrerCookie().referrerIsMe == true; - }, - getCookie: function () { - return this.deviceModel.getCookie(this.cookieName); - }, - show: function () { - this.$el.modal('show'); - $('body').addClass('modal-overall'); - this.track({category: 'newsletter_modal', action: 'show'}); - }, - close: function () { - this.$el.modal('hide'); - $('body').removeClass('modal-overall'); - this.track({category: 'newsletter_modal', action: 'close'}); - - if (!this.newsletterSuccess) { - this.deviceModel.setCookieValue(this.cookieName, {newsletterModalSuccess: false}, {expires: 30}); + //remove check if not available + if (this.availableCheckCount > 10) { + clearInterval(this.availableInterval); + } + }, + initNewsletter: function () { + var $tmpNewsletter = this.$el.find('[data-view-type="newsletterView"]'); + this.newsletterView = new BaseNewsletterView({el: $tmpNewsletter, useTracking: false}); + + $tmpNewsletter.on('newsletter:success', $.proxy(function (event) { + this.newsletterSuccess = true; + this.deviceModel.setCookieValue(this.cookieName, {newsletterModalSuccess: true}, {expires: 120}); + this.track({category: 'newsletter_modal', action: 'success'}); + }, this)); + + $tmpNewsletter.on('newsletter:error', $.proxy(function (event) { + this.track({category: 'newsletter_modal', action: 'error'}); + }, this)); + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; + this.updateView(); + }, + track: function (pObject) { + if (typeof TrackingManager != 'undefined') { + TrackingManager.trackEvent(pObject, TrackingManager.getAdvTrackingByElement(this.$el)); + + if (pObject.category == 'newsletter_modal' && pObject.action == 'success') { + TrackingManager.trackEvent({ + category: 'mkt-conversion', + action: 'newsletterSignup', + 'eventNonInteraction': 'false' + }, TrackingManager.getAdvTrackingByElement(this.$el)); } } - }); - - window.NewsletterModalView = window.NewsletterModalView || BurdaInfinite.views.newsletter.NewsletterModalView; + }, + isRefererAccepted: function () { + return this.deviceModel.getReferrerCookie() != undefined && this.deviceModel.getReferrerCookie().referrerIsMe == true; + }, + getCookie: function () { + return this.deviceModel.getCookie(this.cookieName); + }, + show: function () { + this.$el.modal('show'); + $('body').addClass('modal-overall'); + this.track({category: 'newsletter_modal', action: 'show'}); + }, + close: function () { + this.$el.modal('hide'); + $('body').removeClass('modal-overall'); + this.track({category: 'newsletter_modal', action: 'close'}); + + if (!this.newsletterSuccess) { + this.deviceModel.setCookieValue(this.cookieName, {newsletterModalSuccess: false}, {expires: 30}); + } + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.newsletter.NewsletterModalView; diff --git a/js/infinite/views/products/ecommerce-slider-view.js b/js/infinite/views/products/ecommerce-slider-view.js index 7cf10f5a..1cd42ae8 100644 --- a/js/infinite/views/products/ecommerce-slider-view.js +++ b/js/infinite/views/products/ecommerce-slider-view.js @@ -1,123 +1,127 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { - - "use strict"; - - BurdaInfinite.views.products.EcommerceSliderView = BaseDynamicView.extend({ - $swiperContainer: [], - swiperApi: null, - // deviceModel: null, - // breakpointDeviceModel: null, - // currentBreakpoint: null, - settings: { - loop: true, - slidesPerView: 'auto', - grabCursor: true, - watchSlidesVisibility: true - }, - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); - this.createView(); - this.updateView(); - this.delegateInview(); - this.duplicateElementClick(); - - // this.deviceModel = BM.reuseModel(ModelIds.deviceModel); - // this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); - // this.currentBreakpoint = this.breakpointDeviceModel.id; - // this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - }, - createView: function () { - this.$swiperContainer = this.$el.find('.swiper-container'); - - _.extend(this.settings, { - nextButton: this.$el.find('.swiper-button-next')[0], - prevButton: this.$el.find('.swiper-button-prev')[0] +// import ModelIds from '../consts/model-ids' +import { BaseDynamicView, BaseInviewView } from '../index' +import { Swiper, Navigation } from 'swiper/dist/js/swiper.esm' + +Swiper.use([Navigation]) + +"use strict"; + +BurdaInfinite.views.products.EcommerceSliderView = BaseDynamicView.extend({ + $swiperContainer: [], + swiperApi: null, + // deviceModel: null, + // breakpointDeviceModel: null, + // currentBreakpoint: null, + settings: { + loop: true, + slidesPerView: 'auto', + grabCursor: true, + watchSlidesVisibility: true + }, + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); + this.createView(); + this.updateView(); + this.delegateInview(); + this.duplicateElementClick(); + + // this.deviceModel = BM.reuseModel(ModelIds.deviceModel); + // this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); + // this.currentBreakpoint = this.breakpointDeviceModel.id; + // this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + }, + createView: function () { + this.$swiperContainer = this.$el.find('.swiper-container'); + + _.extend(this.settings, { + navigation: { + nextEl: this.$el.find('.swiper-button-next')[0], + prevEl: this.$el.find('.swiper-button-prev')[0] + } + }); + + if(this.$el.attr('data-slider') !== 'undefined'){ + var $dataSlider = JSON.parse(this.$el.attr('data-slider')); + _.extend(this.settings, $dataSlider); + } + }, + updateView: function () { + this.swiperApi = new Swiper(this.$swiperContainer, this.settings); + this.$swiperContainer.data('swiperApi', this.swiperApi); + + this.swiperApi.off('slideChangeTransitionEnd') + .on('slideChangeTransitionEnd', _.bind(this.onSliderChangeHandler, this)) + .on('slideChangeTransitionEnd', function () { + window.dispatchEvent(new Event('infinite-wishlist--update-icons')); }); + this.swiperApi.off('touchEnd').on('touchEnd', _.bind(this.onSliderChangeHandler, this)); + }, + trackVisibleProductImpressions: function () { + var tmpView, + tmpExternalURL = "", + $tmpElement = []; + + //.not('.swiper-slide-duplicate') + this.$el.find('.swiper-slide-visible').each(_.bind(function (pIndex, pItem) { + $tmpElement = $(pItem); + + /** + * search original element + */ + if ($tmpElement.hasClass('swiper-slide-duplicate')) { + tmpExternalURL = $tmpElement.data('external-url'); + $tmpElement = this.$el.find("[data-external-url='" + tmpExternalURL + "']").not('.swiper-slide-duplicate'); + } + + /** + * get model and track impression + */ + if (typeof $tmpElement.data('infiniteModel') != 'undefined') { + tmpView = $tmpElement.data('infiniteModel').get('view'); - if(this.$el.attr('data-slider') !== 'undefined'){ - var $dataSlider = JSON.parse(this.$el.attr('data-slider')); - _.extend(this.settings, $dataSlider); + if (tmpView.model.get('disabled') != true && tmpView.model.get('trackImpression') != true) { + tmpView.trackImpression(); + } } - }, - updateView: function () { - this.swiperApi = this.$swiperContainer.swiper(this.settings); - this.$swiperContainer.data('swiperApi', this.swiperApi); - - this.swiperApi.off('onSlideChangeEnd') - .on('onSlideChangeEnd', _.bind(this.onSliderChangeHandler, this)) - .on('onSlideChangeEnd', function () { - window.dispatchEvent(new Event('infinite-wishlist--update-icons')); - }); - this.swiperApi.off('onTouchEnd').on('onTouchEnd', _.bind(this.onSliderChangeHandler, this)); - }, - trackVisibleProductImpressions: function () { - var tmpView, - tmpExternalURL = "", - $tmpElement = []; - - //.not('.swiper-slide-duplicate') - this.$el.find('.swiper-slide-visible').each(_.bind(function (pIndex, pItem) { - $tmpElement = $(pItem); + + }, this)); + }, + duplicateElementClick: function () { + var $tmpElement = [], + tmpExternalURL = "", + tmpView; + + this.$el.find('.swiper-slide-duplicate').each(_.bind(function (pIndex, pItem) { + + $(pItem).unbind('click.enhanced_ecommerce').bind('click.enhanced_ecommerce', _.bind(function (pEvent) { + $tmpElement = $(pEvent.currentTarget); + tmpExternalURL = $tmpElement.data('external-url'); /** * search original element */ - if ($tmpElement.hasClass('swiper-slide-duplicate')) { - tmpExternalURL = $tmpElement.data('external-url'); - $tmpElement = this.$el.find("[data-external-url='" + tmpExternalURL + "']").not('.swiper-slide-duplicate'); - } + $tmpElement = this.$el.find("[data-external-url='" + tmpExternalURL + "']").not('.swiper-slide-duplicate'); /** * get model and track impression */ if (typeof $tmpElement.data('infiniteModel') != 'undefined') { tmpView = $tmpElement.data('infiniteModel').get('view'); - - if (tmpView.model.get('disabled') != true && tmpView.model.get('trackImpression') != true) { - tmpView.trackImpression(); - } + tmpView.trackProductClick(); } - }, this)); - }, - duplicateElementClick: function () { - var $tmpElement = [], - tmpExternalURL = "", - tmpView; - - this.$el.find('.swiper-slide-duplicate').each(_.bind(function (pIndex, pItem) { - - $(pItem).unbind('click.enhanced_ecommerce').bind('click.enhanced_ecommerce', _.bind(function (pEvent) { - $tmpElement = $(pEvent.currentTarget); - tmpExternalURL = $tmpElement.data('external-url'); - - /** - * search original element - */ - $tmpElement = this.$el.find("[data-external-url='" + tmpExternalURL + "']").not('.swiper-slide-duplicate'); - /** - * get model and track impression - */ - if (typeof $tmpElement.data('infiniteModel') != 'undefined') { - tmpView = $tmpElement.data('infiniteModel').get('view'); - tmpView.trackProductClick(); - } - }, this)); - - - }, this)); - }, - onSliderChangeHandler: function (pSwiperApi) { - this.trackVisibleProductImpressions(); - }, - onEnterHandler: function (pDirection) { - BaseInviewView.prototype.onEnterHandler.call(this, pDirection); - this.trackVisibleProductImpressions(); - } - }); + }, this)); + }, + onSliderChangeHandler: function (pSwiperApi) { + this.trackVisibleProductImpressions(); + }, + onEnterHandler: function (pDirection) { + BaseInviewView.prototype.onEnterHandler.call(this, pDirection); + this.trackVisibleProductImpressions(); + } - window.EcommerceSliderView = window.EcommerceSliderView || BurdaInfinite.views.products.EcommerceSliderView; +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.products.EcommerceSliderView; diff --git a/js/infinite/views/products/look-view.js b/js/infinite/views/products/look-view.js index c7b6c62c..07972ce2 100644 --- a/js/infinite/views/products/look-view.js +++ b/js/infinite/views/products/look-view.js @@ -1,70 +1,68 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseDynamicView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.products.LookView = BaseDynamicView.extend({ - $hotspots: [], - blazy: null, - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.products.LookView = BaseDynamicView.extend({ + $hotspots: [], + blazy: null, + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); - this.createView(); - this.init(); - }, - createView: function () { - this.$hotspots = this.$el.find('.imagepin'); + this.createView(); + this.init(); + }, + createView: function () { + this.$hotspots = this.$el.find('.imagepin'); - if (typeof Blazy != 'undefined') { - this.blazy = new Blazy(); - } - }, - init: function () { - var $that = this; - - $.each(this.$hotspots, function () { - $(this).bind('overlay:show', function (pEvent, $pOverlay) { - var tmpWidgetId = $pOverlay.data('imagepin-key'), - $tmpOriginalWidget = [], - $tmpOriginalProduct = [], - $tmpImages = $pOverlay.find('img'), - tmpView, - tmpInfiniteModel; + if (typeof Blazy != 'undefined') { + this.blazy = new Blazy(); + } + }, + init: function () { + var $that = this; - $tmpOriginalWidget = $that.$el.find('.imagepin-widgets [data-imagepin-key="' + tmpWidgetId + '"]'); - $tmpOriginalProduct = $tmpOriginalWidget.find('.item-ecommerce'); + $.each(this.$hotspots, function () { + $(this).bind('overlay:show', function (pEvent, $pOverlay) { + var tmpWidgetId = $pOverlay.data('imagepin-key'), + $tmpOriginalWidget = [], + $tmpOriginalProduct = [], + $tmpImages = $pOverlay.find('img'), + tmpView, + tmpInfiniteModel; - $.each($tmpOriginalProduct, function (index, element) { + $tmpOriginalWidget = $that.$el.find('.imagepin-widgets [data-imagepin-key="' + tmpWidgetId + '"]'); + $tmpOriginalProduct = $tmpOriginalWidget.find('.item-ecommerce'); - var $targetElement = $tmpOriginalProduct.eq(index); - tmpInfiniteModel = $targetElement.data('infiniteModel'); - - /** - * get model and track impression - */ - if (typeof tmpInfiniteModel != "undefined") { - tmpView = $targetElement.data('infiniteModel').get('view'); - if ($targetElement.data('trackImpression') != true) { - $targetElement.data('trackImpression', true); - tmpView.trackImpression(); - } - } - - }); + $.each($tmpOriginalProduct, function (index, element) { + var $targetElement = $tmpOriginalProduct.eq(index); + tmpInfiniteModel = $targetElement.data('infiniteModel'); /** - * Load blazy shizzl + * get model and track impression */ - if ($that.blazy != null) { - $.each($tmpImages, function (pIndex, pImageItem) { - $that.blazy.load(pImageItem); - }); + if (typeof tmpInfiniteModel != "undefined") { + tmpView = $targetElement.data('infiniteModel').get('view'); + if ($targetElement.data('trackImpression') != true) { + $targetElement.data('trackImpression', true); + tmpView.trackImpression(); + } } + }); - }); - } - }); - window.LookView = window.LookView || BurdaInfinite.views.products.LookView; -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file + /** + * Load blazy shizzl + */ + if ($that.blazy != null) { + $.each($tmpImages, function (pIndex, pImageItem) { + $that.blazy.load(pImageItem); + }); + } + }); + }); + } +}); + +export default BurdaInfinite.views.products.LookView; diff --git a/js/infinite/views/products/product-look-view.js b/js/infinite/views/products/product-look-view.js index b8b02577..95bb5646 100644 --- a/js/infinite/views/products/product-look-view.js +++ b/js/infinite/views/products/product-look-view.js @@ -1,27 +1,25 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { ProductView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.products.ProductLookView = ProductView.extend({ - initialize: function (pOptions) { - ProductView.prototype.initialize.call(this, pOptions); - }, - delegateInview: function () { +BurdaInfinite.views.products.ProductLookView = ProductView.extend({ + initialize: function (pOptions) { + ProductView.prototype.initialize.call(this, pOptions); + }, + delegateInview: function () { - }, - createModel: function () { - ProductView.prototype.createModel.call(this); + }, + createModel: function () { + ProductView.prototype.createModel.call(this); - this.model.set('componentType', 'look'); - this.model.set('variantType', 'look'); - }, - collectTrackingData: function (){ - ProductView.prototype.collectTrackingData.call(this); - this.model.get('enhancedEcommerce').productExtraInformation = this.$el.parent().data('product-variant'); + this.model.set('componentType', 'look'); + this.model.set('variantType', 'look'); + }, + collectTrackingData: function (){ + ProductView.prototype.collectTrackingData.call(this); + this.model.get('enhancedEcommerce').productExtraInformation = this.$el.parent().data('product-variant'); - } - }); + } +}); - window.ProductLookView = window.ProductLookView || BurdaInfinite.views.products.ProductLookView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.products.ProductLookView; diff --git a/js/infinite/views/products/product-slider-view.js b/js/infinite/views/products/product-slider-view.js index 33109634..554a8711 100644 --- a/js/infinite/views/products/product-slider-view.js +++ b/js/infinite/views/products/product-slider-view.js @@ -1,36 +1,34 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { ProductView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.products.ProductSliderView = ProductView.extend({ - ecommerceSliderModel: new Backbone.Model(), - $ecommerceSlider: [], - initialize: function (pOptions) { - if (this.model.has('parentModel') && this.model.get('parentModel').get('type') == 'ecommerceSlider') { - this.ecommerceSliderModel = this.model.get('parentModel'); - this.$ecommerceSlider = this.ecommerceSliderModel.get('el'); - } +BurdaInfinite.views.products.ProductSliderView = ProductView.extend({ + ecommerceSliderModel: new Backbone.Model(), + $ecommerceSlider: [], + initialize: function (pOptions) { + if (this.model.has('parentModel') && this.model.get('parentModel').get('type') == 'ecommerceSlider') { + this.ecommerceSliderModel = this.model.get('parentModel'); + this.$ecommerceSlider = this.ecommerceSliderModel.get('el'); + } - ProductView.prototype.initialize.call(this, pOptions); - }, - delegateInview: function () { - //override inview method - }, - collectTrackingData: function () { - ProductView.prototype.collectTrackingData.call(this); + ProductView.prototype.initialize.call(this, pOptions); + }, + delegateInview: function () { + //override inview method + }, + collectTrackingData: function () { + ProductView.prototype.collectTrackingData.call(this); - if (this.ecommerceSliderModel.get('el').data('nid')) { - this.model.get('enhancedEcommerce').componentId = this.ecommerceSliderModel.get('el').data('nid').toString(); - } - }, - setProductIndex: function () { - if (this.$ecommerceSlider.length > 0) { - var tmpProductIndex = this.$ecommerceSlider.find('.item-ecommerce').not('.swiper-slide-duplicate').index(this.$el); - this.model.set('productIndex', tmpProductIndex); - } + if (this.ecommerceSliderModel.get('el').data('nid')) { + this.model.get('enhancedEcommerce').componentId = this.ecommerceSliderModel.get('el').data('nid').toString(); } - }); - - window.ProductSliderView = window.ProductSliderView || BurdaInfinite.views.products.ProductSliderView; + }, + setProductIndex: function () { + if (this.$ecommerceSlider.length > 0) { + var tmpProductIndex = this.$ecommerceSlider.find('.item-ecommerce').not('.swiper-slide-duplicate').index(this.$el); + this.model.set('productIndex', tmpProductIndex); + } + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file +export default BurdaInfinite.views.products.ProductSliderView; diff --git a/js/infinite/views/products/product-view.js b/js/infinite/views/products/product-view.js index 7f7da82e..4435a295 100644 --- a/js/infinite/views/products/product-view.js +++ b/js/infinite/views/products/product-view.js @@ -1,248 +1,247 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { AppConfig } from '../../consts' +import { BaseView } from '../index' - "use strict"; +"use strict"; - BurdaInfinite.views.products.ProductView = BaseView.extend({ - advancedTrackingData: null, - $containerElement: [], - inview: null, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); +var ProductView = BurdaInfinite.views.products.ProductView = BaseView.extend({ + advancedTrackingData: null, + $containerElement: [], + inview: null, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); - if (this.$el.hasClass('item-product--sold-out')) { - this.model.set('disabled', true); - return; - } - - this.delegateInview(); - this.addListener(); - this.createModel(); - - /** - * infiniteBlockDataModel set in base-dynamic-view - */ - // console.log(">>> this.infiniteBlockDataModel", this.infiniteBlockDataModel); - - if (this.infiniteBlockDataModel) { + if (this.$el.hasClass('item-product--sold-out')) { + this.model.set('disabled', true); + return; + } - if (this.infiniteBlockDataModel.has('trackingContainerType') && this.model.get('componentType') != ProductView.COMPONENT_TYPE_SLIDER) { - this.model.set('containerType', this.infiniteBlockDataModel.get('trackingContainerType').toLowerCase()); - } + this.delegateInview(); + this.addListener(); + this.createModel(); - if (this.infiniteBlockDataModel.has('uuid')) { - this.advancedTrackingData = TrackingManager.getAdvTrackingByUuid(this.infiniteBlockDataModel.has('uuid')); - this.extendDataLayerInfo(); - } + /** + * infiniteBlockDataModel set in base-dynamic-view + */ + // console.log(">>> this.infiniteBlockDataModel", this.infiniteBlockDataModel); - if (this.infiniteBlockDataModel.getElement().length > 0) { - this.$containerElement = this.infiniteBlockDataModel.getElement(); - this.setProductIndex(); //set on this position to override the function - } + if (this.infiniteBlockDataModel) { + if (this.infiniteBlockDataModel.has('trackingContainerType') && this.model.get('componentType') != ProductView.COMPONENT_TYPE_SLIDER) { + this.model.set('containerType', this.infiniteBlockDataModel.get('trackingContainerType').toLowerCase()); } - if (this.model.get('componentType') == ProductView.COMPONENT_TYPE_SLIDER) { - this.model.set('containerType', ProductView.COMPONENT_TYPE_SLIDER); + if (this.infiniteBlockDataModel.has('uuid')) { + this.advancedTrackingData = TrackingManager.getAdvTrackingByUuid(this.infiniteBlockDataModel.has('uuid')); + this.extendDataLayerInfo(); } - this.initCustomTracking(); - this.collectTrackingData(); - }, - delegateInview: function () { - if (this.inview != null) this.inview.destroy(); - - this.inview = this.$el.find('.img-container') - .inview({ - offset: 'bottom', - enter: _.bind(this.onInviewEnterHandler, this), - exit: _.bind(this.onInviewExitHandler, this) - }); - }, - onInviewEnterHandler: function (pDirection) { - this.onEnterHandler(pDirection); - }, - onInviewExitHandler: function (pDirection) { - - }, - addListener: function () { - this.$el.unbind('click.enhanced_ecommerce').bind('click.enhanced_ecommerce', $.proxy(this.onProductClickHandler, this)); - // $(window).scroll(_.bind(this.checkPos, this)); - }, - createModel: function () { - var tmpComponentType = ''; - - this.model.set('provider', this.$el.data('provider')); - this.model.set('price', this.$el.data('price') + ''); - this.model.set('currency', this.$el.data('currency')); - this.model.set('category', this.$el.data('category')); - this.model.set('title', this.$el.data('title')); - this.model.set('shop', this.$el.data('shop')); - this.model.set('productId', this.$el.data('product-id') + ''); - this.model.set('brand', this.$el.data('brand')); - this.model.set('viewType', this.$el.data('view-type')); - this.model.set('productCategory', this.$el.data('product-category')); - this.model.set('url', this.$el.data('external-url') || this.$el.data('internal-url')); - - if (this.$el.hasClass('item-product--single')) { - tmpComponentType = ProductView.COMPONENT_TYPE_SINGLE; - } else if (this.$el.hasClass('item-product-slider')) { - tmpComponentType = ProductView.COMPONENT_TYPE_SLIDER; - } else { - tmpComponentType = ProductView.COMPONENT_TYPE_GRID; + if (this.infiniteBlockDataModel.getElement().length > 0) { + this.$containerElement = this.infiniteBlockDataModel.getElement(); + this.setProductIndex(); //set on this position to override the function } - this.model.set('componentType', tmpComponentType); + } - //fallback - provider is empty for generic products - if (this.model.get('provider') == '') { - this.model.set('provider', ProductView.PROVIDER_GENERIC); - } + if (this.model.get('componentType') == ProductView.COMPONENT_TYPE_SLIDER) { + this.model.set('containerType', ProductView.COMPONENT_TYPE_SLIDER); + } - //generic products has no id - if (this.model.get('productId') == 'undefined') { - this.model.set('productId', ProductView.PROVIDER_GENERIC); - } - }, - extendDataLayerInfo: function () { - if (this.advancedTrackingData.hasOwnProperty('page')) { - this.model.set('entityType', this.advancedTrackingData.page.entityType); - this.model.set('contentType', this.advancedTrackingData.page.contentType); - this.model.set('entityID', this.advancedTrackingData.page.entityID); - this.model.set('entityName', this.advancedTrackingData.page.name); - } - }, - initCustomTracking: function () { - var externalTrackingURL = this.model.get('url'); - var slicedString = ''; - var containerType = ''; - var positionOfLinkParam = externalTrackingURL.indexOf("&link"); - var hasLinkParam = positionOfLinkParam > -1; - var productTitle = ''; - var productTitleProcessed = ''; - var isTracdelightURL = externalTrackingURL.indexOf("//td.") > -1; - var isDrupalEntityOrNode = this.model.has('entityType'); - var hasSubid = externalTrackingURL.indexOf("subid=") > -1; - - if (externalTrackingURL === '' || externalTrackingURL === undefined) return; - - if (this.model.has('containerType') && this.model.get('containerType') !== '') { - containerType = '-' + this.model.get('containerType').toLowerCase(); - } + this.initCustomTracking(); + this.collectTrackingData(); + }, + delegateInview: function () { + if (this.inview != null) this.inview.destroy(); + + this.inview = this.$el.find('.img-container') + .inview({ + offset: 'bottom', + enter: _.bind(this.onInviewEnterHandler, this), + exit: _.bind(this.onInviewExitHandler, this) + }); + }, + onInviewEnterHandler: function (pDirection) { + this.onEnterHandler(pDirection); + }, + onInviewExitHandler: function (pDirection) { + + }, + addListener: function () { + this.$el.unbind('click.enhanced_ecommerce').bind('click.enhanced_ecommerce', $.proxy(this.onProductClickHandler, this)); + // $(window).scroll(_.bind(this.checkPos, this)); + }, + createModel: function () { + var tmpComponentType = ''; + + this.model.set('provider', this.$el.data('provider')); + this.model.set('price', this.$el.data('price') + ''); + this.model.set('currency', this.$el.data('currency')); + this.model.set('category', this.$el.data('category')); + this.model.set('title', this.$el.data('title')); + this.model.set('shop', this.$el.data('shop')); + this.model.set('productId', this.$el.data('product-id') + ''); + this.model.set('brand', this.$el.data('brand')); + this.model.set('viewType', this.$el.data('view-type')); + this.model.set('productCategory', this.$el.data('product-category')); + this.model.set('url', this.$el.data('external-url') || this.$el.data('internal-url')); + + if (this.$el.hasClass('item-product--single')) { + tmpComponentType = ProductView.COMPONENT_TYPE_SINGLE; + } else if (this.$el.hasClass('item-product-slider')) { + tmpComponentType = ProductView.COMPONENT_TYPE_SLIDER; + } else { + tmpComponentType = ProductView.COMPONENT_TYPE_GRID; + } - switch (this.model.get('provider')) { - case ProductView.PROVIDER_TRACDELIGHT: + this.model.set('componentType', tmpComponentType); - if (hasSubid) { - externalTrackingURL = BaseUtils.replaceUrlParam(externalTrackingURL, 'subid', window.getURLParam('subid', externalTrackingURL) + containerType); - } + //fallback - provider is empty for generic products + if (this.model.get('provider') == '') { + this.model.set('provider', ProductView.PROVIDER_GENERIC); + } - break; - case ProductView.PROVIDER_AMAZON: + //generic products has no id + if (this.model.get('productId') == 'undefined') { + this.model.set('productId', ProductView.PROVIDER_GENERIC); + } + }, + extendDataLayerInfo: function () { + if (this.advancedTrackingData.hasOwnProperty('page')) { + this.model.set('entityType', this.advancedTrackingData.page.entityType); + this.model.set('contentType', this.advancedTrackingData.page.contentType); + this.model.set('entityID', this.advancedTrackingData.page.entityID); + this.model.set('entityName', this.advancedTrackingData.page.name); + } + }, + initCustomTracking: function () { + var externalTrackingURL = this.model.get('url'); + var slicedString = ''; + var containerType = ''; + var positionOfLinkParam = externalTrackingURL.indexOf("&link"); + var hasLinkParam = positionOfLinkParam > -1; + var productTitle = ''; + var productTitleProcessed = ''; + var isTracdelightURL = externalTrackingURL.indexOf("//td.") > -1; + var isDrupalEntityOrNode = this.model.has('entityType'); + var hasSubid = externalTrackingURL.indexOf("subid=") > -1; + + if (externalTrackingURL === '' || externalTrackingURL === undefined) return; + + if (this.model.has('containerType') && this.model.get('containerType') !== '') { + containerType = '-' + this.model.get('containerType').toLowerCase(); + } + + switch (this.model.get('provider')) { + case ProductView.PROVIDER_TRACDELIGHT: - //TODO change this to dynamic value for all platforms - if (externalTrackingURL.indexOf(AppConfig.amazonURLTrId) > -1) { + if (hasSubid) { + externalTrackingURL = BaseUtils.replaceUrlParam(externalTrackingURL, 'subid', window.getURLParam('subid', externalTrackingURL) + containerType); + } - slicedString = AppConfig.amazonURLTrId.split('-'); - if (slicedString.length > 1) { - slicedString = slicedString[0] + containerType + '-' + slicedString[1]; - } else { - slicedString = AppConfig.amazonURLTrId + containerType; - } + break; + case ProductView.PROVIDER_AMAZON: - externalTrackingURL = externalTrackingURL.replace(AppConfig.amazonURLTrId, slicedString); + //TODO change this to dynamic value for all platforms + if (externalTrackingURL.indexOf(AppConfig.amazonURLTrId) > -1) { + + slicedString = AppConfig.amazonURLTrId.split('-'); + if (slicedString.length > 1) { + slicedString = slicedString[0] + containerType + '-' + slicedString[1]; + } else { + slicedString = AppConfig.amazonURLTrId + containerType; } - break; - case ProductView.PROVIDER_GENERIC: + externalTrackingURL = externalTrackingURL.replace(AppConfig.amazonURLTrId, slicedString); + } - if (isTracdelightURL && hasLinkParam) { - slicedString = externalTrackingURL.substring(positionOfLinkParam, externalTrackingURL.length); + break; + case ProductView.PROVIDER_GENERIC: - if (isDrupalEntityOrNode) { + if (isTracdelightURL && hasLinkParam) { + slicedString = externalTrackingURL.substring(positionOfLinkParam, externalTrackingURL.length); - productTitle = this.model.get('title'); - productTitleProcessed = productTitle - .replace(/[\/. ,:-]+/g, "_") - .toLowerCase() - .slice( - 0, - Math.min(10, productTitle.length) - ); + if (isDrupalEntityOrNode) { - slicedString = "&subid=" - + this.model.get('entityType') - + '-' + this.model.get('entityID') - + '-' + productTitleProcessed - + containerType; - } + productTitle = this.model.get('title'); + productTitleProcessed = productTitle + .replace(/[\/. ,:-]+/g, "_") + .toLowerCase() + .slice( + 0, + Math.min(10, productTitle.length) + ); - externalTrackingURL = externalTrackingURL.substr(0, positionOfLinkParam) + slicedString + externalTrackingURL.substr(positionOfLinkParam); + slicedString = "&subid=" + + this.model.get('entityType') + + '-' + this.model.get('entityID') + + '-' + productTitleProcessed + + containerType; } - break; + externalTrackingURL = externalTrackingURL.substr(0, positionOfLinkParam) + slicedString + externalTrackingURL.substr(positionOfLinkParam); + } - } + break; - if (externalTrackingURL != this.model.get('url')) { - this.model.set('tracking-url', externalTrackingURL); - this.$el.attr("data-external-url", externalTrackingURL); - } - }, - collectTrackingData: function () { - var tmpEnhancedEcommerceData = { - list: this.model.get('componentType'), - category: this.model.get('shop'), - name: this.model.get('title'), - id: this.model.get('productId'), - price: this.model.get('price'), - brand: this.model.get('brand'), - provider: this.model.get('provider'), - productCategory: this.model.get('productCategory'), - containerType: this.model.get('containerType') || '' - }; - - if (this.model.has('productIndex')) { - tmpEnhancedEcommerceData.position = this.model.get('productIndex'); - } + } - this.model.set('enhancedEcommerce', tmpEnhancedEcommerceData); - }, - setProductIndex: function () { - if (this.$containerElement.length > 0) { - var tmpProductIndex = this.$containerElement.find('.item-ecommerce').not('.item-product-slider').index(this.$el); - this.model.set('productIndex', tmpProductIndex); - } - }, - trackImpression: function () { - if (this.model.get('disabled') == true) return; + if (externalTrackingURL != this.model.get('url')) { + this.model.set('tracking-url', externalTrackingURL); + this.$el.attr("data-external-url", externalTrackingURL); + } + }, + collectTrackingData: function () { + var tmpEnhancedEcommerceData = { + list: this.model.get('componentType'), + category: this.model.get('shop'), + name: this.model.get('title'), + id: this.model.get('productId'), + price: this.model.get('price'), + brand: this.model.get('brand'), + provider: this.model.get('provider'), + productCategory: this.model.get('productCategory'), + containerType: this.model.get('containerType') || '' + }; + + if (this.model.has('productIndex')) { + tmpEnhancedEcommerceData.position = this.model.get('productIndex'); + } - this.model.set('trackImpression', true); - if(typeof TrackingManager != 'undefined') { - TrackingManager.trackEcommerce(this.model.get('enhancedEcommerce'), 'impressions', this.advancedTrackingData); - } - }, - trackProductClick: function () { - if(typeof TrackingManager != 'undefined') { - TrackingManager.trackEcommerce(this.model.get('enhancedEcommerce'), 'productClick', this.advancedTrackingData); - } - }, - onProductClickHandler: function (pEvent) { - this.trackProductClick(); - }, - onEnterHandler: function (pDirection) { - // BaseInviewView.prototype.onEnterHandler.call(this, pDirection); - this.trackImpression(); - this.inview.destroy(); + this.model.set('enhancedEcommerce', tmpEnhancedEcommerceData); + }, + setProductIndex: function () { + if (this.$containerElement.length > 0) { + var tmpProductIndex = this.$containerElement.find('.item-ecommerce').not('.item-product-slider').index(this.$el); + this.model.set('productIndex', tmpProductIndex); + } + }, + trackImpression: function () { + if (this.model.get('disabled') == true) return; + + this.model.set('trackImpression', true); + if(typeof TrackingManager != 'undefined') { + TrackingManager.trackEcommerce(this.model.get('enhancedEcommerce'), 'impressions', this.advancedTrackingData); + } + }, + trackProductClick: function () { + if(typeof TrackingManager != 'undefined') { + TrackingManager.trackEcommerce(this.model.get('enhancedEcommerce'), 'productClick', this.advancedTrackingData); } - }, { - PROVIDER_TRACDELIGHT: 'tracdelight', - PROVIDER_AMAZON: 'amazon', - PROVIDER_GENERIC: 'generic', - COMPONENT_TYPE_SLIDER: 'slider', - COMPONENT_TYPE_GRID: 'grid', - COMPONENT_TYPE_SINGLE: 'single' - }); - - window.ProductView = window.ProductView || BurdaInfinite.views.products.ProductView; - -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); + }, + onProductClickHandler: function (pEvent) { + this.trackProductClick(); + }, + onEnterHandler: function (pDirection) { + // BaseInviewView.prototype.onEnterHandler.call(this, pDirection); + this.trackImpression(); + this.inview.destroy(); + } +}, { + PROVIDER_TRACDELIGHT: 'tracdelight', + PROVIDER_AMAZON: 'amazon', + PROVIDER_GENERIC: 'generic', + COMPONENT_TYPE_SLIDER: 'slider', + COMPONENT_TYPE_GRID: 'grid', + COMPONENT_TYPE_SINGLE: 'single' +}); + +export default BurdaInfinite.views.products.ProductView; diff --git a/js/infinite/views/sticky-view.js b/js/infinite/views/sticky-view.js index 6b792d79..f0cba68f 100644 --- a/js/infinite/views/sticky-view.js +++ b/js/infinite/views/sticky-view.js @@ -1,89 +1,88 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { AppConfig, ModelIds } from '../consts' +import { BaseDynamicView } from './index' - "use strict"; +"use strict"; - BurdaInfinite.views.StickyView = BaseDynamicView.extend({ - pageOffsetsModel: {}, - offsetsPageModel: {}, - $sticky: null, - hasAd: false, - posTop: 0, - offsetTop: 0, - height: 0, - contentHeight: 0, - lastBreakpoint: '', - elementBreakpoints: [], - initialize: function (pOptions) { - BaseDynamicView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.StickyView = BaseDynamicView.extend({ + pageOffsetsModel: {}, + offsetsPageModel: {}, + $sticky: null, + hasAd: false, + posTop: 0, + offsetTop: 0, + height: 0, + contentHeight: 0, + lastBreakpoint: '', + elementBreakpoints: [], + initialize: function (pOptions) { + BaseDynamicView.prototype.initialize.call(this, pOptions); - this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); - this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); - this.offsetTop = this.offsetsPageModel.get('offsets').top; - this.posTop = Math.floor(this.$el.offset().top); - this.height = Math.floor(this.$el.height()); - this.elementBreakpoints = $(this.$el.data('breakpoints')).toArray(); - this.hasAd = this.$el.find('.ad-container').length > 0; + this.pageOffsetsModel = BM.reuseModel(ModelIds.pageOffsetsModel); + this.offsetsPageModel = this.pageOffsetsModel.getModel('offsetPage'); + this.offsetTop = this.offsetsPageModel.get('offsets').top; + this.posTop = Math.floor(this.$el.offset().top); + this.height = Math.floor(this.$el.height()); + this.elementBreakpoints = $(this.$el.data('breakpoints')).toArray(); + this.hasAd = this.$el.find('.ad-container').length > 0; - /** - * default breakpoints - */ - if (this.elementBreakpoints.length <= 0) this.elementBreakpoints.push('tablet', 'desktop'); - this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); + /** + * default breakpoints + */ + if (this.elementBreakpoints.length <= 0) this.elementBreakpoints.push('tablet', 'desktop'); + this.breakpointDeviceModel = this.deviceModel.getDeviceBreakpoints().findWhere({active: true}); - this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); - this.listenTo(this.model, 'change:contentHeight', this.onContentHeightHandler, this); - this.listenTo(this.offsetsPageModel, 'change:offsets', this.onOffsetHandler, this); + this.listenTo(this.deviceModel.getDeviceBreakpoints(), 'change:active', this.onDeviceBreakpointHandler, this); + this.listenTo(this.model, 'change:contentHeight', this.onContentHeightHandler, this); + this.listenTo(this.offsetsPageModel, 'change:offsets', this.onOffsetHandler, this); - this.updateView(); - }, - updateView: function () { - var tmpCurrentBreakpoint = this.breakpointDeviceModel.id; + this.updateView(); + }, + updateView: function () { + var tmpCurrentBreakpoint = this.breakpointDeviceModel.id; - if (this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 && this.lastBreakpoint != tmpCurrentBreakpoint) { - this.createStickiness(); - } else if (this.$sticky != null) { - this.removeStickiness(); - } - - this.lastBreakpoint = tmpCurrentBreakpoint; - }, - createStickiness: function () { - this.$sticky = this.$el.stick_in_parent({ - sticky_class: 'stuck', - spacer: false, - offset_top: this.offsetTop + AppConfig.padding - }); - - this.$sticky.on("sticky_kit:stick", $.proxy(function (e) { - if (this.$el.parent().outerHeight(true) < this.$el.outerHeight(true)) { - this.$el.parent().css('min-height', this.$el.outerHeight(true)); - } - }, this)).on("sticky_kit:unstick", $.proxy(function (e) { - if (this.$el.parent().css('min-height') > 1) { - this.$el.parent().css('min-height', 1); - } - }, this)); - }, - removeStickiness: function () { - if (this.$sticky == null) return; - this.$el.trigger("sticky_kit:detach"); - }, - refresh: function () { - this.$el.trigger("sticky_kit:recalc"); - }, - onDeviceBreakpointHandler: function (pModel) { - this.breakpointDeviceModel = pModel; - this.updateView(); - }, - onOffsetHandler: function (pModel) { - this.offsetTop = pModel.get('offsets').top; - this.$el.trigger("sticky_kit:recalc_offset_top", [this.offsetTop + AppConfig.padding]); - }, - onContentHeightHandler: function (pModel) { - this.refresh(); + if (this.elementBreakpoints.indexOf(tmpCurrentBreakpoint) >= 0 && this.lastBreakpoint != tmpCurrentBreakpoint) { + this.createStickiness(); + } else if (this.$sticky != null) { + this.removeStickiness(); } - }); - window.StickyView = window.StickyView || BurdaInfinite.views.StickyView; + this.lastBreakpoint = tmpCurrentBreakpoint; + }, + createStickiness: function () { + this.$sticky = this.$el.stick_in_parent({ + sticky_class: 'stuck', + spacer: false, + offset_top: this.offsetTop + AppConfig.padding + }); + + this.$sticky.on("sticky_kit:stick", $.proxy(function (e) { + if (this.$el.parent().outerHeight(true) < this.$el.outerHeight(true)) { + this.$el.parent().css('min-height', this.$el.outerHeight(true)); + } + }, this)).on("sticky_kit:unstick", $.proxy(function (e) { + if (this.$el.parent().css('min-height') > 1) { + this.$el.parent().css('min-height', 1); + } + }, this)); + }, + removeStickiness: function () { + if (this.$sticky == null) return; + this.$el.trigger("sticky_kit:detach"); + }, + refresh: function () { + this.$el.trigger("sticky_kit:recalc"); + }, + onDeviceBreakpointHandler: function (pModel) { + this.breakpointDeviceModel = pModel; + this.updateView(); + }, + onOffsetHandler: function (pModel) { + this.offsetTop = pModel.get('offsets').top; + this.$el.trigger("sticky_kit:recalc_offset_top", [this.offsetTop + AppConfig.padding]); + }, + onContentHeightHandler: function (pModel) { + this.refresh(); + } +}); -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); +export default BurdaInfinite.views.StickyView diff --git a/js/infinite/views/teaser-feed-view.js b/js/infinite/views/teaser-feed-view.js index 48105a90..fb8823a9 100644 --- a/js/infinite/views/teaser-feed-view.js +++ b/js/infinite/views/teaser-feed-view.js @@ -1,132 +1,130 @@ -(function ($, Drupal, drupalSettings, Backbone, BurdaInfinite) { +import { BaseView } from './index' - "use strict"; +"use strict"; - BurdaInfinite.views.TeaserFeedView = BaseView.extend({ - advancedTrackingData: null, - $containerElement: [], - inview: null, - initialize: function (pOptions) { - BaseView.prototype.initialize.call(this, pOptions); +BurdaInfinite.views.TeaserFeedView = BaseView.extend({ + advancedTrackingData: null, + $containerElement: [], + inview: null, + initialize: function (pOptions) { + BaseView.prototype.initialize.call(this, pOptions); - this.delegateInview(); - this.addListener(); - this.createModel(); + this.delegateInview(); + this.addListener(); + this.createModel(); - if (this.infiniteBlockDataModel) { + if (this.infiniteBlockDataModel) { - if (this.infiniteBlockDataModel.has('trackingContainerType') && typeof ProductView !== 'undefined' && this.model.get('componentType') != ProductView.COMPONENT_TYPE_SLIDER) { - this.model.set('containerType', this.infiniteBlockDataModel.get('trackingContainerType').toLowerCase()); - } - - if (this.infiniteBlockDataModel.has('uuid')) { - this.advancedTrackingData = TrackingManager.getAdvTrackingByUuid(this.infiniteBlockDataModel.has('uuid')); - this.extendDataLayerInfo(); - } - - //if (this.infiniteBlockDataModel.getElement().length > 0) { - // this.$containerElement = this.infiniteBlockDataModel.getElement(); - // this.setTeaserIndex(); //set on this position to override the function - //} + if (this.infiniteBlockDataModel.has('trackingContainerType') && typeof ProductView !== 'undefined' && this.model.get('componentType') != ProductView.COMPONENT_TYPE_SLIDER) { + this.model.set('containerType', this.infiniteBlockDataModel.get('trackingContainerType').toLowerCase()); } - this.collectTrackingData(); - }, - delegateInview: function () { - if (this.inview != null) this.inview.destroy(); - - this.inview = this.$el.find('.teaser__img-container') - .inview({ - offset: 'bottom', - enter: _.bind(this.onInviewEnterHandler, this), - exit: _.bind(this.onInviewExitHandler, this) - }); - }, - onInviewEnterHandler: function (pDirection) { - this.onEnterHandler(pDirection); - }, - onInviewExitHandler: function (pDirection) { - - }, - addListener: function () { - this.$el.unbind('click.teaser_feed').bind('click.teaser_feed', $.proxy(this.onTeaserClickHandler, this)); - }, - createModel: function () { - //var tmpURL = this.$el.data('external-url') || this.$el.data('internal-url'), - // $tmpURLElement = []; - // - //if(!tmpURL) { - // $tmpURLElement = this.$el.find('.teaser__img-container'); - // tmpURL = $tmpURLElement.data('external-url') || $tmpURLElement.data('internal-url')); - //} - - this.model.set('nid', this.$el.data('nid')); - this.model.set('title', jQuery.trim(this.$el.find('.teaser__title').text())); - //this.model.set('url', tmpURL); - }, - extendDataLayerInfo: function () { - if (this.advancedTrackingData.hasOwnProperty('page')) { - this.model.set('entityType', this.advancedTrackingData.page.entityType); - this.model.set('contentType', this.advancedTrackingData.page.contentType); - this.model.set('entityID', this.advancedTrackingData.page.entityID); - this.model.set('entityName', this.advancedTrackingData.page.name); - } - }, - collectTrackingData: function () { - var tmpData = { - category: 'teaser-feed-ctr', - label: this.model.get('title'), - elementEntityID: this.model.get('nid') - }; - - if (this.model.has('productIndex')) { - //custom dimension - tmpData.pos = this.model.get('productIndex'); + if (this.infiniteBlockDataModel.has('uuid')) { + this.advancedTrackingData = TrackingManager.getAdvTrackingByUuid(this.infiniteBlockDataModel.has('uuid')); + this.extendDataLayerInfo(); } - this.model.set('teaserTracking', tmpData); - }, - //setTeaserIndex: function () { - // if (this.$containerElement.length > 0) { - // var tmpTeaserIndex = this.$containerElement.find('.teaser').index(this.$el); - // this.model.set('productIndex', tmpTeaserIndex); - // } - //}, - trackImpression: function () { - if (this.model.get('disabled') == true) return; - - this.model.set('trackImpression', true); - if (typeof TrackingManager !== 'undefined' && this.model.get('teaserTracking') !== undefined) { - this.model.get('teaserTracking').action = 'impression'; - this.model.get('teaserTracking').eventNonInteraction = 'true'; - - TrackingManager.trackEvent(this.model.get('teaserTracking'), this.advancedTrackingData); - } - }, - trackTeaserClick: function () { - if (typeof TrackingManager != 'undefined') { - this.model.get('teaserTracking').action = 'click'; - this.model.get('teaserTracking').eventNonInteraction = 'false'; - TrackingManager.trackEvent(this.model.get('teaserTracking'), this.advancedTrackingData); - } - }, - refresh: function () { - BaseView.prototype.refresh.call(this); - this.addListener(); - this.createModel(); - this.collectTrackingData(); - this.delegateInview(); - }, - onTeaserClickHandler: function (pEvent) { - this.trackTeaserClick(); - }, - onEnterHandler: function (pDirection) { - // BaseInviewView.prototype.onEnterHandler.call(this, pDirection); - this.trackImpression(); - this.inview.destroy(); + //if (this.infiniteBlockDataModel.getElement().length > 0) { + // this.$containerElement = this.infiniteBlockDataModel.getElement(); + // this.setTeaserIndex(); //set on this position to override the function + //} } - }); - window.TeaserFeedView = window.TeaserFeedView || BurdaInfinite.views.TeaserFeedView; + this.collectTrackingData(); + }, + delegateInview: function () { + if (this.inview != null) this.inview.destroy(); + + this.inview = this.$el.find('.teaser__img-container') + .inview({ + offset: 'bottom', + enter: _.bind(this.onInviewEnterHandler, this), + exit: _.bind(this.onInviewExitHandler, this) + }); + }, + onInviewEnterHandler: function (pDirection) { + this.onEnterHandler(pDirection); + }, + onInviewExitHandler: function (pDirection) { + + }, + addListener: function () { + this.$el.unbind('click.teaser_feed').bind('click.teaser_feed', $.proxy(this.onTeaserClickHandler, this)); + }, + createModel: function () { + //var tmpURL = this.$el.data('external-url') || this.$el.data('internal-url'), + // $tmpURLElement = []; + // + //if(!tmpURL) { + // $tmpURLElement = this.$el.find('.teaser__img-container'); + // tmpURL = $tmpURLElement.data('external-url') || $tmpURLElement.data('internal-url')); + //} + + this.model.set('nid', this.$el.data('nid')); + this.model.set('title', jQuery.trim(this.$el.find('.teaser__title').text())); + //this.model.set('url', tmpURL); + }, + extendDataLayerInfo: function () { + if (this.advancedTrackingData.hasOwnProperty('page')) { + this.model.set('entityType', this.advancedTrackingData.page.entityType); + this.model.set('contentType', this.advancedTrackingData.page.contentType); + this.model.set('entityID', this.advancedTrackingData.page.entityID); + this.model.set('entityName', this.advancedTrackingData.page.name); + } + }, + collectTrackingData: function () { + var tmpData = { + category: 'teaser-feed-ctr', + label: this.model.get('title'), + elementEntityID: this.model.get('nid') + }; + + if (this.model.has('productIndex')) { + //custom dimension + tmpData.pos = this.model.get('productIndex'); + } -})(jQuery, Drupal, drupalSettings, Backbone, BurdaInfinite); \ No newline at end of file + this.model.set('teaserTracking', tmpData); + }, + //setTeaserIndex: function () { + // if (this.$containerElement.length > 0) { + // var tmpTeaserIndex = this.$containerElement.find('.teaser').index(this.$el); + // this.model.set('productIndex', tmpTeaserIndex); + // } + //}, + trackImpression: function () { + if (this.model.get('disabled') == true) return; + + this.model.set('trackImpression', true); + if (typeof TrackingManager !== 'undefined' && this.model.get('teaserTracking') !== undefined) { + this.model.get('teaserTracking').action = 'impression'; + this.model.get('teaserTracking').eventNonInteraction = 'true'; + + TrackingManager.trackEvent(this.model.get('teaserTracking'), this.advancedTrackingData); + } + }, + trackTeaserClick: function () { + if (typeof TrackingManager != 'undefined') { + this.model.get('teaserTracking').action = 'click'; + this.model.get('teaserTracking').eventNonInteraction = 'false'; + TrackingManager.trackEvent(this.model.get('teaserTracking'), this.advancedTrackingData); + } + }, + refresh: function () { + BaseView.prototype.refresh.call(this); + this.addListener(); + this.createModel(); + this.collectTrackingData(); + this.delegateInview(); + }, + onTeaserClickHandler: function (pEvent) { + this.trackTeaserClick(); + }, + onEnterHandler: function (pDirection) { + // BaseInviewView.prototype.onEnterHandler.call(this, pDirection); + this.trackImpression(); + this.inview.destroy(); + } +}); + +export default BurdaInfinite.views.TeaserFeedView; diff --git a/templates/node/look/node--look.html.twig b/templates/node/look/node--look.html.twig index dbf79c8b..299cb132 100644 --- a/templates/node/look/node--look.html.twig +++ b/templates/node/look/node--look.html.twig @@ -11,7 +11,8 @@
{% block content_body %} - {{ attach_library('infinite/infinite.views.look-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.look-view') }}#} {{ content }} {% endblock %} -
\ No newline at end of file + diff --git a/templates/node/node--article--teaser-default.html.twig b/templates/node/node--article--teaser-default.html.twig index e69fd9cf..37122c99 100644 --- a/templates/node/node--article--teaser-default.html.twig +++ b/templates/node/node--article--teaser-default.html.twig @@ -15,7 +15,8 @@ {% set attributes = attributes.setAttribute('data-view-type', dataViewType) %} {% set attributes = attributes.setAttribute('data-nid', nid) %} -{{ attach_library('infinite/infinite.views.teaser-feed-view') }} +{# TODO remove next line, after testing #} +{#{{ attach_library('infinite/infinite.views.teaser-feed-view') }}#} {% block teaser_img_container_wrapper %} diff --git a/templates/node/node--ecommerce-slider.html.twig b/templates/node/node--ecommerce-slider.html.twig index a33ecf01..e30c443b 100644 --- a/templates/node/node--ecommerce-slider.html.twig +++ b/templates/node/node--ecommerce-slider.html.twig @@ -1,4 +1,5 @@ -{{ attach_library('infinite/infinite.views.ecommerce-slider-view') }} +{# TODO remove next line, after testing #} +{#{{ attach_library('infinite/infinite.views.ecommerce-slider-view') }}#} {% set container_classes = [ 'ecommerce-slider', @@ -65,4 +66,4 @@ {% endif %} - \ No newline at end of file + diff --git a/templates/paragraphs/paragraph--spotlight.html.twig b/templates/paragraphs/paragraph--spotlight.html.twig index 15c72b1a..66869747 100644 --- a/templates/paragraphs/paragraph--spotlight.html.twig +++ b/templates/paragraphs/paragraph--spotlight.html.twig @@ -93,7 +93,8 @@ {% if anchor_links %} {% block anchor_block %} - {{ attach_library('infinite/infinite.views.anchor-navigation-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.anchor-navigation-view') }}#}
{% endblock %} {% elseif lexicon_links %} - {{ attach_library('infinite/infinite.views.anchor-navigation-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.anchor-navigation-view') }}#}
{% include '@infinite/product/advertising-product-inner.html.twig' %}
-{% endif %} \ No newline at end of file +{% endif %} diff --git a/templates/product/advertising-product--look.html.twig b/templates/product/advertising-product--look.html.twig index c297371d..3e57948e 100644 --- a/templates/product/advertising-product--look.html.twig +++ b/templates/product/advertising-product--look.html.twig @@ -37,9 +37,10 @@ {% endif %} {% if content.status %} - {{ attach_library('infinite/infinite.views.product-look-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.product-look-view') }}#}
{% include '@infinite/product/advertising-product-inner-look.html.twig' %}
-{% endif %} \ No newline at end of file +{% endif %} diff --git a/templates/product/advertising-product--single-product.html.twig b/templates/product/advertising-product--single-product.html.twig index 0c24b07f..d4f907a2 100644 --- a/templates/product/advertising-product--single-product.html.twig +++ b/templates/product/advertising-product--single-product.html.twig @@ -40,7 +40,8 @@ {% endif %} {% if content.status %} - {{ attach_library('infinite/infinite.views.product-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.product-view') }}#}
diff --git a/templates/product/advertising-product.html.twig b/templates/product/advertising-product.html.twig index 185a1a56..136b9a1f 100644 --- a/templates/product/advertising-product.html.twig +++ b/templates/product/advertising-product.html.twig @@ -38,7 +38,8 @@ {% endif %} {% if content.status %} - {{ attach_library('infinite/infinite.views.product-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.product-view') }}#}
{% include '@infinite/product/advertising-product-inner.html.twig' %} diff --git a/templates/product/product.html.twig b/templates/product/product.html.twig index 152c2148..ef4ae04d 100644 --- a/templates/product/product.html.twig +++ b/templates/product/product.html.twig @@ -17,7 +17,8 @@ */ #} {% if content.active %} - {{ attach_library('infinite/infinite.views.product-view') }} + {# TODO remove next line, after testing #} + {#{{ attach_library('infinite/infinite.views.product-view') }}#} {% set data_attributes = data_attributes.setAttribute('data-view-type', 'productView') %}