Fancytree properties for setting maxHeight, minHeight - fancytree

I want to give maxHeight and minHeight like below to my fancytree.
$("#tree").fancytree({
checkbox: true,
selectMode: 3,
autoSize: false,
fitToView: false,
minHeight: 300,
maxHeight: 600,
source: {
url: '#Url.Action("GetTerritories1", "Step1")',
dataType: "json",
success:function(data)
{
},
error:function(data, ajaxOptions, thrownError)
{alert(thrownError);}
},
lazyLoad: function(event, data){
// we can't return values from an event handler, so we
// pass the result as `data`attribute.
// alert('lazy call');
data.result = $.ajax({
url: '#Url.Action("GetTerritories1", "Step1")',
data: {mode: "children", nodeid: data.node.key}
});
}
});
});
I have gone through the documentation but could not determine if this is possible. Would there be another way to do this if not?

So fancytree is a jQuery plugin that I'm assuming you downloaded from this Github Project. There is some documentation, but as it is an Open Source project learning the project is really what you have to task yourself with. Usually learning the ins and outs is how to go.
Based on your question.
No. These options are the only options that are able to be used with fancytree. Depending on what you want to achieve it is possible to apply a min-width or min-height to an element via CSS or Javascript in almost any scenario. If you would like to make it more clear I can potentially provide an example of this, but as of now you cannot use options for this.
It may be a good idea to open an issue with the project on Github and request this as a functionality. You can open an issue by creating an account and going here. If the author or other contributors like your idea and it is well explained they may help you out!

Related

Lazy Loading Rows to (MUI) DataGridPro (example help)

Regarding example: https://mui.com/x/react-data-grid/row-updates/#lazy-loading
Im confused on where the example data ends and where the necessary params begin. Essentially, what in this can I comment out/remove/replace to hook my database up?
Example data is being loaded into the gird; I assume through:
import { createFakeServer, loadServerRows } from '#mui/x-data-grid-generator';
Is this only for the example or also needed for the LazyLoading to work? In other words, is a "fake server" being created that MUI is referencing or...?
I've written code to query my database and return rows, I have it setup with variables to accept a startAt and limit which I can link with the MUI datagrid, Im just not sure where to.
For example in the below, are filterModel, sortModel, columnsWithDefaultColDef, etc. needed? is this just for querying example data? I see that "dataServerSide" at the bottom, so am I leaving everything and only updating dataServerSide elsewhere or?
const fetchRow = React.useCallback(
async (params) => {
const serverRows = await loadServerRows(
dataServerSide,
{
filterModel: params.filterModel,
sortModel: params.sortModel,
},
{
minDelay: 300,
maxDelay: 800,
useCursorPagination: false,
},
columnsWithDefaultColDef,
);
return {
slice: serverRows.returnedRows.slice(
params.firstRowToRender,
params.lastRowToRender,
),
total: serverRows.returnedRows.length,
};
},
[dataServerSide],
);
Hope someone can help 🤓
I've tried creating external state management to inject/update rows but it doesn't use the lazy loading functionality, its jerry rigged to fire at onRowsScrollEnd. Id like to use the lazyLoading feature, despite it being experiential.

How to close multiple popups with Leaflet?

I have found exactly the behavior I am looking for (possible multiple popups and close them when user clicks on the map) from a hack exposed here http://bl.ocks.org/mpmckenna8/9395643
Unfortunately, this hack does not work with last 1.6.0 release.
Perhaps there is a mix of options that offers this behavior but I haven't found it.
I have prepared a jsfiddle to explore this: https://jsfiddle.net/PBrockmann/3j40ychf/
var popup1 = L.popup({
minWidth: 100,
closeOnClick: false,
autoClose: false
}).setContent("marker1");
L.circleMarker([51.5072, 0.1275]).addTo(map).bindPopup(popup1);
And also from https://observablehq.com/#pbrockmann/untitled/2
Any help welcome on this.
This code will close popups on all L.CircleMarkers - is that close enough?
map.on('click', function(e) {
map.eachLayer(function(layer) {
if (layer instanceof L.CircleMarker) {
layer.closePopup()
}
})
});

Feature request: Making the API show profile thumbnails when there are no track thumbnails

