planetstack/core/xoslib/static/js/sliceEditor.js

   1 /* This is a demo of using xoslib with Marionette
   2
   3    The main window is split into two halves. The left half has a CollectionView
   4    (SliceListView) that lists all slices the user has access to. The right half
   5    has an ItemView (SliceDetailView) that allows the user to edit the
   6    name and description of a slice, as well as a <Save> button to save it.
   7 */
   8
   9 SliceEditorApp = new Marionette.Application();
  10
  11 SliceEditorApp.addRegions({
  12   sliceList: "#sliceEditorList",
  13   sliceDetail: "#sliceEditorDetail",
  14 });
  15
  16 /* SliceListItemView: This is the item view that is used by SliceListView to
  17    display slice names.
  18 */
  19
  20 SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
  21   template: "#sliceeditor-listitem-template",\r
  22   tagName: 'li',\r
  23   className: 'sliceeditor-listitem',\r
  24 \r
  25   events: {"click": "changeSlice"},\r
  26 \r
  27   changeSlice: function(e) {\r
  28         e.preventDefault();\r
  29         e.stopPropagation();\r
  30 \r
  31         if (SliceEditorApp.sliceDetail.currentView && SliceEditorApp.sliceDetail.currentView.dirty) {\r
  32             if (!confirm("discard current changes?")) {\r
  33                 return;\r
  34             }\r
  35         }\r
  36 \r
  37         /* create a new SliceDetailView and set the sliceDetail region to\r
  38            display it.\r
  39         */\r
  40 \r
  41         var sliceDetailView = new SliceEditorApp.SliceDetailView({\r
  42             model: this.model,\r
  43         });\r
  44         SliceEditorApp.sliceDetail.show(sliceDetailView);\r
  45   },\r
  46 });\r
  47 \r
  48 /* SliceListView: This displays a list of slice names.\r
  49 */\r
  50
  51 SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
  52   tagName: "ul",\r
  53   childView: SliceEditorApp.SliceListItemView,\r
  54 \r
  55   initialize: function() {\r
  56       /* CollectionViews don't automatically listen for change events, but we\r
  57          want to, so we pick up changes from the DetailView, and we pick up\r
  58          changes from the server.\r
  59       */\r
  60       this.listenTo(this.collection, 'change', this._renderChildren);\r
  61   },\r
  62 \r
  63   attachHtml: function(compositeView, childView, index) {\r
  64       // The REST API will let admin users see everything. For the developer\r
  65       // view we still want to hide slices we are not members of.\r
  66       if (childView.model.get("sliceInfo").roles.length == 0) {\r
  67           return;\r
  68       }\r
  69       SliceEditorApp.SliceListView.__super__.attachHtml(compositeView, childView, index);\r
  70   },\r
  71 });\r
  72 \r
  73 /* SliceDetailView: Display the slice and allow it to be edited */\r
  74 \r
  75 SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({\r
  76     template: "#sliceeditor-sliceedit-template",\r
  77     tagName: 'div',\r
  78 \r
  79     events: {"click button.js-submit": "submitClicked",\r
  80              "change input": "inputChanged"},\r
  81 \r
  82     /* inputChanged is watching the onChange events of the input controls. We\r
  83        do this to track when this view is 'dirty', so we can throw up a warning\r
  84        if the user tries to change his slices without saving first.\r
  85     */\r
  86 \r
  87     inputChanged: function(e) {\r
  88         this.dirty = true;\r
  89     },\r
  90 \r
  91     submitClicked: function(e) {\r
  92         e.preventDefault();\r
  93         var data = Backbone.Syphon.serialize(this);\r
  94         this.model.save(data);\r
  95         this.dirty = false;\r
  96     },\r
  97 });\r
  98
  99 SliceEditorApp.on("start", function() {
 100   var sliceListView = new SliceEditorApp.SliceListView({
 101     collection: xos.slicesPlus\r
 102   });\r
 103   SliceEditorApp.sliceList.show(sliceListView);\r
 104   xos.slicesPlus.startPolling();\r
 105 });
 106
 107 $(document).ready(function(){
 108   SliceEditorApp.start();
 109 });
 110