I've created an angular directive for a tinyMce where on setup I add 2 handlers: for a blur event to hide a toolbar and for a click event to show it. Also I've created another directive where I have a textarea and a button. On button click I want a toolbar disappear and some action occur.
<body ng-app="MyApp">
<div ng-controller="MyCntrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyCntrl", function ($scope) {
}).directive("myDirective", function ( $compile) {
return {
restrict: 'E',
link: function (scope, elem) {
scope.click = function () {
console.log("click");
};
},
template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"
}
}).directive("tm", function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function() {
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
});
}
}
});
</script>
Link to the code
If I click inside of a textarea and then on a button the following happens:
when the button's height is relatively small, for example 20px, only blur event occurs, but when the height is relatively big let's say 120px both blur and click events occur.
Could you tell me why is that? My guess is that in the first case the button is overlapped by something but I cannot find but what.
Thanks
Update: It seems like a problem with tinyMCE. I've remove angular and created just a tinyMce editor and a button underneath. The same problem: doesn't work when a button is too small and works either if a button is enough big or placed above the editor.
<script type="text/javascript">
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
function myFunction() {
console.log("click");
}
</script>
<textarea></textarea>
<button onclick="myFunction()" style="height:100px;">click</button>
Plunker
Try setting a little timeout, so the button will stay in it's position during the click event:
$timeout(function() { ed.theme.panel.find("toolbar").hide() }, 100);
See this plunker
When we click on the button a toolbar becomes hidden and the button moves up so when the mouse released it's not over the same object. Mousedown event could be used to solve the problem.
Related
How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.
One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.
Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.
customButtons: {
customprev: {
text: '<',
click: function() {
alert('clicked custom button 1!');
calendar.prev();
}
},
customnext: {
text: '>',
click: function() {
alert('clicked custom button 2!');
calendar.next();
}
}
}
Regards, Cristian
The only build-in method is the events: fn () callback. From the docs
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: function (info) {
console.log(info);
}
});
calendar.render();
});
I'm creating a VR Editor using AFRAME...
I need to create an event when the user clicks on an element by mouse and to do deferent action when clicking by Aframe camera cursor.
I found the <a-scene cursor="rayOrigin: mouse"> but this would do the same click event on both mouse and cursor click.
is that possible in AFRAME?
Discriminate by the cursor element:
AFRAME.registerComponent('on-click', {
init: function () {
var self = this;
this.el.addEventListener('click', function (evt) {
if (self.el.sceneEl === evt.detail.cursorEl) {
console.log("MOUSE");
} else {
console.log("CURSOR");
}
});
}
});
Example: https://glitch.com/edit/#!/winter-sagittarius
How do I implement this code from qTip for my fullcalendar Events? This is a modal feature of the qTip plugin and I wish to display this modal whenever I click an event in the calendar.
Here is the link for the tutorial:
http://craigsworks.com/projects/qtip/demos/effects/modal#
Here's an example on how to create the qtip when an event gets clicked. For perfomance reasons, the modal is created onclick for the specified event, not onpageload for all events.
$(document).ready(function() {
// watch for click on the event elements
$(document).on('click', '.fc-event', function(){
// qtip already is created for this event -> leave this function -> the modal gets opened
if($(this).data('qtip')) {
return;
}
// no qtip for this event created -> create it
$(this).qtip(
{
content: {
title: {
text: 'Modal qTip',
button: 'Close'
},
text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! <br /><br />' +
'Much like the Boxy plugin, ' +
'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
},
position: {
target: $(document.body), // Position it via the document body...
corner: 'center' // ...at the center of the viewport
},
show: {
when: 'click', // Show it on click
solo: true // And hide all other tooltips
},
hide: false,
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},
name: 'light'
},
api: {
beforeShow: function()
{
// Fade in the modal "blanket" using the defined show speed
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
// Fade out the modal "blanket" using the defined hide speed
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
// show it after creation
$(this).qtip('toggle', true);
});
});
Perhaps someone out there can help me understand what's going on. I'm using jQuery UI dialog() to display html partials in my project. When a user clicks Add New it displays the add client form. However, when the user clicks on the Add or Cancel buttons in the dialog I get an error, "$(this).dialog is not a function". If I remove the open event and display a static form in the dialog the buttons the work fine.
ClientsController
public ActionResult ajaxCreateClient()
{
Client c = new Client();
AddToViewData(c); // adds some additional info about client
return PartialView("__ClientForm", c);
}
View: Contacts/Create
....
<p>
#Html.LabelForField(model => model.Client.Name) <!-- custom extension that I wrote -->
#Html.TextboxFor(model => model.Client.Name)
<a id="btnAddNew" href="javascript:void()">Add New</a>
</p>
....
<div id="addNew"></div>
jQuery
$(document).ready(function () {
$("#btnAddNew").click(function () {
$("#addNew").dialog("open");
});
$("#addNew").dialog({
autoOpen: false,
title: "Add Client",
width: 410,
modal: true,
resizable: false,
open: function(event, ui) {
$(this).load("#Url.Action("ajaxCreateClient", "Clients")");
},
buttons:
{
"Add": function () {
// validate() and do something
$(this).dialog("close");
},
"Cancel": function () {
// do something else
$(this).dialog("close");
}
}
});
});
Thanks!
Try like this:
$('#addNew').dialog('close');
I'd like to use jQuery UI's dialog to implement a confirm dialog which is shown when the user clicks a delete-link (implemented using an asp:LinkButton).
I'm using code as shown below (copied from the jquery ui documentation):
<!-- the delete link -->
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
OnClick="btnDelete_Click" CssClass="btnDelete"></asp:LinkButton>
<!-- the confirm-dialog -->
<div id="dialog-confirm-delete" title="Delete?" style="display:none;">
<p>Are you sure you want to permanently deleted the selected items?</p>
</div>
<script>
$(document).ready(function () {
// setup the dialog
$('#dialog-confirm-delete').dialog({
autoOpen: false,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
// ===>>> how to invoke the default action here
},
Cancel: function () { $(this).dialog("close"); }
}
});
// display the dialog
$('.btnDelete').click(function () {
$('#dialog-confirm-cancel').dialog('open');
// return false to prevent the default action (postback)
return false;
});
});
</script>
So in the click event handler, I have to prevent the default action of the LinkButton (the postback) and instead display the dialog.
My question is: how can I then invoke the default action (the postback) of the delete link to perform the postback in case the user clicked the "Delete all items" button in the dialog?
OK, here's my approach (it works, but it might not be the best solution):
$(document).ready(function () {
$('#dialog-confirm-cancel').dialog({
autoOpen: false,
modal: true,
buttons: {
"Delete all items": function () {
// invoke the href (postback) of the linkbutton,
// that triggered the confirm-dialog
eval($(this).dialog('option', 'onOk'));
$(this).dialog("close");
},
Cancel: function () { $(this).dialog("close"); }
}
});
$('.btnDelete').click(function () {
$('#dialog-confirm-delete')
// pass the value of the LinkButton's href to the dialog
.dialog('option', 'onOk', $(this).attr('href'))
.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
If you're not doing anything more than confirming you can add an attribute to the button.
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete"
OnClientClick="if(!confirm('Are you sure?'))return false;" CssClass="btnDelete"></asp:LinkButton>
If you look at the Project Awesome on Codeplex it has a generic implementation of a Confirm Dialog that you can inspect for your scope.
So you prevented the default action of the link(following the link), right? So adding location.replace('path/to/file'); after $(this).dialog('close'); would solve your problem.
Not sure I understood your question right though.
Try adding $("#yourformid").submit(); at this spot // ===>>> how to invoke the default action here.
According to the docs: "... the default submit action on the form will be fired, so the form will be submitted."
Edit
You can try to do something like this:
$('.btnDelete').click(function (event, confirmed) {
if (confirmed) {
return true;
} else {
$('#dialog-confirm-cancel').dialog('open');
// prevent the default action, e.g., following a link
return false;
}
});
And then in your delete all items function:
"Delete all items": function () {
$(this).dialog("close");
$('.btnDelete').trigger("click", [true]);
},
$('#dialog-confirm-delete').dialog({
autoOpen: false,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
},
"Delete all items": function() {
$(this).dialog("close");
// ===>>> how to invoke the default action here
}
}
});
If you are using a LinkButton you can do this:
__doPostBack("<%= lnkMyButton.UniqueID %>", "");