shagstrom / angular-split-pane Goto Github PK
View Code? Open in Web Editor NEWAn AngularJS Split Pane directive
License: MIT License
An AngularJS Split Pane directive
License: MIT License
i want to trigger resize event outside the directive when every time pane size changes;
I am trying to use the pane splitter with data-split-pane-properties
.
On resize, I get an error:
Cannot read property 'firstComponentSize' of undefined
in https://github.com/shagstrom/angular-split-pane/blob/master/angular-split-pane.js#L80
splitPaneProperties
is not set.
The reason is that the version of split-pane
we can find on bower or github doesnt send splitPaneProperties
as extra data on triggering splitpaneresize
:
$splitPane.trigger('splitpaneresize');
I checked the version you use in your demo (http://www.dreamchain.com/static/angular-split-pane/bower_components/split-pane/split-pane.js)
$splitPane.trigger('splitpaneresize', [ getComponentsSizes($splitPane) ]);
Your file indicates Split Pane v0.9.2
The version v0.9.2
I can find on bower/github doesnt have that.
Did you manually customize that file, or is there a hidden location I can find that file on bower?
Thank you
I tried example from readme, and it does not work. :(
It seems like there is a typo in the package.json : "split-pane": "0.9.2" (instead of "@shagstrom/split-pane": "0.9.2" I think).
When you change both component's size you will get $digest already in progress exception.
I lose the ability to move the pane splitter if the content of one of the divs is an iframe with a website. If you try to resize, it's as if the website takes the focus of the mouse and loses the splitter.
The split components' CSS is correctly set up and when it tries to setup the splitting, it fails.
I assume this is problem is related to me using webpack.
The error is:
TypeError: element.splitPane is not a function
at Object.link (angular-split-pane.js:76)
at eval (angular.js:1346)
...
Upon App-Init, i do:
import '@shagstrom/split-pane/split-pane.css';
import 'jquery';
import angular from 'angular';
import '@shagstrom/angular-split-pane/angular-split-pane';
The textarea is not binded when i use which split-pane
example code (sorry i dont know how to import your module in this website)
Hello,
first : great plugin.
However, it seems $watch are not fired when observed item is inside split-pane:
Do you think there is something possible ?
Thanks,
Eric
sample to reproduce (based on nested.hmlt in exammples folder)
When I put outside of split-pane, $watch is fired, else no
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nested and pretty</title>
<link rel="stylesheet" href="../bower_components/split-pane/split-pane.css" />
<link rel="stylesheet" href="../bower_components/split-pane/pretty-split-pane.css" />
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/split-pane/split-pane.js"></script>
<script src="../angular-split-pane.js"></script>
<style type="text/css">
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body ng-app="example" ng-controller="TestCtrl">
<div class="pretty-split-pane-frame">
<split-pane>
<input class="form-control" id="fiber_name" name="fiber[name]" required="true" size="30" type="text" ng-model="fibername"/>
<split-pane-component>
<div class="pretty-split-pane-component-inner"><p>top</p></div>
</split-pane-component>
<split-pane-divider height="5px"></split-pane-divider>
<split-pane-component height="10em">
<split-pane>
<split-pane-component width="40%">
<div class="pretty-split-pane-component-inner"><p>left</p></div>
</split-pane-component>
<split-pane-divider width="5px"></split-pane-divider>
<split-pane-component>
<split-pane>
<split-pane-component height="40%">
<div class="pretty-split-pane-component-inner"><p>top</p></div>
</split-pane-component>
<split-pane-divider height="5px"></split-pane-divider>
<split-pane-component>
<div class="pretty-split-pane-component-inner"><p>bottom</p></div>
</split-pane-component>
</split-pane>
</split-pane-component>
</split-pane>
</split-pane-component>
</split-pane>
</div>
</body>
<script>
var ngApp=angular.module('example', ['shagstrom.angular-split-pane']);
</script>
<script>
ngApp.controller('TestCtrl', function ($scope) {
console.log("TestCtrl");
$scope.fibername="";
$scope.$watch('fibername',
function(newVal, oldVal) {
console.log("fibername change from '"+oldVal+"' to '"+newVal+"'");
}
);
});
</script>
</html>
Is there a way I can expose a function in the directive to alter the height or width of one of the panes?
I've seen an example for the jquery version of this but I'm looking for an angular solution. Thanks.
I programmatically minimise one pane (set to zero), but the splitPaneProperties are only half-updated.
e.g. If I $watch('splitPaneProperties')
On page load:
{firstComponentSize: 420, lastComponentSize: 471}
Set 2nd pane to zero:
{firstComponentSize: 420, lastComponentSize: 0}
If I modify the logic of the splitpaneresize listener in angular-split-pane.js, I can get:
{firstComponentSize: 891, lastComponentSize: 0}
I need to listen for the _splitpaneparentresizeHandler
in angular in order to reposition some elements. I've tried just $scope.$watch
the width of an element, but I don't think that is possible.
Hi,
I think that package.json
should be updated from
{
"main": "split-pane.js",
...
}
to
{
"main": "angular-split-pane.js",
...
}
otherwise require
will fail to locate the library:
require('@shagstrom/angular-split-pane')
Cannot find module '@shagstrom/angular-split-pane'
(tested in Electron 2.0.7)
cannot add inside ui-view
how can i fired a fuction when the panel moves, is that possible
Programmatic resize only works on the first two invocations.
In the file set-component-size.html set the resize values to non-zero values so that both buttons are visible after the programmatic resize, e.g. setFirstComponent(123)
and setLastComponent(456)
.
Click Collapse right component. Result: OK
Click Collapse left component. Result: OK
Click Collapse right component again. Result: right panel is not resized and the displayed right/left component size values are incorrect.
CSS in not included in bower install
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.