fixed conflict

css/main.css

@@ -2007,6 +2007,10 @@ Component: List
  text-align: justify;
 }
 
+.rp-section-content table td{
+ vertical-align: top;
+}
+
 /*------------------------------------------------------------------
  Custom OAuth Playground
  ------------------------------------------------------------------*/
@@ -2172,10 +2176,30 @@ section.disabled {
  border-color: rgb(217,217,217);
  background-color: #fdfdfd;
 }
+#demoListInput li{
+ cursor: pointer;
+ padding: 5px;
+}
+#demoListInput li.active{
+ color: white;
+}
+#demoListInput li.muted {
+ color: white;
+ opacity: .5;
+}
+#demoListInput li.active.muted {
+ opacity: 1;
+}
 #demoListClear {
  margin: 10px 0;
  display: block;
 }
+#demoListMove {
+ margin-right: 4px;
+}
+#demoListMove, #demoListMoveItem {
+ margin: 10px 0;
+}
 #demoMapKeys {
  margin-right: 0; 
  border-right: 0;

js/realtime-client-utils.js

@@ -64,14 +64,19 @@ rtclient.REALTIME_MIMETYPE = 'application/vnd.google-apps.drive-sdk';
 rtclient.getParams = function() {
  var params = {};
  var hashFragment = window.location.hash;
+ var state = window.location.search;
  if (hashFragment) {
  // split up the query string and store in an object
  var paramStrs = hashFragment.slice(1).split("&");
  for (var i = 0; i < paramStrs.length; i++) {
  var paramStr = paramStrs[i].split("=");
  params[paramStr[0]] = unescape(paramStr[1]);
  }
+ } else if (state) {
+ // For a state (sent from Drive UI)
+ params.state = state;
  }
+
  console.log(params);
  return params;
 }
@@ -95,7 +100,7 @@ rtclient.getOption = function(options, key, defaultValue) {
  if (value == undefined) {
  console.error(key + ' should be present in the options.');
  }
- console.log(value);
+ // console.log(value);
  return value;
 }
 
@@ -240,7 +245,19 @@ rtclient.parseState = function(stateParam) {
  var stateObj = JSON.parse(stateParam);
  return stateObj;
  } catch(e) {
- return null;
+ try {
+ // Replace the coded characters with their originals
+ var state = stateParam
+ .replace(/%22/g,'"')
+ .replace(/%7B/g,'{')
+ .replace(/%7D/g,'}')
+ .replace(/%5B/g,'[')
+ .replace(/%5D/g,']');
+ // Grab and parse the parameters from the query
+ return JSON.parse(/{.+}/.exec(state)[0]);
+ } catch (err) {
+ return null;
+ }
  }
 }
 
@@ -296,7 +313,7 @@ rtclient.RealtimeLoader.prototype.redirectTo = function(fileIds, userId) {
  }
  // We are still here that means the page didn't reload.
  rtclient.params = rtclient.getParams();
- for (var index in fileIds) {
+ for (var id in fileIds) {
  gapi.drive.realtime.load(fileIds[index], this.onFileLoaded, this.initializeModel, this.handleErrors);
  }
 }

js/rtpg.collaborators.js

