Preserve selection after clicking a custom button in tinyMCE issue - javascript

Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}

Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);

Related

HandsonTable - Modify DoubleClick Event

I am trying to modify the handsontable doubleclick event to have additional functionality. My current code is as follows:
hot.view.wt.update('onCellDblClick', function (row,cell) {
console.log("sucess");
});
This will sucessfully fire when a cell is double clicked on. However, it removes the current editing functionality of the cell.
Is there any way to update the on cell double click event whilst maintaining its current functionality?
Alright I ended up figuring this one out myself. So I thought I'd post the answer in the chance it helps anyone in the future.
hot.view.wt.update('onCellDblClick', function (row,cell) {
//Get editor and begin edit mode on current cell (maintain current double click functionality)
var activeEditor = hot.getActiveEditor();
activeEditor.beginEditing();
//Do whatever you want...
});
Thanks to the answer in the following post for defining how to manipulate the editor.
When using Handsontable how to force a selected cell into edit mode?

How to interact with a custom select box with CasperJS?

When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200
I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.

Paste into text field TideSDK

I have the following code, I want a user to be able to copy or paste into a text field,
basically imitating a ctrl+c or ctrl+v
My problems are:
how to make sure the context menu only appears in text fields
how to paste the text into the region.
I have been through the docs and so far I have this NOT working:
var menu = Ti.UI.createMenu();
menu.addItem('Copy', function() {
var data =$.("#this").val()
Ti.UI.Clipboard.getData('text/plain',data);
});
menu.addItem('Paste', function() {
var data =Ti.UI.Clipboard.getData('text/plain');
$.("#this").val(data)
});
function showrightmenu(){ Ti.UI.getCurrentWindow().setContextMenu(menu);}
I could call this using oncontextmenu= "showrightmenu()" but now, how to paste something in this line:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
AM GROPING IN THE DARK. I'm a newbie to TideSDK, this is my first project.
Question 1
I'm new to TideSDK as well and might be wrong, but as far as I can tell from the API documentation, context menus are bound to a window, and displaying different context menus when right clicking different parts of the window would require you to each time change the window's context menu...
Example:
//Create different menus
var context_menu = Ti.UI.createMenu();
var copy_menu = Ti.UI.createMenu();
//Add menu items etc.
...
//Change context menus on click events depending on clicked element
$('#some-element').mousedown(function(event){
if(event.which==3){//detect right click
editor_window.setContextMenu(context_menu);
}
});
$('#text-field').mousedown(function(event){
if(event.which==3){//detext right click
editor_window.setContextMenu(copy_menu);
}
});
This way, when you click the element with id some-element, the first context menu is shown, and when you click the #text-field element, the second context menu is shown.
Note that this won't work if one element is inside the other, because then both events are fired.
Question 2
In this code you supplied:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
You want to use Ti.UI.Clipboard.getData and not Ti.UI.Clipboard.setData, since you want to get the text stored in the clipboard and then put it into the text field. Also, you might want to change $.(#this) to $("#this") or $(this).
This should work:
$("#some-element").val(Ti.UI.Clipboard.getData('text/plain'))
Remark
You seem to be confused about how to use jQuery. To select an element, you use $() and not $.(). Also, with $("#example") you select the DOM element with the id example. $(this) is used inside a function called when an event is fired, and refers to the element on which the event was fired. $("#this") is not the same as $(this). Hope that helps a bit...

Top and Bottom Pagination Sync

I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change

Wiring up javascript events and passing parameters

A bit background:
I've got a page with a table and a number of checkboxes. The page is generated in asp.net.
Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).
Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.
so you have something like:
<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>
Not much of a surprise there then.
Ok so the here's the problem:
So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.
I know what you're thinking: easy just call that Javascript function highlightRow.
But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)
So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.
(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)
Update:
Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)
The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.
In the end went with a bit of a hack:
// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
if (element.click)
{
element.click();
}
else
{
// We don't have a click on this element, so add our own.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
Think that could be somewhat improved but it does the business for now.
Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.
you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.
thats how you can define alternate row color for the table using jquery
$("table tr:nth-child(even)").addClass("striped");
<style>
.striped{
background-color:#efefef;
}
</style>
I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.
If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?
I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.
I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.
I would also use jQuery to easily create the js-code.
I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.

Categories