angular-window-manager
It's an angular directive inspired in the work of Ramón Lamana on Ventus https://github.com/rlamana/Ventus
You can find the this project's develeopment environment in this other github project: https://github.com/sinmsinm/ng-window-manager . That was only has release publication purposes.
###Install Install the dependency with bower
bower install angular-window-manager
###Use in your project Include the directive script and css in your project.
<link rel="stylesheet" type="text/css" href="path_to_library/window-manager.css" />
<script type="text/javascript" src="path to library/angular-window-manager.js" />
Inject the ngWindowManager
module as your app dependency
angular.module('wmExampleApp', ['ngWindowManager']);
Use the element
<wmwindow title="Good title" options="{{options}}" > My window content {{something_from_scope}} </wmwindow>
You can also have multiple windows under an element from an array
<wmwindow title="{{article.title}}" ng-repeat="article in articles" > <p>{{article.body}} <p></wmwindow>
Parameters
- title: Window title
- open: Function executed when window is opened.
- close: Function executed when window is closed.
- maximize: Function executed when window is maximized.
- restore: Function executed when a window is restored.
- options: Additional options to customize the window, see below.
- maximizable: Boolean to determine if window can be maximized. (it must be set from $scope variable)
- closeable: Boolean to determine if window can be closed. (it must be set from $scope variable)
Options
You can pass some options to a window to customize the behaviour:
- position {x, y} : Initial position of the window when it's created
- size {width, height}: Initial size of the window when it's created
- maximizeTo: Element id where the windows will be maximized (when user push the button)
- windowContainer: Element id where windows can move over. If not provided parent element would be the windowContainer.
- initialZIndex: You can specify if your window starts on a specified z index
Options example:
$scope.options = {
position: {x: 120, y:320},
size: {width: 300, height:300},
maximizeTo: 'contentArea',
windowContainer: 'myMoveZone'
};
Executing actions
When you define an action from list above to be executed, you must receive with a parameter windowHandler.
<wmwindow title="Good title" open="onopen" ...>
$scope.onopen = function (win){
//When the window is open then move to position 100 100
win.windowHandler.move (100,100);
...
};
As you see you can use the windowHandler
object of the window to execute the actions and access to the window's elements.