Revision: 4787
Author: ihab.awad
Date: Sat Feb 25 13:31:59 2012
Log: Get jQuery UI "Draggable" working
http://codereview.appspot.com/5696063
[email protected]
http://code.google.com/p/google-caja/source/detail?r=4787
Added:
/trunk/src/com/google/caja/demos/playground/examples/jquery-datepicker.html
/trunk/src/com/google/caja/demos/playground/examples/jquery-draggable.html
Deleted:
/trunk/src/com/google/caja/demos/playground/examples/datepicker.html
Modified:
/trunk/src/com/google/caja/demos/playground/client/ui/Example.java
/trunk/src/com/google/caja/plugin/bridal.js
/trunk/src/com/google/caja/plugin/domado.js
/trunk/tests/com/google/caja/plugin/es53-test-domado-dom-guest.html
=======================================
--- /dev/null
+++
/trunk/src/com/google/caja/demos/playground/examples/jquery-datepicker.html
Sat Feb 25 13:31:59 2012
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Datepicker - Default functionality</title>
+ <link rel="stylesheet"
href="http://jqueryui.com/themes/base/jquery.ui.all.css";>
+ <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.core.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.widget.js";></script>
+ <!-- TODO(jasvir): Switch back to real date picker when datepicker fix is
in upstream -->
+ <script src="http://www.thinkfu.com/jquery.ui.datepicker.js";></script>
+ <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css";>
+ <script>
+ $(function() {
+ $( "#datepicker" ).datepicker();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<ul>
+<li>The datepicker is tied to a standard form input field.
+<li>Focus on the input (click, or use the tab key) to open an interactive
calendar in a small overlay.
+<li>Choose a date, click elsewhere on the page (blur the input), or hit
the Esc key to close.
+<li>If a date is chosen, feedback is shown as the input's value.
+</ul>
+</div><!-- End demo-description -->
+
+</body>
+</html>
=======================================
--- /dev/null
+++
/trunk/src/com/google/caja/demos/playground/examples/jquery-draggable.html
Sat Feb 25 13:31:59 2012
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Draggable - Default functionality</title>
+ <link rel="stylesheet"
href="http://jqueryui.com/themes/base/jquery.ui.all.css";>
+ <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.core.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.widget.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.mouse.js";></script>
+ <script src="http://jqueryui.com/ui/jquery.ui.draggable.js";></script>
+ <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css";>
+ <style>
+ #draggable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script>
+ $(function() {
+ $( "#draggable" ).draggable();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <div id="draggable" class="ui-widget-content">
+ <p>Drag me around</p>
+ </div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+ <p>Enable draggable functionality on any DOM element. Move the
draggable object by clicking on it with the mouse and dragging it anywhere
within the viewport.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
=======================================
--- /trunk/src/com/google/caja/demos/playground/examples/datepicker.html
Fri Feb 24 13:22:28 2012
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Datepicker - Default functionality</title>
- <link rel="stylesheet"
href="http://jqueryui.com/themes/base/jquery.ui.all.css";>
- <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js";></script>
- <script src="http://jqueryui.com/ui/jquery.ui.core.js";></script>
- <script src="http://jqueryui.com/ui/jquery.ui.widget.js";></script>
- <!-- TODO(jasvir): Switch back to real date picker when datepicker fix is
in upstream -->
- <script src="http://www.thinkfu.com/jquery.ui.datepicker.js";></script>
- <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css";>
- <script>
- $(function() {
- $( "#datepicker" ).datepicker();
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>Date: <input type="text" id="datepicker"></p>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-<ul>
-<li>The datepicker is tied to a standard form input field.
-<li>Focus on the input (click, or use the tab key) to open an interactive
calendar in a small overlay.
-<li>Choose a date, click elsewhere on the page (blur the input), or hit
the Esc key to close.
-<li>If a date is chosen, feedback is shown as the input's value.
-</ul>
-</div><!-- End demo-description -->
-
-</body>
-</html>
=======================================
--- /trunk/src/com/google/caja/demos/playground/client/ui/Example.java Fri
Feb 24 13:22:28 2012
+++ /trunk/src/com/google/caja/demos/playground/client/ui/Example.java Sat
Feb 25 13:31:59 2012
@@ -38,8 +38,10 @@
Type.APPS, "Game of Life"),
// JQuery and JQueryUI
- DATEPICKER("examples/datepicker.html",
+ JQUERY_DATEPICKER("examples/jquery-datepicker.html",
Type.JQUERY, "Date Picker"),
+ JQUERY_DRAGGABLE("examples/jquery-draggable.html",
+ Type.JQUERY, "Draggable"),
// Benchmarks
COMBINED("sunspider/combined.html", Type.BENCHMARK, "combined"),
=======================================
--- /trunk/src/com/google/caja/plugin/bridal.js Fri Feb 24 13:22:28 2012
+++ /trunk/src/com/google/caja/plugin/bridal.js Sat Feb 25 13:31:59 2012
@@ -713,7 +713,8 @@
// and at least document it here, if not find a better solution.
else if (window.top.getComputedStyle) {
- return window.top.getComputedStyle(element, pseudoElement);
+ return makeDOMAccessible(
+ window.top.getComputedStyle(element, pseudoElement));
} else {
throw new Error(
'Computed style not available for pseudo element '
=======================================
--- /trunk/src/com/google/caja/plugin/domado.js Wed Feb 22 10:19:25 2012
+++ /trunk/src/com/google/caja/plugin/domado.js Sat Feb 25 13:31:59 2012
@@ -1133,19 +1133,12 @@
return target;
}
- function makeScrollable(element) {
- var window = bridalMaker.getWindow(element);
- var overflow = null;
- if (element.currentStyle) {
- overflow = element.currentStyle.overflow;
- } else if (window.getComputedStyle) {
- overflow = window.getComputedStyle(element, void 0).overflow;
- } else {
- overflow = null;
- }
+ function makeScrollable(bridal, element) {
+ var overflow = bridal.getComputedStyle(element, void 0).overflow;
switch (overflow && overflow.toLowerCase()) {
case 'visible':
case 'hidden':
+ makeDOMAccessible(element.style);
element.style.overflow = 'auto';
break;
}
@@ -5066,7 +5059,7 @@
value = '';
} else {
if (!sanitizeStyleProperty(cssPropertyName, tokens)) {
- throw new Error('bad value `' + value + '` for CSS
property '
+ console.log('bad value `' + value + '` for CSS property '
+ stylePropertyName);
}
value = tokens.join(' ');
@@ -5081,8 +5074,10 @@
cajaVM.def(TameStyle); // and its prototype
function isNestedInAnchor(rawElement) {
+ rawElement = makeDOMAccessible(rawElement);
for ( ; rawElement && rawElement != pseudoBodyNode;
rawElement = rawElement.parentNode) {
+ rawElement = makeDOMAccessible(rawElement);
if (rawElement.tagName.toLowerCase() === 'a') { return true; }
}
return false;
@@ -5391,7 +5386,7 @@
// The window is always auto scrollable, so make the
apparent window
// body scrollable if the gadget tries to scroll it.
if (dx || dy) {
- makeScrollable(np(tameDocument).feralPseudoBodyNode);
+ makeScrollable(bridal,
np(tameDocument).feralPseudoBodyNode);
}
tameScrollBy(np(tameDocument).feralPseudoBodyNode, dx, dy);
}),
@@ -5399,7 +5394,7 @@
function (x, y) {
// The window is always auto scrollable, so make the
apparent window
// body scrollable if the gadget tries to scroll it.
- makeScrollable(np(tameDocument).feralPseudoBodyNode);
+ makeScrollable(bridal, np(tameDocument).feralPseudoBodyNode);
tameScrollTo(np(tameDocument).feralPseudoBodyNode, x, y);
}),
resizeTo: cajaVM.def(
=======================================
--- /trunk/tests/com/google/caja/plugin/es53-test-domado-dom-guest.html Wed
Feb 15 16:13:44 2012
+++ /trunk/tests/com/google/caja/plugin/es53-test-domado-dom-guest.html Sat
Feb 25 13:31:59 2012
@@ -744,11 +744,8 @@
function $(id) { return document.getElementById(id); }
$('test-dynamic-styles1').style.fontWeight = 'bold';
$('test-dynamic-styles2').style.fontWeight = ''; // Can unset a style.
- expectFailure(
- function () {
- $('test-dynamic-styles3').style.fontWeight = 'super-bold';
- },
- 'set to super-bold');
+ $('test-dynamic-styles3').style.fontWeight = 'super-bold';
+ assertFalse('super-bold' ===
$('test-dynamic-styles3').style.fontWeight);
pass('test-dynamic-styles');
});
</script>
