Land the HTML Editing Toolbar demo from WWDC 2007.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 5 Nov 2007 00:20:55 +0000 (00:20 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 5 Nov 2007 00:20:55 +0000 (00:20 +0000)
        * demos: Added.
        * demos/editingToolbar: Added.
        * demos/editingToolbar/FancyToolbar.css: Added.
        * demos/editingToolbar/FancyToolbar.js: Added.
        * demos/editingToolbar/FancyToolbarImages: Added.
        * demos/editingToolbar/FancyToolbarImages/button.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonLeft.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonMiddle.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonPressed.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png: Added.
        * demos/editingToolbar/FancyToolbarImages/buttonRight.png: Added.
        * demos/editingToolbar/FancyToolbarImages/camera.png: Added.
        * demos/editingToolbar/FancyToolbarImages/link.png: Added.
        * demos/editingToolbar/FancyToolbarImages/textAlign.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutline.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png: Added.
        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png: Added.
        * demos/editingToolbar/content.html: Added.
        * demos/editingToolbar/images: Added.
        * demos/editingToolbar/images/safari.png: Added.
        * demos/editingToolbar/index.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27432 268f45cc-cd09-0410-ab3c-d52691b4dbfc

26 files changed:
WebKitSite/ChangeLog
WebKitSite/demos/editingToolbar/FancyToolbar.css [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbar.js [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/button.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonLeft.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonMiddle.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressed.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonRight.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/camera.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/link.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/textAlign.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutline.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/content.html [new file with mode: 0644]
WebKitSite/demos/editingToolbar/images/safari.png [new file with mode: 0644]
WebKitSite/demos/editingToolbar/index.html [new file with mode: 0644]

index a1b9f182ccd84bb5dcd4d9cc95e294425db2cf41..3672dae0004a5dc927a79c921c50d52a19007032 100644 (file)
@@ -1,3 +1,37 @@
+2007-11-04  Timothy Hatcher  <timothy@apple.com>
+
+        Land the HTML Editing Toolbar demo from WWDC 2007.
+
+        * demos: Added.
+        * demos/editingToolbar: Added.
+        * demos/editingToolbar/FancyToolbar.css: Added.
+        * demos/editingToolbar/FancyToolbar.js: Added.
+        * demos/editingToolbar/FancyToolbarImages: Added.
+        * demos/editingToolbar/FancyToolbarImages/button.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonLeft.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonMiddle.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonPressed.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/buttonRight.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/camera.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/link.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/textAlign.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutline.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png: Added.
+        * demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png: Added.
+        * demos/editingToolbar/content.html: Added.
+        * demos/editingToolbar/images: Added.
+        * demos/editingToolbar/images/safari.png: Added.
+        * demos/editingToolbar/index.html: Added.
+
 2007-11-04  David D. Kilzer  <ddkilzer@webkit.org>
 
         CIA has changed its hostname from cia.navi.cx to cia.vc
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbar.css b/WebKitSite/demos/editingToolbar/FancyToolbar.css
new file mode 100644 (file)
index 0000000..0057a6c
--- /dev/null
@@ -0,0 +1,279 @@
+/*
+
+File: FancyToolbar.css
+
+Abstract: CSS stylesheet for the FancyToolbar
+
+Version: 1.0 beta (works with Safari 3 and Firefox only)
+
+Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
+Apple Inc. ("Apple") in consideration of your agreement to the
+following terms, and your use, installation, modification or
+redistribution of this Apple software constitutes acceptance of these
+terms.  If you do not agree with these terms, please do not use,
+install, modify or redistribute this Apple software.
+
+In consideration of your agreement to abide by the following terms, and
+subject to these terms, Apple grants you a personal, non-exclusive
+license, under Apple's copyrights in this original Apple software (the
+"Apple Software"), to use, reproduce, modify and redistribute the Apple
+Software, with or without modifications, in source and/or binary forms;
+provided that if you redistribute the Apple Software in its entirety and
+without modifications, you must retain this notice and the following
+text and disclaimers in all such redistributions of the Apple Software. 
+Neither the name, trademarks, service marks or logos of Apple Inc. 
+may be used to endorse or promote products derived from the Apple
+Software without specific prior written permission from Apple.  Except
+as expressly stated in this notice, no other rights or licenses, express
+or implied, are granted by Apple herein, including but not limited to
+any patent rights that may be infringed by your derivative works or by
+other works in which the Apple Software may be incorporated.
+
+The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
+MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
+THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
+FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
+OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
+
+IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
+MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
+AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
+STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+Copyright (C) 2007 Apple Inc. All Rights Reserved.
+
+*/
+
+.fancy-toolbar-bezel {
+    position: absolute;
+    height: 26px;
+    z-index: 10000;
+    -webkit-user-select: none;
+}
+
+.fancy-toolbar-bezel-top {
+    position: absolute;
+    top: 0;
+    left: 26px;
+    right: 26px;
+    background-image: url(FancyToolbarImages/toolbarOutlineTop.png);
+    background-repeat: repeat-x;
+    height: 55px;
+}
+
+.fancy-toolbar-bezel-left {
+    position: absolute;
+    top: 55px;
+    left: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineLeft.png);
+    background-repeat: repeat-y;
+    width: 26px;
+}
+
+.fancy-toolbar-bezel-right {
+    position: absolute;
+    top: 55px;
+    right: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineRight.png);
+    background-repeat: repeat-y;
+    width: 26px;
+}
+
+.fancy-toolbar-bezel-top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineTopRight.png);
+    background-repeat: no-repeat;
+    width: 26px;
+    height: 55px;
+}
+
+.fancy-toolbar-bezel-top-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineTopLeft.png);
+    background-repeat: no-repeat;
+    width: 26px;
+    height: 55px;
+}
+
+.fancy-toolbar-bezel-bottom {
+    position: absolute;
+    right: 26px;
+    left: 26px;
+    background-image: url(FancyToolbarImages/toolbarOutlineBottom.png);
+    background-repeat: repeat-x;
+    height: 26px;
+}
+
+.fancy-toolbar-bezel-bottom-right {
+    position: absolute;
+    right: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineBottomRight.png);
+    background-repeat: no-repeat;
+    width: 26px;
+    height: 26px;
+}
+
+.fancy-toolbar-bezel-bottom-left {
+    position: absolute;
+    left: 0;
+    background-image: url(FancyToolbarImages/toolbarOutlineBottomLeft.png);
+    background-repeat: no-repeat;
+    width: 26px;
+    height: 26px;
+}
+
+.fancy-toolbar-area {
+    position: absolute;
+    left: 26px;
+    right: 26px;
+    top: 16px;
+    height: 26px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.fancy-toolbar-area > * {
+    float: left;
+}
+
+.fancy-toolbar-button {
+    height: 26px;
+    width: 29px;
+    border: none;
+    background-image: url(FancyToolbarImages/button.png);
+    background-repeat: no-repeat;
+    margin-right: 5px;
+    text-align: center;
+    font-family: Times;
+    font-size: 13px;
+    line-height: 22px;
+    text-indent: -2px;
+    -webkit-user-select: none;
+    vertical-align: middle;
+}
+
+.fancy-toolbar-button > * {
+    vertical-align: middle;
+}
+
+.fancy-toolbar-button:active, .fancy-toolbar-button.fancy-toolbar-button-selected {
+    background-image: url(FancyToolbarImages/buttonPressed.png);
+}
+
+.fancy-toolbar-button-segment {
+    height: 26px;
+    border: none;
+    background-color: transparent;
+    vertical-align: middle;
+    padding: 0;
+    margin: 0;
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-start .fancy-toolbar-button-segment-cap {
+    background-image: url(FancyToolbarImages/buttonLeft.png);
+    background-repeat: no-repeat;
+    height: 25px;
+    width: 11px;
+    float: left;
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-start:active .fancy-toolbar-button-segment-cap, .fancy-toolbar-button-segment.fancy-toolbar-button-segment-start.fancy-toolbar-button-selected .fancy-toolbar-button-segment-cap {
+    background-image: url(FancyToolbarImages/buttonPressedLeft.png);
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-end {
+    margin-right: 5px;
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-end .fancy-toolbar-button-segment-cap {
+    background-image: url(FancyToolbarImages/buttonRight.png);
+    background-repeat: no-repeat;
+    height: 26px;
+    width: 14px;
+    float: left;
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-end:active .fancy-toolbar-button-segment-cap, .fancy-toolbar-button-segment.fancy-toolbar-button-segment-end.fancy-toolbar-button-selected .fancy-toolbar-button-segment-cap {
+    background-image: url(FancyToolbarImages/buttonPressedRight.png);
+}
+
+.fancy-toolbar-button-segment.fancy-toolbar-button-segment-start .fancy-toolbar-button-segment-middle, .fancy-toolbar-button-segment.fancy-toolbar-button-segment-end .fancy-toolbar-button-segment-middle {
+    width: 14px;
+}
+
+.fancy-toolbar-button-segment-middle {
+    background-image: url(FancyToolbarImages/buttonMiddle.png);
+    background-repeat: repeat-x;
+    height: 26px;
+    width: 20px;
+    float: left;
+}
+
+.fancy-toolbar-button-segment:active .fancy-toolbar-button-segment-middle, .fancy-toolbar-button-segment.fancy-toolbar-button-selected .fancy-toolbar-button-segment-middle {
+    background-image: url(FancyToolbarImages/buttonPressedMiddle.png);
+}
+
+.fancy-toolbar-button-segment-divider {
+    background-image: url(FancyToolbarImages/buttonPressedMiddle.png);
+    background-repeat: repeat-x;
+    height: 26px;
+    width: 1px;
+    float: left;
+}
+
+.fancy-toolbar-button-bold {
+    font-weight: bold;
+}
+
+.fancy-toolbar-button-underline {
+    text-decoration: underline;
+}
+
+.fancy-toolbar-button-italic {
+    font-style: italic;
+}
+
+.fancy-toolbar-button-link img {
+    margin-top: 7px;
+}
+
+.fancy-toolbar-button-image img {
+    margin-top: 5px;
+}
+
+.fancy-toolbar-button-text-align {
+    margin-top: 6px;
+    width: 10px;
+    height: 9px;
+}
+
+.fancy-toolbar-button-text-align.fancy-toolbar-button-text-align-left {
+    background-image: url(FancyToolbarImages/textAlign.png);
+    background-position: 0 0;
+}
+
+.fancy-toolbar-button-text-align.fancy-toolbar-button-text-align-center {
+    background-image: url(FancyToolbarImages/textAlign.png);
+    background-position: 0 9px;
+    margin-left: 5px;
+}
+
+.fancy-toolbar-button-text-align.fancy-toolbar-button-text-align-justify {
+    background-image: url(FancyToolbarImages/textAlign.png);
+    background-position: 0 17px;
+    margin-left: 5px;
+}
+
+.fancy-toolbar-button-text-align.fancy-toolbar-button-text-align-right {
+    background-image: url(FancyToolbarImages/textAlign.png);
+    background-position: 0 25px;
+    margin-left: 4px;
+}
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbar.js b/WebKitSite/demos/editingToolbar/FancyToolbar.js
new file mode 100644 (file)
index 0000000..76582cb
--- /dev/null
@@ -0,0 +1,522 @@
+/*
+
+File: FancyToolbar.js
+
+Abstract: JavaScript for the FancyToolbar
+
+Version: 1.0 beta (works with Safari 3 and Firefox only)
+
+Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
+Apple Inc. ("Apple") in consideration of your agreement to the
+following terms, and your use, installation, modification or
+redistribution of this Apple software constitutes acceptance of these
+terms.  If you do not agree with these terms, please do not use,
+install, modify or redistribute this Apple software.
+
+In consideration of your agreement to abide by the following terms, and
+subject to these terms, Apple grants you a personal, non-exclusive
+license, under Apple's copyrights in this original Apple software (the
+"Apple Software"), to use, reproduce, modify and redistribute the Apple
+Software, with or without modifications, in source and/or binary forms;
+provided that if you redistribute the Apple Software in its entirety and
+without modifications, you must retain this notice and the following
+text and disclaimers in all such redistributions of the Apple Software. 
+Neither the name, trademarks, service marks or logos of Apple Inc. 
+may be used to endorse or promote products derived from the Apple
+Software without specific prior written permission from Apple.  Except
+as expressly stated in this notice, no other rights or licenses, express
+or implied, are granted by Apple herein, including but not limited to
+any patent rights that may be infringed by your derivative works or by
+other works in which the Apple Software may be incorporated.
+
+The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
+MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
+THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
+FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
+OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
+
+IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
+MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
+AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
+STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+Copyright (C) 2007 Apple Inc. All Rights Reserved.
+
+*/
+
+// Helper function to remove a className
+Element.prototype.removeStyleClass = function(className) 
+{
+    if (this.hasStyleClass(className))
+        this.className = this.className.replace(className, "");
+}
+
+// Helper function to add a className
+Element.prototype.addStyleClass = function(className) 
+{
+    if (!this.hasStyleClass(className))
+        this.className += (this.className.length ? " " + className : className);
+}
+
+// Helper function to test if a element has a className
+Element.prototype.hasStyleClass = function(className) 
+{
+    return this.className.indexOf(className) !== -1;
+}
+
+// FancyToolbar: constructor function, takes an iframe
+function FancyToolbar(iframe)
+{
+    this.setupNeeded = true;
+    this.editArea = iframe;
+
+    // add event listeners to show and hide when the iframe is focused and blurred
+    var toolbar = this;
+
+    // Mozilla sends the blur and focus events on the frame's document object
+    iframe.contentDocument.addEventListener("focus", function(event) { toolbar.show() }, false);
+    iframe.contentDocument.addEventListener("blur", function(event) { toolbar.hide() }, false);
+
+    // WebKit sends the blur and focus events on the frame's window object
+    iframe.contentDocument.defaultView.addEventListener("focus", function(event) { toolbar.show() }, false);
+    iframe.contentDocument.defaultView.addEventListener("blur", function(event) { toolbar.hide() }, false);
+}
+
+// FancyToolbar: mouse down event handler
+FancyToolbar.prototype.toolbarMouseDown = function(event)
+{
+    this.clickingToolbar = true;
+}
+
+// FancyToolbar: mouse up event handler
+FancyToolbar.prototype.toolbarMouseUp = function(event)
+{
+    // refocus the editing area
+    this.editArea.contentDocument.defaultView.focus();
+    this.clickingToolbar = false;
+}
+
+// FancyToolbar: setup and create the DOM elements for the toolbar
+FancyToolbar.prototype.setupIfNeeded = function()
+{
+    if (!this.setupNeeded)
+        return;
+
+    delete this.setupNeeded;
+
+    this.toolbarElement = document.createElement("div");
+
+    this.toolbarPartElements = {};
+
+    this.toolbarPartElements.top = document.createElement("div");
+    this.toolbarPartElements.top.className = "fancy-toolbar-bezel-top";
+    this.toolbarElement.appendChild(this.toolbarPartElements.top);
+
+    this.toolbarPartElements.bottom = document.createElement("div");
+    this.toolbarPartElements.bottom.className = "fancy-toolbar-bezel-bottom";
+    this.toolbarElement.appendChild(this.toolbarPartElements.bottom);
+
+    this.toolbarPartElements.left = document.createElement("div");
+    this.toolbarPartElements.left.className = "fancy-toolbar-bezel-left";
+    this.toolbarElement.appendChild(this.toolbarPartElements.left);
+
+    this.toolbarPartElements.right = document.createElement("div");
+    this.toolbarPartElements.right.className = "fancy-toolbar-bezel-right";
+    this.toolbarElement.appendChild(this.toolbarPartElements.right);
+
+    this.toolbarPartElements.topRight = document.createElement("div");
+    this.toolbarPartElements.topRight.className = "fancy-toolbar-bezel-top-right";
+    this.toolbarElement.appendChild(this.toolbarPartElements.topRight);
+
+    this.toolbarPartElements.topLeft = document.createElement("div");
+    this.toolbarPartElements.topLeft.className = "fancy-toolbar-bezel-top-left";
+    this.toolbarElement.appendChild(this.toolbarPartElements.topLeft);
+
+    this.toolbarPartElements.bottomRight = document.createElement("div");
+    this.toolbarPartElements.bottomRight.className = "fancy-toolbar-bezel-bottom-right";
+    this.toolbarElement.appendChild(this.toolbarPartElements.bottomRight);
+
+    this.toolbarPartElements.bottomLeft = document.createElement("div");
+    this.toolbarPartElements.bottomLeft.className = "fancy-toolbar-bezel-bottom-left";
+    this.toolbarElement.appendChild(this.toolbarPartElements.bottomLeft);
+
+    var toolbar = this;
+    this.toolbarElement.addEventListener("mousedown", function(event) { toolbar.toolbarMouseDown(event); }, false);
+    this.toolbarElement.addEventListener("mouseup", function(event) { toolbar.toolbarMouseUp(event); }, false);
+
+    var toolbarArea = document.createElement("div");
+    toolbarArea.className = "fancy-toolbar-area";
+
+    this.boldButton = document.createElement("div");
+    this.boldButton.appendChild(document.createTextNode("B"));
+    this.boldButton.className = "fancy-toolbar-button fancy-toolbar-button-bold";
+    this.boldButton.addEventListener("click", function(event) { toolbar.boldSelection(event); }, false);
+    toolbarArea.appendChild(this.boldButton);
+
+    this.underlineButton = document.createElement("div");
+    this.underlineButton.appendChild(document.createTextNode("U"));
+    this.underlineButton.className = "fancy-toolbar-button fancy-toolbar-button-underline";
+    this.underlineButton.addEventListener("click", function(event) { toolbar.underlineSelection(event); }, false);
+    toolbarArea.appendChild(this.underlineButton);
+
+    this.italicButton = document.createElement("div");
+    this.italicButton.appendChild(document.createTextNode("I"));
+    this.italicButton.className = "fancy-toolbar-button fancy-toolbar-button-italic";
+    this.italicButton.addEventListener("click", function(event) { toolbar.italicSelection(event); }, false);
+    toolbarArea.appendChild(this.italicButton);
+
+    this.textAlignLeftButton = document.createElement("div");
+    this.textAlignLeftButton.className = "fancy-toolbar-button-segment fancy-toolbar-button-segment-start fancy-toolbar-button-selected";
+    this.textAlignLeftButton.addEventListener("click", function(event) { toolbar.textAlignLeft(event); }, false);
+    toolbarArea.appendChild(this.textAlignLeftButton);
+
+    var cap = document.createElement("div");
+    cap.className = "fancy-toolbar-button-segment-cap";
+    this.textAlignLeftButton.appendChild(cap);
+
+    var middle = document.createElement("div");
+    middle.className = "fancy-toolbar-button-segment-middle";
+    this.textAlignLeftButton.appendChild(middle);
+
+    var align = document.createElement("div");
+    align.className = "fancy-toolbar-button-text-align fancy-toolbar-button-text-align-left";
+    middle.appendChild(align);
+
+    var divider = document.createElement("div");
+    divider.className = "fancy-toolbar-button-segment-divider";
+    this.textAlignLeftButton.appendChild(divider);
+
+    this.textAlignCenterButton = document.createElement("div");
+    this.textAlignCenterButton.className = "fancy-toolbar-button-segment";
+    this.textAlignCenterButton.addEventListener("click", function(event) { toolbar.textAlignCenter(event); }, false);
+    toolbarArea.appendChild(this.textAlignCenterButton);
+
+    middle = document.createElement("div");
+    middle.className = "fancy-toolbar-button-segment-middle";
+    this.textAlignCenterButton.appendChild(middle);
+
+    align = document.createElement("div");
+    align.className = "fancy-toolbar-button-text-align fancy-toolbar-button-text-align-center";
+    middle.appendChild(align);
+
+    divider = document.createElement("div");
+    divider.className = "fancy-toolbar-button-segment-divider";
+    this.textAlignCenterButton.appendChild(divider);
+
+    this.textAlignJustifyButton = document.createElement("div");
+    this.textAlignJustifyButton.className = "fancy-toolbar-button-segment";
+    this.textAlignJustifyButton.addEventListener("click", function(event) { toolbar.textAlignJustify(event); }, false);
+    toolbarArea.appendChild(this.textAlignJustifyButton);
+
+    middle = document.createElement("div");
+    middle.className = "fancy-toolbar-button-segment-middle";
+    this.textAlignJustifyButton.appendChild(middle);
+
+    align = document.createElement("div");
+    align.className = "fancy-toolbar-button-text-align fancy-toolbar-button-text-align-justify";
+    middle.appendChild(align);
+
+    divider = document.createElement("div");
+    divider.className = "fancy-toolbar-button-segment-divider";
+    this.textAlignJustifyButton.appendChild(divider);
+
+    this.textAlignRightButton = document.createElement("div");
+    this.textAlignRightButton.className = "fancy-toolbar-button-segment fancy-toolbar-button-segment-end";
+    this.textAlignRightButton.addEventListener("click", function(event) { toolbar.textAlignRight(event); }, false);
+    toolbarArea.appendChild(this.textAlignRightButton);
+
+    middle = document.createElement("div");
+    middle.className = "fancy-toolbar-button-segment-middle";
+    this.textAlignRightButton.appendChild(middle);
+
+    align = document.createElement("div");
+    align.className = "fancy-toolbar-button-text-align fancy-toolbar-button-text-align-right";
+    middle.appendChild(align);
+
+    cap = document.createElement("div");
+    cap.className = "fancy-toolbar-button-segment-cap";
+    this.textAlignRightButton.appendChild(cap);
+
+    this.linkButton = document.createElement("div");
+    this.linkButton.className = "fancy-toolbar-button fancy-toolbar-button-link";
+    this.linkButton.addEventListener("click", function(event) { toolbar.linkSelection(event); }, false);
+    toolbarArea.appendChild(this.linkButton);
+
+    var img = document.createElement("img");
+    img.src = "FancyToolbarImages/link.png";
+    this.linkButton.appendChild(img);
+
+    this.imageButton = document.createElement("div");
+    this.imageButton.className = "fancy-toolbar-button fancy-toolbar-button-image";
+    this.imageButton.addEventListener("click", function(event) { toolbar.insertImage(event); }, false);
+    toolbarArea.appendChild(this.imageButton);
+
+    img = document.createElement("img");
+    img.src = "FancyToolbarImages/camera.png";
+    this.imageButton.appendChild(img);
+
+    this.toolbarElement.appendChild(toolbarArea);
+
+    this.toolbarElement.className = "fancy-toolbar-bezel";
+
+    // set the opacity to 0 to start with
+    this.toolbarElement.style.opacity = "0";
+}
+
+// FancyToolbar: show the toolbar
+FancyToolbar.prototype.show = function()
+{
+    if (this.showing)
+        return;
+
+    this.showing = true;
+
+    this.setupIfNeeded();
+
+    // add the toolbar element to the body
+    document.body.insertBefore(this.toolbarElement, document.body.firstChild);
+
+    // resize the toolbar element to match the iframe
+    this.adjustSize();
+
+    // add the event listeners we need
+    this.updateToolbarListener = function(event) { toolbar.updateToolbarButtonStates(toolbar) };
+    this.windowResizeListener = function(event) { toolbar.windowResize(event) };
+    this.editArea.contentDocument.addEventListener("mouseup", this.updateToolbarListener, false);
+    this.editArea.contentDocument.addEventListener("mousemove", this.updateToolbarListener, false);
+    this.editArea.contentDocument.addEventListener("keypress", this.updateToolbarListener, false);
+
+    window.addEventListener("resize", this.windowResizeListener, false);
+
+    // start the toolbar fading in
+    var toolbar = this;
+    setTimeout(function() { toolbar.animateToolbar(1.0) }, 30);
+}
+
+// FancyToolbar: hide the toolbar
+FancyToolbar.prototype.hide = function()
+{
+    if (this.clickingToolbar)
+        return;
+
+    this.showing = false;
+
+    // start the toolbar fading out
+    var toolbar = this;
+    setTimeout(function() { toolbar.animateToolbar(0.0) }, 30);
+}
+
+// FancyToolbar: hidden function called when the toolbar fade ends
+FancyToolbar.prototype.hidden = function()
+{
+    // remove the event listeners we don't need anymore
+    this.editArea.contentDocument.removeEventListener("mouseup", this.updateToolbarListener, false);
+    this.editArea.contentDocument.removeEventListener("mousemove", this.updateToolbarListener, false);
+    this.editArea.contentDocument.removeEventListener("keypress", this.updateToolbarListener, false);
+    window.removeEventListener("resize", this.windowResizeListener, false);
+
+    // remove the toolbar element
+    this.toolbarElement.parentNode.removeChild(this.toolbarElement);
+}
+
+// FancyToolbar: update the toolbar button states
+FancyToolbar.prototype.updateToolbarButtonStates = function()
+{
+    var doc = this.editArea.contentDocument;
+
+    // check the Bold state
+    if (doc.queryCommandState("bold"))
+        this.boldButton.addStyleClass("fancy-toolbar-button-selected");
+    else
+        this.boldButton.removeStyleClass("fancy-toolbar-button-selected");
+
+    // check the Underline state
+    if (doc.queryCommandState("underline"))
+        this.underlineButton.addStyleClass("fancy-toolbar-button-selected");
+    else
+        this.underlineButton.removeStyleClass("fancy-toolbar-button-selected");
+
+    // check the Italic state
+    if (doc.queryCommandState("italic"))
+        this.italicButton.addStyleClass("fancy-toolbar-button-selected");
+    else
+        this.italicButton.removeStyleClass("fancy-toolbar-button-selected");
+}
+
+// FancyToolbar: link button event handler
+FancyToolbar.prototype.linkSelection = function(event)
+{
+    // prompt the user for a URL
+    this.clickingToolbar = true;
+    var value = prompt("Enter link URL:", "http://www.apple.com");
+    this.clickingToolbar = false;
+    if (value)
+        this.editArea.contentDocument.execCommand("createLink", false, value);
+}
+
+// FancyToolbar: image button event handler
+FancyToolbar.prototype.insertImage = function(event)
+{
+    // prompt the user for a URL
+    this.clickingToolbar = true;
+    var value = prompt("Enter image URL:", "images/safari.png");
+    this.clickingToolbar = false;
+    if (value)
+        this.editArea.contentDocument.execCommand("insertImage", false, value);
+}
+
+// FancyToolbar: bold button event handler
+FancyToolbar.prototype.boldSelection = function(event)
+{
+    this.editArea.contentDocument.execCommand("bold", false, null);
+    this.updateToolbarButtonStates();
+}
+
+// FancyToolbar: underline button event handler
+FancyToolbar.prototype.underlineSelection = function(event)
+{
+    this.editArea.contentDocument.execCommand("underline", false, null);
+    this.updateToolbarButtonStates();
+}
+
+// FancyToolbar: italic button event handler
+FancyToolbar.prototype.italicSelection = function(event)
+{
+    this.editArea.contentDocument.execCommand("italic", false, null);
+    this.updateToolbarButtonStates();
+}
+
+// FancyToolbar: text align left button event handler
+FancyToolbar.prototype.textAlignLeft = function(event)
+{
+    this.editArea.contentDocument.execCommand("justifyLeft", false, null);
+
+    // enable the left text align button, disable all other toolbar text align buttons
+    this.textAlignLeftButton.addStyleClass("fancy-toolbar-button-selected");
+    this.textAlignCenterButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignJustifyButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignRightButton.removeStyleClass("fancy-toolbar-button-selected");
+}
+
+// FancyToolbar: text align center button event handler
+FancyToolbar.prototype.textAlignCenter = function(event)
+{
+    this.editArea.contentDocument.execCommand("justifyCenter", false, null);
+
+    // enable the center text align button, disable all other toolbar text align buttons
+    this.textAlignLeftButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignCenterButton.addStyleClass("fancy-toolbar-button-selected");
+    this.textAlignJustifyButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignRightButton.removeStyleClass("fancy-toolbar-button-selected");
+}
+
+// FancyToolbar: text align justify button event handler
+FancyToolbar.prototype.textAlignJustify = function(event)
+{
+    this.editArea.contentDocument.execCommand("justifyFull", false, null);
+
+    // enable the justify text align button, disable all other toolbar text align buttons
+    this.textAlignLeftButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignCenterButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignJustifyButton.addStyleClass("fancy-toolbar-button-selected");
+    this.textAlignRightButton.removeStyleClass("fancy-toolbar-button-selected");
+}
+
+// FancyToolbar: text align right button event handler
+FancyToolbar.prototype.textAlignRight = function(event)
+{
+    this.editArea.contentDocument.execCommand("justifyRight", false, null);
+
+    // enable the right text align button, disable all other toolbar text align buttons
+    this.textAlignLeftButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignCenterButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignJustifyButton.removeStyleClass("fancy-toolbar-button-selected");
+    this.textAlignRightButton.addStyleClass("fancy-toolbar-button-selected");
+}
+
+// FancyToolbar: adjust the size of the toolbar bezel to match the iframe
+FancyToolbar.prototype.adjustSize = function()
+{
+    var toolbarTopHeight = 55;
+    var toolbarSideWidth = 26;
+
+    this.toolbarElement.style.top = (this.editArea.offsetTop - toolbarTopHeight) + "px";
+    this.toolbarElement.style.left = (this.editArea.offsetLeft - toolbarSideWidth) + "px";
+    this.toolbarElement.style.width = this.editArea.offsetWidth + (toolbarSideWidth * 2) + "px";
+
+    var width = this.editArea.offsetWidth;
+    var height = this.editArea.offsetHeight;
+
+    this.toolbarPartElements.left.style.height = height + "px";
+    this.toolbarPartElements.right.style.height = height + "px";
+
+    var newTop = (height + toolbarTopHeight) + "px";
+    this.toolbarPartElements.bottom.style.top = newTop;
+    this.toolbarPartElements.bottomLeft.style.top = newTop;
+    this.toolbarPartElements.bottomRight.style.top = newTop;
+}
+
+// FancyToolbar: window resize event handler
+FancyToolbar.prototype.windowResize = function(event)
+{
+    // call the adjustSize function after a delay to make sure the iframe has fully resized
+    var toolbar = this;
+    setTimeout(function() { toolbar.adjustSize() }, 0);
+}
+
+// FancyToolbar: fade animation function
+FancyToolbar.prototype.animateToolbar = function(targetOpacity) {
+    // increment or decrement the opacity depending on the target opacity
+    if (this.toolbarElement.style.opacity < targetOpacity)
+        this.toolbarElement.style.opacity = parseFloat(this.toolbarElement.style.opacity) + 0.1;
+    else if (this.toolbarElement.style.opacity > targetOpacity)
+        this.toolbarElement.style.opacity = parseFloat(this.toolbarElement.style.opacity) - 0.1;
+
+    if (this.toolbarElement.style.opacity != targetOpacity) {
+        // the opacity not yet the target opacity, keep animating
+        var toolbar = this;
+        setTimeout(function() { toolbar.animateToolbar(targetOpacity) }, 10);
+        return;
+    }
+
+    // the opacity is now 0, so call the hidden function
+    if (targetOpacity === 0.0)
+        this.hidden();
+}
+
+window.addEventListener("load", function(event) {
+    new Image().src = "FancyToolbarImages/button.png";
+    new Image().src = "FancyToolbarImages/buttonLeft.png";
+    new Image().src = "FancyToolbarImages/buttonMiddle.png";
+    new Image().src = "FancyToolbarImages/buttonPressed.png";
+    new Image().src = "FancyToolbarImages/buttonPressedLeft.png";
+    new Image().src = "FancyToolbarImages/buttonPressedMiddle.png";
+    new Image().src = "FancyToolbarImages/buttonPressedRight.png";
+    new Image().src = "FancyToolbarImages/buttonRight.png";
+    new Image().src = "FancyToolbarImages/camera.png";
+    new Image().src = "FancyToolbarImages/link.png";
+    new Image().src = "FancyToolbarImages/textAlign.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineTop.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineLeft.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineBottom.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineRight.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineTopLeft.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineTopRight.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineBottomLeft.png";
+    new Image().src = "FancyToolbarImages/toolbarOutlineBottomRight.png";
+
+    // find all the iframes
+    var iframes = document.getElementsByTagName("iframe");
+    for (var i = 0; i < iframes.length; ++i) {
+        var iframe = iframes[i];
+        if (!iframe.hasStyleClass("editable") || iframe.fancyToolbar)
+            continue;
+        // enable editing and make a new FancyToolbar
+        iframe.contentDocument.designMode = "on";
+        iframe.fancyToolbar = new FancyToolbar(iframe);
+    }
+}, false);
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/button.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/button.png
new file mode 100644 (file)
index 0000000..aee4efb
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/button.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonLeft.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonLeft.png
new file mode 100644 (file)
index 0000000..4971962
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonLeft.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonMiddle.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonMiddle.png
new file mode 100644 (file)
index 0000000..68f5424
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonMiddle.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressed.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressed.png
new file mode 100644 (file)
index 0000000..1d21ab6
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressed.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png
new file mode 100644 (file)
index 0000000..a82d761
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedLeft.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png
new file mode 100644 (file)
index 0000000..e18cb7f
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedMiddle.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png
new file mode 100644 (file)
index 0000000..a392967
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonPressedRight.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonRight.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonRight.png
new file mode 100644 (file)
index 0000000..30ba327
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/buttonRight.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/camera.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/camera.png
new file mode 100644 (file)
index 0000000..c484b8e
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/camera.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/link.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/link.png
new file mode 100644 (file)
index 0000000..2b231a0
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/link.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/textAlign.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/textAlign.png
new file mode 100644 (file)
index 0000000..1b0733e
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/textAlign.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutline.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutline.png
new file mode 100644 (file)
index 0000000..591288f
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutline.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png
new file mode 100644 (file)
index 0000000..ad2355f
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottom.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png
new file mode 100644 (file)
index 0000000..c3dc3c3
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomLeft.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png
new file mode 100644 (file)
index 0000000..ebca356
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineBottomRight.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png
new file mode 100644 (file)
index 0000000..9c66a8b
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineLeft.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png
new file mode 100644 (file)
index 0000000..cdecf2e
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineRight.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png
new file mode 100644 (file)
index 0000000..95ecf4e
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTop.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png
new file mode 100644 (file)
index 0000000..3e0ec47
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopLeft.png differ
diff --git a/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png
new file mode 100644 (file)
index 0000000..59f8690
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/FancyToolbarImages/toolbarOutlineTopRight.png differ
diff --git a/WebKitSite/demos/editingToolbar/content.html b/WebKitSite/demos/editingToolbar/content.html
new file mode 100644 (file)
index 0000000..708b3c7
--- /dev/null
@@ -0,0 +1,69 @@
+<!--
+
+File: content.html
+
+Abstract: Sample content HTML file for the FancyToolbar
+
+Version: 1.0 beta (works with Safari 3 and Firefox only)
+
+Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
+Apple Inc. ("Apple") in consideration of your agreement to the
+following terms, and your use, installation, modification or
+redistribution of this Apple software constitutes acceptance of these
+terms.  If you do not agree with these terms, please do not use,
+install, modify or redistribute this Apple software.
+
+In consideration of your agreement to abide by the following terms, and
+subject to these terms, Apple grants you a personal, non-exclusive
+license, under Apple's copyrights in this original Apple software (the
+"Apple Software"), to use, reproduce, modify and redistribute the Apple
+Software, with or without modifications, in source and/or binary forms;
+provided that if you redistribute the Apple Software in its entirety and
+without modifications, you must retain this notice and the following
+text and disclaimers in all such redistributions of the Apple Software. 
+Neither the name, trademarks, service marks or logos of Apple Inc. 
+may be used to endorse or promote products derived from the Apple
+Software without specific prior written permission from Apple.  Except
+as expressly stated in this notice, no other rights or licenses, express
+or implied, are granted by Apple herein, including but not limited to
+any patent rights that may be infringed by your derivative works or by
+other works in which the Apple Software may be incorporated.
+
+The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
+MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
+THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
+FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
+OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
+
+IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
+MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
+AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
+STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+Copyright (C) 2007 Apple Inc. All Rights Reserved.
+
+-->
+<html>
+<body contenteditable="true">
+Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit.
+Pellentesque scelerisque erat rhoncus nulla. Integer pulvinar, est ut
+congue elementum, urna sapien blandit nibh, in lobortis turpis metus eget
+dolor. Cras tristique vulputate sapien. Integer tincidunt elit adipiscing orci.
+<p>
+Nulla facilisi. In in velit. Sed varius turpis sed pede. Aliquam at libero.
+Nunc a nibh. Nulla ullamcorper. Proin aliquet quam tempor metus. Mauris
+fermentum turpis vel metus. Integer tincidunt tortor eget tellus. Vivamus
+vel augue at metus rhoncus aliquet. Vivamus mi tellus, auctor sed, porta eu,
+mattis vel, ipsum. Phasellus vulputate vulputate risus. Integer tincidunt,
+dolor at dapibus vulputate, quam libero commodo elit, et feugiat odio felis
+vitae eros. Vestibulum sapien. Praesent sollicitudin nibh eu dui. Cras
+convallis tincidunt pede. Phasellus pellentesque metus in nulla. Praesent
+euismod scelerisque diam. Morbi erat turpis, lobortis in, consequat nec,
+lacinia sed, enim. Curabitur nisl nisl, consectetuer ac, eleifend a,
+condimentum vel, sem.
+</body>
+</html>
diff --git a/WebKitSite/demos/editingToolbar/images/safari.png b/WebKitSite/demos/editingToolbar/images/safari.png
new file mode 100644 (file)
index 0000000..c782104
Binary files /dev/null and b/WebKitSite/demos/editingToolbar/images/safari.png differ
diff --git a/WebKitSite/demos/editingToolbar/index.html b/WebKitSite/demos/editingToolbar/index.html
new file mode 100644 (file)
index 0000000..efdac76
--- /dev/null
@@ -0,0 +1,71 @@
+<!--
+
+File: index.html
+
+Abstract: Main HTML file for the FancyToolbar
+
+Version: 1.0 beta (works with Safari 3 and Firefox only)
+
+Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
+Apple Inc. ("Apple") in consideration of your agreement to the
+following terms, and your use, installation, modification or
+redistribution of this Apple software constitutes acceptance of these
+terms.  If you do not agree with these terms, please do not use,
+install, modify or redistribute this Apple software.
+
+In consideration of your agreement to abide by the following terms, and
+subject to these terms, Apple grants you a personal, non-exclusive
+license, under Apple's copyrights in this original Apple software (the
+"Apple Software"), to use, reproduce, modify and redistribute the Apple
+Software, with or without modifications, in source and/or binary forms;
+provided that if you redistribute the Apple Software in its entirety and
+without modifications, you must retain this notice and the following
+text and disclaimers in all such redistributions of the Apple Software. 
+Neither the name, trademarks, service marks or logos of Apple Inc. 
+may be used to endorse or promote products derived from the Apple
+Software without specific prior written permission from Apple.  Except
+as expressly stated in this notice, no other rights or licenses, express
+or implied, are granted by Apple herein, including but not limited to
+any patent rights that may be infringed by your derivative works or by
+other works in which the Apple Software may be incorporated.
+
+The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
+MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
+THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
+FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
+OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
+
+IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
+OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
+MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
+AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
+STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+
+Copyright (C) 2007 Apple Inc. All Rights Reserved.
+
+-->
+<html>
+<head>
+<style>
+body {
+    margin: 80px;
+    background-color: rgb(70%, 70%, 55%);
+}
+
+iframe.editable {
+    width: 100%;
+    height: 300px;
+    border: none;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="FancyToolbar.css">
+<script src="FancyToolbar.js"></script>
+</head>
+<body onload="loadFancyToolbars()">
+<iframe class="editable" src="content.html"></iframe>
+</body>
+</html>