diff options
| -rw-r--r-- | README.md | 138 | ||||
| -rw-r--r-- | example/index.css | 13 | ||||
| -rw-r--r-- | example/index.html | 2 | ||||
| -rw-r--r-- | example/index.js | 21 | ||||
| -rw-r--r-- | sass/ns-popover.scss | 13 |
5 files changed, 180 insertions, 7 deletions
@@ -1,4 +1,136 @@ -nsPopover -========= +# nsPopover -Popover dialogs for angularjs applications. +nsPopover is a simple component for angularjs applications that adds small overlays of content, like those on the +iPad, to any element for housing secondary information.. It has only angularjs as dependency. + +### [Example] (http://nohros.com/nsPopover) + +## Install + +You can download all necessary nsPopover files manually or install it with bower: + +```bash +bower install nsPopover +npm install +grunt compile +``` + +## Usage + +You need only to include the ``nsPopover.js`` (as minimal setup) to your project and then you can +start using the ``nsPopover`` directives. + +### Directive + +```javascript +angular + .module('nsPopoverExample', [ + 'nsPopover' + ]) + + .controller('MainCtrl', function($scope) { + $scope.items = [{ + name: "Action" + }, { + name: "Another action" + }, { + name: "Something else here" + }]; + }); +``` + +``` html +<script type="text/ng-template" id="popover"> + <ul> + <li ng-repeat="item in items"><a>{{item.name}}</a></li> + </ul> +</script> + +<button ns-popover + ns-popover-template="popover" + ns-popover-trigger="click" + ns-popover-placement="bottom"> + Popover +</button> +``` + +### Attributes + +``nsPopover`` defines a simple set of attributes that can be used to customize the popover behavior. + +### ``ns-popover-template {String}`` + +The id of the template that contains the popover content. The content will be loaded through the +angular ``$http`` service and cached (The content will not be loaded if it is already in ``$templateCache``). It +can be loaded throug ``path`` to external html template or ```<script>`` tag with ``text\ng-template``. + +```javascript +<script type="text\ng-template" id="templateId"> + <h1>Template heading</h1> + <p>Some content</p> +</script> +``` + +Also it is possible to use simple strings as template together with ``ns-popover-plain`` option. + +### ``ns-popover-plain {Boolean}`` + +A flag that indicates if the ``ns-popover-template`` is a plain string or not, default: ``false``. + +### ``ns-popover-trigger`` + +The ``ns-popover-trigger`` specify how the popover is triggered. This can be any event that the associated +DOM element can trigger. + +### ``ns-popover-placement`` + +Specifies how to position the popover relative to the triggering element - top | bottom | left | right. + +### Themes + +You can customize the ``nsPopover`` through themes. You can use the ``nsPopover`` to create your own theme, like so. + +```scss +.ns-popover-custom-theme { + ul, .list { + } + + li, .list-item { + list-style-type: none; + + a { + &:hover { + } + } + } +} +``` + +and them specify this them on the HTML + +```html + <button ns-popover + ns-popover-template="popover" + ns-popover-theme="ns-popover-custom-theme"> + Popover + </button> +``` + +## License + +MIT Licensed + +Copyright (c) 2013, nohros.com contact@nohros.com + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the Software without restriction, including without limitation the +rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the +Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE +WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file diff --git a/example/index.css b/example/index.css index 3792232..1544c6d 100644 --- a/example/index.css +++ b/example/index.css @@ -24,13 +24,24 @@ button:active { border: solid 1px #0081b8;
}
-section {
+body > section {
position: relative;
width: 100%;
+ max-width: 62.5em;
+ margin: 0 auto;
+ padding: 0 1.5em;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
article {
position: relative;
margin: 0 auto;
float: left;
+}
+
+h1 {
+ border-bottom: solid 1px #b9b8bb;
+ padding-bottom: .5em;
}
\ No newline at end of file diff --git a/example/index.html b/example/index.html index a08c885..9c7f01a 100644 --- a/example/index.html +++ b/example/index.html @@ -20,7 +20,7 @@ </head>
<body ng-controller="MainCtrl">
-<section>
+<section viewport-width>
<h1> Popovers </h1>
<article>
<button ns-popover
diff --git a/example/index.js b/example/index.js index 6315168..c742c1e 100644 --- a/example/index.js +++ b/example/index.js @@ -1,5 +1,6 @@ angular
.module('nsPopoverExample', ['nsPopover'])
+
.controller('MainCtrl', function($scope) {
$scope.items = [{
name: "Action"
@@ -8,4 +9,24 @@ angular }, {
name: "Something else here"
}];
+ })
+
+ .directive('viewportWidth', function() {
+ return {
+ link: function(scope, elm, attrs) {
+ function getViewport() {
+ var e = window, a = 'inner';
+ if (!('innerWidth' in window)) {
+ a = 'client';
+ e = document.documentElement || document.body;
+ }
+ return {
+ width : e[a + 'Width'] ,
+ height : e[a + 'Height']
+ };
+ }
+
+ elm.css('maxWidth', getViewport().width + 'px');
+ }
+ };
});
\ No newline at end of file diff --git a/sass/ns-popover.scss b/sass/ns-popover.scss index e4fe2a9..3161121 100644 --- a/sass/ns-popover.scss +++ b/sass/ns-popover.scss @@ -5,13 +5,22 @@ z-index: 100;
background-color: #fff;
- ul {
+ ul, .list {
padding: 0;
margin: 0.625rem 0;
+ display: block;
}
li, .list-item {
list-style-type: none;
- padding: 0.1875rem 1.25rem;
+
+ a {
+ padding: 0.1875rem 0.625rem;
+ display: block;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+ }
}
}
\ No newline at end of file |