shagstrom / angular-split-pane Goto Github PK

View Code? Open in Web Editor NEW

48.0 48.0 20.0 26 KB

An AngularJS Split Pane directive

License: MIT License

angular-split-pane's People

Contributors

Stargazers

Watchers

angular-split-pane's Issues

Binding Textarea ?

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)

Programattically setting splitPaneProperties.firstComponentSize does not update the splitPaneProperties.lastComponentSize (and vice versa)

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}

How do I programmatically change pane height?

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.

Odd Behavior Depending on Content

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.

how can I listen for the _splitpaneparentresizeHandler event in angular?

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.

Looks like it does not work with AngularJS v1.4.8

I tried example from readme, and it does not work. :(

Typo in package.json

Hi,
I think that package.json should be updated from

{
   "main": "split-pane.js",
   ...
}

{
  "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)

Npm dependency issue

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).

Programmatic pane resize fails on third invocation

Programmatic resize only works on the first two invocations.

Steps to reproduce:

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.

Original demo:

http://www.dreamchain.com/static/angular-split-pane/examples/set-component-size.html

CSS in not included in bower install

problem using $watch inside split-pane

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>

problem with angular-ui-router

cannot add inside ui-view

Changing both component's sizes causes exception

When you change both component's size you will get $digest already in progress exception.

element.splitPane is not a function

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';

What version of `split-pane` are you using?

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

shagstrom / angular-split-pane Goto Github PK

angular-split-pane's People

Contributors

Stargazers

Watchers

Forkers

angular-split-pane's Issues

Steps to reproduce:

Original demo:

Recommend Projects

Recommend Topics

Recommend Org

Jobs