blob: 35ad4ce0f45c0b49e88b00d3b16b551da92fcdf7 [file] [log] [blame]
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
WebInspector.NavigationItem.call(this, identifier);
console.assert(identifier);
console.assert(toolTipOrLabel);
this.toolTip = toolTipOrLabel;
this._element.addEventListener("click", this._mouseClicked.bind(this));
this._element.setAttribute("role", role || "button");
if (label)
this._element.setAttribute("aria-label", label);
this._imageWidth = imageWidth || 16;
this._imageHeight = imageHeight || 16;
this._suppressEmboss = suppressEmboss || false;
if (suppressEmboss)
this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
if (image)
this.image = image;
else
this.label = toolTipOrLabel;
};
WebInspector.ButtonNavigationItem.StyleClassName = "button";
WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName = "suppress-emboss";
WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
WebInspector.ButtonNavigationItem.States = {};
WebInspector.ButtonNavigationItem.States.Normal = "normal";
WebInspector.ButtonNavigationItem.States.Active = "active";
WebInspector.ButtonNavigationItem.States.Focus = "focus";
WebInspector.ButtonNavigationItem.States.ActiveFocus = "active-focus";
WebInspector.ButtonNavigationItem.Event = {
Clicked: "button-navigation-item-clicked"
};
WebInspector.ButtonNavigationItem.prototype = {
constructor: WebInspector.ButtonNavigationItem,
// Public
get toolTip()
{
return this._element.title;
},
set toolTip(newToolTip)
{
console.assert(newToolTip);
if (!newToolTip)
return;
this._element.title = newToolTip;
},
get label()
{
return this._element.textContent;
},
set label(newLabel)
{
this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
this._element.textContent = newLabel || "";
if (this.parentNavigationBar)
this.parentNavigationBar.updateLayout();
},
get image()
{
return this._image;
},
set image(newImage)
{
if (!newImage) {
this._element.removeChildren();
return;
}
this._element.removeChildren();
this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
this._image = newImage;
this._glyphElement = document.createElement("div");
this._glyphElement.className = "glyph";
this._element.appendChild(this._glyphElement);
this._updateImage();
},
get enabled()
{
return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
},
set enabled(flag)
{
if (flag)
this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
else
this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
},
get suppressBezel()
{
return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
},
set suppressBezel(flag)
{
if (flag)
this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
else
this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
},
generateStyleText: function(parentSelector)
{
var classNames = this._classNames.join(".");
if (this._suppressEmboss)
var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " + this._imageWidth + "px " + this._imageHeight + "px; }\n";
else {
// Default state.
var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " + this._imageWidth + "px " + this._imageHeight + "px; }\n";
// Pressed state.
styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
// Focused state.
styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
}
return styleText;
},
// Private
_additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
_embossedImageStates: WebInspector.ButtonNavigationItem.States,
_imageCacheable: true,
_mouseClicked: function(event)
{
if (!this.enabled)
return;
this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
},
_canvasIdentifier: function(state)
{
console.assert(!this._suppressEmboss);
return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
},
_updateImage: function()
{
if (this._suppressEmboss)
this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
else
this._generateImages();
},
_generateImages: function()
{
console.assert(!this._suppressEmboss);
if (this._suppressEmboss)
return;
generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
}
};
WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;