i have simple dropdown, and i need to hide (fadeout) it by clicking on the document
this is my jquery code:
var expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(formCheckbox).fadeOut(200);
} else {
$(this).addClass('active');
$(formCheckbox).fadeIn(100);
}
});
$('body').not('.filterShow, .checkboxWrap').click(function() {
$(formCheckbox).fadeOut(100);
});
SEE JSFIDDLE
Remove "e.preventDefault" which has no use here, add "return false" to prevent event propagation to its parent, use "document" instead of "body" as the selector for fading the dropdownlist upon clicking anywhere on the document.
$(document).ready(function(){
expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
formCheckbox.fadeOut(200);
} else {
$(this).addClass('active');
formCheckbox.fadeIn(100);
}
return false;
});
$(document).click(function (e) {
if (expandCheckbox.hasClass('active')) {
expandCheckbox.removeClass('active');
formCheckbox.fadeOut(200);
}
return false;
});
formCheckbox.find('input:checkbox').click(function (e) {
e.stopPropagation();
});
});
Related
I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.
<script>
import SemanticModal from 'vue-ya-semantic-modal'
export default {
components: { SemanticModal: SemanticModal() },
name: 'ModalBody',
props: ['active1',],
data() {
return {
visible: false
}
},
methods: {
close() {
this.$emit('sendValue', false); //this is working
this.visible = false
},
open () {
this.visible = true
},
},
watch: {
active1 () {
if (this.active1 && !this.visible) this.open()
else if (!this.active1 && this.visible) this.close()
},
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
var modal = document.getElementsByClassName("modal");
el.addEventListener('click', function (event) {
if (!modal[0].contains(event.target)) {
vNode.context.$emit('sendValue', false); //this is not working
this.visible = false
}
})
}
}
}
}
}
I am calling that model (child) component in parent component like below
<modal-body :active1="active1" #sendValue="active1 = $event"></modal-body>
I need to change the below props active1 value to false from child to parent component.
You are handling click event by using directives.
According to your requirement , clickoutside directive should emit sendValue event from child to parent. But i feel like your code has some complications.
The proper code to accomplish your scenario is below
directives: {
'clickoutside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
console.log("binding clicked");
vNode.context.$emit('sendValue', false);
}
}
}
}
if your objective is to use click event you can use #click binding to accomplish the same
I am implementing dragdrop functionality with the help of directives.
#Directive({
selector: '[Droppable]',
host:{
'(dragenter)':'onDragEnter($event)',
'(dragover)':'onDragOver($event)',
'(dragleave)':'onDragLeave($event)',
'(drop)':'onDrop($event)'
}
})
export class DragDropDirective {
#Input('Droppable') isDropable:boolean;
#Input() set doBoarderHighLight(decision:boolean) {
this._doBoarderHighLight = decision;
this._doBackgroundHighLight = !decision;
}
#Input() doBackgroundHighLight(decision:boolean) {
this._doBackgroundHighLight = decision;
this._doBoarderHighLight = !decision;
}
#Output() OnDrop = new EventEmitter(false);
_doBoarderHighLight:boolean = false;
_doBackgroundHighLight:boolean = true;
_isDropable:boolean = true;
el:ElementRef;
constructor(public _el:ElementRef) {
this.el = _el;
}
onDragOver(e:any) {
e.preventDefault();
}
onDragEnter(e:any) {
e.preventDefault();
e.stopPropagation();
if (this._doBoarderHighLight) {
this.el.nativeElement.addClass("drag-over");
this.el.nativeElement.addClass("highlight-border");
}
else {
this.el.nativeElement.addClass("drag-over");
this.el.nativeElement.addClass("highlight-background");
}
}
onDragLeave(e:any) {
e.preventDefault();
e.stopPropagation();
if (this._doBoarderHighLight) {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-border");
}
else {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-background");
}
}
onDrop(e:any) {
e.preventDefault();
e.stopPropagation();
Utils.nextEventIfExist(e, this.OnDrop);
if (this._doBoarderHighLight) {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-border");
}
else {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-background");
}
}
}
And I am using the directive on table rows,
<tbody *ngFor="let row of rows;#i = index">
<tr [Droppable]="isDropableRow" (OnDrop)="OnDropRow($event)" [ngClass]="{'row-data':true,'active':row.isSelected,'disabled-row':!isEnabled(row)}" (click)="onRowClick($event,row)">
The problem is that, the drag events fires very slowly, as you can see I've adding and removing classes to highlight the rows on dragEnter and DragLeave.
The thing I got is that the slowness is from angular2's zone js, may be the problem in my code or the problem in angular.
I think this is caused by https://github.com/angular/angular/issues/6311
There is already a PR https://github.com/angular/angular/pull/8761
I am calling a function when the user has panned the map with:
$('#updateTheMap').click(function() {
if (document.getElementById('updateMap').checked) {
// stop the the dragend event...
}
else {
map.on('dragend', function() {
sortBinis(simpleFilterSql);
});
}
});
But I can not figure out how to end this event?
Use a variable:
var updateTheMap = true;
$('#updateTheMap').click(function() {
updateTheMap = document.getElementById('updateMap').checked;
});
map.on('dragend', function() {
if (updateTheMap) sortBinis(simpleFilterSql);
});
If by 'end this event' you mean 'remove the event listener' you can use map.off()
function onDragend(e) { sortBinis(simpleFilterSql); }
$('#updateTheMap').click(function() {
if (document.getElementById('updateMap').checked) {
map.off('dragend', onDragend);
}
else {
map.on('dragend', onDragend);
}
});
Is it possible to set turn the default spell checker on by default. Without clicking the button in the toolbar each time?
I am using the default browser spell checker functionality in the browser.
setup: function (ed) {
ed.addCommand('mceSpellCheckRuntime', function() {
t = ed.plugins.spellchecker;
if (t.mceSpellCheckRuntimeTimer) {
window.clearTimeout(t.mceSpellCheckRuntimeTimer);
}
t.mceSpellCheckRuntimeTimer = window.setTimeout(function() {
t._done();
t._sendRPC('checkWords', [t.selectedLang, t._getWords()], function(r) {
if (r.length > 0) {
t.active = 1;
t._markWords(r);
ed.nodeChanged();
}
});
}, 3000); //3 seconds
});
ed.onInit.add(function(ed){
ed.pasteAsPlainText = true;
ed.execCommand('mceSpellCheckRuntime');
});
ed.onKeyUp.add(function(ed, e) {
ed.execCommand('mceSpellCheckRuntime');
});
},
Its quiet possible........:)
Try the below code.......
ed.onInit.add(function(ed, e) {
setTimeout(function () {
tinyMCE.activeEditor.controlManager.setActive('spellchecker', true); tinymce.execCommand('mceSpellCheck', true);
}, 1);
});
Nope, this is not possible due to the fact that there are so many possibilities of using a spellchecker in tinymce. The user may however define on which events the spellchecker should check (that's what you already did).
Working solution for TinyMCE 3
Create a helper function to improve UX:
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
Register a new command within TinyMCE Spell Checker plugin:
ed.addCommand('mceSpellCheckAuto', function() {
if (t.active) {
t._removeWords();
ed.nodeChanged();
t._sendRPC('checkWords', [t.selectedLang, t._getWords()], function(r) {
if (r.length > 0) {
t._markWords(r);
ed.nodeChanged();
}
});
}
});
Call your new command from a keyPress event:
ed.onKeyPress.add(delay(function() {
tinymce.execCommand('mceSpellCheckAuto', true);
}, 500));
I have this, and I am showing a div if user clicked one button and not showing it if the user clicked other. Its working but its dumb to do this way with repeatition
$j(document).ready(function() {
$j('#Button1').click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
$j("#Response").show();
});
});
$j('#Button21').click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
//do something else
});
});
});
I'd do it by adding a class to the selected buttons and then pull the event.target id from the click function:
$j('.buttons').click(function(e) {
var buttonId = e.target.id,
data = $j("form").serialize();
$j.post('file.php', data, function(response) {
switch (buttonId) {
case "Button1":
$j("#Response").show();
break;
case "Button21":
//do something else
break;
}
});
});
You need to abstract the data from the functionality.
sendClick('#Button1', function() {
$j('#Response').show();
});
sendClick('#Button21', function() {
// do something
});
sendClick function
function sendClick(selector, callback)
{
$j(selector).click( function () {
var data = $j("form").serialize();
$j.post('file.php', data, callback);
});
}
This way you can repeat the same functionality over and over by changing the selector and the callback. You could customise this even further by:
function sendClick(selector, options, callback)
{
// handle arguments
if(typeof options == 'function') {
callback = options;
options = {};
} else {
options = options || {};
}
$j.extend({
form: 'form',
file: 'file.php'
}, options);
// abstracted logic
$j(selector).click(function() {
var data = $j(options.form).serialize();
$j.post(options.file, data, callback);
});
}
then use like
sendClick('#select', {form: '#anotherForm'}, function() {
// do something
});
or
sendClick('#another', function(response) {
// something else
});
You can attach the event to both, and then, when you need to check which element triggered the event, use event.target.
$j(function() {
$j('#Button1, #Button2').click( function (event) {
var data = $j("form").serialize();
$j.post('file.php', data, function(response){
if ($(event.target).is('#Button1')) {
$j("#Response").show();
} else {
// Do something else
}
});
});
});
Here are two different ways:
You can combine the two handlers into one handler:
$j(document).ready(function () {
$j('#Button1, #Button21').click(function() {
var id = this.id;
var data = $j("form").serialize();
$j.post('file.php', data, function(response) {
if (id == 'Button1') {
// Show
} else {
// Do something else
}
});
});
});
Or write a special kind of handler:
$j.fn.clickAndPost = function (handler) {
this.click(function () {
var me = this;
var data = $j("form").serialize();
$j.post('file.php', data, function(response) {
handler.call(me);
});
});
});
...and attach two of them:
$j(document).ready(function () {
$j('#Button1').clickAndPost(function () {
// Show
});
$j('#Button21').clickAndPost(function () {
// Do something else
});
});
$j(function($) {
$('#Button1', '#Button21').click(function() {
var that = this,
data = $('form').serialize();
$.post('file.php', data, function(response) {
if ( that.id === 'Button1' ) {
$('#Response').show();
} else {
//do something else
}
});
});
});
$(document).ready(function() {
$('#Button1 #Button21').click(function() {
var that = this.attr("id");
data = $('form').serialize();
$.post('file.php', data, function(response) {
if ( that === 'Button1' ) {
$('#Response').show();
} else {
//do something else
}
});
});
});
Let me know if it's not working.