I am trying to add classes to markers which works fine. However when it is a divIcon it requires different styling. So I am trying to set another className if the Instance is a DivIcon.
The Code below is always true because L.divIcon is still a marker(?)
if(e.target instanceof L.DivIcon) {
let icon = e.target._icon
if(!(L.DomUtil.hasClass(icon, 'leaflet-pm-divIcon-selected'))) {
L.DomUtil.addClass(e.target._icon, 'leaflet-pm-divIcon-selected')
}
}
else if (e.target instanceof L.Marker) {
let icon = e.target._icon
if(!(L.DomUtil.hasClass(icon, 'leaflet-pm-marker-selected'))) {
offsetMarker(icon, 8)
L.DomUtil.addClass(e.target._icon, 'leaflet-pm-marker-selected')
}
}
doing e.target instanceof L.Marker && e.target instanceof L.DivIcon also does not work
Check if the layer icon is L.DivIcon:
e.target.getIcon() instanceof L.DivIcon
Related
As far as I know the directionality plugin in TinyMCE, with the button ltr, only apply dir="ltr" to the selected top element.
I want to change this behaviour, so it will apply the ltr directionality to all subtree elements of the selected element, in which the direction is not ltr.
I solved it outside of the directionality plugin using:
editor.on('ExecCommand', function(e) {
switch(e.command){
case "mceDirectionLTR":
var selectedNode = tinymce.activeEditor.selection.getNode();
changeDirection(selectedNode,'ltr');
break;
case "mceDirectionRTL":
var selectedNode = tinymce.activeEditor.selection.getNode();
changeDirection(selectedNode,'rtl');
break;
}
});
And
function changeDirection(rootNode, desiredDirectionLiteral){
var node; var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT, null, false);
while (node = walk.nextNode()) {
if (node.dir !== null && node.dir !== '' && node.dir !== desiredDirectionLiteral) {
node.dir = desiredDirectionLiteral;
}
}
}
Im trying to check each geojson feature if it is a Marker. If it is I want to remove the placed layer then init drawing marker again.
If it is not the same position, I will just add it to the feature layer.
The problem is with eachLayer it always returns true because it loops trough all layers and it always return true because marker is added to feature. So it always repeats.
features.eachLayer(layer => {
if(layer.pm._shape === 'Marker') {
if(e.layer._latlng !== layer._latlng) { //This is never true, should be true if the placed marker is not placed over an existing features marker
features.addLayer(e.layer);
} else if(e.layer._latlng === layer._latlng) { //this elseif is always true for some reason and will loop
map.removeLayer(e.layer)
DrawUtil.addMarker(map, isSnapping); //Alias for pm.enableDraw.marker
features.addLayer(e.layer);
}
}
})
Here is fiddle, my bad forgot to add vital code.
https://jsfiddle.net/2ftmy0bu/2/
Change your code to:
// listen to when a new layer is created
map.on('pm:create', function(e) {
//should only place one marker each time
// check if the layer with the same latlng exists
var eq = features.getLayers().find(function(layer){
if(layer instanceof L.Marker) {
return layer.getLatLng().equals(e.layer.getLatLng())
}else{
return false;
}
}) !== undefined;
if(!eq) {
console.log('not equal')
features.addLayer(e.layer);
map.pm.disableDraw('Marker')
//if marker is placed on the map and it is not placed on same place as another marker
} else if(eq) {
console.log('equal')
//if marker is placed on the map over another marker, remove marker, then init draw marker again.
map.removeLayer(e.layer);
map.pm.enableDraw('Marker', {
snappable: true,
snapDistance: 20,
finishOn: 'click' || 'mousedown',
});
// TODO: I think you don't want this
// features.addLayer(e.layer);
}
});
https://jsfiddle.net/falkedesign/c6Lf758j/
I am trying to create a form which has some mandatory fields that requires validation on form submission.
Could anyone suggest me the best possible way to do that in SAP UI5? The mandatory fields are in greater number, thus i don't want to check all fields separately by their ID.
You can do this in two scenarios. While entering a value, or when submitting the form as in your question.
CheckRequired: function(oEvent) {
var aInputs = [this.getView().byId(oEvent.getSource().getId())];
var sError = false;
jQuery.each(aInputs, function(i, input) {
if (!input.getValue() || input.getValue().length < 1) {
input.setValueState("Error");
input.focus();
sError = true;
} else {
input.setValueState("None");
}
});
return sError;
},
This function is to be used with the onLiveChange property. It checks if the control is filled with at least one character.
If you would like to check everything when you press submit. you could use a function like this with your form:
_onSubmitCheck: function() {
var oForm = this.getView().byId("form").getContent();
var sError = false;
oForm.forEach(function(Field) {
if (typeof Field.getValue === "function") {
if (!Field.getValue() || Field.getValue().length < 1) {
Field.setValueState("Error");
sError = true;
}
else {
Field.setValueState("None");
}
}
});
return sError;
},
It will loop over your form controls to check if the getValue() method exists as part of the control. If that returns yes, it wil check if it has a value of at least 1 character.
There are kind of two ways.
add
"sap.ui5": {
...
"handleValidation": true,
to your manifest.json and type & constraints to your inputs
<Input type="Text" value="{path: 'NoFioriValidationsInDefault', type: 'sap.ui.model.type.String', constraints: { minLength:2 }}" valueLiveUpdate="true" enabled="{= ${editView>/nfvid/enabled} && ${editView>/creating}}" visible="true" width="auto" valueHelpOnly="false" maxLength="0" id="inp_cond_nfvid" required="{editView>/nfvid/required}"/>
This gives just visual feedback to the user, if you need the status in your controller you can either iterate over all the inputs and check them by hand, or use https://github.com/qualiture/ui5-validator
Just by calling
var validator = new Validator();
validator.validate(this.byId("form1"));
if (!validator.isValid()){
//do something additional to drawing red borders? message box?
return;
}
in your controller, the view will mark missing required inputs with the ValueState.ERROR (red borders) and tell you if all inputs inside the supplied control are valid.
I am doing it the old-school way. The input fields do get the required=true property and then I loop over all controls found with this property:
// store view ID to compare with control IDs later
var viewId = this.getView().getId();
jQuery('input[required=required]').each(function () {
// control has wrapper with no id, therefore we need to remove the "-inner" end
var oControl = sap.ui.getCore().byId(this.id.replace(/-inner/g,''));
// CAUTION: as OpenUI5 keeps all loaded views in DOM, ensure that the controls found belong to the current view
if (oControl.getId().startsWith(viewId) && (oControl instanceof sap.m.Input || oControl instanceof sap.m.DatePicker)) {
var val = oControl.getValue();
if (!val) {
oControl.setValueState(sap.ui.core.ValueState.Error);
oControl.openValueStateMessage();
bError = true;
return false;
} else {
oControl.setValueState(sap.ui.core.ValueState.None);
oControl.closeValueStateMessage();
}
}
});
HTH,
Anton
I have a leaflet map which I am refreshing with new data from the server. You can click on the map feature and a popup will show for the point. Every time the refresh happens, I remove the layer using map.removeLayer, add the new data using L.geoJson, but the popup goes away. I want the popup to stay active with the new data. I know this probably won't work the way I'm doing it by removing the layer. Is there another way to do this that will refresh the layer data and maintain the selected feature popup?
This is the refresh function that I call after I get the new data from the server.
function refreshMapLocations() {
map.removeLayer(locationLayer);
locationLayer = L.geoJson(locations, {
onEachFeature: onEachFeature
}).addTo(map);
}
This creates the popup for each feature
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.UserName) {
layer.bindPopup(feature.properties.UserName);
}
}
This worked, I keep track of an id that I set in the popup content. After the layer is added I store the Popup that has the clickedId and do popupOpen on that.
var popupToOpen;
var clickedId;
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.UserName) {
if (feature.properties.MarkerId == clickedId) {
layer.bindPopup("div id='markerid'>"+feature.properties.MarkerId+"</div>feature.properties.UserName);
} else {
layer.bindPopup("div id='markerid'>"+feature.properties.MarkerId+"</div>feature.properties.UserName);
}
}
}
function refreshMapLocations() {
map.removeLayer(locationLayer);
locationLayer = L.geoJson(locations, {
onEachFeature: onEachFeature
}).addTo(map);
if (popupToOpen != null) {
popupToOpen.openPopup();
}
}
function initMap() {
...
map.on('popupopen', function (e) {
...
//clickedId = id from event popup
}
}
I'm using tiny mce, but I found it adds multiple spans with inline styles to the content for any applied style. Inline styles are not W3c Compliant, so must avoid inline css. Is it possible to create css class on the fly and apply to the selection, while editing content in tiny mce ?
Yes that is possible, but it took me some effort. What needs to be done is to write the class into the head of the editors iframe. Here is some example code which should work for IE,FF, Safari and point you into the right direction:
fonturl = "http://myfonts.com/arial.ttf"
csstext_to_add = '#font-face {font-family: "ownfont";src: url("'+fonturl+'");}'; // example
iframe_id = ed.id;
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = csstext_to_add;
}
else {
newStyleSheet.appendChild(document.createTextNode(csstext_to_add));
newStyleSheet.innerHTML=csstext_to_add;
}
}
catch(e){}
}
It is also possible to add that class as option into a dropdown (what takes some effort).
Thariama's answer was perfect. I'm using the tinyMCE jQuery connector for some of my pages and I have multiple instances of tinyMCE on the page. I made some modifications, but essentially its the same thing. I've created a text area field on the page that people can provide their own CSS. Also, I needed to change some CSS rules on the fly...
// function to change tinyMCE css on the fly
function checkCustomCSS() {
var $css = $('#page_css'),
newcss;
if ($css.val().length > 0) {
// since front end, we are wrapping their HTML in a wrapper and
// the tinyMCE edit iFrame is just using <body>, we need to change
// some rules so they can see the changes
newcss = $css.val().replace('#content_wrapper', 'body');
// loop through each tinyMCE editor and apply the code changes
// You could check the editor.id to make sure that the correct
// editor gets the appropriate changes.
$.each(tinyMCE.editors, function() {
var $this = $(this),
editorID = $this[0].id,
$ifrm = $('#' + editorID+ '_ifr'),
cwin, head, sheet;
if ($ifrm.length > 0 /* && editorID === 'OUR_EDITOR_ID_NAME' */) {
cwin = $ifrm[0].contentWindow;
head = cwin.document.getElementsByTagName("head");
if (!head.length) {
return;
}
sheet = cwin.document.createElement("style");
sheet.type = "text/css";
head[0].appendChild(sheet);
try {
if (typeof sheet.styleSheet !== "undefined") {
sheet.styleSheet.cssText = newcss;
} else {
sheet.appendChild(cwin.document.createTextNode(newcss));
sheet.innerHTML = newcss;
}
} catch (e) {}
}
});
}
}
Then in the tinyMCE init call I added and onInit call to setup changes to the #page_css , like this:
oninit: function() {
$('#page_css').on('change', function() {
checkCustomCSS();
});
}
Works like a charm.