https://github.com/nens/nxt-box

OBSOLETE: A flexible box popup for lizard-like sites.
https://github.com/nens/nxt-box

Last synced: 4 days ago
JSON representation

OBSOLETE: A flexible box popup for lizard-like sites.

• Host: GitHub
• URL: https://github.com/nens/nxt-box
• Owner: nens
• License: gpl-3.0
• Created: 2013-07-29T09:10:05.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-02-12T15:55:36.000Z (almost 10 years ago)
• Last Synced: 2024-04-12T01:12:29.293Z (7 months ago)
• Language: Python
• Homepage:
• Size: 316 KB
• Stars: 0
• Watchers: 32
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.rst
  • Changelog: CHANGES.rst
  • License: LICENSE.rst

Awesome Lists containing this project

README

        
nxt-box

==========================================

Introduction

------------

Nxt-box is a flexible single javascript box that you can use for all your

purposes. You can call it from everywhere in your AngularJS website. The popup

can contain anything. For now it is used as a popup in a map application.

Install

-------

Add nxt-box to your Django site::

- add nxt-box to setup.py

- add nxt_box to settings.py

- include js and css in your page

::

- optionally add nxt-box to buildout.cfg as auto-checkout and add source if you want to develop.

Usage

-----

Step 1

======

Make a div with BoxAwesome as below. Content types can be defined and coupled

to specific pieces of html. See "manhole" as an example for a static html and

"nxt-timeseries" is an example of a dynamic content (which uses nxt-graph).

::

  


    


      


        ×

          


            

            


              
{% trans "Water height" %}

              

            

            


            
{% trans "Discharge" %}

            


              


                {% trans "Discharge:"%}

              

              


                


                  {% trans "Low" %}

                  {% trans "High" %}

                

              

            

            {% trans "Save" %}

          

        

      

    

  


Step 2

======

From your controller, call open_box using a $broadcast. In your content, define the type as in Step 1 and add optional variables.

html::

  


    action!

  


js::

  app.controller("ExampleController", ["$scope", "$rootScope",

    function($scope, $rootScope){

      // for example you press a button

      $scope.button_action = function() {

        var content = {

          type: 'manhole',

          properties: 'bladiblabla',

          marker: 'some more content'

        }

        $rootScope.$broadcast('open_box', content);

      }

    }

  ]);

Optionally the popup itself can be made very interactive. The controller is one of the ng-switch items. If it is static or if it only uses "content", you don't have to make a controller at all.

::

  // Stupid example that doesn't do anything, really.

  app.controller("Manhole", ["$scope", function($scope) {

    // react on 'manhole', that's defined in your button_action.

    $scope.$on('manhole', function(message, content){

      // do something with your content.

      $scope.properties = content.properties;

      $scope.marker = content.marker;

    });

  }]);

Post-nensskel setup TODO

------------------------

Here are some instructions on what to do after you've created the project with

nensskel.

- Check https://github.com/nens/nxt-box/settings/collaboration if the team

  "Nelen & Schuurmans" has access.

- Add a new jenkins job at

  http://buildbot.lizardsystem.nl/jenkins/view/djangoapps/newJob or

  http://buildbot.lizardsystem.nl/jenkins/view/libraries/newJob . Job name

  should be "nxt-box", make the project a copy of the existing "lizard-wms"

  project (for django apps) or "nensskel" (for libraries). On the next page,

  change the "github project" to ``https://github.com/nens/nxt-box/`` and

  "repository url" fields to ``[email protected]:nens/nxt-box.git`` (you might

  need to replace "nens" with "lizardsystem"). The rest of the settings should

  be OK.