We Keep Coding

Liferay/AlloyUI: Overriding util.js or disabling scrolling on form focus

How can I override (or hook) the function Liferay.Util.focusFormField in Liferay 7.0?
The method is defined in frontend-js-aui-web (portal-src\modules\apps\foundation\frontend-js\frontend-js-aui-web\src\main\resources\META-INF\resources\liferay\util.js).
The only way I could think of is to just overwrite it somewhere in a js-file, like so:
Liferay.Util.focusFormField = function(el) {
var doc = $(document);
var interacting = false;
el = Util.getDOM(el);
el = $(el);
doc.on(
'click.focusFormField',
function (event) {
interacting = true;
doc.off('click.focusFormField');
}
);
if (!interacting && Util.inBrowserView(el)) {
var form = el.closest('form');
var focusable = !el.is(':disabled') && !el.is(':hidden') && !el.parents(':disabled').length;
if (!form.length || focusable) {
el.focus(false); // modified
}
else {
var portletName = form.data('fm-namespace');
Liferay.once(
portletName + 'formReady',
function () {
el.focus(false); // modified
}
);
}
}
}
All I actually want is to disable the scrolling that happens whenever a form is submitted.
Does someone know what to do best to achieve this?
Another thing I found on the web is this: https://alloyui.com/api/files/alloy-ui_src_aui-form-validator_js_aui-form-validator.js.html#l216
But I cannot find it in liferay-7.0-source-files and no explanation how to override it.

Cannot Pass Callback Function On Mouseup Event - JavaScript

I'm trying to pass a callback function as an argument in a previous function that is triggered by a mouseup in a chrome extension. So basically I'm aiming to trigger the quickTranslate function right after the lwsGetText finishes running. But I can't figure out how to do this since the function lwsGetText is triggered by a mouseup. Here's my code:
Content Script (js)
(function () {
// Holds text being selected in browser
var lwsSelectedText = '';
// Adds pop-up to current webpage
function lwsAddContent(callback) {
// Get body tag
var body = document.getElementsByTagName('body');
// add invisible div
document.body.innerHTML += '<div id="myModal" class="modal"><div class="modal-content"><span class="close">×</span><div id="lwsSpanishDiv"><p id="lwsSpanishTitle">Spanish</p><textarea id="lwsSpanishTextArea">Hello</textarea></div><div id="lwsEnglishDiv"><p id="lwsEnglishTitle">English</p><textarea id="lwsEnglishTextArea">Hello 2</textarea></div></div></div>';
callback(lwsSetUpTextGetter);
}
// Make the pop-up visible and set up close button
function lwsActivateContent(callback) {
var modal = document.getElementById('myModal');
// Get the textarea
var txtarea = document.getElementById("myTxtArea");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
callback(quickTranslate);
}
// Initialize ability to select and grab text from browser
function lwsSetUpTextGetter(callback) {
//Set the onmouseup function to lwsGetText
document.onmouseup = lwsGetText;
//Handling clicking outside webpage?
if (!document.all) document.captureEvents(Event.MOUSEUP);
}
//Gets selected text
function lwsGetText(callback,e) {
// Get access to spanish text area
var spanishText = document.getElementById('lwsSpanishTextArea');
//Get text
lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();
//if nothing is selected, do nothing
if (lwsSelectedText != '') {
// test: does browser grab text correctly?
alert(lwsSelectedText);
// Set spanish text area content to the selected text from browser
spanishText.value = lwsSelectedText;
// --Error Here--
callback();
}
}
function quickTranslate() {
alert("Quick Translate");
var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
var englishTextArea = document.getElementById('lwsEnglishTextArea');
var spanishTextArea = document.getElementById('lwsSpanishTextArea');
englishTextArea.value = 'Working...';
var xhr = new XMLHttpRequest(),
textAPI = spanishTextArea.value,
langAPI = 'en';
data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var res = this.responseText;
var json = JSON.parse(res);
if (json.code == 200) {
englishTextArea.value = json.text[0];
}
else {
englishTextArea.value = "Error Code: " + json.code;
}
}
}
}
// When document ready
$(document).ready(function () {
lwsAddContent(lwsActivateContent);
});
})();
If someone could help me figure out how to implement the quickTranslate function as a callback function, that would be awesome! Thanks!

