Development

Using the provided build tools, you can quickly setup the development environment and start customizing the app very easily.

Setup environment

  • Install nodejs

  • Run Window command line program (or Terminal app in Linux/Unix OS)

  • Change current directory to the application folder

  • Type “npm install”

  • Once finished, type “grunt” to launch a local http server in the background and start developing

  • Test the gallery by go to “http://localhost:3434/test/”

Asynchronous Module

Modular programming has many advantages over one monolothic code base. All the app components are designed as individual classes wrapped in AMD module and then loaded asynchronously using require.js. This approach ensures the separation of concerns between software components and help implementing future features much easier.

Entry point

In the main html file, setup an entry Javascript file which configures requirejs and bootstraps the application:

  • index.html

<script src="js/require.js" data-main="js/entry.js"></script>

  • entry.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  // Setup baseUrl for source folder and library paths
  requirejs.config({
    baseUrl:"../src/",
    paths:{
      libs:"../libs/"
    }
  });

  // Bootstrap the application
  require(['rs/sg3d/SphericalGallery', 'libs/domReady'],

    function(SphericalGallery, domReady) {

      domReady(function() {

        var el = document.querySelector('.rs-sg3d');
        var sg3d = new SphericalGallery(el, {

          useMouseDrag:true,
          borderStyle:'6px solid white',
          itemShadow:'-5px -10px 10px #111',
          easing:'easeOutQuint',
          roundCorner:40,
          duration:2000,
          innerRadius:8,
          wheelAngle:90,
          openStyle:1,
          tweenOpacity:true,
          opacityOffset:0.8
        });
        window.sg3d = sg3d;
      });
    });

See require.js for more detail of developing with AMD module