I try add event listener to '+' zoom element icon when him state is disabled. please help me.
JSFIDDLE here.
code:
ymaps.ready(init);
var myMap,
collectionMarkers,
currCoords = [55.76, 37.64];
function init(){
myMap = new ymaps.Map("map", {
center: currCoords,
zoom: 18
});
const zoomControl = new window.ymaps.control.ZoomControl();
myMap.controls.event.add('disabled', () => {
console.log('+ is disable')
});
};
What about this workaround?
myMap.events.add('boundschange', function(event) {
if (event.get('newZoom') !== event.get('oldZoom')) {
myMap.layers.getZoomRange().then(function(zoomRange) {
if (event.get('newZoom') === zoomRange[1]) {
console.log('+ is disable')
}
})
}
});
http://jsfiddle.net/0tw3qryh/
Related
I am using React button with child components that change based on the state like, is button pressed, touched etc. I have defined custom event handlers that change the states, isPressed, isTouched etc.
Issue: On iPhone , the onTouchEnd is not firing. With, iOS voiceover turned ON the issue is more prominent because mouse events are not fired. So the user has to tap-tap twice to actually click succeed.
Here are the events -->
const onMouseDown = function(){
setPressed(true);
};
const onMouseUp = function(){
handleClick();
}
const onTouchStart = function(){
setTouched(true);
setHover(false);
setPressed(true);
};
const onKeyDown = function(keyboardEvent: any){
if (keyboardEvent.key === "Enter") {
handleClick();
};
};
const onTouchMove = function(e: any){
e.preventDefault();
};
const onTouchEnd = function(e: any) {
e.preventDefault();
setTouched(false);
setHover(false);
if (!clicked) {
handleClick();
}
};
const onFocus = function () {
if (!touched) {
setHover(true);
}
};
const onKeyUp = function(keyboardEvent: any) {
if (keyboardEvent.key === "Enter") {
handleClick();
}
};
const onBlur = function() {
setHover(false);
setPressed(false);
};
const onMouseOver = function () {
if (!touched) {
setHover(true);
}
};
const onMouseOut = function () {
setHover(false);
setPressed(false);
}
This is the button content -
<button
style={buttonStyle}
onMouseDown={onMouseDownf}
onMouseUp={onMouseUp}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
onMouseOver={onMouseOver}
onFocus={onFocus}
onMouseOut={onMouseOut}
onBlur={onBlur}
onTouchStart={onTouchStart}
onTouchCancel={onTouchCancel}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onClick={() => { console.log("onClick") }}
disabled={props.disabled}
>
{
pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent
}
</button>
</>
If I remove the dynamic content it works fine, i.e. -->
{ pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent }
to
{ normalButtonContent }
Looks like when the child component changes, the button (i.e. the parent) is re-rendered. And so the onTouchEnd is not fired. Probably a race condition between the re-render and onTouchEnd call.
Moving the dynamic component i.e. spinner / normalButtonContent outside of the button helped workaround this issue.
I try using contents.findInPage.
I have code in index.js:
const { webContents } = require('electron')
webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) webContents.stopFindInPage('clearSelection')
})
const requestId = webContents.findInPage('api')
console.log(requestId)
And code in component:
searchText(value){
this.query = value;
if (this.query.length > 0) {
ipcRenderer.send('api', this.query);
}
}
I wrote this code on the example of this answer.
But function find not work. I do not understand how I can send the text to be searched and the word to be searched.
How I can use function findInPage ?
sorry my answer to the other question wasn't clear enough (it was 2 years ago! I don't remember it that well but I'll give it a shot)
This is the documentation for webcontents and IPCMain
Here's what I have in my main.development.js (globals for the mainWindow and ipc communication):
mainWindow.on('focus', () => {
globalShortcut.register('CmdorCtrl+F', () => {
mainWindow.webContents.send('find_request', '');
});
});
mainWindow.webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) {
mainWindow.webContents.stopFindInPage('keepSelection');
}
});
ipcMain.on('search-text', (event, arg) => {
mainWindow.webContents.findInPage(arg);
});
mainWindow.on('blur', () => {
globalShortcut.unregister('CmdorCtrl+F');
});
Then I made an ipc listener for CmdorCtrl+F:
ipcRenderer.on('find_request', () => {
const modalbox = document.getElementById('modalbox');
if (modalbox.style.display === 'block') {
modalbox.style.display = 'none';
} else {
modalbox.style.display = 'block';
}
});
Then I made a modal searchbox:
const searchBox = (
<div
id="modalbox"
style={{ display: 'none', position: 'fixed', zIndex: 1 }}
><input type="text" onChange={Calls.searchPage} />
</div>);
The onchange sends the input text to the ipc listener:
static searchPage(event) {
ipcRenderer.send('search-text', event.target.value);
}
I hope this is enough for you to get it fixed :)
i am new to jquery,i need to disable[grey out] the 'Cancel SUP' button which is an jquery BUTTON WIDGET.Below is my code..please some one help me in sorting out this issue
var buttons = {
'Exi1': function() {
$(this).dialog('close');
}
};
if(batch.SUPDELIVERYMETHOD === 'Email' && details.STATUS === 'VALID') {
buttons['Re-send SUP'] = resendPass;
}
if(details.STATUS === 'VALID') {
buttons['Cancel SUP'] = function() {
$('#dialog-confirm-cancelsup').dialog('open');
};
}
Found an older answer here: How can I disable a button on a jQuery UI dialog?
You would use it like so:
https://jsfiddle.net/Twisty/ksk5skxy/
JavaScript
var btns = {
"Exi1": function(e) {
$(this).dialog('close');
}
};
if (batch.SUPDELIVERYMETHOD === 'Email' && details.STATUS === 'VALID') {
btns["Re-send SUP"] = resendPass;
}
if (details.STATUS === 'VALID') {
btns["Cancel SUP"] = function(e) {
$('#dialog-confirm-cancelsup').dialog('open');
};
}
$(function() {
$("#diag").dialog({
buttons: btns,
width: "400px"
});
$(".ui-dialog-buttonset button:contains('Cancel SUP')").button("disable");
});
I'm trying to get a custom slider up and running using the directives concept.
I have an issue when updating the slider from the input field.
The directive part below and a working example on jsfiddle.
Why is this line $privateScope.sliderElement.slider('value', value); throwing an error and how could I solve it?
app.directive('slider', function ($parse) {
var $privateScope = {};
return {
restrict: 'A',
template: '<div class="slider"></div><div class="input-append"><input class="span1" type="text" ng-model="percentage"><span class="add-on">%</span></div>',
scope: {
slider: '#',
percentage: '='
},
controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) {
// Why this doesn't work?
// $attrs.$observe('percentage', function (value) {
// console.log('$attrs.$observe.percentage', value);
// });
// Slider API: http://api.jqueryui.com/slider/
$privateScope.sliderElement = $('.slider', $element).slider({
value: $scope.percentage
});
}],
link: function ($scope, $element, $attrs) {
var changedBySlider = false;
$scope.$watch('percentage', function (value) {
// console.log('$scope.$watch.percentage', value);
if (changedBySlider !== true) {
console.log('change the slider');
// This throws an error
// $privateScope.sliderElement.slider('value', value);
} else {
console.log('don\'t change the slider');
changedBySlider = false;
}
});
$privateScope.sliderElement.on('slidechange', function (event, ui) {
$scope.$apply(function () {
// Why this doesn't work?
// $parse($attrs.percentage).assign($scope, ui.value);
$scope.percentage = ui.value;
changedBySlider = true;
});
});
$scope.$on('$destroy', function (event) {
console.log('on destroy');
});
}
}
});
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}