nathancahill / split Goto Github PK
View Code? Open in Web Editor NEWUnopinionated utilities for resizeable split views
Home Page: https://split.js.org/
License: MIT License
Unopinionated utilities for resizeable split views
Home Page: https://split.js.org/
License: MIT License
By wrapping the page within a div (open it just after body and close it just before /body) the layout seems broken. Is there any workaround for this?
thanks
Davide
I have a problem using Split.js with my browserify-based project.
Browserify packages every module into a function call, so when Split.js is imported, the .call(this) at the end of the module won't refer anymore to the global window object, but it will be undefined.
Do you have a suggestion to this problem?
When a split pane has a right side with a 0 minimum width, the scrollbar will hide the grip, making it impossible to change the size again. Tested with Firefox 42.
A demo with a fully collapsible pane would be nice.
Would it be possible to get the current sizes of the split pairs in the callbacks? I need to update an external source on dragend.
Looks like not so good decision.
parent[addEventListener]('mouseleave', stopDragging.bind(pair))
Any careless mouse move can break resizing.
The latest on npm is 1.0.6: https://www.npmjs.com/package/split.js
Hello! First of all, thanks for provinding this utility.
I'm using Split.js in a simple web app where it's very common to open the developer console, thus resizing the window. I need my left pane to keep a minimum width since otherwise the layout breaks.
Looks like there is no refresh
/ fitMin
method exposed to be called on window.onresize
. Perhaps this could be added for another release?
For now I'm manually triggering click events and somehow it works, although it's pretty ugly and not very efficient ๐ :
var refreshSplit = function() {
var mousedown = new CustomEvent('mousedown');
var mousemove = new CustomEvent('mousemove', {bubbles: true});
var mouseup = new CustomEvent('mouseup', {bubbles: true});
var gutter = document.querySelector('.gutter-horizontal');
mousemove.clientX = gutter.getBoundingClientRect().left;
gutter.dispatchEvent(mousedown);
gutter.dispatchEvent(mousemove);
gutter.dispatchEvent(mouseup);
};
And then throttling that:
var lock;
window.onresize = function() {
clearTimeout(lock);
lock = setTimeout(refreshSplit, 100);
};
Hello,
I wonder that Split.js supoort cookie.
For some reason, I have to disable the css height of my container, drag the splitter a random amount, and then re-enable the height property in order for the splitter to work. Until I do that I can't move the splitter at all. Any idea why this might be or how I could simulate that effect to get it to work?
To clarify, I have a vertical splitter of two divs and initially if you try to drag the splitter, nothing happens. However, if you hit F12 in Chrome (latest version), disable the height on the container, drag it a little bit, and then re-enable the height, then it works flawlessly.
Just disabling and re-enabling the height doesn't work and so does just dragging it. It has to be dragged while the height property is disabled. It's extremely weird and took me forever to figure out this workaround. Any idea why this might be or how I can fix it?
This causes empty white space to the right of the second split pane, which at least in my case is incorrect. The desired behavior would be to have the panes to increase in size to fill the container.
At least none I could see (Chrome latest stable, OS X).
Sorry, again :)
The fact that I have to give element ids, when initializing Split.js seems to be limiting. In many project, using ids are discouraged.
The getElemetById may could be replaced with querySelector, that would accept any kind of selector.
The version of Webkit included in PhantomJS 1.9.x does not include support for -calc
or -webkit-calc
. When running the tests with grunt jasmine
, all tests fail.
Manually updating gruntjs/grunt-lib-phantomjs to use PhantomJS2 results in the tests hanging. Here's the relevant issue: gruntjs/grunt-lib-phantomjs/issues/74
Once this is fixed, we can use a CI service for testing.
Running "jasmine:test" (jasmine) task
Testing jasmine specs via PhantomJS
Split
X splits in two when given two elements
Expected '' to be 'calc(50% - 5px)'. (1)
Expected '' to be 'calc(50% - 5px)'. (2)
X splits in three when given three elements
Expected '' to be 'calc(33.3333% - 5px)'. (1)
Expected '' to be 'calc(33.3333% - 10px)'. (2)
Expected '' to be 'calc(33.3333% - 5px)'. (3)
X splits vertically when direction is vertical
Expected '' to be 'calc(50% - 5px)'. (1)
Expected '' to be 'calc(50% - 5px)'. (2)
X splits in percentages when given sizes
Expected '' to be 'calc(25% - 5px)'. (1)
Expected '' to be 'calc(75% - 5px)'. (2)
X splits in percentages when given sizes
Expected '' to be 'calc(25% - 5px)'. (1)
Expected '' to be 'calc(75% - 5px)'. (2)
X accounts for gutter size
Expected '' to be 'calc(50% - 10px)'. (1)
Expected '' to be 'calc(50% - 10px)'. (2)
X accounts for gutter size with more than two elements
Expected '' to be 'calc(33.3333% - 10px)'. (1)
Expected '' to be 'calc(33.3333% - 20px)'. (2)
Expected '' to be 'calc(33.3333% - 10px)'. (3)
X accounts for gutter size when direction is vertical
Expected '' to be 'calc(50% - 10px)'. (1)
Expected '' to be 'calc(50% - 10px)'. (2)
X accounts for gutter size with more than two elements when direction is vertical
Expected '' to be 'calc(33.3333% - 10px)'. (1)
Expected '' to be 'calc(33.3333% - 20px)'. (2)
Expected '' to be 'calc(33.3333% - 10px)'. (3)
be cool if someone added an Angular2 wrapper...
if added, I would add this to http://ng2.javascriptninja.io
Regards,
Sean
Preparing the test environment with 'npm install' fails at the PhantomJS stage on Ubuntu 14.04:
npm ERR! Linux 3.19.0-47-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! This is most likely a problem with the phantomjs2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs2
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/q/Split.js/npm-debug.log
Log file: npm-debug.zip
You can use touch to resize in Chrome, but when I tried to with Edge, it doesn't work (using mouse does work in Edge (but that doesn't work well with a tablet))
So we could align initial panes sizes with other elements in the page.
This is a minor issue I noticed. Please check this demonstration. It's also reproducible on your website.
Click and hold the first gutter from the left and move it left and right. Everything is smooth and perfect. You can see the cursor type remains the same.
Do the same on the second or third gutter. When you move the gutter to left, cursor type kind of flickers between default
and col-resize
. When you move it to right, col-resize
is completely lost and it becomes default
.
I find myself wanting to supply a list of nodes rather than css selectors. Is there an option? If not, is it plausible that it could be added?
Hi,
Just wanted to ask a couple of questions :
https://github.com/nathancahill/Split.js/blob/master/split.js#L265
sets isFirst
if i
is 1. That's a little unobvious, but I can see later on that you're talking about pairs - ie the splitter always goes between two elements.
isLast
makes sense either way.
However, lower down I see :
https://github.com/nathancahill/Split.js/blob/master/split.js#L314
I was wondering why you half the gutter size for i===0 instead of i==1 (not sure why == changed to == either - is there something I'm missing there?).
Hrm, I guess I'm just confused by the variable names? isFirst
doesn't mean first element, but second element of first pair? isLast
seems the same though.
I was originally trying to figure out why my splitter has broken with an upgrade to the latest version - I guess I still need to figure out what's going on. I currently have :
Split(this.getContentChildren(), { sizes: [60, 40] });
Thanks for any insights.
Max.
I want to be able to dynamically create and remove splits. Obvs we can create splits but is there a way to dynamically remove splits also?
Creates a global function, please implement a way to prevent global namespace pollution and export the module, in short AMD support.
Each element has scroll bars in IE, even when content is not overflowing.
Please provide licencing so people can use it.
Remember last state in Local Storage =)
If I split like this:
Split(['lileftpanel', 'rightpanel'], {
sizes: [5, 95],
minSize: [200, 200]
});
and my container is 600px wide, the initial size of the first pane get set to 5% of 600 which is 30px which is smaller than the minsize I set. minSize should overwrite the initial size if it is bigger.
Otherwise it would be nice to be able to specify the initial sizes in pixel (not just in percentage) so I can align panes with other elements located on top of them.
It would be nice if a user can toggle(open/close) any Pane by clicking on the gutter.
EDIT: sorry, I didn't see #27
Because of a float division or rounding error, when splitting in 3 or more panes, the total width is too wide and the last pane falls off.
I think this is caused by clientWidth
returning an integer, which is then used to calculate percentages. When done repeatedly, it makes the sides creep right or left.
Using getBoundingClientRect()
might fix this.
I would like to see an enhancement to be able to collapse a split panel.
Essentially 'collapse()' would set the width (or height) to zero and the panel next to it to 100%.
A call to 'expand()' would bring back the gutter to the last state.
Collapse should also be available when min-size is not 0.
is there an api to call to show/hide certain div? would be nice for shortcut button.
Hi,
In my application there are multiple split panel. So we have to provide feature like user could remove or add any panel dynamically.
So are you supporting this feature right now. If yes, then please let me know how to achieve this.
If parent has flex-direction
as row-reverse
, the sequence of the elements in the DOM doesn't actually reflect the visual sequence and hence the library logic breaks and causes unintended resizing.
Provide method i.e. destroy
to remove all listeners.
The README suggests bower install split.js
should work, but, unless I'm very much mistaken, it doesn't.
It seems like it should be capitalised, ie bower install Split.js
.
I need to manipulate the split position programmatically, it would be useful if the Split function would return an object, that can contain API functions like this.
I solved it temporarily like this:
Split = function (ids, options) {
...
return {
resize: function(size) {
adjust.call(pair, size);
if (options.onDrag) {
options.onDrag()
}
}
}
}
Hey I'm trying to make the split items full height of the browser window minus the height of the navbar.
But when setting the height to for example 100% . The split view functionality does not work anymore.
How can I achieve this?
Thanks for the help!
Make available through webjars/Maven
Hi there! I was just wondering if anyone has built anything integrating this with Angular. My idea is that there would be a split-area
directive that you could use in your app to make divs inside of it automatically split-able. I'm playing around with it with @CCole and having some trouble getting a minimal example working
<div>
<div class="left"></div>
<div class="divider"></div>
<div class="right"></div>
</div>
It put what seems to be the simplest example here
It's just this
<div>
<div id="left"> foo </div>
<div id="right"> bar </div>
</div>
<script src="https://nathancahill.github.io/Split.js/split.js"></script>
<script>
Split(["#left", "#right"], {});
</script>
plus the CSS copied from the demo page docs
and yet nothing happens. I'm probably doing something completely stupid and it's staring me in the face.
Hi Nathan,
I'm unable to find a changelog. As I'm willing to use your library in a production app, I need to know what changes happend since the last version to verify if I have to upgrade and what could go wrong if I do. It would be very appreciated if you could add a changelog/history. Thanks ๐
I have 3 columns on total width page: 25% / 50% / 25%.
It displays nice but when I drag the gutter, instead of becoming something like 24.6353% / 50.3647% / 25% like it does normally (without angular2), it becomes: 32.8147% / 67.1853% / 25%
=125% so last column go under..
You can see it there:
https://plnkr.co/edit/VrWZOf?p=preview
Problem when dragging split bar fast, it stops suddenly.
I have to go back and move it slowly. This happens when the first and second divs contain lots of content. Happens under Chrome, Firefox and Internet Explorer.
onDragEnd event is triggered unexpectedly on mouse over without even dragging the gutter. I've created an example here to demonstrate the problem.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.