THIS IS A FEATURE REQUEST FOR THE SOUNDCLOUD CREW (since they do not respond via api#soundcloud.com)
Like SoundCloud itself, could the API show profile thumbnails when there are no track thumbnails available?
This way, when embedding SoundCloud tracks via Embedly or the like -- ie. http://jsbin.com/kezonutoroma/1/edit -- people won't have to be faced with those empty placeholder images.
https://soundcloud.com/oembed?url=https://soundcloud.com/liv-lykke/andres-haender&format=xml
<thumbnail-url>http://a1.sndcdn.com/images/fb_placeholder.png</thumbnail-url>
Should be:
<thumbnail-url>http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg</thumbnail-url>
Here is a static, more hacky solution:
var defaultimg = 'http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg';
$('div a').embedly({
key: '7c6cf67ad409446cacd53309d96b66a0',
query: {
maxwidth: 500,
autoplay: true
},
display: function(data, elem){
$(elem).html('<img src="'+defaultimg+'"/>');
$(elem).addClass('play')
.append('<span />')
.width(data.thumbnail_width)
.height(data.thumbnail_height)
.find('span')
.css('height', data.thumbnail_height)
.css('width', data.thumbnail_width);
}
}).on('click', function(){
var data = $(this).data('embedly');
$(this).replaceWith(data.html);
return false;
});
http://jsbin.com/qovirepoyoto/1/edit
I would recommend to get the default image via an API call to the user endpoint.
Hope this helps you.

How can I make a chrome packaged app which runs in fullscreen at startup?

Currently it seems that the fullscreen ability can only be activated from a user action (mouse/keyboard event). Is there a way to circumvent this?
Now, you can just add the state:"fullscreen" property on your main .js:
chrome.app.runtime.onLaunched.addListener(
function() {
chrome.app.window.create('index.html',
{
state: "fullscreen",
}
);
}
);
Make sure you don't add resizable: false or bounds properties, and you add a "fullscreen" permision on the manifest.json.
{
...
"permissions": [
...
"fullscreen"
]
}
You can use the HTML5 Fullscreen API, which requires a user action:
button.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
or the more "app-y" way using the AppWindow object, which doesn't require a user action:
chrome.app.window.current().fullscreen();
Both need the "fullscreen" permission in the manifest.json.
I have got it working with below code
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'width': 1024,
'height': 768
},
function(win) {
win.maximize();
});
});
Check out https://plus.google.com/100132233764003563318/posts/2SuD7MVd8mG referring to recently landed changelist https://chromiumcodereview.appspot.com/12205002. You can lift sample code from either of those sources:
document.body.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
Make sure in your manifest you're requesting the "fullscreen" permission and that you're testing on a sufficiently recent Chrome build (beta channel ought to have this feature by now, and dev definitely does).
Your question specifically refers to packaged apps, but in case anyone reading this answer missed this, this will work only with Chrome packaged apps.
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',{},function(window) {
window.fullscreen();
});
});
manifest.json
{
...
"manifest_version": 2,
"minimum_chrome_version": "23",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": ["fullscreen"]
}
Edit: Per BeardFist's comment, my original answer was wrong on two fronts. You can do this on a Chrome Extension (which this is tagged as), but probably not on a packaged app.
For extensions you can make it go fullscreen using the state:"fullscreen" option, which can be applied with chrome.window.update. The code below chains the creation of the window via chrome.windows.create with chrome.window.update. In my experiments you could not set the fullscreen state directly through the window creation.
chrome.windows.create(
{url:"PATH/TO/POPUP"},
function(newWindow) {
chrome.windows.update(newWindow.id, {state:"fullscreen"})
});

Create jQuery ui resizable instance using selector added to DOM by jQuery

I'm trying to start a jquery ui resizable instance, but using a selector added to the DOM by jquery itself. This is a basic example of my script:
HTML:
<div class='lyr'></div>
jQuery:
// Add class
$('lyr').addClass('fixed');
// Resizable
$('.fixed').resizable({
aspectRatio: true,
handles: 'all'
});
I've thought about using something along the lines of live() or bind() but I have no event to bind to. Any help appreciated.
I have used the LiveQuery plugin - http://brandonaaron.net/code/livequery/docs in the past to be able to target elements added to the dom, like in your case.
If I've got this right, you want anything on the page which has the class "fixed" to be resizable, even if the class is added after the page has loaded? You're right that live, bind and delegate won't help here.
I can think of two possibilities, neither lovely.
First, set up a live "mouseenter" event which will make the element resizable if it wasn't before:
$(body).delegate(".fixed", "mouseenter", function(ev) {
var target = $(ev.target);
if (target.data("resizable")) return;
target.resizable({
aspectRatio: true,
handles: 'all'
});
})
This gets us round the problem of having no event to bind to.
Alternatively, you could monkeypatch jQuery.fn.addClass:
var classRe = new RegExp(c + className + \b);
._addClass = jQuery.fn.addClass;
jQuery.fn.addClass = function(className) {
if (classRe.test(classname)) {
if (this.data("resizable")) return;
this.resizable({
aspectRatio: true,
handles: 'all'
});
}
jQuery.fn._addClass.apply(this, arguments);
}
Of course this will only work if the class is added through the addClass method.
Also in your example,
$('lyr').addClass('fixed');
Should probably be:
$('.lyr').addClass('fixed');