I want to know the coordinates of the mouse pointer when I r-click on CKEditor
I added a few items to the context menu of CKEditor.
i want when I select a certain item, the other a notice appeared also in place i r_click
$(document).ready(function () {
var ck = CKEDITOR.replace('txtNoidungBR', 'vi');
var $DK = $('#divAddDK');
/*Thêm điều kiện*/
ck.on('instanceReady', function (e) {
ck.addCommand("addDK", {
exec: function (ck) {
/*I want to set coordinates to $DK = coordinates of context menu when i r-click*/
$DK.css({ 'left': 600, 'top': 400 }).toggle(300);
}
});
ck.addMenuGroup('BRDT');
var addDK = {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT'
};
ck.contextMenu.addListener(function (element, selection) {
return {
addDK: CKEDITOR.TRISTATE_OFF
};
});
ck.addMenuItems({
addDK: {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT',
order: 1
}
});
});
});
help me. thaks
You'll need to track the mouse yourself, as ckeditor doesn't give you the mouse event.
See this answer for details on that:
How to get the mouse position without events (without moving the mouse)?
Related
I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
I am using
vue-google-maps
They working good so far, I want to achieve that when someone search and select their area a marker appears and then they can drag it to their required position.
I have so far managed to make the marker draggable by editing GoogleMap.vue file
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:draggable="true"
#click="center=m.position"
#drag="setCurrent(this)"
></gmap-marker>
Now I am able to drag the marker however the coordinates (lat:long) doesn't change.
I am using Laravel 1.4.1
Vue 3.0.0-beta.6
Please help
rest of the GoogleMap.vue look like this
<script>
export default {
name: "GoogleMap",
data() {
return {
center: { lat: 24.9004057, lng: 67.1926178 },
markers: [],
places: [],
currentPlace: null,
};
},
mounted() {
this.geolocate();
},
methods: {
// receives a place object via the autocomplete component
setPlace(place) {
this.currentPlace = place;
this.addMarker();
},
addMarker() {
if (this.currentPlace) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng()
};
this.markers.push({ position: marker, draggable: true });
this.places.push(this.currentPlace);
this.center = marker;
this.currentPlace = null;
}
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
},
checkthis(position){
console.log(navigator.position.getCurrentPosition());
}
}
};
</script>
To get marker position once it is dragged Marker.dragend is better suited then Marker.drag:
This event is fired when the user stops dragging the marker.
In case of vue-google-maps library marker position could be determined like this:
<gmap-marker
:draggable="true"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
#click="center=m.position"
#dragend="showLocation"
></gmap-marker>
showLocation: function(evt){
console.log( evt.latLng.toString());
}
where evt is a MouseEvent object and MouseEvent.latLng property contains the position of dragged marker
The same applies to #drag event.
I'm looking to change the column color and the line color for the same series across multiple charts based on the click of either the legend or the actual column/line.
On the individual charts I have color changing based on clicking/hovering and I can show hide based on the clicking of the first legend. I just can't seem to get the color to work. I'd like to convert the show hide functionality into color change.
Fiddle: http://jsfiddle.net/jlm578/asdgqzgk/4/
This is the chunk of code I'd like to convert or replace:
events: {
legendItemClick: function (event) {
var visibility = this.visible ? 'visible' : 'hidden';
var series = $('#veiOverallAllLine').highcharts().series[this.index];
if (this.visible) series.hide();
else series.show();
return true;
//return false;
}
}
I hope that I understood your question properly :)
Anyway, you can "convert" the event into color change by first preventing the default action to be executed (which is obviously hiding the chart).
This could be done easily using
event.preventDefault() within the event itself.
Than you can use a general function to handle the color change, which takes the series as parameter, find its 'sibling' and than changes the colors:
function updateColor(series){
if(series == undefined) return;
var color = series.color == '#ffffff' ? '#851E20' : '#ffffff';
var sibling = $('#veiOverallAllLine').highcharts().series[series.index];
series.update({color:color});
sibling.update({color:color});
}
(More generalization could be done here but its up to you..)
Than, the whole plotOptions should look like that more or less:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: '#851E20'
}
},
events: {
click: function(){
updateColor(this);
},
legendItemClick: function (event) {
event.preventDefault();
updateColor(this);
return true;
}
}
}
},
Here you can see an example: http://jsfiddle.net/a366e89c/2/
NOTE! in the example only the upper chart changes the color of both charts, you just need to copy the lines into the second chart...
I need to make a Firefox addon add a button to the address bar if the tab is in a certain domain.
I've managed to find the element navbar-icons for the current window and add a child, but that add the icon to all tabs for that window, instead of just the relevant tab. How can I do this?
EDIT:
Sorry i was on mobile and didn't include the code.
What i have so far:
var windowsUtils = require('sdk/window/utils');
var loadButton = function(doc, urlBtnClick) {
var urlBarIcons = doc.getElementById('urlbar-icons');
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'button-icon');
btn.setAttribute('image', self.data.url('./images/icon16.png'));
btn.click(onButtonClick);
urlBarIcons.appendChild(btn);
return btn;
}
var onButtonClick = function(event) {
console.log('i was clicked');
}
whenever i call the above i add a icon/button to every tab instead of the current active one.
This is a hacky implementation just using the SDK's tabs and button apis:
let { ActionButton } = require("sdk/ui/button/action");
let tabs = require('sdk/tabs');
let soButton;
tabs.on('activate', (tab) => {
if (/^http[s]*\:\/\/stackoverflow.com/.test(tab.url)) {
soButton = ActionButton({
id: "so-button",
label: "This is StackOverflow!!",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: function(state) {
console.log("clicked");
}
});
} else {
if (soButton && typeof (soButton.destroy === 'Function')) {
soButton.destroy();
}
}
});
It feels klugey to create / destroy the button every time we switch tabs, but the user experience is exactly what you want. A similar and perhaps 'better supported' approach might be instead to just disable the button.
I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
editor.addMenuGroup('mygroup', 10);
editor.addMenuItem('My Dialog',
{
label: 'Open dialog',
command: 'mydialog',
group: 'mygroup'
});
editor.contextMenu.addListener(function (element) {
return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
});
}
CKEDITOR.dialog.add('mydialog', function (api) {
// CKEDITOR.dialog.definition
var dialogDefinition =
{
title: 'Sample dialog',
minWidth: 390,
minHeight: 130,
contents: [
{
id: 'tab1',
label: 'Label',
title: 'Title',
expand: true,
padding: 0,
elements:
[
{
type: 'html',
html: '<p>This is some sample HTML content.</p>'
},
{
type: 'textarea',
id: 'textareaId',
rows: 4,
cols: 40
}
]
}
],
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
onOk: function () {
// "this" is now a CKEDITOR.dialog object.
// Accessing dialog elements:
var textareaObj = this.getContentElement('tab1', 'textareaId');
alert("You have entered: " + textareaObj.getValue());
}
};
return dialogDefinition;
});
}
});
Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was
Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor
In the plugin run some JS which intercept the right click on the image
CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
editor.addCommand('tEditImage',
{
exec: function (editor) {
//This opens the custom editor
ZWSInlineEditor.openImageProperties(editor, false);
}
});
if (editor.addMenuItem) {
// A group menu is required
// order, as second parameter, is not required
editor.addMenuGroup('gImage');
// Create a manu item
editor.addMenuItem('gEditImageItem', {
label: 'Edit Image Properties',
command: 'tEditImage',
group: 'gImage'
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(function (element, selection) {
// Get elements parent, strong parent first
var parents = element.getParents("img");
// Check if it's strong
if (parents[0].getName() != "img")
return null; // No item
return { gEditImageItem: CKEDITOR.TRISTATE_ON };
});
}
}
});
I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?