I'm trying to translate the table pagination of a material ui table. The guy from MUI said it's somehow possible (issue).
So does anybody knows how to translate to of from the displayed rows label ${from}-${to} of ${count}
You can set 'labelDisplayedRows' of TablePagination
<TablePagination
...
labelDisplayedRows={
({ from, to, count }) => {
return '' + from + '-' + to + ' из ' + count
}
}
/>
More properties in docs: https://material-ui.com/ru/api/table-pagination/
Related
When the users selects some text, I want to be able to show a tooltip, right below the selected text?
Any ideas how can I do that?
You could add a component that creates the tooltip, such as paper-tooltip, or create one, even with css only, depends on your usecase.
Here is a W3 example of a CSS tooltip
As far as I can tell, react-draft-wysiwyg does not support arbitrary plugins in the same way that draft-js-plugins does.
Searching on NPM, the only text selection related plugin I found is draft-js-delete-selection-plugin. You could use that as a starting point, as well as look at the documentation for SelectionState.
Without any idea of what you have so far it is hard to provide more info. I have created a JS fiddle that shows a simple tool tip with an event listener that gets the selected text by element id
https://jsfiddle.net/03Lu28qb/1/
$(document).ready(function () {
const textSelectionTooltipContainer = document.createElement("div");
textSelectionTooltipContainer.setAttribute(
"id",
"textSelectionTooltipContainer"
);
textSelectionTooltipContainer.innerHTML = `<p id="textSelected">Selected! </p>`;
const bodyElement = document.getElementsByTagName("BODY")[0];
bodyElement.addEventListener("mouseup", function (e) {
var textu = document.getSelection().toString();
if (!textu.length) {
textSelectionTooltipContainer.remove();
}
});
document
.getElementById("textToSelect")
.addEventListener("mouseup", function (e) {
let textu = document.getSelection().toString();
let matchu = /\r|\n/.exec(textu);
if (textu.length && !matchu) {
let range = document.getSelection().getRangeAt(0);
rect = range.getBoundingClientRect();
scrollPosition = $(window).scrollTop();
containerTop = scrollPosition + rect.top - 50 + "px";
containerLeft = rect.left + rect.width / 2 - 50 + "px";
textSelectionTooltipContainer.style.transform =
"translate3d(" + containerLeft + "," + containerTop + "," + "0px)";
bodyElement.appendChild(textSelectionTooltipContainer);
}
});
});
If you trying to do it in react try this.
If you trying to do it in js try this.
I have some geoJSON objects brought in from a database and want to display them on a map using Leaflet.
As I have multiple objects visible with the same style icon/marker I don't know which is which until I click on each one at the moment.
I have working code to pop up a box with full information when I click on each object.
What I really want is to have each item with a label visible all the time so I know which one to click on to get more information.
I can see from the .bindTooltip method how to get a fixed label, but when I run my code, only the first object from the geoJSON file gets the label.
I can't find any examples of anyone doing anything similar - any maps with multiple labels are created from manually created points.
The code segment in particular looks like this:
// This shows correct geoJSON name but shows fixed label only for 1 (first) geoJSON object!
function fixedLabel(layer) {
return layer.feature.properties.name
};
function clickLabel (feature,layer) {
layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°");
};
var vesselsLayer = L.geoJson(vessels,{
onEachFeature: clickLabel
})
.addTo(map).bindTooltip(fixedLabel, {permanent: true, direction: 'right'}).openTooltip();
map.fitBounds(vesselsLayer.getBounds());
The full code & geoJSON code are in github here:
https://github.com/DPB61/leafletjs_test01
Am I going completely the wrong way about getting labels on each object?
You are binding the tooltip to the GeoJSON layer, not to each individual layer contained within it. Try something like this:
L.geoJson(vessels,{
onEachFeature: function (feature, layer) {
layer.bindPopup("ID: " + feature.properties.id + "<br>Name: " + feature.properties.name + "<br>DateTime: " + feature.properties.vdatetime + "<br>Speed: " + feature.properties.speedknots + " knots<br>CMG: " + feature.properties.cmg + "°");
layer.bindTooltip(feature.properties.name, {permanent: true, direction: 'right'}).openTooltip();
}
}).addTo(map)
I want to add a custom button that sets up a bootstrap accordian element. To do this, I will need to know how many other accordian elements are in the text already so that I can give the new element the proper ID. Right now I have:
// Add a custom button
ed.addButton('accordianArea', {
title : 'Accordian Area',
text : '[accordian/]',
icon: false,
onclick : function() {
// Add you own code to execute something on click
ed.focus();
var text = ed.selection.getContent({'format': 'html'});
var accordianText = '<div class="panel panel-default">' +
'<div class="panel-heading" role="tab" id="heading1">' +
'<h4 class="panel-title">' +
'<a role="button" data-toggle="collapse" href="#heading1" aria-expanded="true" aria-controls="heading1">' +
'Accordian Title<span id="_cursor" />' +
'</a>' +
'</h4>' +
'</div>' +
'<div id="heading1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">' +
'<div class="panel-body">' +
(text ? text : 'Accordian Text') +
'</div>' +
'</div>' +
'</div>';
ed.execCommand('mceInsertContent', false, accordianText);
ed.selection.select(ed.dom.select('#_cursor')[0]); //select the inserted element
ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
ed.dom.remove('_cursor'); //remove the element
}
});
I need to be able to count how many panel-collapse classes are in the text so I can make heading1 and collapse1 increment accordingly with each new add. Also I suppose I will need to be able to edit the ones already there in case one is removed, so that the next one added is not a duplicate of a different one.
Is there a way count these in either jQuery or javascript?
Thanks,
James
Yes, this is possible:
var ed = tinymce.get('your_editor_id');
var $elements = $(ed.getBody()).find('.panel-collapse');
var count = $elements.length;
after clicking on a div I am generating a textarea. After then I am loading tinyMCE on it. This works well but after loading the tinyMCE I want to set focus on it using "mceFocus". This isn't working. No focus set regardless which browser I try.
$.when(
btn.parent().html('<textarea autocomplete="off" name="' + fld + '" id="' + fld + '" readonly></textarea>')
).done(function() {
tinyMCE.execCommand('mceAddControl', false, fld);
tinyMCE.execCommand('mceFocus', false, fld);
});
Here is the plunker: http://plnkr.co/edit/fGVVOOIwvf4GrEj3XtJ6?p=preview
I have created a multi row grid and I would like to filter the grid data for each column header.
If I put an input box outside the grid it is working fine. If I put an input box inside the column header filtering is not working
Please see the code and help me for this.
Use this filterBar plugin. (I cannot take credit for this, I do not remember where I found it.)
Plugin
var filterBarPlugin = {
init: function(scope, grid) {
filterBarPlugin.scope = scope;
filterBarPlugin.grid = grid;
$scope.$watch(function() {
var searchQuery = "";
angular.forEach(filterBarPlugin.scope.columns, function(col) {
if (col.visible && col.filterText) {
var filterText = (col.filterText.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
searchQuery += col.displayName + ": " + filterText;
}
});
return searchQuery;
}, function(searchQuery) {
filterBarPlugin.scope.$parent.filterText = searchQuery;
filterBarPlugin.grid.searchProvider.evalFilter();
});
},
scope: undefined,
grid: undefined,
};
Change your header cell input ng-model to: col.filterText
<input type="text" placeholder="MY NAME" ng-model="col.filterText" ng-change="activateFilter()"/>
Add plugin to gridOptions
...
plugins: [filterBarPlugin],
...
Updated Plunker: Plunker
I know this is old, but in case someone else ends up here...
Here is a google group thread discussing this: https://groups.google.com/forum/#!topic/angular/lhu5Fbs97G4
and within that discussion you can find the following plnkr which does what you are wanting (and which I think the above answer references):
http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview