suzanne.soy/whalesong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tracked down bug that caused deviation between the dom tree and the cursor. Need to remember that jquery can be too convenient at times: it filters out text children, whereas the cursor does not.

Browse Source
This commit is contained in:
Danny Yoo 2011-09-12 15:21:49 -04:00
parent a39fb910ce
commit c9ccc36b5e
3 changed files with 77 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web-world/examples/forward-backward/forward-backward.rkt
View File

@ -8,9 +8,11 @@
(define (go-forward world dom)
(add1 world))
(define (go-backward world dom)
(max (sub1 world) 0))
(define (view-top a-view)
(if (view-up? a-view)
(view-top (view-up a-view))
@ -19,7 +21,7 @@
(define (clear-all a-view)
(define (loop a-view n)
(define updated-view a-view) ;; (update-view-css a-view "border" "none"))
(define updated-view (update-view-css a-view "background" ""))
(cond
[(view-forward? updated-view)
(loop (view-forward updated-view) (add1 n))]
@ -27,19 +29,28 @@
(view-top updated-view)]))
(loop a-view 0))
(define (iterate n f x)
(if (<= n 0)
x
(iterate (sub1 n) f (f x))))
(define (maybe-view-forward a-view)
(if (view-forward? a-view)
(view-forward a-view)
a-view))
(define (draw world dom)
(define another-view (update-view-css (iterate world
view-forward
maybe-view-forward
(clear-all dom))
"border"
"1px solid blue"))
another-view)
"background"
"orange"))
(update-view-text (view-focus another-view "message")
(format "Highlighting element ~a\n" world)))
(define my-initial-view (view-bind
(view-focus

2
web-world/examples/forward-backward/index.html
View File

@ -4,7 +4,7 @@
<h1>This is a test</h1>
<input type="button" id="forward" value="Forward">
<input type="button" id="backward" value="Backward">
<div id="message"></div>
<table>
<tr><td>First Row</td></tr>

123
web-world/js-impl.js
View File

@ -180,7 +180,7 @@
},
function(eventHandlers) { return eventHandlers; },
function(view) {
view.focus = $(document.getElementById(selector));
view.focus = document.getElementById(selector);
}
);
};
@ -198,7 +198,7 @@
},
function(eventHandlers) { return eventHandlers; },
function(view) {
view.focus.text(text);
$(view.focus).text(text);
}
);
};
@ -219,7 +219,7 @@
return eventHandlers;
},
function(view) {
view.focus.attr(name, value);
$(view.focus).attr(name, value);
});
};
@ -235,8 +235,6 @@
MockView.prototype.updateCss = function(name, value) {
return this.act(
function(cursor) {
console.log("functionally: ",
$(cursor.node[0].cloneNode(false)).css(name, value).get(0));
return cursor.replaceNode([$(cursor.node[0].cloneNode(false))
.css(name, value).get(0)]
.concat(cursor.node.slice(1)));
@ -245,19 +243,12 @@
return eventHandlers;
},
function(view) {
if (view.focus.length === 0) {
console.log('update css: empty focus?!');
}
console.log('css: updating:\n', view.focus);
view.focus.css(name, value);
$(view.focus).css(name, value);
});
};
MockView.prototype.getFormValue = function() {
return $(this.cursor.node[0]).val();
};
@ -273,7 +264,7 @@
return eventHandlers;
},
function(view) {
view.focus.val(value);
$(view.focus).val(value);
});
};
@ -288,7 +279,7 @@
return eventHandlers;
},
function(view) {
view.focus = view.focus.prev();
view.focus = view.focus.previousSibling;
});
};
@ -301,7 +292,7 @@
return eventHandlers;
},
function(view) {
view.focus = view.focus.next();
view.focus = view.focus.nextSibling;
});
};
@ -314,7 +305,7 @@
return eventHandlers;
},
function(view) {
view.focus = view.focus.parent();
view.focus = view.focus.parentNode;
});
};
@ -327,7 +318,7 @@
return eventHandlers;
},
function(view) {
view.focus = view.focus.children(':first');
view.focus = view.focus.firstChild;
});
};
@ -341,15 +332,15 @@
return eventHandlers;
},
function(view) {
if (view.focus.children().length > 0) {
view.focus = view.focus.children(':first');
} else if (view.focus.next().length > 0) {
view.focus = view.focus.next();
if (view.focus.firstChild) {
view.focus = view.focus.firstChild;
} else if (view.focus.nextSibling) {
view.focus = view.focus.nextSibling;
} else {
while (view.focus.get(0) !== view.top.get(0)) {
view.focus = view.focus.parent();
if (view.focus.next().length > 0) {
view.focus = view.focus.next();
while (view.focus !== view.top) {
view.focus = view.focus.parentNode;
if (view.focus.nextSibling) {
view.focus = view.focus.nextSibling;
return;
}
}
@ -366,13 +357,14 @@
return eventHandlers;
},
function(view) {
if (view.focus.prev().length > 0) {
view.focus = view.focus.prev();
if (view.focus.previousSibling) {
view.focus = view.focus.previousSibling;
while (view.focus.children().length > 0) {
view.focus = view.focus.children(':last');
view.focus = view.focus.firstChild;
while(view.focus.nextSibling) { view.focus = view.focus.nextSibling; }
}
} else {
view.focus = view.focus.parent();
view.focus = view.focus.parentNode;
}
});
@ -411,13 +403,13 @@
function(view) {
// HACK: every node that is bound needs to have an id. We
// enforce this by mutating the node.
if (! view.focus.get(0).id) {
view.focus.get(0).id = ("__webWorldId_" + mockViewIdGensym++);
if (! view.focus.id) {
view.focus.id = ("__webWorldId_" + mockViewIdGensym++);
}
var handler = new EventHandler(name,
new DomEventSource(
name,
view.focus.get(0).id),
view.focus.id),
worldF);
view.addEventHandler(handler);
currentBigBangRecord.startEventHandler(handler);
@ -433,7 +425,7 @@
},
function(eventHandlers) { return eventHandlers; },
function(view) {
view.focus.show();
$(view.focus).show();
}
);
};
@ -447,7 +439,7 @@
},
function(eventHandlers) { return eventHandlers; },
function(view) {
view.focus.hide();
$(view.focus).hide();
}
);
};
@ -463,14 +455,14 @@
},
function(view) {
var elt = view.focus;
if (view.focus.next().length > 0) {
view.focus = view.focus.next();
} else if (view.focus.prev().length > 0) {
view.focus = view.focus.prev();
if (view.focus.nextSibling) {
view.focus = view.focus.nextSibling;
} else if (view.focus.previousSibling) {
view.focus = view.focus.previousSibling;
} else {
view.focus = view.focus.parent();
view.focus = view.focus.parentNode;
}
elt.remove();
$(elt).remove();
});
};
@ -491,8 +483,8 @@
function(eventHandlers) { return eventHandlers; },
function(view) {
var clone = $(domNode).clone(true);
clone.appendTo(view.focus);
view.focus = clone;
clone.appendTo($(view.focus));
view.focus = clone.get(0);
}
);
};
@ -505,8 +497,8 @@
function(eventHandlers) { return eventHandlers; },
function(view) {
var clone = $(domNode).clone(true);
clone.insertAfter(view.focus);
view.focus = clone;
clone.insertAfter($(view.focus));
view.focus = clone.get(0);
}
);
};
@ -519,8 +511,8 @@
function(eventHandlers) { return eventHandlers; },
function(view) {
var clone = $(domNode).clone(true);
clone.insertBefore(view.focus);
view.focus = clone;
clone.insertBefore($(view.focus));
view.focus = clone.get(0);
}
);
};
@ -566,6 +558,7 @@
var View = function(top, eventHandlers) {
// top: dom node
this.top = top;
// focus: dom node
this.focus = top;
this.eventHandlers = eventHandlers;
};
@ -573,16 +566,16 @@
View.prototype.toString = function() { return "#<View>"; };
View.prototype.initialRender = function(top) {
top.empty();
$(top).empty();
// Special case: if this.top is an html, we merge into the
// existing page.
if (this.top.children("title").length !== 0) {
if ($(this.top).children("title").length !== 0) {
$(document.head).find('title').remove();
}
$(document.head).append(this.top.children("title"));
$(document.head).append(this.top.children("link"));
$(document.head).append($(this.top).children("title"));
$(document.head).append($(this.top).children("link"));
top.append(this.top);
$(top).append(this.top);
};
View.prototype.addEventHandler = function(handler) {
@ -641,13 +634,13 @@
} catch (exn1) {
return onFail(exn1);
}
return onSuccess(new View(dom, []));
return onSuccess(new View(dom.get(0), []));
} else if (isMockView(x)) {
return onSuccess(new View($(arrayTreeToDomNode(x.cursor.top().node)),
return onSuccess(new View(arrayTreeToDomNode(x.cursor.top().node),
x.eventHandlers.slice(0)));
} else {
try {
dom = $(plt.baselib.format.toDomNode(x));
dom = plt.baselib.format.toDomNode(x);
} catch (exn2) {
return onFail(exn2);
}
@ -669,14 +662,20 @@
} catch (exn1) {
return onFail(exn1);
}
return onSuccess(new MockView(domToArrayTreeCursor(dom.get(0)), EMPTY_PENDING_ACTIONS, [], undefined));
return onSuccess(new MockView(domToArrayTreeCursor(dom.get(0)),
EMPTY_PENDING_ACTIONS,
[],
undefined));
} else {
try {
dom = $(plt.baselib.format.toDomNode(x));
dom = plt.baselib.format.toDomNode(x);
} catch (exn2) {
return onFail(exn2);
}
return onSuccess(new MockView(domToArrayTreeCursor(dom.get(0)), EMPTY_PENDING_ACTIONS, [], undefined));
return onSuccess(new MockView(domToArrayTreeCursor(dom),
EMPTY_PENDING_ACTIONS,
[],
undefined));
}
};
@ -1083,7 +1082,7 @@
var running = true;
var dispatchingEvents = false;
var top = $("<div/>");
var top = $("<div/>").get(0);
var view = (find(handlers, isInitialViewHandler) || { view : new View(top, []) }).view;
var stopWhen = (find(handlers, isStopWhenHandler) || { stopWhen: defaultStopWhen }).stopWhen;
var toDraw = (find(handlers, isToDrawHandler) || {toDraw : defaultToDraw} ).toDraw;
@ -1230,7 +1229,6 @@
// update, and have to do it from scratch.
var nonce = Math.random();
var originalMockView = view.getMockAndResetFocus(nonce);
console.log("before: ", arrayTreeToDomNode(originalMockView.cursor.node));
toDraw(MACHINE,
world,
originalMockView,
@ -1238,14 +1236,11 @@
if (newMockView.nonce === nonce) {
var i;
var actions = newMockView.getPendingActions();
console.log("this should match:",
view.focus.clone(true).get(0));
console.log("actions", actions.length);
for (i = 0; i < actions.length; i++) {
actions[i](view);
}
} else {
view.top = $(arrayTreeToDomNode(newMockView.cursor.top().node));
view.top = arrayTreeToDomNode(newMockView.cursor.top().node);
view.initialRender(top);
eventHandlers = newMockView.eventHandlers.slice(0);
view.eventHandlers = eventHandlers;