my question is that can i use bootstrap's modal plugin's backdrop as a separate standalone component, if i have to use backdrop for some other purpose.
If possible then how to use it.
Thanks in advance
You can't use bootstrap backdrop as a standalone component.
I have written the following js function, inherited from bootstrap, for using backdrop.
The function use jquery like bootstrap.
var backdrop = function () {
var that = this
var animate = 'fade'
that.$body = $(document.body)
that.__TRANSITION_DURATION = 300
that.__BACKDROP_TRANSITION_DURATION = 150
this.show = function (callback) {
var doAnimate = $.support.transition && animate
that.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(that.$body)
if (doAnimate) that.$backdrop[0].offsetWidth // force reflow
that.$backdrop.addClass('in')
if (!callback) return
doAnimate ?
that.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(that.__BACKDROP_TRANSITION_DURATION) :
callback()
}
this.hide = function (callback) {
if (that.$backdrop) {
var callbackRemove = function () {
that.$backdrop && that.$backdrop.remove()
that.$backdrop = null
callback && callback()
}
$.support.transition ?
that.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(that.__BACKDROP_TRANSITION_DURATION) :
callbackRemove()
}
}
return this
}
and this is the code for using it:
function showBackdrop() {
var bd = new backdrop()
bd.show(function () { })
setTimeout(function () { bd.hide() }, 2000)
}
in both functions show and hide You have a callback for doing custom actions, exactly like bootstrap.
Note. You must set the show callback function for backdrop taking effect. For hide function it's no required.
Related
I'm facing an issue where the events happening in the owl carousel does not update data values outside of the function
This is my code:
endScenario: function() {
$(".owl-carousel").on('changed.owl.carousel', function(e) {
this.carouselIndex = e.item.index;
var numCarouselItems = $('.carousel__item').length - 1;
if (numCarouselItems === this.carouselIndex) {
this.isEndingActive = true
}
console.log(this.carouselIndex)
console.log(this.numCarouselItems)
console.log("this is inside the owl function : " + this.isEndingActive)
});
console.log("this is outside the owl function : " + this.isEndingActive)
}
data: {
isEndingActive: false,
}
The user is supposed to scroll through the carousel and when the user is at the final slide of the carousel, it will trigger the endScenario function which suppose to update the isEndingActive: false -> true but when the requirement is fulfil, it does not trigger the change from false to true. Is there a reason why and how do I rectify this?
it seems the usage of this
the outside this is not equal the inside this
you can resolve it by arrow function
$(".owl-carousel").on('changed.owl.carousel', e => {}
or you can save a variable
endScenario: function() {
const self = this;
$(".owl-carousel").on('changed.owl.carousel', function(e){
//use self replace this
});
}
I am using element ui el-image. And I want to preview my image when clicked with (:preview-src-list). But When I click first time it doesnt preview anything. just add's my downloaded image. So I need to click 2 times. But I want to click 1 time.
Here is my template code:
<el-image :src="src"
:preview-src-list="srcList"
#click="imgClick"></el-image>
ts code:
src = null;
srcList = [];
product = 'shoe1';
imgClick() {
prevImg(product).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.srclist = [url];
});
}
#Watch("product")
changed(value) {
getProductImage(value).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.src = url;
}).catc(e => {
alert(e);
});
}
mounted() {
this.changed(product);
}
I think these things happen because when you click on that image it will trigger clickHandler:
...
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
...
}
...
From source
And the preview is the computed property:
...
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
...
From source
So nothing happened in the first click but after that you set preview-src-list and click it again then it works.
If you code is synchronous you can use event like mousedown which will trigger before click event.
<el-image
:src="url"
:preview-src-list="srcList"
#mousedown="loadImages">
</el-image>
Example
But if you code is asynchronous you can use refs and call clickHandler after that.
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
Example
i have several singleton views in my SPA, each of these view contain the same widget.
When the view is activated i take some parameters from the activate callback and pass it to the widget and it works fine.
But if i navigate the second time into the view (with different parameters into the activate callback)
the activate method of the widgets is rightly not raised.
How can i pass the fresh data to the widgets ?
I tried to make the parameter observable and subscribe it into the widget (settings.params.subscribe) and it works, but i don't think it's a good solution.
This should be pretty simple assuming you are returning a constructor from your widget -
View model -
var thisWidget = new widget(someArbitraryData)
function createWidget() {
dialog.show(thisWidget);
}
// later
function updateWidget() {
thisWidget.refreshData(newArbitraryData);
}
Widget module -
define([], function () {
var ctor = function () {
var self = this;
self.data = ko.observable();
};
ctor.prototype.refreshData = function (newData) {
var self = this;
self.data(newData);
};
ctor.prototype.activate = function (activationData) {
var self = this;
self.data(activationData);
};
});
The second approach, where I hardcode the input id's and connect them to onclick events works properly.
But, when I use the first approach, it doesn't work.
The code executes in this manner.
select1.on('change',function(evt) {
requiredFunction(select8.id);//select9 is not present (so I changed loop end value from inputs.length -1 to inputs.length -2 )
}
Am I missing some event handling principles in dojo?
Approach1:
function assignOnClickEvents(table) {
var inputs = document.getElementById(table).getElementsByClassName('classname');
for (var i = 0; i < (inputs.length - 1); i++) {
dijit.byId(inputs[i].id).on('change', function (evt) {
requiredFunction(inputs[i+1].id);
});
}
}
Approach2:
function assignOnClickEvents() {
var select1 = dijit.byId('select1');
var select2 = dijit.byId('select2');
var select3 = dijit.byId('select3');
var select4 = dijit.byId('select4');
var select5 = dijit.byId('select5');
var select6 = dijit.byId('select6');
var select7 = dijit.byId('select7');
var select8 = dijit.byId('select8');
var select9 = dijit.byId('select9');
select1.on('change', function (evt) {
requiredFunction('select2');
});
select2.on('change', function (evt) {
requiredFunction('select3');
});
select3.on('change', function (evt) {
requiredFunction('select4');
});
select4.on('change', function (evt) {
requiredFunction('select5');
});
select5.on('change', function (evt) {
requiredFunction('select6');
});
select6.on('change', function (evt) {
requiredFunction('select7');
});
select7.on('change', function (evt) {
requiredFunction('select8');
});
select8.on('change', function (evt) {
requiredFunction('select9');
});
}
You're mixing DOM node IDs and Dijit IDs. This could be a possible reason why your code isn't working.
To fix this, you could try the following approach:
var inputs = dijit.findWidgets(table); // Returns widgets, not DOM nodes
for(var i = 0;i < inputs.length - 1;i++) {
inputs[i].on('change', function(evt) {
// Remind: this returns the widget ID, not the DOM ID
requiredFunction(inputs[i+1].id);
});
}
In dojo there is a difference between widgets and DOM nodes. So using DOM functions (to retrieve a DOM node by ID or by classname) will not always work. They could work, but that's not always the fact.
You can also call your function requiredFunction() as follow :
<input data-dojo-attach-event="onChange:requiredFunction"></input>
This will reduce your time of looping and work similar as you want.
All the best.
I have a form with dynamic fields. In the afterrender event of the form I want to set the afterLabelTextTpl property. I can set this property but I can't see it change in my form. How can I achieve this?
Snippet:
listeners: {
beforerender: function () {
var fields = me.getForm().getFields();
Ext.each(fields.items, function (f, idx) {
f.afterLabelTextTpl = requiredTpl;
console.log(f.afterLabelTextTpl);
}); //eo Ext.each
}
}
Edit:
I was looking for the beforerender method
Try
f.labelEl.dom.innerHTML = "LABEL:<span style='color:red;font-weight:bold' data-qtip='Required'>*</span>";
You can not use this property after the component is already rendered.
The initRenderTpl (which makes use of the label templates) method is run only if the component is not yet rendered. Once its rendered it will not run again.
You will need to update the DOM directly.
I would recomend something like this in your form:
setRequired: function(field, index) {
field.afterLabelTextTpl = requiredTpl;
},
initComponent: function(arguments) {
var me = this;
this.on('beforeadd', function(me, field){
var fields;
if (field.isXType('fieldset')) {
fields = field.query('field');
Ext.each(fields, me.setRequired);
} else {
me.setRequired(field);
}
});
// rest of logic
me.callParent(arguments);
},