As you know the event handler you're assigning takes one parameter, the event. However you can create a closure around the "callback" variable by doing something like:
function lwsGetText(callback) {
return function (e) {
// Get access to spanish text area
var spanishText = document.getElementById('lwsSpanishTextArea');
//Get text
lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();
//if nothing is selected, do nothing
if (lwsSelectedText != '') {
// test: does browser grab text correctly?
alert(lwsSelectedText);
// Set spanish text area content to the selected text from browser
spanishText.value = lwsSelectedText;
// --Error Here--
callback();
}
};
}
You would then pass the value quickTranslate as the "callback" parameter when you set the handler, not sure how you're doing that so here is a guess:
myElement.addEventListener("mouseup", lwsGetText(quickTranslate));

When using the Microsoft Translator, Is there a way to remove the widget, but retain translation?

I'm using the Microsoft Translation Widget, which I'd like to use to automatically translate a webpage without user interaction.
The problem is, I can't get rid of the widget that keeps popping up or hide it on document.ready because the CSS and JS get loaded from Microsoft's own script in the widget!
Does anyone know a way around this? I've looked everywhere and cannot find a solutuion for this.

Whoa, after some time playing around with that, I've finally achieved what you want.
It's kindda ugly, because of some needed workarounds, but it works, take a look at the fiddle.
The steps were:
Firstly, we must override the default addEventListener behavior:
var addEvent = EventTarget.prototype.addEventListener;
var events = [];
EventTarget.prototype.addEventListener = function(type, listener) {
addEvent.apply(this, [].slice.call(arguments));
events.push({
element: this,
type: type,
listener: listener
});
}
Then, we create a helper function removeEvents. It removes all the event listeners of an element.
var removeEvents = function(el, type) {
var elEvents = events.filter(function(ev) {
return ev.element === el && (type ? ev.type === type : true);
});
for (var i = 0; i < elEvents.length; i++) {
el.removeEventListener(elEvents[i].type, elEvents[i].listener);
}
}
When creating the script tag, in the way Microsoft says:
var s = d.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = ((location && location.href && location.href.indexOf('https') == 0) ? 'https://ssl.microsofttranslator.com' : 'http://www.microsofttranslator.com') + '/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=';
var p = d.getElementsByTagName('head')[0] || d.dElement;
p.insertBefore(s, p.firstChild);
We must add a load event listener to that script, and the code below is fully commented:
s.addEventListener('load', function() {
// when someone changes the translation, the plugin calls the method TranslateArray
// then, we save the original method in a variable, and we override it
var translate = Microsoft.Translator.TranslateArray;
Microsoft.Translator.TranslateArray = function() {
// we call the original method
translate.apply(this, [].slice.call(arguments));
// since the translation is not immediately available
// and we don't have control when it will be
// I've created a helper function to wait for it
waitForTranslation(function() {
// as soon as it is available
// we get all the elements with an attribute lang
[].forEach.call(d.querySelectorAll('[lang]'), function(item, i) {
// and we remove all the mouseover event listeners of them
removeEvents(item, 'mouseover');
});
});
}
// this is the helper function which waits for the translation
function waitForTranslation(cb) {
// since we don't have control over the translation callback
// the workaround was to see if the Translating label is visible
// we keep calling the function, until it's hidden again
// and then we call our callback
var visible = d.getElementById('FloaterProgressBar').style.visibility;
if (visible === 'visible') {
setTimeout(function() {
waitForTranslation(cb);
}, 0);
return;
}
cb();
}
});
Update 1
After re-reading your question, it seems you want to hide all the widgets at all.
So, you must add the following code as soon as the translation is got:
waitForTranslation(function() {
document.getElementById('MicrosoftTranslatorWidget').style.display = 'none';
document.getElementById('WidgetLauncher').style.display = 'none';
document.getElementById('LauncherTranslatePhrase').style.display = 'none';
document.getElementById('TranslateSpan').style.display = 'none';
document.getElementById('LauncherLogo').style.display = 'none';
document.getElementById('WidgetFloaterPanels').style.display = 'none';
// rest of the code
});
I've created another fiddle for you, showing that new behavior.
Update 2
You can prevent the widget showing at all by adding the following CSS code:
#MicrosoftTranslatorWidget, #WidgetLauncher, #LauncherTranslatePhrase, #TranslateSpan, #LauncherLogo, #WidgetFloaterPanels {
opacity: 0!important;
}
And you can even prevent the before-translated text being showed, by hiding the document.body by default, and then showing it when the page is fully translated:
(function(w, d) {
document.body.style.display = 'none';
/* (...) */
s.addEventListener('load', function() {
var translate = Microsoft.Translator.TranslateArray;
Microsoft.Translator.TranslateArray = function() {
translate.apply(this, [].slice.call(arguments));
waitForTranslation(function() {
/* (...) */
document.body.style.display = 'block';
});
}
});
});
Take a look at the final fiddle I've created.

