Windows Popup AngularJS Module
If you want to contribute please clone the 'windowsPopup-dev' Development Environment and follow the instructions there. Thanks. Any idea, comment, feedback will be appreciated. The development repository contains a sample page to demonstrate the usage of 'windowsPopup' module, and it contains all the test code for it. >>Happy coding<<
#####Latest stable version -> v0.0.5 (Released on 2015-02-08) - download from here
##Description and Usage This is a reusable AngularJS module to help integrate popup browser windows to your application.
####The module defined in two files :
You can and should modify 'windowsPopupConfig.js' file if you want to change the default values or if you want to add pre-defined windows parameters.
You should not modify 'windowsPopup.js'.
####How to use it?
You can download the two needed .js files form Github. Search for windowsPopup reposatory. Or for testing you can point to the two links below:
NOTE: do not use the above two links in production applications, the availability and performance of that server is not guaranteed.
One page applications developed by AngularJS is starting to look like a normal GU desktop application. However in a desktop application usually you need to open secondary windows to change some properties, or do some changes related the application running.
This windowsPopup module tries to help AngularJS developers to open secondary windows and communicate between, them. Initially, this module just support child to parent data binding.
We have the following main functionality directives, so far, we adding more as we go along ... :
contextmenuto open Modal. The default can be overwritten by adding
wnp-dbl-clickattributes, or both.
The wnp-popup directive has all the attributes that are needed to pass on to 'window.open()' method's parameters. Plus is has some additional attributes to configure wnp-popup directive.
Those can add up to lot of attributes. To avoid repeating yourself, you can pre-configure a popup window by specifying its parameters, in the 'WindowsPopupConfig.js' file, and those parameters will be used in the wnp-popup directive . So in your HTML you can popup a window, like so :
<wnp-popup name="myPredifinedWindow" />
In this case all the needed parameters are defined in the windowsPopupConfig module. If you want to override the default values, just specify the new values in the wnp-popup directive as an attribute. Usually you may want to use different URLs to open the same kind of window, then you say that like so :
<wnp-popup name="myPredifinedWindow" url="http://...." />
You do the pre-configuration in the 'WindowsPopupConfig.js' file, where the 'windowsPopupConfig' module is defined.
There are three levels where you can configure the needed parameters for a popup window :
<wnp-popup width="500" height="500" ... />directive as attributes.
The first two level values are defined in the 'WindowsPopupConfig.js' file. The 3rd level values are defined in your HTML file.
The lowest level values can be modified by changing the
var defaultWinValues object values.
Those values will be used only if, no values are specified in you predefined window variable, or there is no attribute value in the 'wnp-popup' directive.
The second level values are in your predifined window variable specified in the 'WindowsPopupConfig.js' file. There are two pre-defined variables are already defined. Those are
var preDefineWindowOne and
Also feel free to define additional pre-defined windows. All predefined windows mus be added to the
<wnp-popup name="..." /> directives, to refernce the values.
NOTE: other additional config values that will be added in the future will follow these three level logic configuration.
#####New in v0.0.5 :
wnp-popdirective (add a "Modal usega Help" modal window).
#####New in v0.0.4 :
wnp-popupdirective. Those are
wnp-on-close. Now it is possible to add two callback functions, the function specified in
wnp-on-openwill be called when your window is opened, and the function in
wnp-on-closewill be called when your window is closed. Usage : ...
wnp-on-open="yourOnOpenFnc(wnpName)" ... wnp-on-close="yourOnCloseFnc(wnpName)". Note : you need to use
wnpNameso the Window name will be passed in to your callback. The spelling is important for
wnpNamebut the function name can be your choise.
wnp-pop. Sometimes you do not want to open a new browser window, just a simple Modal window would do. The
wnp-popdirective is similar to
wnp-popup, but it opens a Modal window not a new browser window. The good thing is that you can use the same html partial, whatever is in the url attribute will be used. The
wnp-popis using a new attribute, that is
wnp-pop-name, to use pre-defined Modal windows. The main difference is that the
wnp-popdirective open the Modal window by the right mouse click. This way, this new directive could also be used to open a context menu for you application. ( TODO: After this we will add a directive to open a drop down menu by right click, we plan to call it
wnp-pop-down.) So you will have the option to have a simple drop down or you you can have a Modal window for more complex context menu, depending of your needs.
#####New in v0.0.3 :
wnp-title) to the Child window, or if that is not specified pass the text of the link the user clicked.
#####New in v0.0.2 :
Module stats last updated: 2015-04-28 11:08:33