@@ -64,4 +64,5 @@ rtpg.collaborators.onCollaboratorJoined = function(event) {
 rtpg.collaborators.onCollaboratorLeft = function(event) {
  rtpg.log.logEvent(event, 'User closed the document');
  rtpg.collaborators.updateUi();
+ rtpg.list.garbageCollectReferenceIndices();
 };

js/rtpg.custom.js

@@ -92,10 +92,12 @@ rtpg.custom.registerTypes = function() {
 }
 
 rtpg.custom.updateUi = function() {
- $(rtpg.custom.INPUT_NAME_SELECTOR).val(rtpg.custom.field.name);
- $(rtpg.custom.INPUT_DIRECTOR_SELECTOR).val(rtpg.custom.field.director);
- $(rtpg.custom.INPUT_NOTES_SELECTOR).val(rtpg.custom.field.notes);
- $(rtpg.custom.INPUT_RATING_SELECTOR).val(rtpg.custom.field.rating);
+ if(rtpg.custom.field){
+ $(rtpg.custom.INPUT_NAME_SELECTOR).val(rtpg.custom.field.name);
+ $(rtpg.custom.INPUT_DIRECTOR_SELECTOR).val(rtpg.custom.field.director);
+ $(rtpg.custom.INPUT_NOTES_SELECTOR).val(rtpg.custom.field.notes);
+ $(rtpg.custom.INPUT_RATING_SELECTOR).val(rtpg.custom.field.rating); 
+ } 
 };
 
 rtpg.custom.onNameInput = function(evt) {
@@ -131,5 +133,7 @@ rtpg.custom.connectUi = function() {
 };
 
 rtpg.custom.connectRealtime = function() {
- rtpg.custom.field.addEventListener(gapi.drive.realtime.EventType.VALUE_CHANGED, rtpg.custom.onRealtimeChange);
+ if(rtpg.custom.field){
+ rtpg.custom.field.addEventListener(gapi.drive.realtime.EventType.VALUE_CHANGED, rtpg.custom.onRealtimeChange); 
+ }
 };

js/rtpg.js

@@ -249,4 +249,3 @@ rtpg.getMe = function() {
  }
  return null;
 };
-

js/rtpg.list.js

@@ -27,6 +27,7 @@ rtpg.allDemos.push(rtpg.list);
  * Realtime model's field name for List Demo.
  */
 rtpg.list.FIELD_NAME = 'demo_list';
+rtpg.list.CURSORS_NAME = 'demo_cursors';
 
 /**
  * Realtime model's field for List Demo.
@@ -49,30 +50,95 @@ rtpg.list.REMOVE_SELECTOR = '#demoListRemove';
 rtpg.list.CLEAR_SELECTOR = '#demoListClear';
 rtpg.list.SET_SELECTOR = '#demoListSet';
 rtpg.list.SET_CONTENT_SELECTOR = '#demoListSetContent';
-
+rtpg.list.MOVE_SELECTOR = '#demoListMove';
+rtpg.list.MOVE_CONTENT_SELECTOR = '#demoListMoveItem';
 
 /**
  * DOM selector for the input element for List Demo.
  */
 rtpg.list.INPUT_SELECTOR = '#demoListInput';
 
-
 rtpg.list.loadField = function() {
  rtpg.list.field = rtpg.getField(rtpg.list.FIELD_NAME);
-}
+ rtpg.list.cursors = rtpg.getField(rtpg.list.CURSORS_NAME);
+ rtpg.list.garbageCollectCursorMap();
+};
+
+rtpg.list.garbageCollectCursorMap = function () {
+ // Clean up the cursor map
+ var keys = rtpg.list.cursors.keys();
+ for(var i = 0, len = keys.length; i < len; i++){
+ if(!rtpg.getCollaborator(keys[i])){
+ // Delete non existing collaborators
+ rtpg.list.cursors.delete(keys[i]);
+ } else {
+ // Create listeners for collaborators that already existed when the document opened
+ rtpg.list.cursors.get(keys[i])
+ .addEventListener(gapi.drive.realtime.EventType.REFERENCE_SHIFTED, rtpg.list.onRealtimeReferenceShifted);
+ }
+ }
+};
 
 rtpg.list.initializeModel = function(model) {
- var field = model.createList();
+ var field = model.createList(),
+ cursors = model.createMap();
+
  field.pushAll(rtpg.list.START_VALUE);
  model.getRoot().set(rtpg.list.FIELD_NAME, field);
-}
+ model.getRoot().set(rtpg.list.CURSORS_NAME, cursors);
+};
 
 rtpg.list.updateUi = function() {
- $(rtpg.list.INPUT_SELECTOR).empty();
  var array = rtpg.list.field.asArray();
- for (var i in array) {
- var newOption = $('<option>').val(array[i]).text('\xa0\xa0' + array[i]);
- $(rtpg.list.INPUT_SELECTOR).append(newOption);
+
+ $(rtpg.list.INPUT_SELECTOR).empty();
+ for(var i = 0, len = array.length; i < len; i++){
+ var listItem = $('<li></li>').text(array[i]);
+ listItem.on('click', rtpg.list.onListItemClick);
+ $(rtpg.list.INPUT_SELECTOR).append(listItem);
+ }
+ rtpg.list.updateListItems();
+};
+
+rtpg.list.onListItemClick = function (evt) {
+ var index = $(evt.target).index(),
+ me = rtpg.getMe();
+
+ // Register Reference
+ if(!rtpg.list.field.registeredReference){
+ rtpg.list.field.registeredReference = rtpg.list.field.registerReference(index, true);
+ rtpg.list.cursors.set(rtpg.getMe().sessionId, rtpg.list.field.registeredReference);
+ rtpg.list.field.registeredReference
+ .addEventListener(gapi.drive.realtime.EventType.REFERENCE_SHIFTED, rtpg.list.onRealtimeReferenceShifted);
+ }
+
+ rtpg.list.field.registeredReference.index = index;
+
+ // Set text for move button and set field
+ $(rtpg.list.SET_CONTENT_SELECTOR).val($(evt.target).text());
+ $(rtpg.list.MOVE_SELECTOR).text('Move ' + $(evt.target).text() + ' to index');
+};
+
+rtpg.list.updateListItems = function () {
+ var keys = rtpg.list.cursors.keys(),
+ me = rtpg.getMe(),
+ listItems = $(rtpg.list.INPUT_SELECTOR + ' li');
+
+ listItems.removeClass('muted').removeAttr('style');
+
+ if(rtpg.list.field.registeredReference) {
+ listItems.removeClass('active');
+ $(listItems[rtpg.list.field.registeredReference.index])
+ .addClass('active').css('background-color', me.color);
+ }
+
+ for(var i = 0, len = keys.length; i < len; i++){
+ if(keys[i] != me.sessionId){
+ var index = rtpg.list.cursors.get(keys[i]).index;
+ var collaborator = rtpg.getCollaborator(keys[i]);
+ $(listItems[index]).addClass('muted');
+ $(listItems[index]).css('background-color', collaborator.color);
+ }
  }
 };
 
@@ -82,14 +148,14 @@ rtpg.list.onClearList = function() {
 
 rtpg.list.onSetItem = function() {
  var newValue = $(rtpg.list.SET_CONTENT_SELECTOR).val();
- var indexToSet = $(rtpg.list.INPUT_SELECTOR).prop("selectedIndex");
+ var indexToSet = $(rtpg.list.INPUT_SELECTOR + ' .active').index();
  if (newValue != '' && indexToSet != -1) {
  rtpg.list.field.set(indexToSet, newValue);
  }
 };
 
 rtpg.list.onRemoveItem = function() {
- var indexToRemove = $(rtpg.list.INPUT_SELECTOR).prop("selectedIndex");
+ var indexToRemove = $(rtpg.list.INPUT_SELECTOR + ' .active').index();
  rtpg.list.field.remove(indexToRemove);
 };
 
@@ -98,7 +164,19 @@ rtpg.list.onAddItem = function() {
  if (newValue != '') {
  rtpg.list.field.push(newValue);
  }
-}
+};
+
+rtpg.list.onMoveItem = function (evt) {
+ var oldIndex = $(rtpg.list.INPUT_SELECTOR + ' .active').index(),
+ newIndex = parseInt($(rtpg.list.MOVE_CONTENT_SELECTOR).val());
+
+ if(newIndex <= $(rtpg.list.INPUT_SELECTOR).children().length && newIndex >= 0){
+ rtpg.list.field.move(oldIndex, newIndex);
+ rtpg.list.updateUi();
+ } else {
+ alert('Index is out of bounds');
+ }
+};
 
 rtpg.list.onRealtimeAdded = function(evt) {
  rtpg.list.updateUi();
@@ -123,8 +201,30 @@ rtpg.list.connectUi = function() {
  $(rtpg.list.SET_SELECTOR).click(rtpg.list.onSetItem);
 };
 
+rtpg.list.onRealtimeReferenceShifted = function (evt) {
+ var log = rtpg.getCollaborator(evt.sessionId).displayName + ' moved cursor from ' + evt.oldIndex +' to ' + evt.newIndex;
+ rtpg.log.logEvent(evt, log);
+ rtpg.list.updateUi();
+};
+
+rtpg.list.onRealtimeCursorChange = function (evt) {
+ console.log('Cursor Change Event');
+ evt.newValue.addEventListener(gapi.drive.realtime.EventType.REFERENCE_SHIFTED, rtpg.list.onRealtimeReferenceShifted);
+ rtpg.list.updateUi();
+};
+
+rtpg.list.connectUi = function() {
+ $(rtpg.list.INPUT_SELECTOR + ' li').on('click', rtpg.list.onSelect);
+ $(rtpg.list.ADD_SELECTOR).on('click', rtpg.list.onAddItem);
+ $(rtpg.list.REMOVE_SELECTOR).on('click', rtpg.list.onRemoveItem);
+ $(rtpg.list.CLEAR_SELECTOR).on('click', rtpg.list.onClearList);
+ $(rtpg.list.SET_SELECTOR).on('click', rtpg.list.onSetItem);
+ $(rtpg.list.MOVE_SELECTOR).on('click', rtpg.list.onMoveItem);
+};
+
 rtpg.list.connectRealtime = function() {
  rtpg.list.field.addEventListener(gapi.drive.realtime.EventType.VALUES_ADDED, rtpg.list.onRealtimeAdded);
  rtpg.list.field.addEventListener(gapi.drive.realtime.EventType.VALUES_REMOVED, rtpg.list.onRealtimeRemoved);
  rtpg.list.field.addEventListener(gapi.drive.realtime.EventType.VALUES_SET, rtpg.list.onRealtimeSet);
-};
+ rtpg.list.cursors.addEventListener(gapi.drive.realtime.EventType.VALUE_CHANGED, rtpg.list.onRealtimeCursorChange);
+};

js/rtpg.string.js

@@ -45,11 +45,8 @@ rtpg.string.START_VALUE = 'Edit Me!';
  */
 rtpg.string.INPUT_SELECTOR = '#demoStringInput';
 
-
 rtpg.string.loadField = function() {
  rtpg.string.field = rtpg.getField(rtpg.string.FIELD_NAME);
- rtpg.string.referenceStart = rtpg.string.field.registerReference(0, false);
- rtpg.string.referenceEnd = rtpg.string.field.registerReference(0, false);
 }
 
 rtpg.string.initializeModel = function(model) {
@@ -76,48 +73,13 @@ rtpg.string.onRealtimeDelete = function(evt) {
  rtpg.log.logEvent(evt, "String Deleted");
 };
 
-rtpg.string.onReferenceStartShifted = function(evt) {
- if(!evt.isLocal && $(rtpg.string.INPUT_SELECTOR).get(0).setSelectionRange) {
- $(rtpg.string.INPUT_SELECTOR).get(0).setSelectionRange(evt.newIndex, $(rtpg.string.INPUT_SELECTOR).get(0).selectionEnd);
- }
- if ($(rtpg.string.INPUT_SELECTOR).get(0).selectionStart != $(rtpg.string.INPUT_SELECTOR).get(0).selectionEnd) {
- rtpg.log.logEvent(evt, "Selection Start Postion Shifted");
- }
-};
-
-rtpg.string.onReferenceEndShifted = function(evt) {
- if(!evt.isLocal && $(rtpg.string.INPUT_SELECTOR).get(0).setSelectionRange) {
- $(rtpg.string.INPUT_SELECTOR).get(0).setSelectionRange($(rtpg.string.INPUT_SELECTOR).get(0).selectionStart, evt.newIndex);
- }
-
- if ($(rtpg.string.INPUT_SELECTOR).get(0).selectionStart == $(rtpg.string.INPUT_SELECTOR).get(0).selectionEnd) {
- rtpg.log.logEvent(evt, "Cursor Position Shifted");
- } else {
- rtpg.log.logEvent(evt, "Selection End Postion Shifted");
- }
-};
-
-rtpg.string.updateReference = function(evt) {
- var indexStart = $(rtpg.string.INPUT_SELECTOR).get(0).selectionStart;
- var indexEnd = $(rtpg.string.INPUT_SELECTOR).get(0).selectionEnd;
- if (rtpg.string.referenceEnd.index != indexEnd) {
- rtpg.string.referenceEnd.index = indexEnd;
- }
- if (rtpg.string.referenceStart.index != indexStart) {
- rtpg.string.referenceStart.index = indexStart;
- }
-};
-
 rtpg.string.connectUi = function() {
  $(rtpg.string.INPUT_SELECTOR).keyup(rtpg.string.onInput);
  $(rtpg.string.INPUT_SELECTOR).click(rtpg.string.updateReference);
  $(rtpg.string.INPUT_SELECTOR).keyup(rtpg.string.updateReference);
 };
 
-
 rtpg.string.connectRealtime = function() {
  rtpg.string.field.addEventListener(gapi.drive.realtime.EventType.TEXT_INSERTED, rtpg.string.onRealtimeInsert);
  rtpg.string.field.addEventListener(gapi.drive.realtime.EventType.TEXT_DELETED, rtpg.string.onRealtimeDelete);
- rtpg.string.referenceStart.addEventListener(gapi.drive.realtime.EventType.REFERENCE_SHIFTED, rtpg.string.onReferenceStartShifted);
- rtpg.string.referenceEnd.addEventListener(gapi.drive.realtime.EventType.REFERENCE_SHIFTED, rtpg.string.onReferenceEndShifted);
 };

js/rtpg.ui.js

@@ -101,7 +101,9 @@ rtpg.ui.matchSelectFromValue = function() {
 }
 
 rtpg.ui.matchListValue = function() {
- $('#demoListSetContent').val($('#demoListInput').val());
+ var value = $('#demoListInput').val();
+ $('#demoListSetContent').val(value);
+ $('#demoListMove').text('Move ' + value + ' to index');
 }
 
 //Resizing elastic elements on window resize.