* ***************************************************************************
*
* Author: Kangsik Kim <kangsik81.kim@samsung.com>
+ * Minkyeong Kim <minkyeong.kim@samsung.com>
*/
/**
*
*/
+
+/**
+ @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,
$view.append( inputbox );
// create a anchor tag.
- if ( option.listId === null || $.trim(option.listId).length < 1 ) {
+ if ( option.listId === null || $.trim( option.listId ).length < 1 || $( option.listId ).length === 0 ) {
className += "-dim";
}
- $( moreBlock ).text( "+" ).attr( "href", $.trim(option.listId)).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
+ $( 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 );
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();
+ }
+
+ 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
moreBlock.click( function () {
if ( $( moreBlock ).hasClass( "ui-multibuttonentry-link-dim" ) ) {
- return ;
+ return;
}
- $(inputbox).hide();
+ $( inputbox ).hide();
$.mobile.changePage( option.listId, {
transition: "slide",
reverse: false,
changeHash: false
- } );
- } );
+ });
+ });
$( document ).bind( "pagechange.mbe", function ( event ) {
if ( $view.innerWidth() === 0 ) {
self._viewWidth = $view.innerWidth();
}
self._modifyInputBoxWidth();
- $(inputbox).show();
+ $( inputbox ).show();
});
$view.bind( "click", function ( event ) {
return;
}
- if ( ! messages ) {
+ if ( !messages ) {
return ;
}
content = messages,
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 ( $( 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 - blockWidth - anchorWidth;
+ inputBoxWidth = self._viewWidth;
+ }
+ } else {
+ if ( blockWidth >= inputBoxWidth ) {
+ inputBoxWidth = self._viewWidth - blockWidth;
+ } else {
+ 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 ) {
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();
},
//---------------------------------------------------- //
if ( lastIndex !== blocks.length ) {
statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
- tempBlock = $( document.createElement( 'label' ));
+ tempBlock = $( document.createElement( 'label' ) );
tempBlock.text( statement );
tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
$( blocks[lastIndex] ).after( tempBlock );
}
- // update foucs state
+ // update focus state
this._focusStatus = "focusOut";
$view.removeClass( "ui-multibuttonentry-focusin" ).addClass( "ui-multibuttonentry-focusout" );
},
if ( arguments.length === 0 ) {
// return a selected block.
- lockBlock = $view.find( "div.ui-multibuttonentry-sblock" ).children( ".ui-multibuttonentry-data" );
- if ( lockBlock) {
- return lockBlock.attr( "value" );
+ lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
+ if ( lockBlock ) {
+ return lockBlock.text();
}
return null;
}
},
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();
},
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( "keyup" ).remove();
projects / platform / framework / web / web-ui-fw.git / blobdiff