For me, this was the solution:
on your < style > section add this class
.LTRStyle { display: none !important }
Also, if you are invoking the translation widget this way:
Microsoft.Translator.Widget.Translate('en', lang, null, null, TranslationDone, null, 3000);
then add this to your callback (in this example is TranslationDone) function:
function TranslationDone() {
Microsoft.Translator.Widget.domTranslator.showHighlight = false;
Microsoft.Translator.Widget.domTranslator.showTooltips = false;
document.getElementById('WidgetFloaterPanels').style.display = 'none';
};

Location.hash causes infinite loop

I am using location.hash in javascript, to allow the user to switch between ajax screens (divs that are added and removed dynamically within the same html page).
The problem is, when I update location.hash by javascript, the window listener immediately fires! I need this event to fire only when the back button is actually clicked, not when I change the history by javascript.
My window listener code:
window.onhashchange = function() {
var s;
if (location.hash.length > 0) {
s = parseInt(location.hash.replace('#',''),10);
} else {
s = 1;
}
main.showScreen(s);
}
And my screen update code:
main.showScreen = function(i) {
// allow the back button to switch between screens
location.hash = i;
// but setting location.hash causes this same function to fire again!
//
// here follows the code that adds a new div with new text content
// ...
}
To clarify: showScreen can be called from anywhere in the application, for example by clicking a "next" button somewhere on the page.

In your main.showScreen function, you can:
if (location.hash != i)
location.hash = i;
OR, you can set up a document-scoped variable with the last hash value.
var lastHash = -1;
window.onhashchange = function() {
var s;
if (location.hash.length > 0) {
s = parseInt(location.hash.replace('#',''),10);
} else {
s = 1;
}
if (lastHash != s) {
lastHash = s;
main.showScreen(s);
}
}

jQuery queue in Chrome userscript with popups?

I would like to ask if it is possible to build Chrome or Greasemonkey script witch could open all popups in queue. So far i have 2 seperate scripts for this, but that is not working well since popups have anti-spam feature that don't allow too much of them at the same time.
What i would like to do is to process array of popup links in queue fashion and only open next when previous is closed. I have no expirience when it goes down to queues and any kind of event binding.
So resources i got:
1) Array of links already prepared
var URL_Array = [];
$('form[name="form_gallery"] .img img').each(function(i,e){
// Format URL array here
if($(this).closest('.object').children('.phs_voted_count').length == 0){
var string = e.src;
var nowBrake = string.substring(string.length-7,7);
var splited = nowBrake.split('/');
var urlStr = '/window/friend/gallery_view/'+splited[3]+'/'+splited[4]+'.html';
URL_Array[i] = urlStr;
}
});
2) Script that votes on image in popup
/*######################################################*/
var voteBy = '#vte_mark_12'; // Prefered vote icon
var voteDefault = '#vte_mark_5'; // Default vote icon
var voteFormLoc = 'image_voting'; // Image voting popups form
var buyExtraVote = 'image_voting_buy'; // If run out of votes buy more
var captchaLoc = 'input[name="captcha"]'; // Captcha input field
var captchaTxt = 'Enter captcha text!'; // Captcha alert text
var simpatyFormId = '#sym_send'; // Simpaty window form
var startScript = true;
var formProcessedAlready = false; // Used to check if image already was voted
/*######################################################*/
$(function(){
if(startScript){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
if($('#50').length > 0){
$('#50').attr('checked', true);
$('form').attr('id', buyExtraVote);
$('#'+buyExtraVote).submit();
}else{
$('form').attr('id', voteFormLoc);
if($(voteBy).length > 0){
$(voteBy).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else if($(voteDefault).length > 0){
$(voteDefault).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else{
// If we have simpaty box autocast submit
if($(simpatyFormId).length > 0){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
$(simpatyFormId).submit();
formProcessedAlready = true;
}
}else{
formProcessedAlready = true;
}
}
}
}
if(formProcessedAlready){
self.close();
}
}
});
As far as i can understand it should go like this:
1) Get all unvoted urls and form array (done)
2) Queue all popups to open
3) Start first popup
4) Voting done and popup closes (done)
5) Start second popup
6) When array finished switch to next page (done)
What you think?

