[SCM] WebKit Debian packaging branch, webkit-1.1, updated. upstream/1.1.21-584-g1e41756
mjs at apple.com
mjs at apple.com
Fri Feb 26 22:22:23 UTC 2010
The following commit has been merged in the webkit-1.1 branch:
commit 23e3c8a3f6d1714c96f0b507f7fe5659534ef240
Author: mjs at apple.com <mjs at apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Wed Feb 17 08:38:14 2010 +0000
Not reviewed - demo.
Made some examples of using <details> for table descriptions.
* demos/hover-summary: Added.
* demos/hover-summary/details.css: Added.
* demos/hover-summary/details.js: Added.
(summaryClickListener):
():
(window.onload):
* demos/hover-summary/example1.html: Added.
* demos/hover-summary/example2.html: Added.
* demos/hover-summary/horizontal-triangle.png: Added.
* demos/hover-summary/vertical-triangle.png: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@54879 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebKitSite/ChangeLog b/WebKitSite/ChangeLog
index 9aea763..c186347 100644
--- a/WebKitSite/ChangeLog
+++ b/WebKitSite/ChangeLog
@@ -1,3 +1,20 @@
+2010-02-17 Maciej Stachowiak <mjs at apple.com>
+
+ Not reviewed - demo.
+
+ Made some examples of using <details> for table descriptions.
+
+ * demos/hover-summary: Added.
+ * demos/hover-summary/details.css: Added.
+ * demos/hover-summary/details.js: Added.
+ (summaryClickListener):
+ ():
+ (window.onload):
+ * demos/hover-summary/example1.html: Added.
+ * demos/hover-summary/example2.html: Added.
+ * demos/hover-summary/horizontal-triangle.png: Added.
+ * demos/hover-summary/vertical-triangle.png: Added.
+
2010-02-02 Jens Alfke <snej at chromium.org>
Reviewed by David Levin.
diff --git a/WebKitSite/demos/hover-summary/details.css b/WebKitSite/demos/hover-summary/details.css
new file mode 100644
index 0000000..8dca4bc
--- /dev/null
+++ b/WebKitSite/demos/hover-summary/details.css
@@ -0,0 +1,30 @@
+details {
+ display: block;
+ overflow: hidden;
+ height: 1em;
+ border-left: 10px;
+ padding-left: 15px;
+}
+
+details > summary {
+ position: relative;
+ left: -11px;
+ text-align: left;
+ display: block;
+ font-weight: bold;
+}
+
+details > summary:before {
+ position: relative;
+ left: -1px;
+ content: url(horizontal-triangle.png);
+}
+
+details[open] {
+ text-align: left;
+ height: auto;
+}
+
+details[open] > summary:before {
+ content: url(vertical-triangle.png);
+}
\ No newline at end of file
diff --git a/WebKitSite/demos/hover-summary/details.js b/WebKitSite/demos/hover-summary/details.js
new file mode 100644
index 0000000..daeeb36
--- /dev/null
+++ b/WebKitSite/demos/hover-summary/details.js
@@ -0,0 +1,33 @@
+
+function summaryClickListener(evt)
+{
+ if (this.parentNode.getAttribute("open") == null) {
+ this.parentNode.setAttribute("open", "");
+ this.parentNode.className = "xxx";
+ } else {
+ this.parentNode.removeAttribute("open");
+ this.parentNode.className = "yyy";
+ }
+}
+
+
+function detailsKeyPressListener(evt)
+{
+ if (this.getAttribute("open") == null) {
+ this.setAttribute("open", "");
+ this.className = "xxx";
+ } else {
+ this.removeAttribute("open");
+ this.className = "yyy";
+ }
+}
+
+
+window.onload = function() {
+ var summaryElements = document.getElementsByTagName("summary");
+ for (var i = 0; i < summaryElements.length; ++i) {
+ summaryElements[i].parentNode.setAttribute("tabindex", 0);
+ summaryElements[i].addEventListener("click", summaryClickListener, false);
+ summaryElements[i].parentNode.addEventListener("keypress", detailsKeyPressListener, false);
+ }
+};
\ No newline at end of file
diff --git a/WebKitSite/demos/hover-summary/example1.html b/WebKitSite/demos/hover-summary/example1.html
new file mode 100644
index 0000000..053c551
--- /dev/null
+++ b/WebKitSite/demos/hover-summary/example1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<head>
+<title>Summary Example 1</title>
+<link rel=stylesheet href="details.css">
+<script src="details.js"></script>
+<style>
+table#expenses {
+ border: 1px solid gray;
+ width: 50%;
+ border-collapse: collapse;
+ caption-side: bottom;
+ position: relative; /* To make this a containing block. */
+}
+
+table#expenses td, table#expenses th {
+ border: 1px solid gray;
+}
+
+table#expenses > caption > details {
+ display: none;
+ position: absolute;
+ background: lightyellow;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ top: 100%;
+ width: 100%;
+}
+
+table#expenses:hover > caption > details {
+ display: block;
+}
+
+table#expenses > caption > details:focus {
+ display: block;
+}
+
+</style>
+</head>
+
+<body>
+
+<table id=expenses>
+<tr><th>Month</th><th>Revenues</th><th>Expenses</th></tr>
+<tr><th>January</th><td>$5,000</td><td>$10,000</td></tr>
+<tr><th>Februuary</th><td>$4,000</td><td>$20,000</td></tr>
+<tr><th>March</th><td>$3,000</td><td>$30,000</td></tr>
+<tr><th>April</th><td>$2,000</td><td>$40,000</td></tr>
+<tr><th>May</th><td>$1,000</td><td>$50,000</td></tr>
+<caption>Monthly Revenues and Expenses
+<details>
+<summary>Table Description</summary>This table shows monthly revenues
+and expenses. Each row represents a month. The columns are the month
+name, the revenues for that month, and the expenses for that
+month.</detail>
+</caption>
+</table>
+
+
+</body>
diff --git a/WebKitSite/demos/hover-summary/example2.html b/WebKitSite/demos/hover-summary/example2.html
new file mode 100644
index 0000000..88640d7
--- /dev/null
+++ b/WebKitSite/demos/hover-summary/example2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<head>
+<title>Summary Example 1</title>
+<link rel=stylesheet href="details.css">
+<script src="details.js"></script>
+<style>
+table#expenses {
+ border: 1px solid gray;
+ width: 50%;
+ border-collapse: collapse;
+ caption-side: bottom;
+ position: relative; /* To make this a containing block. */
+}
+
+table#expenses td, table#expenses th {
+ border: 1px solid gray;
+}
+
+table#expenses > caption > details {
+ display: none;
+ position: absolute;
+ background: lightyellow;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ top: 100%;
+ width: 100%;
+}
+
+table#expenses:hover > caption > details {
+ display: block;
+}
+
+table#expenses > caption > details:focus {
+ display: block;
+}
+
+</style>
+</head>
+
+<body>
+
+<table id=expenses>
+<tr><th>Month</th><th>Revenues</th><th>Expenses</th></tr>
+<tr><th>January</th><td>$5,000</td><td>$10,000</td></tr>
+<tr><th>Februuary</th><td>$4,000</td><td>$20,000</td></tr>
+<tr><th>March</th><td>$3,000</td><td>$30,000</td></tr>
+<tr><th>April</th><td>$2,000</td><td>$40,000</td></tr>
+<tr><th>May</th><td>$1,000</td><td>$50,000</td></tr>
+<caption>
+<details>
+<summary>Monthly Revenues and Expenses</summary>This table shows monthly revenues
+and expenses. Each row represents a month. The columns are the month
+name, the revenues for that month, and the expenses for that
+month.</detail>
+</caption>
+</table>
+
+
+</body>
diff --git a/WebKitSite/demos/hover-summary/horizontal-triangle.png b/WebKitSite/demos/hover-summary/horizontal-triangle.png
new file mode 100644
index 0000000..673893c
Binary files /dev/null and b/WebKitSite/demos/hover-summary/horizontal-triangle.png differ
diff --git a/WebKitSite/demos/hover-summary/vertical-triangle.png b/WebKitSite/demos/hover-summary/vertical-triangle.png
new file mode 100644
index 0000000..1351f8a
Binary files /dev/null and b/WebKitSite/demos/hover-summary/vertical-triangle.png differ
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list