I am wondering if it is possible to disable a specific widget in the ToolBar in the 'editables' portion of the widget code? I currently have the below code set up for a widget. Within these selectors, I do not want the user adding in a specific widget in the ToolBar.
this.editables = {
content1: {
selector: '.content1',
allowedContent: this.allowedContent
},
content2: {
selector: '.content2',
allowedContent: this.allowedContent
},
content3: {
selector: '.content3',
allowedContent: this.allowedContent
}
};
I have tried adding in the below logic but it breaks my code.
var oWidget= editor.getCommand('customWidget')
oWidget.setState(CKEDITOR.TRISTATE_DISABLED);
Any advise would be much appreciated.
Thank you!
For this you need to check for user selection event, and if selection in editable portion enable command.
Something like this -
CKEDITOR.instances["textarea"].on( 'selectionChange', function( evt ) {
// get desired command from ckeditor
var myCommand = this.getCommand( 'CKEDITOR_COMMAND_NAME' );
var mySelection = null;
// check if something is selected
var mySelection = this.getSelection().getNative() || this.window.$.getSelection() || this.document.$.selection;
if (!mySelection) {
// if not stay disable
myCommand.disable();
} else {
//if yes enable command
myCommand.enable();
}
});
Related
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;
}
I add markers to the map and place them in the markercluster. For markers that are not clustered, I want to show the tooltip that I attach to the marker when I create it.
var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });
//start loop create markers
var marker = new L.marker(latlng, { icon: icon } );
marker.bindPopup(L._("Loading.."));
marker.bindTooltip(' text ');
geoMarkers.addLayer(marker);
//end loop
map.addLayer(geoMarkers);
map.on('layeradd', function(event) {
var layer = event.layer;
if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
layer.openTooltip();
}
});
To do this, I followed advice and listen for the layeradd event. When loading the map and moving to new markers, everything works. However, at any movement of the map, on those markers where the tooltip is already open, it is closed, since the layeradd event does not affect them. There is only one way to see the hint on them again - to zoom out so that the marker "hides" in the cluster and then again increasing the scale, I see the hint again. It is desirable that it be always present when the marker is not hidden in the cluster.
I ask for help or hints.
You can use the permanent tooltip option in order to maintain the visibility of your marker. Check here for official docs.
...
var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });
//start loop create markers
var marker = new L.marker(latlng, { icon: icon } );
marker.bindPopup(L._("Loading.."));
marker.bindTooltip(' text ', { permanent: true} ); // here define it
geoMarkers.addLayer(marker);
//end loop
Is there a way to change the text color of the dialog buttons in iOS?
I mean for the OK/Cancel buttons at the bottom for the alerts/confirm dialogs etc.
If native code, that's ok also.
You will be needing to use native code if you want to achieve this on IOS, here's how you can do it:
if (isIOS) {
var alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle("title", "message", UIAlertControllerStyle.ActionSheet);
// Here are some premade styling. The destructive by default is red on IOS. You can select default for them all or use existing.
var editAction = UIAlertAction.actionWithTitleStyleHandler("Edit", UIAlertActionStyle.Default, (arg: UIAlertAction) => {
//code implementation here
});
var deleteAction = UIAlertAction.actionWithTitleStyleHandler("Delete", UIAlertActionStyle.Destructive, (arg: UIAlertAction) => {
//code implementation here
});
var cancelAction = UIAlertAction.actionWithTitleStyleHandler("Cancel", UIAlertActionStyle.Cancel, (arg: UIAlertAction) => {
//code implementation here
});
alertController.addAction(editAction);
alertController.addAction(deleteAction);
alertController.addAction(cancelAction);
// This is how you can force change the color of the title text on the actions (buttons).
alertController.view.tintColor = new Color("#FF0000").ios; // Color is a class in Nativescript, if we you want the Native IOS value, this is how you do it.
var currentPage = topmost().currentPage;
var viewController: UIViewController = currentPage.ios;
viewController.presentModalViewControllerAnimated(alertController, true);
}
Make sure you imported what's needed:
import { isIOS, Color } from 'tns-core-modules/ui/page/page';
import { topmost } from 'tns-core-modules/ui/frame';
There are other styling customizations you can do by changing the default alertController.view settings. So just try out what's best for your use case.
I have a problem.
When I make the editor 'readonly' some of the buttons (copy, preview, full screen) stay enabled.
Normal
Select some text
How I can enabled other buttons when I select the text? (for example enabled button 'BGColor')
You can do something like this
Look for selection event.
CKEDITOR.instances["textarea"].on( 'selectionChange', function( evt ) {
// get desired command from ckeditor
var myCommand = this.getCommand( 'CKEDITOR_COMMAND_NAME' );
var mySelection = null;
// check if something is selected
var mySelection = this.getSelection().getNative() || this.window.$.getSelection() || this.document.$.selection;
if (!mySelection) {
// if not stay disable
myCommand.disable();
} else {
//if yes enable command
myCommand.enable();
}
});
I'm a newbie to jQuery and I have a map with a highlight plugin, when mouse over an area I want to change the text in a div with an ID and the text I will get it from the area attribute Alt="some text"
Here is the code that used for area loops, I'm pretty sure I can add a small function here but I couldn't figure it out.
//map
clicks$(".tabs area").click(function(){
//areas loop:
$(".tabs area").each(function(){
var d = $(this).data('maphilight') || {};
if(d.alwaysOn == true){
d.alwaysOn = false;
}
});
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
Any help or suggestions on how I can get this done would be highly appreciated.
I'm not familiar with the highlights plugin, but I think you just wanna add a mouseover event to each area like so (you would place this before/after your .click declaration):
$(".tabs area").mouseover(function() {
var alt_text = $(this).attr('alt');
$("#YOUR_TEXT_DIV_ID").html(alt_text);
}).mouseout(function() {
//do something on mouseout
});