Merge pull request #310 from drewww/list-position

List position
mitmedialab · Apr 15, 2014 · 34d96ad · 34d96ad
2 parents f6020dc + 1d264b7
commit 34d96ad
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,7 +28,7 @@ fabfile.py
 # for auto-farming
 farmingConf.json
 # For load simulation
-simulatorConf.js
+*simulatorConf.js
 # ignore ssl, to ensure we never check certs in.
 ssl/
 

diff --git a/public/css/screen.styl b/public/css/screen.styl
@@ -572,7 +572,7 @@ hr.noshade {
 
     width: 130px;
 
-    .icon-lock {
+    .lock {
       margin-right: 5px;
     }
   }
@@ -1171,25 +1171,37 @@ hr.noshade {
 
 /*-------------------------- HOW TO UNHANGOUT -------------------------*/
 
+.how-to-container {
+
+  .footer {
+    margin-left: 70px;
+    margin-top: -10px;
+  }
+
+  .video-frame {
+    margin: 50px;
+    border: 10px #DfDFDf;
+    margin-left: 120px;
+
+  }
+}
+
 .how-to-unhangout {
+  margin-left: 50px;
+  height: 400px;
   color: #444;
-  margin-left: 20px;
-  margin-top: 10px;
-  height: 450px;
   font-family: "open sans",arial,sans-serif;
 
   h4 {
-    margin-top: 45px;
-    margin-left: 600px;
     font-weight: 200;
     font-size: 22px;
   }
 
   img {
     margin-left: 70px;
-    float: left;
-    width: 500px;
-    height: 433px;
+    margin-top: -35px;
+    width: 400px;
+    height: 333px;
   }
 
   p {
@@ -1199,16 +1211,27 @@ hr.noshade {
   }
 
   .step-description {
-    float: right;
+    float: left;
     width: 340px;
     margin-top: 30px;
   }
 
   .step-icon {
-    //color: #63666a;
     color: $navbar;
     margin-left: 20px;
   }
+
+  /* For the Breakout Room Section */
+  .breakout-section {
+
+    img {
+      margin-top: 5px;
+    }
+  } 
+
+  .breakout-step-description {
+      margin-top: -20px;
+  }
 }
 
 .circle {
@@ -1224,13 +1247,6 @@ hr.noshade {
     //background: gray;
 }
 
-.how-to-container {
-  .footer {
-    margin-left: 70px;
-    margin-top: -10px;
-  }
-}
-
 /* ------------------------- ABOUT PAGE -------------------------------*/
 
 #about-event {

diff --git a/public/img/how-to-unhangout/google-hangout-window-400.png b/public/img/how-to-unhangout/google-hangout-window-400.png
diff --git a/public/img/how-to-unhangout/join-session-400.png b/public/img/how-to-unhangout/join-session-400.png
diff --git a/public/img/how-to-unhangout/lobby-400.png b/public/img/how-to-unhangout/lobby-400.png
diff --git a/public/img/how-to-unhangout/registration-400.png b/public/img/how-to-unhangout/registration-400.png
diff --git a/public/img/how-to-unhangout/wrap-up-400.png b/public/img/how-to-unhangout/wrap-up-400.png
diff --git a/public/js/event-views.js b/public/js/event-views.js
@@ -50,6 +50,13 @@ views.SessionView = Backbone.Marionette.ItemView.extend({
         // re-render to show them.
         this.listenTo(this.model, 'change:connectedParticipants', this.render, this);
         this.listenTo(this.model, 'change:joiningParticipants', this.render, this);
+        // Maintain a list of slots and user preferences for them, so that we
+        // can render people in consistent-ish places in the list.
+        // The idea is that each user gets a "slotPreference", which is either
+        // the last slot they were rendered in.  If their preferred slot is occupied,
+        // they get the next unused slot, and their "preference" is updated.
+        this.userSlotPreference = {};
+        this.userSlots = {};
     },
 
     onRender: function() {
@@ -65,8 +72,6 @@ views.SessionView = Backbone.Marionette.ItemView.extend({
         this.ui.attend.removeClass("active");
         this.ui.attend.addClass("btn-success");
 
-        this.ui.attend.find(".text").text("JOIN");
-
         // don't show the x of 10 when it's live (at least until we have live data for that)
         this.$el.find(".start").show();
 
@@ -78,9 +83,29 @@ views.SessionView = Backbone.Marionette.ItemView.extend({
         // the hangout-users div, and populate it with users.
         this.$el.addClass("hangout-connected");
 
+        // 
         // Build the list of user views.
+        //
+
         var fragment = document.createDocumentFragment();
-        var drawUser = function (udata, joining) {
+
+        // clear out slots for users that are no longer connected, and
+        // construct an array of any slots that are available.
+        var connectedAndJoining = _.pluck(this.model.get("connectedParticipants"), "id")
+            .concat(_.pluck(this.model.get("joiningParticipants"), "id"));
+        var available = [];
+        for (var i = 0; i < this.model.MAX_ATTENDEES; i++) {
+            if (this.userSlots[i]) {
+                if (_.contains(connectedAndJoining, this.userSlots[i].id)) {
+                    continue;
+                }
+                delete this.userSlots[i];
+            }
+            available.push(i);
+        }
+
+        var drawUser = _.bind(function (udata, joining) {
+            // Get the user view.
             var userView;
             if (udata.id in userViewCache) {
                 userView = userViewCache[udata.id];
@@ -97,18 +122,41 @@ views.SessionView = Backbone.Marionette.ItemView.extend({
             if (joining) {
                 el.className += " joining";
             }
-            fragment.appendChild(el);
-        }
-        // Add connected users
+
+            // Determine where it goes.
+            var slot = this.userSlots[this.userSlotPreference[udata.id]];
+            if (slot && slot.id === udata.id) {
+                slot.el = el;
+            } else {
+                var pos = null;
+                var pref = this.userSlotPreference[udata.id];
+                if (pref && _.contains(available, pref)) {
+                    pos = pref;
+                    available = _.without(available, pref);
+                } else if (available.length > 0) {
+                    pos = available.shift();
+                }
+                if (pos !== null) {
+                    this.userSlotPreference[udata.id] = pos;
+                    slot = {id: udata.id, el: el}
+                    this.userSlots[pos] = slot;
+                }
+            }
+        }, this);
+
+        // build slots for connected users
         _.each(this.model.get("connectedParticipants"), function(udata) { drawUser(udata); });
-        // Add joining users
+        // ... and joining users
         _.each(this.model.get("joiningParticipants"), function(udata) { drawUser(udata, true); });
         var emptyli;
-        for(var i = 0; i < this.model.MAX_ATTENDEES - numAttendees; i++) {
-            //this.ui.hangoutUsers.append($("<li class='empty'></li>"));
-            emptyli = document.createElement("li");
-            emptyli.className = "empty";
-            fragment.appendChild(emptyli);
+        for (var i = 0; i < this.model.MAX_ATTENDEES; i++) {
+            if (this.userSlots[i]) {
+                fragment.appendChild(this.userSlots[i].el);
+            } else {
+                emptyli = document.createElement("li");
+                emptyli.className = "empty";
+                fragment.appendChild(emptyli);
+            }
         }
 
         // Now add the fragment to the layout and display it
@@ -117,17 +165,20 @@ views.SessionView = Backbone.Marionette.ItemView.extend({
 
         this.ui.hangoutOffline.hide();
 
-        this.ui.attend.find(".icon-lock").hide();
         if (!this.options.event.sessionsOpen() || numAttendees >= this.model.MAX_ATTENDEES) {
-            this.ui.attend.find(".icon-lock").show();
+            this.ui.attend.find(".lock").show();
 
             this.ui.attend.attr("disabled", true);
             this.ui.attend.addClass("disabled");
 
             if (numAttendees >= this.model.MAX_ATTENDEES) {
-                this.ui.attend.find(".text").text("JOIN (full)");
+                this.ui.attend.find(".text").text("FULL");
+            } else {
+                this.ui.attend.find(".text").text("LOCKED");
             }
         } else {
+            this.ui.attend.find(".lock").hide();
+            this.ui.attend.find(".text").text("JOIN");
             this.ui.attend.removeAttr("disabled");
             this.ui.attend.removeClass("disabled");
         }
@@ -443,8 +494,6 @@ views.UserColumnLayout = Backbone.Marionette.Layout.extend({
 });
 
 // The actual core UserListView that manages displaying each individual user.
-// This logic is quite similar to the SessionListView, which also deals with
-// pagination in a flexible-height space.
 views.UserListView = Backbone.Marionette.CompositeView.extend({
     template: '#user-list-template',
     itemView: views.UserView,
@@ -464,15 +513,6 @@ views.UserListView = Backbone.Marionette.CompositeView.extend({
             // are removed, but totalUnfilteredRecords does. Could
             // be a bug.
 
-            // Other side note: be aware that there is some magic in
-            // marionette around adding to collections. It apparently
-            // tries to just auto-add the new record to the
-            // itemViewContainer. This is a little weird when
-            // combined with the pagination system, which doesn't
-            // necessarily show all incoming models. Just something
-            // to keep an eye on. More info here:
-            // https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md#model-and-collection-rendering
-
             this.$el.find(".header .contents").text(this.collection.length);
         }, this);
     },

diff --git a/test/test.admin-users.selenium.js b/test/test.admin-users.selenium.js
@@ -99,8 +99,9 @@ describe("ADMIN USERS SELENIUM", function() {
         // Wait for modal to fade in...
         browser.waitForSelector(".modal-body select");
         browser.byCss(".modal-body select").sendKeys(event.get("title"));
-        browser.byLinkText("Add").click().then(function() {
-            expect(user.isAdminOf(event)).to.be(true);
+        browser.byLinkText("Add").click();
+        browser.wait(function() {
+            return user.isAdminOf(event) === true;
         });
 
         // Ensure the new admin can access the admin page.

diff --git a/test/test.chat.selenium.js b/test/test.chat.selenium.js
@@ -61,6 +61,7 @@ describe("CHAT WINDOW", function() {
         browser.get("http://localhost:7777/");
         browser.mockAuthenticate("regular1");
         browser.get("http://localhost:7777/event/" + evt.id);
+        browser.waitForScript("$");
         browser.waitForSelector("#chat-input");
         var msgCount = 50;
         for (var i = 0; i < msgCount; i++) {
@@ -134,6 +135,7 @@ describe("CHAT WINDOW", function() {
             var text = "admin check " + (counter++) + "\n";
             browser.mockAuthenticate(sockkey);
             browser.get("http://localhost:7777/event/" + event.id)
+            browser.waitForScript("$");
             browser.waitForSelector("#chat-input");
             browser.byCss("#chat-input").sendKeys(text);
             browser.wait(function() {

diff --git a/test/test.create-event.selenium.js b/test/test.create-event.selenium.js
@@ -112,6 +112,7 @@ describe("CREATE EVENT", function() {
             browser.byCss("#about-nav a").click();
             aboutIsVisible(true);
             browser.waitForSelector("#about-event .scroll-up");
+            browser.executeScript("$('#about-event .scroll-up')[0].scrollIntoView();");
             browser.byCss("#about-event .scroll-up").click();
             aboutIsVisible(false);
 

diff --git a/test/test.create-hoa.selenium.js b/test/test.create-hoa.selenium.js
@@ -72,6 +72,9 @@ describe("CREATE HOA", function() {
         browser.get("http://localhost:7777/");
         browser.mockAuthenticate(user.get("sock-key"));
         browser.get("http://localhost:7777/event/" + event.id);
+        browser.wait(function() {
+            return event.get("connectedUsers").length === 1;
+        });
         browser.waitForSelector(".create-hoa");
         browser.byCss(".create-hoa").click();
         // Switch to the hangout creation window.
@@ -101,16 +104,15 @@ describe("CREATE HOA", function() {
             browser.switchTo().window(handles[0]);
         });
 
-        browser.waitForSelector(".join-hoa");
-
         // Wait for the hangout broadcast video to be embedded.
         browser.waitForScript("$");
+        browser.waitForSelector(".join-hoa");
         var embedSrcScript = "return $('.video-player iframe').attr('src');";
-        browser.executeScript(embedSrcScript).then(function(src) {
-            expect(src).to.not.be(null);
-            expect(src.indexOf("http://www.youtube.com/embed/" +
-                               event.get("hoa").get("hangout-broadcast-id"))
-            ).to.be(0);
+        browser.wait(function() {
+            return browser.executeScript(embedSrcScript).then(function(src) {
+                return src && src.indexOf("http://www.youtube.com/embed/" +
+                               event.get("hoa").get("hangout-broadcast-id")) === 0;
+            });
         });
         browser.executeScript("return $('.join-hoa').attr('href');").then(function(href) {
             expect(href).to.eql(event.get("hoa").getParticipationLink());