123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131 |
- goog.provide('goog.ui.ac.Renderer');
- goog.provide('goog.ui.ac.Renderer.CustomRenderer');
- goog.require('goog.a11y.aria');
- goog.require('goog.a11y.aria.Role');
- goog.require('goog.a11y.aria.State');
- goog.require('goog.array');
- goog.require('goog.asserts');
- goog.require('goog.dispose');
- goog.require('goog.dom');
- goog.require('goog.dom.NodeType');
- goog.require('goog.dom.TagName');
- goog.require('goog.dom.classlist');
- goog.require('goog.events');
- goog.require('goog.events.EventTarget');
- goog.require('goog.events.EventType');
- goog.require('goog.fx.dom.FadeInAndShow');
- goog.require('goog.fx.dom.FadeOutAndHide');
- goog.require('goog.positioning');
- goog.require('goog.positioning.Corner');
- goog.require('goog.positioning.Overflow');
- goog.require('goog.string');
- goog.require('goog.style');
- goog.require('goog.ui.IdGenerator');
- goog.require('goog.ui.ac.AutoComplete');
- goog.ui.ac.Renderer = function(
- opt_parentNode, opt_customRenderer, opt_rightAlign,
- opt_useStandardHighlighting) {
- goog.ui.ac.Renderer.base(this, 'constructor');
-
- this.parent_ = opt_parentNode || goog.dom.getDocument().body;
-
- this.dom_ = goog.dom.getDomHelper(this.parent_);
-
- this.reposition_ = !opt_parentNode;
-
- this.element_ = null;
-
- this.token_ = '';
-
- this.rows_ = [];
-
- this.rowDivs_ = [];
-
- this.hilitedRow_ = -1;
-
- this.startRenderingRows_ = -1;
-
- this.visible_ = false;
-
- this.className = goog.getCssName('ac-renderer');
-
- this.rowClassName = goog.getCssName('ac-row');
-
-
-
- this.legacyActiveClassName_ = goog.getCssName('active');
-
- this.activeClassName = goog.getCssName('ac-active');
-
- this.highlightedClassName = goog.getCssName('ac-highlighted');
-
- this.customRenderer_ = opt_customRenderer || null;
-
- this.useStandardHighlighting_ =
- opt_useStandardHighlighting != null ? opt_useStandardHighlighting : true;
-
- this.matchWordBoundary_ = true;
-
- this.highlightAllTokens_ = false;
-
- this.rightAlign_ = !!opt_rightAlign;
-
- this.topAlign_ = false;
-
- this.menuFadeDuration_ = 0;
-
- this.showScrollbarsIfTooLarge_ = false;
-
- this.animation_;
- };
- goog.inherits(goog.ui.ac.Renderer, goog.events.EventTarget);
- goog.ui.ac.Renderer.prototype.anchorElement_;
- goog.ui.ac.Renderer.prototype.target_;
- goog.ui.ac.Renderer.prototype.widthProvider_;
- goog.ui.ac.Renderer.prototype.borderWidth_ = 0;
- goog.ui.ac.Renderer.prototype.wasHighlightedAtLeastOnce_;
- goog.ui.ac.Renderer.DELAY_BEFORE_MOUSEOVER = 300;
- goog.ui.ac.Renderer.prototype.getElement = function() {
- return this.element_;
- };
- goog.ui.ac.Renderer.prototype.setWidthProvider = function(
- widthProvider, opt_borderWidth) {
- this.widthProvider_ = widthProvider;
- if (opt_borderWidth) {
- this.borderWidth_ = opt_borderWidth;
- }
- };
- goog.ui.ac.Renderer.prototype.setTopAlign = function(align) {
- this.topAlign_ = align;
- };
- goog.ui.ac.Renderer.prototype.getTopAlign = function() {
- return this.topAlign_;
- };
- goog.ui.ac.Renderer.prototype.setRightAlign = function(align) {
- this.rightAlign_ = align;
- };
- goog.ui.ac.Renderer.prototype.getRightAlign = function() {
- return this.rightAlign_;
- };
- goog.ui.ac.Renderer.prototype.setShowScrollbarsIfTooLarge = function(show) {
- this.showScrollbarsIfTooLarge_ = show;
- };
- goog.ui.ac.Renderer.prototype.setUseStandardHighlighting = function(
- useStandardHighlighting) {
- this.useStandardHighlighting_ = useStandardHighlighting;
- };
- goog.ui.ac.Renderer.prototype.setMatchWordBoundary = function(
- matchWordBoundary) {
- this.matchWordBoundary_ = matchWordBoundary;
- };
- goog.ui.ac.Renderer.prototype.setHighlightAllTokens = function(
- highlightAllTokens) {
- this.highlightAllTokens_ = highlightAllTokens;
- };
- goog.ui.ac.Renderer.prototype.setMenuFadeDuration = function(duration) {
- this.menuFadeDuration_ = duration;
- };
- goog.ui.ac.Renderer.prototype.setAnchorElement = function(anchor) {
- this.anchorElement_ = anchor;
- };
- goog.ui.ac.Renderer.prototype.getAnchorElement = function() {
- return this.anchorElement_;
- };
- goog.ui.ac.Renderer.prototype.renderRows = function(rows, token, opt_target) {
- this.token_ = token;
- this.rows_ = rows;
- this.hilitedRow_ = -1;
- this.startRenderingRows_ = goog.now();
- this.target_ = opt_target;
- this.rowDivs_ = [];
- this.redraw();
- };
- goog.ui.ac.Renderer.prototype.dismiss = function() {
- if (this.visible_) {
- this.visible_ = false;
- this.toggleAriaMarkup_(false );
- if (this.menuFadeDuration_ > 0) {
- goog.dispose(this.animation_);
- this.animation_ =
- new goog.fx.dom.FadeOutAndHide(this.element_, this.menuFadeDuration_);
- this.animation_.play();
- } else {
- goog.style.setElementShown(this.element_, false);
- }
- }
- };
- goog.ui.ac.Renderer.prototype.show = function() {
- if (!this.visible_) {
- this.visible_ = true;
- this.toggleAriaMarkup_(true );
- if (this.menuFadeDuration_ > 0) {
- goog.dispose(this.animation_);
- this.animation_ =
- new goog.fx.dom.FadeInAndShow(this.element_, this.menuFadeDuration_);
- this.animation_.play();
- } else {
- goog.style.setElementShown(this.element_, true);
- }
- }
- };
- goog.ui.ac.Renderer.prototype.toggleAriaMarkup_ = function(isShown) {
- if (!this.target_) {
- return;
- }
- goog.a11y.aria.setState(this.target_, goog.a11y.aria.State.HASPOPUP, isShown);
- goog.a11y.aria.setState(
- goog.asserts.assert(this.element_), goog.a11y.aria.State.EXPANDED,
- isShown);
- goog.a11y.aria.setState(this.target_, goog.a11y.aria.State.EXPANDED, isShown);
- if (isShown) {
- goog.a11y.aria.setState(
- this.target_, goog.a11y.aria.State.OWNS, this.element_.id);
- } else {
- goog.a11y.aria.removeState(this.target_, goog.a11y.aria.State.OWNS);
- goog.a11y.aria.setActiveDescendant(this.target_, null);
- }
- };
- goog.ui.ac.Renderer.prototype.isVisible = function() {
- return this.visible_;
- };
- goog.ui.ac.Renderer.prototype.hiliteRow = function(index) {
- var row =
- index >= 0 && index < this.rows_.length ? this.rows_[index] : undefined;
- var rowDiv = index >= 0 && index < this.rowDivs_.length ?
- this.rowDivs_[index] :
- undefined;
- var evtObj = ({
- type: goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
- rowNode: rowDiv,
- row: row ? row.data : null
- });
- if (this.dispatchEvent(evtObj)) {
- this.hiliteNone();
- this.hilitedRow_ = index;
- if (rowDiv) {
- goog.dom.classlist.addAll(
- rowDiv, [this.activeClassName, this.legacyActiveClassName_]);
- if (this.target_) {
- goog.a11y.aria.setActiveDescendant(this.target_, rowDiv);
- }
- goog.style.scrollIntoContainerView(rowDiv, this.element_);
- }
- }
- };
- goog.ui.ac.Renderer.prototype.hiliteNone = function() {
- if (this.hilitedRow_ >= 0) {
- goog.dom.classlist.removeAll(
- goog.asserts.assert(this.rowDivs_[this.hilitedRow_]),
- [this.activeClassName, this.legacyActiveClassName_]);
- }
- };
- goog.ui.ac.Renderer.prototype.hiliteId = function(id) {
- if (id == -1) {
- this.hiliteRow(-1);
- } else {
- for (var i = 0; i < this.rows_.length; i++) {
- if (this.rows_[i].id == id) {
- this.hiliteRow(i);
- return;
- }
- }
- }
- };
- goog.ui.ac.Renderer.prototype.setMenuClasses_ = function(elem) {
- goog.asserts.assert(elem);
-
-
- goog.dom.classlist.addAll(elem, goog.string.trim(this.className).split(' '));
- };
- goog.ui.ac.Renderer.prototype.maybeCreateElement_ = function() {
- if (!this.element_) {
-
- var el = this.dom_.createDom(goog.dom.TagName.DIV, {style: 'display:none'});
- if (this.showScrollbarsIfTooLarge_) {
-
-
- el.style.overflowY = 'auto';
- }
- this.element_ = el;
- this.setMenuClasses_(el);
- goog.a11y.aria.setRole(el, goog.a11y.aria.Role.LISTBOX);
- el.id = goog.ui.IdGenerator.getInstance().getNextUniqueId();
- this.dom_.appendChild(this.parent_, el);
-
- goog.events.listen(
- el, goog.events.EventType.CLICK, this.handleClick_, false, this);
- goog.events.listen(
- el, goog.events.EventType.MOUSEDOWN, this.handleMouseDown_, false,
- this);
- goog.events.listen(
- el, goog.events.EventType.MOUSEOVER, this.handleMouseOver_, false,
- this);
- }
- };
- goog.ui.ac.Renderer.prototype.redraw = function() {
-
- this.maybeCreateElement_();
-
-
-
- if (this.topAlign_) {
- this.element_.style.visibility = 'hidden';
- }
- if (this.widthProvider_) {
- var width = this.widthProvider_.clientWidth - this.borderWidth_ + 'px';
- this.element_.style.minWidth = width;
- }
-
- this.rowDivs_.length = 0;
- this.dom_.removeChildren(this.element_);
-
-
- if (this.customRenderer_ && this.customRenderer_.render) {
- this.customRenderer_.render(this, this.element_, this.rows_, this.token_);
- } else {
- var curRow = null;
- goog.array.forEach(this.rows_, function(row) {
- row = this.renderRowHtml(row, this.token_);
- if (this.topAlign_) {
-
- this.element_.insertBefore(row, curRow);
- } else {
- this.dom_.appendChild(this.element_, row);
- }
- curRow = row;
- }, this);
- }
-
- if (this.rows_.length == 0) {
- this.dismiss();
- return;
- } else {
- this.show();
- }
- this.reposition();
-
-
- goog.style.setUnselectable(this.element_, true);
- };
- goog.ui.ac.Renderer.prototype.getAnchorCorner = function() {
- var anchorCorner = this.rightAlign_ ? goog.positioning.Corner.BOTTOM_RIGHT :
- goog.positioning.Corner.BOTTOM_LEFT;
- if (this.topAlign_) {
- anchorCorner = goog.positioning.flipCornerVertical(anchorCorner);
- }
- return anchorCorner;
- };
- goog.ui.ac.Renderer.prototype.reposition = function() {
- if (this.target_ && this.reposition_) {
- var anchorElement = this.anchorElement_ || this.target_;
- var anchorCorner = this.getAnchorCorner();
- var overflowMode = goog.positioning.Overflow.ADJUST_X_EXCEPT_OFFSCREEN;
- if (this.showScrollbarsIfTooLarge_) {
-
-
-
-
-
-
-
- this.element_.style.height = '';
- overflowMode |= goog.positioning.Overflow.RESIZE_HEIGHT;
- }
- goog.positioning.positionAtAnchor(
- anchorElement, anchorCorner, this.element_,
- goog.positioning.flipCornerVertical(anchorCorner), null, null,
- overflowMode);
- if (this.topAlign_) {
-
-
- this.element_.style.visibility = 'visible';
- }
- }
- };
- goog.ui.ac.Renderer.prototype.setAutoPosition = function(auto) {
- this.reposition_ = auto;
- };
- goog.ui.ac.Renderer.prototype.getAutoPosition = function() {
- return this.reposition_;
- };
- goog.ui.ac.Renderer.prototype.getTarget = function() {
- return this.target_ || null;
- };
- goog.ui.ac.Renderer.prototype.disposeInternal = function() {
- if (this.element_) {
- goog.events.unlisten(
- this.element_, goog.events.EventType.CLICK, this.handleClick_, false,
- this);
- goog.events.unlisten(
- this.element_, goog.events.EventType.MOUSEDOWN, this.handleMouseDown_,
- false, this);
- goog.events.unlisten(
- this.element_, goog.events.EventType.MOUSEOVER, this.handleMouseOver_,
- false, this);
- this.dom_.removeNode(this.element_);
- this.element_ = null;
- this.visible_ = false;
- }
- goog.dispose(this.animation_);
- this.parent_ = null;
- goog.ui.ac.Renderer.base(this, 'disposeInternal');
- };
- goog.ui.ac.Renderer.prototype.renderRowContents_ = function(row, token, node) {
- goog.dom.setTextContent(node, row.data.toString());
- };
- goog.ui.ac.Renderer.prototype.startHiliteMatchingText_ = function(
- node, tokenOrArray) {
- this.wasHighlightedAtLeastOnce_ = false;
- this.hiliteMatchingText_(node, tokenOrArray);
- };
- goog.ui.ac.Renderer.prototype.hiliteMatchingText_ = function(
- node, tokenOrArray) {
- if (!this.highlightAllTokens_ && this.wasHighlightedAtLeastOnce_) {
- return;
- }
- if (node.nodeType == goog.dom.NodeType.TEXT) {
- var rest = null;
- if (goog.isArray(tokenOrArray) && tokenOrArray.length > 1 &&
- !this.highlightAllTokens_) {
- rest = goog.array.slice(tokenOrArray, 1);
- }
- var token = this.getTokenRegExp_(tokenOrArray);
- if (token.length == 0) return;
- var text = node.nodeValue;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- var re = this.matchWordBoundary_ ?
- new RegExp('\\b(?:' + token + ')', 'gi') :
- new RegExp(token, 'gi');
- var textNodes = [];
- var lastIndex = 0;
-
-
-
- var match = re.exec(text);
- var numMatches = 0;
- while (match) {
- numMatches++;
- textNodes.push(text.substring(lastIndex, match.index));
- textNodes.push(text.substring(match.index, re.lastIndex));
- lastIndex = re.lastIndex;
- match = re.exec(text);
- }
- textNodes.push(text.substring(lastIndex));
-
-
-
-
- if (textNodes.length > 1) {
- var maxNumToBold = !this.highlightAllTokens_ ? 1 : numMatches;
- for (var i = 0; i < maxNumToBold; i++) {
- var idx = 2 * i;
- node.nodeValue = textNodes[idx];
- var boldTag = this.dom_.createElement(goog.dom.TagName.B);
- boldTag.className = this.highlightedClassName;
- this.dom_.appendChild(
- boldTag, this.dom_.createTextNode(textNodes[idx + 1]));
- boldTag = node.parentNode.insertBefore(boldTag, node.nextSibling);
- node.parentNode.insertBefore(
- this.dom_.createTextNode(''), boldTag.nextSibling);
- node = boldTag.nextSibling;
- }
-
- var remainingTextNodes = goog.array.slice(textNodes, maxNumToBold * 2);
- node.nodeValue = remainingTextNodes.join('');
- this.wasHighlightedAtLeastOnce_ = true;
- } else if (rest) {
- this.hiliteMatchingText_(node, rest);
- }
- } else {
- var child = node.firstChild;
- while (child) {
- var nextChild = child.nextSibling;
- this.hiliteMatchingText_(child, tokenOrArray);
- child = nextChild;
- }
- }
- };
- goog.ui.ac.Renderer.prototype.getTokenRegExp_ = function(tokenOrArray) {
- var token = '';
- if (!tokenOrArray) {
- return token;
- }
- if (goog.isArray(tokenOrArray)) {
-
- tokenOrArray = goog.array.filter(tokenOrArray, function(str) {
- return !goog.string.isEmptyOrWhitespace(goog.string.makeSafe(str));
- });
- }
-
-
- if (this.highlightAllTokens_) {
- if (goog.isArray(tokenOrArray)) {
- var tokenArray = goog.array.map(tokenOrArray, goog.string.regExpEscape);
- token = tokenArray.join('|');
- } else {
-
-
- token = goog.string.collapseWhitespace(tokenOrArray);
- token = goog.string.regExpEscape(token);
- token = token.replace(/ /g, '|');
- }
- } else {
-
-
-
-
-
- if (goog.isArray(tokenOrArray)) {
- token = tokenOrArray.length > 0 ?
- goog.string.regExpEscape(tokenOrArray[0]) :
- '';
- } else {
-
-
-
-
-
- if (!/^\W/.test(tokenOrArray)) {
- token = goog.string.regExpEscape(tokenOrArray);
- }
- }
- }
- return token;
- };
- goog.ui.ac.Renderer.prototype.renderRowHtml = function(row, token) {
-
- var elem = this.dom_.createDom(goog.dom.TagName.DIV, {
- className: this.rowClassName,
- id: goog.ui.IdGenerator.getInstance().getNextUniqueId()
- });
- goog.a11y.aria.setRole(elem, goog.a11y.aria.Role.OPTION);
- if (this.customRenderer_ && this.customRenderer_.renderRow) {
- this.customRenderer_.renderRow(row, token, elem);
- } else {
- this.renderRowContents_(row, token, elem);
- }
- if (token && this.useStandardHighlighting_) {
- this.startHiliteMatchingText_(elem, token);
- }
- goog.dom.classlist.add(elem, this.rowClassName);
- this.rowDivs_.push(elem);
- return elem;
- };
- goog.ui.ac.Renderer.prototype.getRowFromEventTarget_ = function(et) {
- while (et && et != this.element_ &&
- !goog.dom.classlist.contains(et, this.rowClassName)) {
- et = (et.parentNode);
- }
- return et ? goog.array.indexOf(this.rowDivs_, et) : -1;
- };
- goog.ui.ac.Renderer.prototype.handleClick_ = function(e) {
- var index = this.getRowFromEventTarget_( (e.target));
- if (index >= 0) {
- this.dispatchEvent( ({
- type: goog.ui.ac.AutoComplete.EventType.SELECT,
- row: this.rows_[index].id
- }));
- }
- e.stopPropagation();
- };
- goog.ui.ac.Renderer.prototype.handleMouseDown_ = function(e) {
- e.stopPropagation();
- e.preventDefault();
- };
- goog.ui.ac.Renderer.prototype.handleMouseOver_ = function(e) {
- var index = this.getRowFromEventTarget_( (e.target));
- if (index >= 0) {
- if ((goog.now() - this.startRenderingRows_) <
- goog.ui.ac.Renderer.DELAY_BEFORE_MOUSEOVER) {
- return;
- }
- this.dispatchEvent({
- type: goog.ui.ac.AutoComplete.EventType.HILITE,
- row: this.rows_[index].id
- });
- }
- };
- goog.ui.ac.Renderer.CustomRenderer = function() {};
- goog.ui.ac.Renderer.CustomRenderer.prototype.render = function(
- renderer, element, rows, token) {};
- goog.ui.ac.Renderer.CustomRenderer.prototype.renderRow = function(
- row, token, node) {};
|