* ***************************************************************************
*
* Author: Kangsik Kim <kangsik81.kim@samsung.com>
+ * Minkyeong Kim <minkyeong.kim@samsung.com>
*/
/**
*
* HTML Attributes:
*
- * data-listUrl : Represents the page id.
- * The page contains data for the user, for example, an address book.(Default : null)
+ * data-list-id : Represents the page id.
+ * The page contains data for the user, for example, an address book.
+ * If the value is null, anchor button doesn't work. (Default : null)
* data-label: Provide a label for a user-guide. (Default : 'To : ')
- * data-descMessage : This attribute is managing message format.
- * This message is displayed when widget status was changed to 'focusout'. (Default : '{0} & {1} more')
+ * data-description : This attribute is managing message format.
+ * This message is displayed when widget status was changed to 'focusout'. (Default : '+ {0}')
*
* APIs:
*
* The status is not able to manage a widget.
* All buttons that contained in the widget are removed and
* summarized message is displayed.
- *
+ * destroy ( void )
+ * : Remove all of the new DOM elements for the current widget that you created.
*
* Events:
*
*
* Examples:
*
- * <div data-role="multibuttonentry" data-label="To : " data-listUrl:"#addressbook" data-descMessage="{0} & {1} more...">
+ * <div data-role="multibuttonentry" data-label="To : " data-list-id:"#addressbook" data-description="+ {0}">
* </div>
*
*/
+
+/**
+ @class MultiButtonEntry
+ The multi-button entry widget enables the user to enter text and convert it to a button. Each button that is created from entered text as a result of a change event forms a multi-button entry widget. This widget is useful in composing an e-mail or SMS message to a group of addresses, each of which is a clickable item for more actions, such as copying, editing, or removing the address.
+
+ To add a multi-button entry widget to the application, use the following code:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook" data-list-id="pageId">
+ </div>
+*/
+
+/**
+ @property {String} data-label
+ Sets a label as a guide for the user.
+ For example, while composing an e-mail message, the 'To: ' label is a guide for the user to enter e-mail addresses.
+*/
+
+/**
+ @property {String} data-decription
+ Manages the message format.
+ The message is displayed when the widget status changes to focus out
+ */
+/**
+ @property {String} data-list-id
+ Sets the ID of the page to which the button links.
+*/
+/**
+ @event create
+ The create event is fired when the multi-button view widget is created:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ create: function(event, ui)
+ {
+ // Handle the create event
+ }
+ });
+ // Option 02
+ $(".selector").bind("create", function(event, ui)
+ {
+ // Handle the create event
+ });
+**/
+/**
+ @event select
+ The select event is fired when a multi-button view widget button is selected:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ select: function(event, ui)
+ {
+ // Handle the select event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryselect", function(event, ui)
+ {
+ // Handle the select event
+ });
+*/
+/**
+ @event add
+ The add event is fired when a multi-button view widget button is created:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ add: function(event, ui)
+ {
+ // Handle the add event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryadd", function(event, ui)
+ {
+ // Handle the add event
+ });
+*/
+/**
+ @event remove
+ The remove event is fired when a multi-button view widget button is removed:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ remove: function(event, ui)
+ {
+ // Handle the remove event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryremove", function(event, ui)
+ {
+ // Handle the remove event
+ });
+*/
+/**
+ @method destroy
+ The destroy method is used to remove in the current widget all the new DOM elements that you have created.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("destroy");
+
+ @since Tizen2.0
+*/
+/**
+ @method inputText
+ The inputText method is used to manage the widget input box text. If no parameter is set, the method gets the input box text. If a parameter is set, the parameter text is set in the input box.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("inputText", [text]);
+*/
+/**
+ @method select
+ The select method is used to select a multi-button entry widget button based on its index value. If no index value is defined, the method returns the string of the selected block. If there are no buttons present in the widget, the method returns null.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("select", [index]);
+*/
+/**
+ @method add
+ The add method is used to add a new multi-button entry widget button with the specified label text at the specified index position. If the index parameter is not defined, the widget button is added at the bottom of the list. For example, the $(".selector").multibuttonentry("add", "Tizen", 2) method call creates a new widget button labeled 'Tizen' at the third position in the widget.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("add", [text], [index]);
+*/
+/**
+ @method remove
+ The remove method is used to remove a multi-button entry widget button at the specified index position. If the parameter is not defined, all the widget buttons are removed.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("remove", [index]);
+*/
+/**
+ @method length
+ The length method is used to retrieve the number of buttons in the multi-button entry widget:
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("length");
+*/
+/**
+ @method focusIn
+ The focusIn method is used to set the focus status to "focus in". This focus state enables the user to add or remove buttons in the multi-button entry widget.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("focusIn");
+*/
+/**
+ @method focusOut
+ The focusOut method is used to set the focus status to "focus out". In this focus state, the user cannot manage the buttons in the widget, all the buttons are removed, and a message is displayed.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("focusOut");
+*/
( function ( $, window, document, undefined ) {
$.widget( "tizen.multibuttonentry", $.mobile.widget, {
_focusStatus : null,
_marginWidth : 0,
options : {
label : "To : ",
- listUrl : "#addressbook",
- descMessage : "{0} & {1} more..."
+ listId : null,
+ description : "+ {0}"
},
+
_create : function () {
var self = this,
$view = this.element,
role = $view.jqmData( "role" ),
option = this.options,
+ className = "ui-multibuttonentry-link",
inputbox = $( document.createElement( "input" ) ),
labeltag = $( document.createElement( "label" ) ),
moreBlock = $( document.createElement( "a" ) );
$view.hide().empty().addClass( "ui-" + role );
// create a label tag.
- $( labeltag ).text( this.options.label ).addClass( "ui-multibuttonentry-label" );
+ $( labeltag ).text( option.label ).addClass( "ui-multibuttonentry-label" );
$view.append( labeltag );
// create a input tag
$view.append( inputbox );
// create a anchor tag.
- $( moreBlock ).text( "+" ).attr( "href", option.listUrl ).addClass( "ui-multibuttonentry-link" );
+ if ( option.listId === null || $.trim( option.listId ).length < 1 || $( option.listId ).length === 0 ) {
+ className += "-dim";
+ }
+ $( moreBlock ).attr( "href", $.trim( option.listId ) ).attr( "data-role", "button" ).attr( "data-inline", "true" ).attr( "data-icon", "plus" ).attr( "data-style", "circle" ).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
// append default htmlelements to main widget.
$view.append( moreBlock );
self._fontSize = parseInt( $( moreBlock ).css( "font-size" ), 10 );
self._currentWidth = self._reservedWidth;
},
+
// bind events
_bindEvents : function () {
var self = this,
$view = self.element,
option = self.options,
inputbox = $view.find( ".ui-multibuttonentry-input" ),
- moreBlock = $view.find( ".ui-multibuttonentry-link" );
+ moreBlock = $view.find( ".ui-multibuttonentry-link-base" ),
+ isSeparator = false;
+
+ // delegate a event to HTMLDivElement(each block).
+ $view.delegate( "div", "vclick", function ( event ) {
+ if ( $( this ).hasClass( "ui-multibuttonentry-sblock" ) ) {
+ // If block is selected, it will be removed.
+ self._removeTextBlock();
+ }
- inputbox.bind( "keydown", function ( event ) {
+ var lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
+ if ( typeof lockBlock !== "undefined" ) {
+ lockBlock.removeClass( "ui-multibuttonentry-sblock" ).addClass( "ui-multibuttonentry-block" );
+ }
+ $( this ).removeClass( "ui-multibuttonentry-block" ).addClass( "ui-multibuttonentry-sblock" );
+ self._trigger( "select" );
+ });
+
+ inputbox.bind( "keyup", function ( event ) {
// 8 : backspace
// 13 : Enter
+ // 186 : semi-colon
+ // 188 : comma
var keyValue = event.keyCode,
- valueString = $( inputbox ).val();
+ valueString = $( inputbox ).val(),
+ valueStrings = [],
+ index;
- if ( keyValue == 8 ) {
+ if ( keyValue === 8 ) {
if ( valueString.length === 0 ) {
self._validateTargetBlock();
}
- } else if ( keyValue == 13 ) {
+ } else if ( keyValue === 13 || keyValue === 186 || keyValue === 188 ) {
if ( valueString.length !== 0 ) {
- self._addTextBlock( valueString );
+ // split content by separators(',', ';')
+ valueStrings = valueString.split ( /[,;]/ );
+ for ( index = 0; index < valueStrings.length; index++ ) {
+ if ( valueStrings[index].length !== 0 && valueStrings[index].replace( /\s/g, "" ).length !== 0 ) {
+ self._addTextBlock( valueStrings[index] );
+ }
+ }
}
inputbox.val( "" );
+ isSeparator = true;
} else {
self._unlockTextBlock();
}
+
+ return !isSeparator;
});
moreBlock.click( function () {
- $(inputbox).hide();
+ if ( $( moreBlock ).hasClass( "ui-multibuttonentry-link-dim" ) ) {
+ return;
+ }
+
+ $( inputbox ).hide();
- $.mobile.changePage( option.listUrl, {
+ $.mobile.changePage( option.listId, {
transition: "slide",
reverse: false,
changeHash: false
- } );
- } );
+ });
+ });
$( document ).bind( "pagechange.mbe", function ( event ) {
if ( $view.innerWidth() === 0 ) {
var inputBox = $view.find( ".ui-multibuttonentry-input" );
if ( self._labelWidth === 0 ) {
self._labelWidth = $view.find( ".ui-multibuttonentry-label" ).outerWidth( true );
- self._anchorWidth = $view.find( ".ui-multibuttonentry-link" ).outerWidth( true );
+ self._anchorWidth = $view.find( ".ui-multibuttonentry-link-base" ).outerWidth( true );
self._marginWidth = parseInt( ( $( inputBox ).css( "margin-left" ) ), 10 );
self._marginWidth += parseInt( ( $( inputBox ).css( "margin-right" ) ), 10 );
self._viewWidth = $view.innerWidth();
}
self._modifyInputBoxWidth();
- $(inputbox).show();
+ $( inputbox ).show();
+ });
+
+ $view.bind( "click", function ( event ) {
+ if ( self._focusStatus === "focusOut" ) {
+ self.focusIn();
+ }
});
},
// create a textbutton and append this button to parent layer.
// @param arg1 : string
// @param arg2 : index
- _addTextBlock : function ( messages, blcokIndex ) {
+ _addTextBlock : function ( messages, blockIndex ) {
if ( arguments.length === 0 ) {
return;
}
- if ( ! messages ) {
+ if ( !messages ) {
return ;
}
var self = this,
$view = self.element,
content = messages,
- index = blcokIndex,
+ index = blockIndex,
blocks = null,
- dataBlock = null,
- displayText = null,
textBlock = null;
if ( self._viewWidth === 0 ) {
self._viewWidth = $view.innerWidth();
}
- // save src data
- dataBlock = $( document.createElement( 'input' ) );
- dataBlock.attr( "value", content ).addClass( "ui-multibuttonentry-data" ).hide();
// Create a new text HTMLDivElement.
textBlock = $( document.createElement( 'div' ) );
- displayText = self._ellipsisTextBlock( content ) ;
- textBlock.text( displayText ).addClass( "ui-multibuttonentry-block" );
- textBlock.append( dataBlock );
- // bind a event to HTMLDivElement.
- textBlock.bind( "vclick", function ( event ) {
- if ( self._focusStatus === "focusOut" ) {
- self.focusInEvent();
- return;
- }
- if ( $( this ).hasClass( "ui-multibuttonentry-sblock" ) ) {
- // If block is selected, it will be removed.
- self._removeTextBlock();
- }
-
- var lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
- if ( typeof lockBlock != "undefined" ) {
- lockBlock.removeClass( "ui-multibuttonentry-sblock" ).addClass( "ui-multibuttonentry-block" );
- }
- $( this ).removeClass( "ui-multibuttonentry-block" ).addClass( "ui-multibuttonentry-sblock" );
- self._trigger( "select" );
- });
+ textBlock.text( content ).addClass( "ui-multibuttonentry-block" );
+ textBlock.css( {'visibility': 'hidden'} );
blocks = $view.find( "div" );
if ( index !== null && index <= blocks.length ) {
$view.find( ".ui-multibuttonentry-input" ).before( textBlock );
}
+ textBlock = self._ellipsisTextBlock( textBlock );
+ textBlock.css( {'visibility': 'visible'} );
+
self._currentWidth += self._calcBlockWidth( textBlock );
self._modifyInputBoxWidth();
self._trigger( "add" );
_removeTextBlock : function () {
var self = this,
$view = this.element,
- targetBlock = null,
lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
if ( lockBlock !== null && lockBlock.length > 0 ) {
},
_calcBlockWidth : function ( block ) {
- var blockWidth = 0;
- blockWidth = $( block ).outerWidth( true );
- return blockWidth;
+ return $( block ).outerWidth( true );
},
+
_unlockTextBlock : function () {
var $view = this.element,
lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
- if ( lockBlock !== null ) {
+ if ( !lockBlock ) {
lockBlock.removeClass( "ui-multibuttonentry-sblock" ).addClass( "ui-multibuttonentry-block" );
}
},
}
},
- _ellipsisTextBlock : function ( text ) {
+ _ellipsisTextBlock : function ( textBlock ) {
var self = this,
- str = text,
- length = 0,
- maxWidth = self._viewWidth,
- maxCharCnt = parseInt( ( self._viewWidth / self._fontSize ), 10 ) - 5,
- ellipsisStr = null;
- if ( str ) {
- length = str.length ;
- if ( length > maxCharCnt ) {
- ellipsisStr = str.substring( 0, maxCharCnt );
- ellipsisStr += "...";
- } else {
- ellipsisStr = str;
- }
+ $view = self.element,
+ maxWidth = $view.innerWidth() - ( self._labelWidth + self._anchorWidth ) * 2;
+
+ if ( self._calcBlockWidth( textBlock ) > maxWidth ) {
+ $( textBlock ).width( maxWidth - self._marginWidth );
}
- return ellipsisStr;
+
+ return textBlock;
},
+
_modifyInputBoxWidth : function () {
var self = this,
$view = self.element,
+ margin = self._marginWidth,
labelWidth = self._labelWidth,
anchorWidth = self._anchorWidth,
- inputBoxWidth = self._viewWidth - labelWidth - anchorWidth,
+ inputBoxWidth = self._viewWidth - labelWidth,
blocks = $view.find( "div" ),
blockWidth = 0,
index = 0,
- margin = self._marginWidth,
+ inputBoxMargin = 10,
inputBox = $view.find( ".ui-multibuttonentry-input" );
if ( $view.width() === 0 ) {
- return ;
+ return;
}
for ( index = 0; index < blocks.length; index += 1 ) {
blockWidth = self._calcBlockWidth( blocks[index] );
- inputBoxWidth = inputBoxWidth - blockWidth;
- if ( inputBoxWidth <= 0 ) {
- if ( inputBoxWidth + anchorWidth >= 0 ) {
- inputBoxWidth = self._viewWidth - anchorWidth;
+
+ if ( blockWidth >= inputBoxWidth + anchorWidth ) {
+ if ( blockWidth >= inputBoxWidth ) {
+ inputBoxWidth = self._viewWidth - blockWidth;
+ } else {
+ inputBoxWidth = self._viewWidth;
+ }
+ } else {
+ if ( blockWidth >= inputBoxWidth ) {
+ inputBoxWidth = self._viewWidth - blockWidth;
} else {
- inputBoxWidth = self._viewWidth - blockWidth - anchorWidth;
+ inputBoxWidth -= blockWidth;
}
}
}
- $( inputBox ).width( inputBoxWidth - margin - 1 );
+
+ inputBoxWidth -= margin;
+ if ( inputBoxWidth < anchorWidth * 2 ) {
+ inputBoxWidth = self._viewWidth - margin;
+ }
+ $( inputBox ).width( inputBoxWidth - anchorWidth - inputBoxMargin );
},
+
_stringFormat : function ( expression ) {
var pattern = null,
message = expression,
}
return message;
},
- _resizeBlock : function () {
+
+ _resizeBlocks : function () {
var self = this,
$view = self.element,
- dataBlocks = $( ".ui-multibuttonentry-data" ),
blocks = $view.find( "div" ),
- srcTexts = [],
index = 0;
- $view.hide();
- for ( index = 0 ; index < dataBlocks.length ; index += 1 ) {
- srcTexts[index] = $( dataBlocks[index] ).val();
- self._addTextBlock( srcTexts[index] );
+ for ( index = 0 ; index < blocks.length ; index += 1 ) {
+ $( blocks[index] ).css( "width", "auto" );
+ blocks[index] = self._ellipsisTextBlock( blocks[index] );
}
- blocks.remove();
- $view.show();
},
- //----------------------------------------------------//
- // Public Method //
+ //---------------------------------------------------- //
+ // Public Method //
//----------------------------------------------------//
//
// Focus In Event
// change focus state.
this._modifyInputBoxWidth();
this._focusStatus = "focusIn";
+ $view.removeClass( "ui-multibuttonentry-focusout" ).addClass( "ui-multibuttonentry-focusin" );
},
+
focusOut : function () {
if ( this._focusStatus === "focusOut" ) {
return;
more = $view.find( "span" ),
blocks = $view.find( "div" ),
currentWidth = $view.outerWidth( true ) - more.outerWidth( true ) - label.outerWidth( true ),
- textWidth = currentWidth;
+ blockWidth = 0;
$view.find( ".ui-multibuttonentry-input" ).hide();
$view.find( "a" ).hide();
blocks.hide();
- // div button
currentWidth = currentWidth - self._reservedWidth;
- for ( index = 0; index < blocks.length; index += 1 ) {
- currentWidth = currentWidth - $( blocks[index] ).outerWidth( true );
- statement += ", " + $( blocks[index] ).text();
- if ( currentWidth <= 0 ) {
- statement = "," + $( blocks[0] ).text();
- statement = self._stringFormat( self.options.descMessage, statement, blocks.length - 1 );
+
+ for ( index = 0; index < blocks.length; index++ ) {
+ blockWidth = $( blocks[index] ).outerWidth( true );
+ if ( currentWidth - blockWidth <= 0 ) {
+ lastIndex = index - 1;
break;
}
- lastIndex = statement.length;
+
+ $( blocks[index] ).show();
+ currentWidth -= blockWidth;
+ }
+
+ if ( lastIndex !== blocks.length ) {
+ statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
+ tempBlock = $( document.createElement( 'label' ) );
+ tempBlock.text( statement );
+ tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
+ $( blocks[lastIndex] ).after( tempBlock );
}
- tempBlock = $( document.createElement( 'input' ) );
- tempBlock.val( statement.substr( 1, statement.length ) );
- tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
- tempBlock.width( textWidth - ( self._reservedWidth ) );
- tempBlock.attr( "disabled", true );
- $view.find( "label" ).after( tempBlock );
- // update foucs state
+
+ // update focus state
this._focusStatus = "focusOut";
+ $view.removeClass( "ui-multibuttonentry-focusin" ).addClass( "ui-multibuttonentry-focusout" );
},
+
inputText : function ( message ) {
var $view = this.element;
$view.find( ".ui-multibuttonentry-input" ).val( message );
return message;
},
+
select : function ( index ) {
var $view = this.element,
lockBlock = null,
if ( arguments.length === 0 ) {
// return a selected block.
lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
- if ( lockBlock) {
+ if ( lockBlock ) {
return lockBlock.text();
}
return null;
}
return null;
},
+
add : function ( message, position ) {
if ( this._focusStatus === "focusOut" ) {
return;
this._addTextBlock( message, position );
},
+
remove : function ( position ) {
var self = this,
$view = this.element,
}
self._modifyInputBoxWidth();
},
+
length : function () {
return this.element.find( "div" ).length;
},
+
refresh : function () {
- var self = this;
- self.element.hide();
- self.element.show();
+ var self = this,
+ $view = this.element;
+
+ self._viewWidth = $view.innerWidth();
+ self._resizeBlocks();
+ self._modifyInputBoxWidth();
},
- destory : function () {
+
+ destroy : function () {
var $view = this.element;
$view.find( "label" ).remove();
- $view.find( "div" ).unbind( "vclick" ).remove();
+ $view.find( "div" ).undelegate( "vclick" ).remove();
$view.find( "a" ).remove();
- $view.find( ".ui-multibuttonentry-input" ).unbind( "keydown" ).remove();
+ $view.find( ".ui-multibuttonentry-input" ).unbind( "keyup" ).remove();
- this._trigger( "destory" );
+ this._trigger( "destroy" );
}
});
projects / platform / framework / web / web-ui-fw.git / blobdiff