We Keep Coding

How to track activity inside iframe of Wordpress tinyMCE editor

Im looking for solution that can track user activity inside wp_editor, i mean, i want to know if he is idle or not and then save content as concept (autosaving)
I was trying to use this https://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/ and it's working mostly for all elements on website but i can't use it inside wp_editor because it's iframe.
and i tried also this library:
https://github.com/kidh0/jquery.idle
$('body').idle({
onIdle: function(){
$("#workingState").html('<?=displayInLanguage("<p>Stav: <strong>neaktívny, obsah uložený.</strong></p>", "<p>Status: <strong>inactive, content saved.</strong></p>")?>');
if( $('#show_add_actuality').hasClass('d-block') ){
saveForm('actualityForm_sk', "autoSaveScript");
saveForm('actualityForm_en', "autoSaveScript");
}
},
onActive: function(){
$("#workingState").html('<?=displayInLanguage("<p>Stav: <strong>aktívny</strong></p>", "<p>Status: <strong>active</strong></p>")?>');
},
idle: 2000
});
so as you can see im trying to save form in slovak and english language when user is not active, i will perform ajax request on both forms which includes also wp_editor, but i can't just track activity inside another page (which wp_editor generate another iframe site inside, its blank but still it's not working that way)
So i'm expecting some solution that can help me track user activity inside wordpress editor.
Script is working as expected, the only activity that i can't track is wordpress editor, no typing, no cursor movements nothing it will ignore idle state.
Thanks for any answer.

Changing an object properties then calling a function inside a custom function with javascript

Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.

Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.

Dynamic size bootstrap modal dialog in meteor

I have an app that I need to show images in (after clicking on a thumbnail), written in meteor.
I'm able to store the images in gridFS and pull them out fine, but am struggling to work out how to dynamically size a modal dialogue for showing the full size image.
I think I need to trap the bs-show event for the dialogue and set the .css.width property to the size required, but I have no idea how to intercept the bs-show event in meteor.
I have tried putting the following code in the app
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
Session.set("showProjModal", true);
//console.log("Image ID: "+ Session.get("selectedImageId"));
console.log($("projectImageModalID").find('modal-body'));
$("projectImageModalID").find('modal-body').css({
width: '20px'
});
$("#projectImageModalID").modal("show");
}
};
and in the chrome debugger can see the object being returned to the consol log, but the css change has no effect before the show so I guess I'm not in the right place for this.

Create Facebook Dialog Popup with Link

I am trying to create a Facebook Dialog using the new improvements that were released last week.
http://developers.facebook.com/blog/post/437
What I want is to be able to have a link so when it's clicked a popup is generated, or have it show up in the page. I've tried putting it in a DIV and then showing with JQuery but it won't center on the page. I've gotten the code to work for posting to the users wall... just don't know how to either format the JS code and or create the link for the popup.
Thanks in advance!

As long as you have the Facebook js on your page, it's as easy as this to create a friend invitation:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
// If you have FireFox + FireBug or Chrome + developer tools:
console.log(param); // log response to javascript console
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples" button on the bottom of the text area and find the "fb.ui — friends.add" example.

Dynamic editor upload into web page. Need advice

I am writing intranet site for tracking employees science activities in organization.
There lots of editable information on each personal page (science degree, publications & so on) so I upload editor per request (user clicks "edit" and modal dialog with html editor: set of textboxes/comboboxes/autocomplete features & validation logic appears).
Editor is html layout that is wrapped with jquery dialog plugin + some logic, written as javascript functions that should be invoked from the callee page (onsubmit, validate, afterLoad editor events). There are also attributes (editor preferrable with and height) that are passed to callee page also.
Currently I send these functions & attribute as ... function onsubmit() { }; function validate() { } var width = 640; var height = 800 ... code that is embedded into the request page. Function calls and editor markup wrap with jquery plugin completed in the callee page.
It works, but I have some try { call editor event handler } catch { } stuff in callee page (because not every editor provides these functions) and some attributes (editor width & height for instance) that are loaded as variables declared in javascript.
Please, suggest, is there a better approach to build & use custom editors for my situation.
Thank you in advance!

First off, maybe you can use CKEditor. This editor has a jQuery adapter so that you can instantiate the editor very easy:
$('#editor1').ckeditor({
language : 'en',
toolbar : 'Basic',
width : 640,
height : 800
});
You pass all needed informations at the edit page loading to the callee page and load the editor afterwards:
User click edit link -> Ajax request to get the necessary edit infos -> Editor rendering
Perhaps you can write different editor renderers, one for each use case.