Hallo, ich habe ein Problem mit einem Text-Slider (bxSlider).
Fakten:
- Statemanager Plugin wird für m, l, xl registriert
- Verlasse ich den Viewport m zu s wird die destroy function aufgerufen
- Resize ich den Viewport wieder auf den Viewport m , wird die init function erneut aufgerufen
- soweit so gut
Probleme: (siehe Screenshot unten)
- bei der reloadTest function wird der Slider über eine Funktion .reloadSlider() neu geladen. Dabei kommt es dazu, dass me.$slider aber undefined ist. Also fange ich das mit einer if-Abfrage ab. Bin aber nicht zufrieden damit, weil in jedem zweiten console.log immer noch undefined angesprochen wird. Daher hatte ich gedacht, dass statt reloadSlider ein neues Laden des Sliders sinnvoll sei. Das ändert aber auch nichts
- in der loadTest function, welche beim betreten fes Viewport m erneut aufgerufen wird, ist nach dem erneuten Laden des Slider me.$slider aber immer noch undefined
;(function ($, window) {
"use strict";
/**
* Test Text Slider based on bxSlider.js
*
*/
$.plugin('prefixTest', {
/**
* The Defaults
*/
defaults: {
mode: 'vertical',
pager: false,
controls: false,
auto: true,
speed: 1000,
pause: 4000,
touchEnabled: false
},
/**
* The "init" prefixTest
*/
init: function() {
var me = this;
console.log('init');
me.applyDataAttributes();
me.loadTest();
me.registerEvents();
},
registerEvents: function() {
var me = this;
StateManager.on('resize', $.proxy(me.onDeviceChange, me));
$.publish('plugin/prefixTest/onRegisterEvents', [me]);
},
onDeviceChange: function() {
var me = this;
me.reloadTest();
$.publish('plugin/prefixTest/onDeviceChange', [me]);
},
loadTest: function() {
var me = this,
opts = me.opts;
console.log('before load', me.$slider);
if((typeof me.$slider == 'undefined') || (me.$slider == null)) {
me.$slider = me.$el.bxSlider(
{
mode: opts.mode,
pager: opts.pager,
controls: opts.controls,
auto: opts.auto,
speed: opts.speed,
pause: opts.pause,
touchEnabled: opts.touchEnabled
}
);
console.log('load');
}
console.log('after load', me.$slider);
$.publish('plugin/prefixTest/loadTest', [me]);
},
reloadTest: function() {
var me = this,
opts = me.opts;
console.log('before reload', me.$slider);
if((typeof me.$slider == 'undefined') || (me.$slider == null)) {
console.log('re reload');
me.$slider = me.$el.bxSlider(
{
mode: opts.mode,
pager: opts.pager,
controls: opts.controls,
auto: opts.auto,
speed: opts.speed,
pause: opts.pause,
touchEnabled: opts.touchEnabled
}
);
} else {
console.log('reload');
me.$slider.reloadSlider();
}
console.log('after reload', me.$slider);
$.publish('plugin/prefixTest/reloadTest', [me]);
},
destroy: function() {
var me = this;
StateManager.off('resize', $.proxy(me.onDeviceChange, me));
me.$slider.destroySlider();
me.$slider = null;
console.log('destroy');
console.log(me.$slider);
me._destroy();
},
});
$(document).ready(function() {
StateManager.addPlugin('.top-bar', 'prefixTest', ['m', 'l', 'xl']);
});
})(jQuery, window);
