CKEDITOR Sharedspaces - Can I load the custom buttons and dropdown just once? - ckeditor

CKEditor v4.8 Question with SharedSpaces. I am dynamically generating the Editors (with content replacing the DIV tags - inline editing) in a loop based on SQL rows.
I would like to only load/call the editor.ui.addButton and addRichCombo once outside of the loop. Is this possible?
for (var i = 0; i < retrievedRecords.length; i++) {
var documentBlock = retrievedRecords[i];
// This next line creates each inline editor with all custom buttons and combo every time through the loop
// Can I just load the custom buttons and combo once and all new editors use that 1 toolbar?
createInlineEditor('myID_' + i, content, id);
var refToEditor = document.getElementById('myID_' + i);
divContainer.appendChild(refToEditor);
}

sharedspace plugin works little different than you would think. It doesn't share the same toolbar between editors, but it's the space between the top and bottom toolbars. I know it could sound little complicated so I'm adding some image to illustrate it:
There are some important reasons why it works like that, but the most obvious is that you can have different plugins for your editors with configured sharedspace plugin and they change the appearance of the toolbar e.g. by additional buttons. If you could share the same toolbar you could get not working buttons for different editors.
IMO the best thing you can do to simplify your code is sharing configuration object between editors.
var config = {
on: {
pluginsLoaded: function( evt ) {
evt.editor.ui.addButton( 'MyBold', {
label: 'My Bold',
command: 'bold',
toolbar: 'basicstyles,1'
} );
}
}
};
for (var i = 0; i < retrievedRecords.length; i++) {
var documentBlock = retrievedRecords[i];
var editor = createInlineEditor('myID_' + i, content, id, config);
var refToEditor = document.getElementById('myID_' + i);
divContainer.appendChild(refToEditor);
}

Related

Copy cell from Interactive Grid Oracle Apex

I'm trying to copy a specific cell from an Interactive Grid (which is in Display Only mode, if that matters), and instead of copying the cell I'm in, I'm copying the whole row. I can't seem to find any way to copy just the cell.
APEX versiĆ³n: Application Express 19.1.0.00.15
Thank you beforehand.
Oracle Apex does not enable copy functionality to interactive report by purpose.
To enable it, you need to use even handler for copy event. This handler should be on the body or document. It can be achieved through Dynamic Action :
Event: Custom
Custom Event: copy
Selection Type: jQuery Selector
jQuery Selector: body
Then add one JavaScript true action with below code:
var text, i, selection, gridSel;
var event = this.browserEvent.originalEvent; // need the clipboard event
// we only care about copy from a grid cell ignore the rest
if ( !$(document.activeElement).hasClass("a-GV-cell") ) {
return;
}
var view = apex.region("emp").widget().interactiveGrid("getCurrentView"); //change "emp" to you IG static id
if ( view.internalIdentifier === "grid") {
text = "";
selection = window.getSelection();
gridSel = view.view$.grid("getSelection");
for (i = 0; i < gridSel.length; i++) {
selection.selectAllChildren(gridSel[i][0]);
text += selection.toString();
if (gridSel[i].length > 1) {
selection.selectAllChildren(gridSel[i][1]);
text += " \t" + selection.toString();
}
text += "";
}
selection.removeAllRanges();
event.clipboardData.setData('text/plain', text);
event.preventDefault();
}
The above will copy the current grid selection to the clipboard when the user types Ctrl+C while in a grid cell.
I wonder if the below javascript can be modified in order to trigger 'toggle' actions of interactive grid such 'selection-mode'.
apex.region( "[region static ID] " ).call( "getActions" ).lookup( "[action name]" );
Reference:
https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html
If someone is interested, I managed to find the solution.
Go on Interactive Grid's attributes--> JavaScript Initialization Code
and add the following code that creates a button that copies the selected cell.
function(config) {
let $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup3 = toolbarData.toolbarFind("actions3");
toolbarGroup3.controls.push({type: "BUTTON",
label: "Copy cell",
icon: "fa fa-copy is-blue",
iconBeforeLabel: true,
iconOnly: false,
disabled: false,
action: "custom-event" // instead of specific action eg "selection-copy", create a custom event
});
config.initActions = function( actions ) {
actions.add( {
name: "custom-event",
action: function(event, focusElement) {
actions.lookup('selection-mode').set(false); // select cell instead of the whole row
apex.region( "users_id" ).widget().interactiveGrid( "getActions" ).invoke( "selection-copy" ); // copy the selection
actions.lookup('selection-mode').set(true); // select again the whole row (important in case of master-detail grids)
}
} );
}
config.toolbarData = toolbarData;
return config;
}

