Skip to content

Commit

Permalink
gallery-2010.08.18-17-12 liferay gallery-aui-rating
Browse files Browse the repository at this point in the history
  • Loading branch information
YUI Builder committed Aug 18, 2010
1 parent 9138201 commit d727629
Showing 1 changed file with 132 additions and 75 deletions.
207 changes: 132 additions & 75 deletions src/gallery-aui-rating/js/gallery-aui-rating.js
View file
Expand Up @@ -18,31 +18,33 @@ var L = A.Lang,
return (v instanceof A.Node);
},

ANCHOR = 'a',
BLANK = '',
BOUNDING_BOX = 'boundingBox',
CAN_RESET = 'canReset',
CLEARFIX = 'clearfix',
CONTENT_BOX = 'contentBox',
DEFAULT_SELECTED = 'defaultSelected',
DESTROY = 'destroy',
DISABLED = 'disabled',
DOT = '.',
ELEMENT = 'element',
ELEMENTS = 'elements',
EMPTY_STR = '',
HELPER = 'helper',
HOVER = 'hover',
HREF = 'href',
HREF_JAVASCRIPT = 'javascript:;',
ID = 'id',
INNER_HTML = 'innerHTML',
INPUT = 'input',
INPUT_NAME = 'inputName',
LABEL = 'label',
LABEL_ELEMENT = 'labelElement',
LABEL_NODE = 'labelNode',
NAME = 'name',
NODE_NAME = 'nodeName',
OFF = 'off',
ON = 'on',
RATING = 'rating',
RATING_ELEMENT = 'ratingElement',
SELECTED_INDEX = 'selectedIndex',
SHOW_TITLE = 'showTitle',
SIZE = 'size',
Expand All @@ -61,7 +63,11 @@ var L = A.Lang,
CSS_RATING_EL = getCN(RATING, ELEMENT),
CSS_RATING_EL_HOVER = getCN(RATING, ELEMENT, HOVER),
CSS_RATING_EL_OFF = getCN(RATING, ELEMENT, OFF),
CSS_RATING_EL_ON = getCN(RATING, ELEMENT, ON);
CSS_RATING_EL_ON = getCN(RATING, ELEMENT, ON),

TPL_LABEL = '<div class="'+CSS_RATING_LABEL_EL+'"></div>',
TPL_RATING_EL = '<a href="'+HREF_JAVASCRIPT+'"></a>',
TPL_RATING_EL_DISABLED = '<span></span>';

/**
* <p><img src="assets/images/aui-rating/main.png"/></p>
Expand Down Expand Up @@ -161,8 +167,6 @@ var Rating = A.Component.create(
* @type NodeList
*/
elements: {
writeOnce: true,
readOnly: true,
validator: isNodeList
},

Expand All @@ -177,17 +181,6 @@ var Rating = A.Component.create(
validator: isNode
},

/**
* Reference for the element which will contain the
* <a href="Rating.html#config_label">label</a>.
*
* @attribute labelElement
* @type Node
*/
labelElement: {
validator: isNode
},

/**
* Name of the <a
* href="Rating.html#config_hiddenInput">hiddenInput</a> element. If
Expand All @@ -214,8 +207,32 @@ var Rating = A.Component.create(
validator: isString
},

render: {
value: true
/**
* DOM Node to display the text of the StarRating. If not
* specified try to query using HTML_PARSER an element inside
* boundingBox which matches <code>aui-rating-label-element</code>.
*
* @attribute labelNode
* @default Generated div element.
* @type String
*/
labelNode: {
valueFn: function() {
return A.Node.create(TPL_LABEL);
},
validator: isNode
},

ratingElement: {
valueFn: function() {
var instance = this;

var ratingElement = A.Node.create(
instance.get(DISABLED) ? TPL_RATING_EL_DISABLED : TPL_RATING_EL
);

return ratingElement.addClass(CSS_RATING_EL);
}
},

/**
Expand Down Expand Up @@ -278,6 +295,30 @@ var Rating = A.Component.create(
value: null
},

/**
* Object hash, defining how attribute values are to be parsed from
* markup contained in the widget's content box.
*
* @property StarRating.HTML_PARSER
* @type Object
* @static
*/
HTML_PARSER: {
elements: function(srcNode) {
return srcNode.all(DOT+CSS_RATING_EL);
},

label: function(srcNode) {
var labelNode = srcNode.one(DOT+CSS_RATING_LABEL_EL);

if (labelNode) {
return labelNode.html();
}
},

labelNode: DOT+CSS_RATING_LABEL_EL
},