What are the exact URL's of the main page(s) and also of the popups?
What version of jQuery are you using, and how are you including it?
The exact URLs are important because the script needs to handle both the main pages and the popups and operate differently on each.
Their are 2 main ways to handle this. Either:
Use include directives to make sure that the script runs on both the main page and the popup, but switches its behavior depending on the page type. This will have two different instances of the script running simultaneously, which is not a problem.
Use include and possibly exclude directives to ensure that the script only runs on the main page. Then have the popup-opening code manipulate the form.
Here's how to do approach 1:
(1) Suppose the main pages were like:
    somewhere.com/main/*
    and the popup pages were like:
    somewhere.com/window/friend/gallery_view/*
    Make sure the script's include-directives fire on both sets of pages.
(2) Ensure that jQuery is available on both kinds of pages. jQuery 1.5.1 is recommended. jQuery 1.3.2 probably won't work for the following code.
(3) Then code like the following should work:
var URL_Array = [];
var PopupQueue = $({}); //-- jQuery on an empty object - a perfect queue holder
//--- Is this a popup window or the main page?
if ( /\/window\/friend\/gallery_view\//i.test (window.location.href) )
{
//--- This is a popup page
/*######################################################*/
var voteBy = '#vte_mark_12'; // Prefered vote icon
var voteDefault = '#vte_mark_5'; // Default vote icon
var voteFormLoc = 'image_voting'; // Image voting popups form
var buyExtraVote = 'image_voting_buy'; // If run out of votes buy more
var captchaLoc = 'input[name="captcha"]'; // Captcha input field
var captchaTxt = 'Enter captcha text!'; // Captcha alert text
var simpatyFormId = '#sym_send'; // Simpaty window form
var startScript = true;
var formProcessedAlready = false; // Used to check if image already was voted
/*######################################################*/
$(function(){
if(startScript){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
if($('#50').length > 0){
$('#50').attr('checked', true);
$('form').attr('id', buyExtraVote);
$('#'+buyExtraVote).submit();
}else{
$('form').attr('id', voteFormLoc);
if($(voteBy).length > 0){
$(voteBy).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else if($(voteDefault).length > 0){
$(voteDefault).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else{
// If we have simpaty box autocast submit
if($(simpatyFormId).length > 0){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
$(simpatyFormId).submit();
formProcessedAlready = true;
}
}else{
formProcessedAlready = true;
}
}
}
}
if(formProcessedAlready){
self.close();
}
}
});
}
else
{ //--- This is a main page
$('form[name="form_gallery"] .img img').each(function(i,e){
// Format URL array here
if($(this).closest('.object').children('.phs_voted_count').length == 0){
var string = e.src;
var nowBrake = string.substring(string.length-7,7);
var splited = nowBrake.split('/');
var urlStr = '/window/friend/gallery_view/'+splited[3]+'/'+splited[4]+'.html';
URL_Array[i] = urlStr;
}
});
//--- Load up the queue.
$.each (URL_Array, function (PopupNum, PopupURL) {
PopupQueue.queue ('Popups', function (NextQ_Item) {
OpenPopupFromQueue (NextQ_Item, PopupNum+1, PopupURL);
} );
} );
//--- Launch the Popups, one at a time.
PopupQueue.dequeue ('Popups');
}
function OpenPopupFromQueue (NextQ_Item, PopupNum, PopupURL)
{
var PopupWin = window.open (PopupURL, "_blank");
if (!PopupWin)
{
console.log ('Bad URL ' + PopupURL)
setTimeout (function() { NextQ_Item (); }, 2003);
return;
}
/*--- Only after the popup has loaded can we do any processing.
*/
PopupWin.addEventListener (
"load",
function () {
/*--- Setup the listener for when the popup has closed.
We fire the next popup from the queue, there.
*/
PopupWin.addEventListener (
"unload",
function () {
PopupClosed (NextQ_Item);
},
false
);
/*--- We could process the popup here, but it's better to let another instance of this
script do it, instead.
*/
},
false
);
}
function PopupClosed (NextQ_Item)
{
//--- Launch the next popup from the queue.
NextQ_Item ();
}

You could do something like:
var links = get_your_links();
function process_one() {
if(links.length > 0) {
show_popup(links.pop(), process_one);
}
}
function show_popup(link, callback) {
var popup = window.open(link, "mywindow", "width=100,height=100");
$(popup).bind("beforeunload", function() {
process_one();
return true;
})
}
I hope it helps...