Added cursor support for string

Code24World · Jul 11, 2014 · ffe84ea · ffe84ea
1 parent 49d53d0
commit ffe84ea
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 28 deletions.
diff --git a/app/index.html b/app/index.html
@@ -14,7 +14,8 @@
  <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">
 
  <!--<script type="text/javascript" src="bower_components/realtime-store/store.nocache.js"></script>-->
- <script type="text/javascript" src="bower_components/realtime-store/realtime-store.js"></script>
+ <script type="text/javascript" src="bower_components/realtime-store/realtime.store.js"></script>
+ <script type="text/javascript" src="bower_components/realtime-store/realtime.store.databinding.js"></script>
  <script type="text/javascript" src="bower_components/bower-sockjs-client/sockjs.js"></script>
  <script type="text/javascript" src="bower_components/google-diff-match-patch-js/diff_match_patch.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>

diff --git a/app/js/rtpg.list.js b/app/js/rtpg.list.js
@@ -198,14 +198,6 @@ rtpg.list.onRealtimeSet = function(evt) {
  rtpg.log.logEvent(evt, 'List Item Set');
 };
 
-rtpg.list.connectUi = function() {
- $(rtpg.list.INPUT_SELECTOR).change(rtpg.list.onSelect);
- $(rtpg.list.ADD_SELECTOR).click(rtpg.list.onAddItem);
- $(rtpg.list.REMOVE_SELECTOR).click(rtpg.list.onRemoveItem);
- $(rtpg.list.CLEAR_SELECTOR).click(rtpg.list.onClearList);
- $(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);
@@ -214,12 +206,13 @@ rtpg.list.onRealtimeReferenceShifted = function (evt) {
 
 rtpg.list.onRealtimeCursorChange = function (evt) {
  console.log('Cursor Change Event');
- evt.newValue().onReferenceShifted(rtpg.list.onRealtimeReferenceShifted);
+ if (evt.newValue()) {
+ evt.newValue().onReferenceShifted(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);

diff --git a/app/js/rtpg.string.js b/app/js/rtpg.string.js
@@ -32,51 +32,47 @@ rtpg.string.FIELD_NAME = 'demo_string';
  * Realtime model's field for String Demo.
  */
 rtpg.string.field = null;
-rtpg.string.referenceStart = null;
-rtpg.string.referenceEnd = null;
 
 /**
  * Starting value of field for String Demo.
  */
 rtpg.string.START_VALUE = 'Edit Me!';
 
 /**
- * DOM selector for the input element for String Demo.
+ * DOM id for the input element for String Demo.
  */
-rtpg.string.INPUT_SELECTOR = '#demoStringInput';
+rtpg.string.INPUT_SELECTOR = 'demoStringInput';
 
 rtpg.string.loadField = function() {
  rtpg.string.field = rtpg.getField(rtpg.string.FIELD_NAME);
-}
+};
 
 rtpg.string.initializeModel = function(model) {
  var field = model.createString(rtpg.string.START_VALUE);
  model.getRoot().set(rtpg.string.FIELD_NAME, field);
-}
-
-rtpg.string.updateUi = function() {
- $(rtpg.string.INPUT_SELECTOR).val(rtpg.string.field.getText());
 };
 
-rtpg.string.onInput = function(evt) {
- var newValue = $(rtpg.string.INPUT_SELECTOR).val();
- rtpg.string.field.setText(newValue);
+rtpg.string.updateUi = function() {
+ var elem = document.getElementById(rtpg.string.INPUT_SELECTOR);
+ elem.value = rtpg.string.field.getText();
 };
 
 rtpg.string.onRealtimeInsert = function(evt) {
- rtpg.string.updateUi();
  rtpg.log.logEvent(evt, "String Inserted");
 };
 
 rtpg.string.onRealtimeDelete = function(evt) {
- rtpg.string.updateUi();
  rtpg.log.logEvent(evt, "String Deleted");
 };
 
 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);
+ var elem = document.getElementById(rtpg.string.INPUT_SELECTOR);
+ realtime.store.databinding.bindString(rtpg.string.field, elem);
+
+ setTimeout(function() {
+ $('#undoButton').click(function(){rtpg.string.updateUi();});
+ $('#redoButton').click(function(){rtpg.string.updateUi();});
+ }, 0);
 };
 
 rtpg.string.connectRealtime = function() {