prototype: {
/**
* Construction logic executed during Rating instantiation. Lifecycle.
Expand All @@ -301,8 +342,12 @@ var Rating = A.Component.create(
*/
renderUI: function () {
var instance = this;
var contentBox = instance.get(CONTENT_BOX);

contentBox.addClass(CSS_CLEAR_FIX);

instance._parseInputElements();
instance._renderLabel();
instance._renderElements();
},

Expand Down Expand Up @@ -335,21 +380,6 @@ var Rating = A.Component.create(
instance._syncLabelUI();
},

/**
* Descructor lifecycle implementation for the Rating class.
* Purges events attached to the node (and all child nodes).
*
* @method destructor
* @protected
*/
destructor: function(){
var instance = this;
var boundingBox = instance.get(BOUNDING_BOX);

boundingBox.detachAll();
boundingBox.remove();
},

/**
* Clear all selected starts to the default state.
*
Expand Down Expand Up @@ -453,6 +483,29 @@ var Rating = A.Component.create(
return !instance.get(DISABLED) && domTarget.hasClass(CSS_RATING_EL);
},

/**
* Create rating elements based on the <code>size</code>
* attribute. It's only invoked when the HTML_PARSER does not find
* nothing.
*
* @method _createElements
* @protected
* @return {NodeList}
*/
_createElements: function() {
var instance = this;
var elements = [];
var ratingElement = instance.get(RATING_ELEMENT);

for (var i = 0, size = this.get(SIZE); i < size; i++) {
elements.push(
ratingElement.clone()
);
}

return new A.NodeList(elements);
},

/**
* Create the custom events.
*
Expand Down Expand Up @@ -631,8 +684,8 @@ var Rating = A.Component.create(
};
});

labels.remove();
inputs.remove();
labels.remove(true);
inputs.remove(true);
}

if (inputName) {
Expand All @@ -644,60 +697,65 @@ var Rating = A.Component.create(
instance.set('hiddenInput', hiddenInput);
},

/**
* Render the Rating label.
*
* @method _renderLabel
* @protected
*/
_renderLabel: function() {
var instance = this;

instance.get(CONTENT_BOX).append(
instance.get(LABEL_NODE)
);
},

/**
* Render the Rating elements.
*
* @method _renderElements
* @protected
*/
_renderElements: function() {
_renderElements: function(elements) {
var instance = this;
var contentBox = instance.get(CONTENT_BOX);
var disabled = instance.get(DISABLED);

var ratingElement = null;
if (disabled){
ratingElement = A.Node.create('<span></span>');
}
else {
ratingElement = A.Node.create('<a href="javascript:;"></a>');

// if not found any elements from the HTML_PARSER create them based on the size attribute
if (!instance.get(ELEMENTS).size()) {
instance.set(
ELEMENTS,
instance._createElements()
);
}

var labelElement = A.Node.create('<div></div>');
instance.get(ELEMENTS).each(
function(element, i) {
var data = instance._getInputData(i);

contentBox.addClass(CSS_CLEAR_FIX);
ratingElement.addClass(CSS_RATING_EL);
labelElement.addClass(CSS_RATING_LABEL_EL);
var content = data.content;

contentBox.append(labelElement);
// try to use the pulled title data from the dom, otherwise use the TITLE attr, in the last case use the content
var title = data.title || instance.get(TITLE) || content;

// creating rating elements
for (var i = 0, size = this.get(SIZE); i < size; i++) {
var data = instance._getInputData(i);
var element = ratingElement.cloneNode();

var content = data.content;
// setting the content
if (content || title) {
// if there is no content use the title as content
element.html(content || title);
}

// try to use the pulled title data from the dom, otherwise use the TITLE attr, in the last case use the content
var title = data.title || instance.get(TITLE) || content;
// setting the title
if (title && instance.get(SHOW_TITLE)) {
element.setAttribute(TITLE, title);
}

// setting the content
if (content || title) {
// if there is no content use the title as content
element.html(content || title);
}
if (!element.attr(HREF) && (element.get(NODE_NAME).toLowerCase() == ANCHOR)) {
element.setAttribute(HREF, HREF_JAVASCRIPT);
}

// setting the title
if (title && instance.get(SHOW_TITLE)) {
element.setAttribute(TITLE, title);
contentBox.appendChild(element);
}

contentBox.appendChild(element);
}

instance.set(LABEL_ELEMENT, labelElement);
instance.set(ELEMENTS, contentBox.all(DOT+CSS_RATING_EL));
);
},

/**
Expand Down Expand Up @@ -725,7 +783,7 @@ var Rating = A.Component.create(
var instance = this;
var labelText = instance.get(LABEL);

instance.get(LABEL_ELEMENT).html(labelText);
instance.get(LABEL_NODE).html(labelText);
},

/**
Expand All @@ -750,7 +808,6 @@ var Rating = A.Component.create(
*/
_handleClickEvent: function(event) {
var instance = this;
var domTarget = event.domEvent.target;

if (instance._canFireCustomEvent(event)) {
instance.fire(EV_RATING_ITEM_CLICK, {
Expand Down Expand Up @@ -832,7 +889,7 @@ var DOWN = 'down',
* </ul>
*
* Quick Example:<br/>
*
*
* <pre><code>var instance = new A.ThumbRating({
* boundingBox: '#rating',
* defaultSelected: 3,
Expand Down

0 comments on commit d727629

Please sign in to comment.