Full screen sheet view

full_screen_sheet_pane.js

/*
  Apply this mixin to a pane to make it slide in from the top and fill the screen.  The pane should not override layout.
*/
MyApp.FullScreenSheetPane = {

  // May not be necessary in your app
  defaultResponder: MyApp,
  
  // Make sure it is offscreen (these values will be auto-adjusted)
  layout: { top: −200, left: 0, height: 200, right: 0 },

  // Use accelerated animation (only works for animating ‘top’ and ‘left’)
  wantsAcceleratedLayer: YES,

  // Animate automatically when it is appended!
  didAppendToDocument: function() {
    var currentWindowSize,
        height;

    // Get the current window height
    currentWindowSize = SC.RootResponder.responder.get(‘currentWindowSize');
    height = currentWindowSize.height;

    // Convert the layout to the proper height for the current screen but keep it off screen
    this.adjust({top: -height, height: height});

    // Animate the panel in from the top (probably a good idea to delay it a fraction of a second so that it can finish rendering completely first)
    this.invokeLater(function() {
      this.animate('top', 0, { duration: 0.25, timing: 'ease-out’ }, function() {
        // When it is done animating, convert it to a flexible full-screen layout
        this.adjust({ height: null, bottom: 0 });
      });
    }, 250);
  },

  // How you slide the modal off again is up to you.  But one way that could work 
  // would be to enhance remove so that you can just call myPane.remove()
  remove: function(original) {
     var currentWindowSize,
        height;

    // Get the current window height
    currentWindowSize = SC.RootResponder.responder.get('currentWindowSize’);
    height = currentWindowSize.height;

    // Convert the layout to a non-flexible layout for animating
    this.adjust({bottom: null, height: height});

    // Animate the panel out to the top (probably a good idea to delay it a fraction of a second so that it can finish rendering completely first)
    this.invokeLater(function() {
     this.animate('top', -height, { duration: 0.25, timing: 'ease-out’ }, function() {
        // When it is done animating, remove it using the original remove implementation
        original();
      });
    });

    return this;
  }.enhance()

};
  

my_pane.js

sc_require(‘full_screen_sheet_pane.js');

MyApp.MyPanel =  SC.PanelPane.extend(MyApp.FullScreenSheetPane, {

  contentView: SC.View.design({

    // …

  })

});