~bcsaller/juju-gui/charmFind

* @param destroyAllNodes {Boolean} If true, all nodes contained within the Widget are removed and destroyed. Defaults to false due to potentially high run-time cost.

1782

* @return {Widget} A reference to this object

1783

* @chainable

1784

1785

destroy: function(destroyAllNodes) {

1786

this._destroyAllNodes = destroyAllNodes;

1787

return Widget.superclass.destroy.apply(this);

1788

1789

1790

/**

1791

* Removes and destroys the widgets rendered boundingBox, contentBox,

1792

* and detaches bound UI events.

1793

1794

* @method _destroyBox

1795

* @protected

1796

1797

_destroyBox : function() {

1798

1799

var boundingBox = this.get(BOUNDING_BOX),

1800

contentBox = this.get(CONTENT_BOX),

1801

deep = this._destroyAllNodes,

1802

same;

1803

1804

same = boundingBox && boundingBox.compareTo(contentBox);

1805

1806

if (this.UI_EVENTS) {

1807

this._destroyUIEvents();

1808

}

1809

1810

this._unbindUI(boundingBox);

1811

1812

if (deep) {

1813

// Removes and destroys all child nodes.

1814

boundingBox.empty();

1815

boundingBox.remove(TRUE);

1816

} else {

1817

if (contentBox) {

1818

contentBox.remove(TRUE);

1819

}

1820

if (!same) {

1821

boundingBox.remove(TRUE);

1822

}

1823

}

1824

1825

1826

/**

1827

* Establishes the initial DOM for the widget. Invoking this

1828

* method will lead to the creating of all DOM elements for

1829

* the widget (or the manipulation of existing DOM elements

1830

* for the progressive enhancement use case).

1831

* <p>

1832

* This method should only be invoked once for an initialized

1833

* widget.

1834

* </p>

1835

* <p>

1836

* It delegates to the widget specific renderer method to do

1837

* the actual work.

1838

* </p>

1839

1840

* @method render

1841

* @chainable

1842

* @final

1843

* @param parentNode {Object | String} Optional. The Node under which the

1844

* Widget is to be rendered. This can be a Node instance or a CSS selector string.

1845

* <p>

1846

* If the selector string returns more than one Node, the first node will be used

1847

* as the parentNode. NOTE: This argument is required if both the boundingBox and contentBox

1848

* are not currently in the document. If it's not provided, the Widget will be rendered

1849

* to the body of the current document in this case.

1850

* </p>

1851

1852

render: function(parentNode) {

1853

if (this.get(DESTROYED)) { Y.log("Render failed; widget has been destroyed", "error", "widget"); }

1854

1855

if (!this.get(DESTROYED) && !this.get(RENDERED)) {

1856

/**

1857

* Lifecycle event for the render phase, fired prior to rendering the UI

1858

* for the widget (prior to invoking the widget's renderer method).

1859

* <p>

1860

* Subscribers to the "on" moment of this event, will be notified

1861

* before the widget is rendered.

1862

* </p>

1863

* <p>

1864

* Subscribers to the "after" moment of this event, will be notified

1865

* after rendering is complete.

1866

* </p>

1867

1868

* @event widget:render

1869

* @preventable _defRenderFn

1870

* @param {EventFacade} e The Event Facade

1871

1872

this.publish(RENDER, {

1873

queuable:FALSE,

1874

fireOnce:TRUE,

1875

defaultTargetOnly:TRUE,

1876

defaultFn: this._defRenderFn

1877

});

1878

1879

this.fire(RENDER, {parentNode: (parentNode) ? Node.one(parentNode) : null});

1880

}

1881

return this;

1882

1883

1884

/**

1885

* Default render handler

1886

1887

* @method _defRenderFn

1888

* @protected

1889

* @param {EventFacade} e The Event object

1890

* @param {Node} parentNode The parent node to render to, if passed in to the <code>render</code> method

1891

1892

_defRenderFn : function(e) {

1893

this._parentNode = e.parentNode;

1894

1895

this.renderer();

1896

this._set(RENDERED, TRUE);

1897

1898

this._removeLoadingClassNames();

1899

1900

1901

/**

1902

* Creates DOM (or manipulates DOM for progressive enhancement)

1903

* This method is invoked by render() and is not chained

1904

* automatically for the class hierarchy (unlike initializer, destructor)

1905

* so it should be chained manually for subclasses if required.

1906

1907

* @method renderer

1908

* @protected

1909

1910

renderer: function() {

1911

// kweight

1912

var widget = this;

1913

1914

widget._renderUI();

1915

widget.renderUI();

1916

1917

widget._bindUI();

1918

widget.bindUI();

1919

1920

widget._syncUI();

1921

widget.syncUI();

1922

1923

1924

/**

1925

* Configures/Sets up listeners to bind Widget State to UI/DOM

1926

1927

* This method is not called by framework and is not chained

1928

* automatically for the class hierarchy.

1929

1930

* @method bindUI

1931

* @protected

1932

1933

bindUI: EMPTY_FN,

1934

1935

/**

1936

* Adds nodes to the DOM

1937

1938

* This method is not called by framework and is not chained

1939

* automatically for the class hierarchy.

1940

1941

* @method renderUI

1942

* @protected

1943

1944

renderUI: EMPTY_FN,

1945

1946

/**

1947

* Refreshes the rendered UI, based on Widget State

1948

1949

* This method is not called by framework and is not chained

1950

* automatically for the class hierarchy.

1951

1952

* @method syncUI

1953

* @protected

1954

1955

1956

syncUI: EMPTY_FN,

1957

1958

/**

1959

* @method hide

1960

* @description Hides the Widget by setting the "visible" attribute to "false".

1961

* @chainable

1962

1963

hide: function() {

1964

return this.set(VISIBLE, FALSE);

1965

1966

1967

/**

1968

* @method show

1969

* @description Shows the Widget by setting the "visible" attribute to "true".

1970

* @chainable

1971

1972

show: function() {

1973

return this.set(VISIBLE, TRUE);

1974

1975

1976

/**

1977

* @method focus

1978

* @description Causes the Widget to receive the focus by setting the "focused"

1979

* attribute to "true".

1980

* @chainable

1981

1982

focus: function () {

1983

return this._set(FOCUSED, TRUE);

1984

1985

1986

/**

1987

* @method blur

1988

* @description Causes the Widget to lose focus by setting the "focused" attribute

1989

* to "false"

1990

* @chainable

1991

1992

blur: function () {

1993

return this._set(FOCUSED, FALSE);

1994

1995

1996

/**

1997

* @method enable

1998

* @description Set the Widget's "disabled" attribute to "false".

1999

* @chainable

2000

2001

enable: function() {

2002

return this.set(DISABLED, FALSE);

2003

2004

2005

/**

2006

* @method disable

2007

* @description Set the Widget's "disabled" attribute to "true".

2008

* @chainable

2009

2010

disable: function() {

2011

return this.set(DISABLED, TRUE);

2012

2013

2014

/**

2015

* @method _uiSizeCB

2016

* @protected

2017

* @param {boolean} expand

2018

2019

_uiSizeCB : function(expand) {

2020

this.get(CONTENT_BOX).toggleClass(_getWidgetClassName(CONTENT, "expanded"), expand);

2021

2022

2023

/**

2024

* Helper method to collect the boundingBox and contentBox and append to the provided parentNode, if not

2025

* already a child. The owner document of the boundingBox, or the owner document of the contentBox will be used

2026

* as the document into which the Widget is rendered if a parentNode is node is not provided. If both the boundingBox and

2027

* the contentBox are not currently in the document, and no parentNode is provided, the widget will be rendered

2028

* to the current document's body.

2029

2030

* @method _renderBox

2031

* @private

2032

* @param {Node} parentNode The parentNode to render the widget to. If not provided, and both the boundingBox and

2033

* the contentBox are not currently in the document, the widget will be rendered to the current document's body.

2034

2035

_renderBox: function(parentNode) {

2036

2037

// TODO: Performance Optimization [ More effective algo to reduce Node refs, compares, replaces? ]

2038

2039

var widget = this, // kweight

2040

contentBox = widget.get(CONTENT_BOX),

2041

boundingBox = widget.get(BOUNDING_BOX),

2042

srcNode = widget.get(SRC_NODE),

2043

defParentNode = widget.DEF_PARENT_NODE,

2044

2045

doc = (srcNode && srcNode.get(OWNER_DOCUMENT)) || boundingBox.get(OWNER_DOCUMENT) || contentBox.get(OWNER_DOCUMENT);

2046

2047

// If srcNode (assume it's always in doc), have contentBox take its place (widget render responsible for re-use of srcNode contents)

2048

if (srcNode && !srcNode.compareTo(contentBox) && !contentBox.inDoc(doc)) {

2049

srcNode.replace(contentBox);

2050

}

2051

2052

if (!boundingBox.compareTo(contentBox.get(PARENT_NODE)) && !boundingBox.compareTo(contentBox)) {

2053

// If contentBox box is already in the document, have boundingBox box take it's place

2054

if (contentBox.inDoc(doc)) {

2055

contentBox.replace(boundingBox);

2056

}

2057

boundingBox.appendChild(contentBox);

2058

}

2059

2060

parentNode = parentNode || (defParentNode && Node.one(defParentNode));

2061

2062

if (parentNode) {

2063

parentNode.appendChild(boundingBox);

2064

} else if (!boundingBox.inDoc(doc)) {

2065

Node.one(BODY).insert(boundingBox, 0);

2066

}

2067

2068

2069

/**

2070

* Setter for the boundingBox attribute

2071

2072

* @method _setBB

2073

* @private

2074

* @param Node/String

2075

* @return Node

2076

2077

_setBB: function(node) {

2078

return this._setBox(this.get(ID), node, this.BOUNDING_TEMPLATE);

2079

2080

2081

/**

2082

* Setter for the contentBox attribute

2083

2084

* @method _setCB

2085

* @private

2086

* @param {Node|String} node

2087

* @return Node

2088

2089

_setCB: function(node) {

2090

return (this.CONTENT_TEMPLATE === null) ? this.get(BOUNDING_BOX) : this._setBox(null, node, this.CONTENT_TEMPLATE);

2091

2092

2093

/**

2094

* Returns the default value for the contentBox attribute.

2095

2096

* For the Widget class, this will be the srcNode if provided, otherwise null (resulting in

2097

* a new contentBox node instance being created)

2098

2099

* @method _defaultCB

2100

* @protected

2101

2102

_defaultCB : function(node) {

2103

return this.get(SRC_NODE) || null;

2104

2105

2106

/**

2107

* Helper method to set the bounding/content box, or create it from

2108

* the provided template if not found.

2109

2110

* @method _setBox

2111

* @private

2112

2113

* @param {String} id The node's id attribute

2114

* @param {Node|String} node The node reference

2115

* @param {String} template HTML string template for the node

2116

* @return {Node} The node

2117

2118

_setBox : function(id, node, template) {

2119

node = Node.one(node) || Node.create(template);

2120

if (!node.get(ID)) {

2121

node.set(ID, id || Y.guid());

2122

}

2123

return node;

2124

2125

2126

/**

2127

* Initializes the UI state for the Widget's bounding/content boxes.

2128

2129

* @method _renderUI

2130

* @protected

2131

2132

_renderUI: function() {

2133

this._renderBoxClassNames();

2134

this._renderBox(this._parentNode);

2135

2136

2137

/**

2138

* Applies standard class names to the boundingBox and contentBox

2139

2140

* @method _renderBoxClassNames

2141

* @protected

2142

2143

_renderBoxClassNames : function() {

2144

var classes = this._getClasses(),

2145

cl,

2146

boundingBox = this.get(BOUNDING_BOX),

2147

2148

2149

boundingBox.addClass(_getWidgetClassName());

2150

2151

// Start from Widget Sub Class

2152

for (i = classes.length-3; i >= 0; i--) {

2153

cl = classes[i];

2154

boundingBox.addClass(cl.CSS_PREFIX || _getClassName(cl.NAME.toLowerCase()));

2155

}

2156

2157

// Use instance based name for content box

2158

this.get(CONTENT_BOX).addClass(this.getClassName(CONTENT));

2159

2160

2161

/**

2162

* Removes class names representative of the widget's loading state from

2163

* the boundingBox.

2164

2165

* @method _removeLoadingClassNames

2166

* @protected

2167

2168

_removeLoadingClassNames: function () {

2169

2170

var boundingBox = this.get(BOUNDING_BOX),

2171

contentBox = this.get(CONTENT_BOX),

2172

instClass = this.getClassName(LOADING),

2173

widgetClass = _getWidgetClassName(LOADING);

2174

2175

boundingBox.removeClass(widgetClass)

2176

.removeClass(instClass);

2177

2178

contentBox.removeClass(widgetClass)

2179

.removeClass(instClass);

2180

2181

2182

/**

2183

* Sets up DOM and CustomEvent listeners for the widget.

2184

2185

* @method _bindUI

2186

* @protected

2187

2188

_bindUI: function() {

2189

this._bindAttrUI(this._UI_ATTRS.BIND);

2190

this._bindDOM();

2191

2192

2193

/**

2194

* @method _unbindUI

2195

* @protected

2196

2197

_unbindUI : function(boundingBox) {

2198

this._unbindDOM(boundingBox);

2199

2200

2201

/**

2202

* Sets up DOM listeners, on elements rendered by the widget.

2203

2204

* @method _bindDOM

2205

* @protected

2206

2207

_bindDOM : function() {

2208

var oDocument = this.get(BOUNDING_BOX).get(OWNER_DOCUMENT),

2209

focusHandle = Widget._hDocFocus;

2210

2211

// Shared listener across all Widgets.

2212

if (!focusHandle) {

2213

focusHandle = Widget._hDocFocus = oDocument.on("focus", this._onDocFocus, this);

2214

focusHandle.listeners = {

2215

count: 0

2216

};

2217

}

2218

2219

focusHandle.listeners[Y.stamp(this, true)] = true;

2220

focusHandle.listeners.count++;

2221

2222

// Fix for Webkit:

2223

// Document doesn't receive focus in Webkit when the user mouses

2224

// down on it, so the "focused" attribute won't get set to the

2225

// correct value. Keeping this instance based for now, potential better performance.

2226

// Otherwise we'll end up looking up widgets from the DOM on every mousedown.

2227

if (WEBKIT){

2228

this._hDocMouseDown = oDocument.on("mousedown", this._onDocMouseDown, this);

2229

}

2230

2231

2232

/**

2233

* @method _unbindDOM

2234

* @protected

2235

2236

_unbindDOM : function(boundingBox) {

2237

2238

var focusHandle = Widget._hDocFocus,

2239

yuid = Y.stamp(this, true),

2240

focusListeners,

2241

mouseHandle = this._hDocMouseDown;

2242

2243

if (focusHandle) {

2244

2245

focusListeners = focusHandle.listeners;

2246

2247

if (focusListeners[yuid]) {

2248

delete focusListeners[yuid];

2249

focusListeners.count--;

2250

}

2251

2252

if (focusListeners.count === 0) {

2253

focusHandle.detach();

2254

Widget._hDocFocus = null;

2255

}

2256

}

2257

2258

if (WEBKIT && mouseHandle) {

2259

mouseHandle.detach();

2260

}

2261

2262

2263

/**

2264

* Updates the widget UI to reflect the attribute state.

2265

2266

* @method _syncUI

2267

* @protected

2268

2269

_syncUI: function() {

2270

this._syncAttrUI(this._UI_ATTRS.SYNC);

2271

2272

2273

/**

2274

* Sets the height on the widget's bounding box element

2275

2276

* @method _uiSetHeight

2277

* @protected

2278

* @param {String | Number} val

2279

2280

_uiSetHeight: function(val) {

2281

this._uiSetDim(HEIGHT, val);

2282

this._uiSizeCB((val !== EMPTY_STR && val !== AUTO));

2283

2284

2285

/**

2286

* Sets the width on the widget's bounding box element

2287

2288

* @method _uiSetWidth

2289

* @protected

2290

* @param {String | Number} val

2291

2292

_uiSetWidth: function(val) {

2293

this._uiSetDim(WIDTH, val);

2294

2295

2296

/**

2297

* @method _uiSetDim

2298

* @private

2299

* @param {String} dim The dimension - "width" or "height"

2300

* @param {Number | String} val The value to set

2301

2302

_uiSetDim: function(dimension, val) {

2303

this.get(BOUNDING_BOX).setStyle(dimension, L.isNumber(val) ? val + this.DEF_UNIT : val);

2304

2305

2306

/**

2307

* Sets the visible state for the UI

2308

2309

* @method _uiSetVisible

2310

* @protected

2311

* @param {boolean} val

2312

2313

_uiSetVisible: function(val) {

2314

this.get(BOUNDING_BOX).toggleClass(this.getClassName(HIDDEN), !val);

2315

2316

2317

/**

2318

* Sets the disabled state for the UI

2319

2320

* @method _uiSetDisabled

2321

* @protected

2322

* @param {boolean} val

2323

2324

_uiSetDisabled: function(val) {

2325

this.get(BOUNDING_BOX).toggleClass(this.getClassName(DISABLED), val);

2326

2327

2328

/**

2329

* Sets the focused state for the UI

2330

2331

* @method _uiSetFocused

2332

* @protected

2333

* @param {boolean} val

2334

* @param {string} src String representing the source that triggered an update to

2335

* the UI.

2336

2337

_uiSetFocused: function(val, src) {

2338

var boundingBox = this.get(BOUNDING_BOX);

2339

boundingBox.toggleClass(this.getClassName(FOCUSED), val);

2340

2341

if (src !== UI) {

2342

if (val) {

2343

boundingBox.focus();

2344

} else {

2345

boundingBox.blur();

2346

}

2347

}

2348

2349

2350

/**

2351

* Set the tabIndex on the widget's rendered UI

2352

2353

* @method _uiSetTabIndex

2354

* @protected

2355

* @param Number

2356

2357

_uiSetTabIndex: function(index) {

2358

var boundingBox = this.get(BOUNDING_BOX);

2359

2360

if (L.isNumber(index)) {

2361

boundingBox.set(TAB_INDEX, index);

2362

} else {

2363

boundingBox.removeAttribute(TAB_INDEX);

2364

}

2365

2366

2367

/**

2368

* @method _onDocMouseDown

2369

* @description "mousedown" event handler for the owner document of the

2370

* widget's bounding box.

2371

* @protected

2372

* @param {EventFacade} evt The event facade for the DOM focus event

2373

2374

_onDocMouseDown: function (evt) {

2375

if (this._domFocus) {

2376

this._onDocFocus(evt);

2377

}

2378

2379

2380

/**

2381

* DOM focus event handler, used to sync the state of the Widget with the DOM

2382

2383

* @method _onDocFocus

2384

* @protected

2385

* @param {EventFacade} evt The event facade for the DOM focus event

2386

2387

_onDocFocus: function (evt) {

2388

var widget = Widget.getByNode(evt.target),

2389

activeWidget = Widget._active;

2390

2391

if (activeWidget && (activeWidget !== widget)) {

2392

activeWidget._domFocus = false;

2393

activeWidget._set(FOCUSED, false, {src:UI});

2394

2395

Widget._active = null;

2396

}

2397

2398

if (widget) {

2399

widget._domFocus = true;

2400

widget._set(FOCUSED, true, {src:UI});

2401

2402

Widget._active = widget;

2403

}

2404

2405

2406

/**

2407

* Generic toString implementation for all widgets.

2408

2409

* @method toString

2410

* @return {String} The default string value for the widget [ displays the NAME of the instance, and the unique id ]

2411

2412

toString: function() {

2413

// Using deprecated name prop for kweight squeeze.

2414

return this.name + "[" + this.get(ID) + "]";

2415

2416

2417

/**

2418

* Default unit to use for dimension values

2419

2420

* @property DEF_UNIT

2421

* @type String

2422

2423

DEF_UNIT : "px",

2424

2425

/**

2426

* Default node to render the bounding box to. If not set,

2427

* will default to the current document body.

2428

2429

* @property DEF_PARENT_NODE

2430

* @type String | Node

2431

2432

DEF_PARENT_NODE : null,

2433

2434

/**

2435

* Property defining the markup template for content box. If your Widget doesn't

2436

* need the dual boundingBox/contentBox structure, set CONTENT_TEMPLATE to null,

2437

* and contentBox and boundingBox will both point to the same Node.

2438

2439

* @property CONTENT_TEMPLATE

2440

* @type String

2441

2442

CONTENT_TEMPLATE : DIV,

2443

2444

/**

2445

* Property defining the markup template for bounding box.

2446

2447

* @property BOUNDING_TEMPLATE

2448

* @type String

2449

2450

BOUNDING_TEMPLATE : DIV,

2451

2452

/**

2453

* @method _guid

2454

* @protected

2455

2456

_guid : function() {

2457

return Y.guid();

2458

2459

2460

/**

2461

* @method _validTabIndex

2462

* @protected

2463

* @param {Number} tabIndex

2464

2465

_validTabIndex : function (tabIndex) {

2466

return (L.isNumber(tabIndex) || L.isNull(tabIndex));

2467

2468

2469

/**

2470

* Binds after listeners for the list of attributes provided

2471

2472

* @method _bindAttrUI

2473

* @private

2474

* @param {Array} attrs

2475

2476

_bindAttrUI : function(attrs) {

2477

var i,

2478

l = attrs.length;

2479

2480

for (i = 0; i < l; i++) {

2481

this.after(attrs[i] + CHANGE, this._setAttrUI);

2482

}

2483

2484

2485

/**

2486

* Invokes the _uiSet&#61;ATTR NAME&#62; method for the list of attributes provided

2487

2488

* @method _syncAttrUI

2489

* @private

2490

* @param {Array} attrs

2491

2492

_syncAttrUI : function(attrs) {

2493

var i, l = attrs.length, attr;

2494

for (i = 0; i < l; i++) {

2495

attr = attrs[i];

2496

this[_UISET + _toInitialCap(attr)](this.get(attr));

2497

}

2498

2499

2500

/**

2501

* @method _setAttrUI

2502

* @private

2503

* @param {EventFacade} e

2504

2505

_setAttrUI : function(e) {

2506

if (e.target === this) {

2507

this[_UISET + _toInitialCap(e.attrName)](e.newVal, e.src);

2508

}

2509

2510

2511

/**

2512

* The default setter for the strings attribute. Merges partial sets

2513

* into the full string set, to allow users to partial sets of strings

2514

2515

* @method _strSetter

2516

* @protected

2517

* @param {Object} strings

2518

* @return {String} The full set of strings to set

2519

2520

_strSetter : function(strings) {

2521

return Y.merge(this.get(STRINGS), strings);

2522

2523

2524

/**

2525

* Helper method to get a specific string value

2526

2527

* @deprecated Used by deprecated WidgetLocale implementations.

2528

* @method getString

2529

* @param {String} key

2530

* @return {String} The string

2531

2532

getString : function(key) {

2533

return this.get(STRINGS)[key];

2534

2535

2536

/**

2537

* Helper method to get the complete set of strings for the widget

2538

2539

* @deprecated Used by deprecated WidgetLocale implementations.

2540

* @method getStrings

2541

* @param {String} key

2542

* @return {String} The strings

2543

2544

getStrings : function() {

2545

return this.get(STRINGS);

2546

2547

2548

/**

2549

* The lists of UI attributes to bind and sync for widget's _bindUI and _syncUI implementations

2550

2551

* @property _UI_ATTRS

2552

* @type Object

2553

* @private

2554

2555

_UI_ATTRS : {

2556

BIND: UI_ATTRS,

2557

SYNC: UI_ATTRS

2558

}

2559

});

2560

2561

Y.Widget = Widget;

2562

2563

</pre>

2564

</div>

2565

2566

</div>

2567

</div>

2568

</div>

2569

</div>

2570

</div>

2571

</div>

2572

2573

2574

2575

2576

2577

2578

2579

2580

</body>

2581

</html>

Older »