how to change background color of selected item in listview

cannot able to change the background color of the selected item in listview.
i tried to understand this.but the solution was in angular where i'm not getting how to use that in javascript.
Issues changing the background colour of the currently selected item in a ListView - Nativescript/Angular2
onItemTap: function (args) {
console.log('Item with index: ' + args.index + ' tapped');
args.object.backgroundColor = "#3489db";
},
here i can change background of complete listview.
playground sample.
https://play.nativescript.org/?template=play-js&id=KZeq3j
i want only the selected item to get its background to change.
I have updated the playground for you here. args.object gives you the listview itself.
onItemTap: function (args) {
for (var i = 0; i < this.countries.length; i++) {
this.countries[i].bgColor = "#FFFFFF";
}
console.log(this.countries[args.index])
this.countries[args.index].bgColor = "#3489db";
args.object.refresh();
},

how to make jqgrid advanced search dialog keyboard accessible

Answer in how to enable enter in jqgrid advanced search window describes how to enable enter and other keys in jqgrid advanced search dialog.
After clicking Add group, Add subgrup, Delete rule or Delete group button in advanced search dialog Enter and other keys are still ignored. How set focus to added element or after delete remaining element to enable Enter and other keys?
The current version of the Advanced Searching dialog (see definition of jqFilter in the grid.filter.js) recreate all controls of the dialog on change of someone. See the code of reDraw which looks
this.reDraw = function() {
$("table.group:first",this).remove();
var t = this.createTableForGroup(p.filter, null);
$(this).append(t);
if($.isFunction(this.p.afterRedraw) ) {
this.p.afterRedraw.call(this, this.p);
}
};
How one can see the first line $("table.group:first",this).remove(); delete the content of all filter. The current focus will be lost and one have the problems which you described.
I suggest to fix the code of reDraw using document.activeElement element which was introduced in Internet Explorer originally (at least in IE4) and which is supported now in all web browsers because it's part of HTML5 standard (see here). The element which has focus originally will be destroyed and one will unable to set focus on it later. So I suggest to save the element name of the element and it's classes (like input.add-group or input.add-rule.ui-add) and to find the position of the element on the searching dialog. Later, after the dialog element will be recreated we'll set focus on the element with the same index.
I suggest to change the code of reDraw to the following
this.reDraw = function() {
var activeElement = document.activeElement, selector, $dialog, activeIndex = -1, $newElem, $buttons,
buttonClass,
getButtonClass = function (classNames) {
var arClasses = ['add-group', 'add-rule', 'delete-group', 'delete-rule'], i, n, className;
for (i = 0, n = classNames.length; i < n; i++) {
className = classNames[i];
if ($.inArray(className, arClasses) >= 0) {
return className;
}
}
return null;
};
if (activeElement) {
selector = activeElement.nodeName.toLowerCase();
buttonClass = getButtonClass(activeElement.className.split(' '));
if (buttonClass !== null) {
selector += '.' + buttonClass;
if (selector === "input.delete-rule") {
$buttons = $(activeElement).closest('table.group')
.find('input.add-rule,input.delete-rule');
activeIndex = $buttons.index(activeElement);
if (activeIndex > 0) {
// find the previous "add-rule" button
while (activeIndex--) {
$newElem = $($buttons[activeIndex]);
if ($newElem.hasClass("add-rule")) {
activeElement = $newElem[0];
selector = activeElement.nodeName.toLowerCase() + "." +
getButtonClass(activeElement.className.split(' '));
break;
}
}
}
} else if (selector === "input.delete-group") {
// change focus to "Add Rule" of the parent group
$newElem = $(activeElement).closest('table.group')
.parent()
.closest('table.group')
.find('input.add-rule');
if ($newElem.length > 1) {
activeElement = $newElem[$newElem.length-2];
selector = activeElement.nodeName.toLowerCase() + "." +
getButtonClass(activeElement.className.split(' '));
}
}
$dialog = $(activeElement).closest(".ui-jqdialog");
activeIndex = $dialog.find(selector).index(activeElement);
}
}
$("table.group:first",this).remove();
$(this).append(this.createTableForGroup(this.p.filter, null));
if($.isFunction(this.p.afterRedraw) ) {
this.p.afterRedraw.call(this, this.p);
}
if (activeElement && activeIndex >=0) {
$newElem = $dialog.find(selector + ":eq(" + activeIndex + ")");
if ($newElem.length>0) {
$newElem.focus();
} else {
$dialog.find("input.add-rule:first").focus();
}
}
};
Like one can see on the next demo the focus in the Searching Dialog stay unchanged after pressing on the "Add subgroup" or "Add rule" buttons. I set it on the "Add rule" buttons of the previous row group in case of pressing "Delete group".
One more demo use jQuery UI style of the buttons and the texts in the buttons (see the answer). After clicking on the "Delete" (rule or group) button I tried to set the focus to the previous "Add Rule" button because setting of the focus on another "Delete" (rule or group) button I find dangerous.
Additionally in the demo I use
afterShowSearch: function ($form) {
var $lastInput = $form.find(".input-elm:last");
if ($lastInput.length > 0) {
$lastInput.focus();
}
}
because it seems me meaningful to set initial focus on the last input field at the dialog opening.
UPDATED: I find additionally meaningful to set focus on the current clicked buttons "Add subgroup", "Add rule" or "Delete group". The advantage one sees in the case it one first click some button with the mouse and then want to continue the work with keyboard. So I suggest to change the line
inputAddSubgroup.bind('click',function() {
to
inputAddSubgroup.bind('click',function(e) {
$(e.target).focus();
To change the line
inputAddRule.bind('click',function() {
to
inputAddRule.bind('click',function(e) {
$(e.target).focus();
and the line
inputDeleteGroup.bind('click',function() {
to
inputDeleteGroup.bind('click',function(e) {
$(e.target).focus();
and the line
ruleDeleteInput.bind('click',function() {
to
ruleDeleteInput.bind('click',function(e) {
$(e.target).focus();

Adding screenshot functionality to a firefox extension

Is there a cross-platform approach to taking screenshots from a firefox extension?
Ideally I'd like to be able to take a screenshot of a dom element (irrespective of whether it's visible on the page or not), something like:
var screenshot = screenshot(document.getElementById('example');
Any pointers or suggestions would be nice, searching https://developer.mozilla.org/ only yields screenshots they've used in various guides.
After examining the code of several extensions. I took the following approach (to take a snapshot of a particular dom element). This can be used in a Firefox extension to take screenshots of the whole page, to take screenshots of the browser window and to take screenshots of a particular dom element (and all of its child nodes):
Add canvas to xul.
Find dimensions and top-left co-ordinates of element.
Copy portion of window to canvas.
Convert canvas to base64 PNG file.
function getElementScreenshot(elm) {
var x = findPosX(elm);
var y = findPosY(elm);
var width = elm.clientWidth;
var height = elm.clientHeight;
var cnvs = document.getElementById("aCanvas");
cnvs.width = width;
cnvs.height = height;
var ctx = cnvs.getContext("2d");
// To take a snapshot of entire window
// ctx.drawWindow(mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb(255,255,255)");
ctx.drawWindow(mainWindow.content, x, y, width, height, "rgb(255,255,255)");
return(cnvs.toDataURL());
}
To find top left coordinate of an element
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft += obj.offsetLeft;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop += obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
To get access to browser.xul from sidebar
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
mainWindow.gBrowser.addTab(...);
Download one of the many Firefox screen capture extensions, and look at their code to see how they do it. Eg Screengrab, Fireshot, or Page Saver
I guess it would be something like this:
Copy the DOM element in question to a separate iframe or browser (which is not visible to the user)
Paint the window of that iframe onto an html canvas using drawWindow(). Check out the source of the Tab Preview addon to see how this is done.

How can I disable a hotkey in GreaseMonkey while editing?

I'm using Ctrl+Left / Ctrl+Right in a GreaseMonkey script as a hotkey to turn back / forward pages. It seems to works fine, but I want to disable this behavior if I'm in a text edit area. I'm trying to use document.activeElement to get the page active element and test if it's an editable area, but it always returns "undefined".
document.activeElement works for me in FF3 but the following also works
(function() {
var myActiveElement;
document.onkeypress = function(event) {
if ((myActiveElement || document.activeElement || {}).tagName != 'INPUT')
// do your magic
};
if (!document.activeElement) {
var elements = document.getElementsByTagName('input');
for(var i=0; i<elements.length; i++) {
elements[i].addEventListener('focus',function() {
myActiveElement = this;
},false);
elements[i].addEventListener('blur',function() {
myActiveElement = null;
},false);
}
}
})();
element.activeElement is part of HTML5 spec but is not supported by most browsers. It was first introduced by IE.

Resources