SPA Navigation

I found this quite a bit of fun, popups / dialogues are generally a bit of a pain to work with and even more-so with websites, in particular it's almost impossible to make them responsive. The answer? Well, one is simply to stack the dialog on top of the current element, then when the dialogue closes, unstack it. i.e. don't use a modal at all, and if you add an animation effect and it becomes quite pretty!

This is what I'm currently using, a would-be modal dialog causes the current frame to slide off the left of the screen, and the new dialog frame to slide in from the right. Used like this;

display: function(id) {
  var success = function(data) {
    $(NAV.push()).html(data.html);
  };
  var failure = function(data) { console.log("Fail>",data); };
  argv = { template: 'display', vars: [''], 'id':id };
  ionman.call('display_template',argv,success,failure);
},

The difference here from examples in the previous article is the use of NAV.push. To hide the dialogue and restore the screen, all we need to do is call NAV.pop.

var NAV = NAV || {};
NAV = {
  frames: [],
  push: function(callback) {
    var frame_id = NAV.frames.length+1;
    var old_tag = NAV.frames.slice(-1)[0];
    var new_tag = '#main-stack-'+frame_id;
    var html = '<div id="main-stack-'+frame_id+'">(('+frame_id+'))</div>';
    $('#main-stack').prepend(html);
    NAV.frames.push(new_tag);
    if( frame_id < 2) return new_tag;
    $(new_tag).hide();
    $(old_tag).hide('slide',{'direction':'left'},200,function(){
      $(new_tag).show('slide',{'direction':'right'},200);
    });
    return new_tag;
  },
  pop: function() {
    if(NAV.frames.length<=1) return;
    tag = NAV.frames.pop();
    $(tag).hide('slide',{'direction':'right'},200,function(){
      $(tag).remove();
      tag = NAV.frames.slice(-1)[0];
      $(tag).show('slide',{'direction':'left'},200);
    });
  }
};

Produced quite a nice effect, and it means dialogues can take up the full amount of screen available, and maintain a decent level of responsiveness so it plays well with mobile devices. If only someone would merge the line break syntax of JS with the Class handling of Python, we might get a programmer friendly language to work with .. :)

I must admit, I'm finding JS and Python so similar, I often find myself coding in one when I should be working in the other, is it just me?