* http://www.opensource.org/licenses/mit-license.php)
*
* ***************************************************************************
- * Copyright (C) 2011 by Intel Corporation Ltd.
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2011 by Intel Corporation Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* ***************************************************************************
*
* Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
+ * Hyunjung Kim <hjnim.kim@samsung.com>
*/
+/*
+ * % ContextPopup widget do not use anymore(will be deprecated, internal use only)
+ */
// This widget is implemented in an extremely ugly way. It should derive from $.tizen.popupwindow, but it doesn't
// because there's a bug in jquery.ui.widget.js which was fixed in jquery-ui commit
// b9153258b0f0edbff49496ed16d2aa93bec07d95. Once a version of jquery-ui containing that commit is released
// to one in the superclass, upon calling $.widget the object is overwritten in both the prototype of the superclass and
// the prototype of the subclass. The prototype of the superclass should remain unchanged.
-(function($, undefined) {
- $.widget("tizen.ctxpopup", $.tizen.widgetex, {
- options: $.extend({}, $.tizen.popupwindow.prototype.options, {
- initSelector: ":not(:not(" + $.tizen.popupwindow.prototype.options.initSelector + ")):not(:not(:jqmData(show-arrow='true'), :jqmData(show-arrow)))"
- }),
-
- _htmlProto: {
- ui: {
- outer : "#outer",
- container : "#container", // the key has to have the name "container"
- arrow : {
- all : ":jqmData(role='triangle')",
- l : "#left",
- t : "#top",
- r : "#right",
- b : "#bottom"
- }
- }
- },
-
- _create: function(){
- if (!this.element.data("popupwindow"))
- this.element.popupwindow();
- this.element.data("popupwindow")
- ._ui.container
- .removeClass("ui-popupwindow-padding")
- .append(this._ui.outer);
- this._ui.outer.trigger("create"); // Creates the triangle widgets
- this._ui.container
- .addClass("ui-popupwindow-padding")
- .append(this.element);
- },
-
- _setOption: function(key, value) {
- $.tizen.popupwindow.prototype._setOption.apply(this.element.data("popupwindow"), arguments);
- this.options[key] = value;
- },
- });
-
-var origOpen = $.tizen.popupwindow.prototype.open,
- orig_setOption = $.tizen.popupwindow.prototype._setOption,
- orig_placementCoords = $.tizen.popupwindow.prototype._placementCoords;
-
-$.tizen.popupwindow.prototype._setOption = function(key, value) {
- var ctxpopup = this.element.data("ctxpopup"),
- needsApplying = true;
- if (ctxpopup) {
- if ("shadow" === key || "overlayTheme" === key || "corners" === key) {
- var origContainer = this._ui.container;
-
- this._ui.container = ctxpopup._ui.container;
- orig_setOption.apply(this, arguments);
- this._ui.container = origContainer;
- needsApplying = false;
- }
- ctxpopup.options[key] = value;
- }
-
- if (needsApplying)
- orig_setOption.apply(this, arguments);
-};
-
-$.tizen.popupwindow.prototype._placementCoords = function(x, y, cx, cy) {
- var ctxpopup = this.element.data("ctxpopup"),
- self = this;
-
- if (ctxpopup) {
- var coords = {}, minDiff, minDiffIdx;
-
- // Returns:
- // {
- // absDiff: int
- // triangleOffset: int
- // actual: { x: int, y: int }
- // }
- function getCoords(arrow, x_factor, y_factor) {
- // Unhide the arrow we want to test to take it into account
- ctxpopup._ui.arrow.all.hide();
- ctxpopup._ui.arrow[arrow].show();
-
- var isHorizontal = ("b" === arrow || "t" === arrow),
- // Names of keys used in calculations depend on whether things are horizontal or not
- coord = (isHorizontal
- ? {point: "x", size: "cx", beg: "left", outerSize: "outerWidth", niceSize: "width", triangleSize : "height"}
- : {point: "y", size: "cy", beg: "top", outerSize: "outerHeight", niceSize: "height", triangleSize : "width"}),
- size = {
- cx : self._ui.container.width(),
- cy : self._ui.container.height()
- },
- halfSize = {
- cx : size.cx / 2,
- cy : size.cy / 2
- },
- desired = {
- "x" : x + halfSize.cx * x_factor,
- "y" : y + halfSize.cy * y_factor
- },
- orig = orig_placementCoords.call(self, desired.x, desired.y, size.cx, size.cy),
-
- // The triangleOffset must be clamped to the range described below:
- //
- // +-------...
- // | /\
- // | / \
- // ----+--+-,-----...
- //lowerDiff -->____| |/ <-- possible rounded corner
- //triangle size --> | /|
- // ____|/ |
- // ^ |\ | <-- lowest possible offset for triangle
- // actual range of | | \|
- // arrow offset | | |
- // values due to | . . Payload table cell looks like
- // possible rounded | . . a popup window, and it may have
- // corners and arrow | . . arbitrary things like borders,
- // triangle size - | | | shadows, and rounded corners.
- // our clamp range | | /|
- // _v__|/ |
- //triangle size --> |\ | <-- highest possible offset for triangle
- // ____| \|
- //upperDiff --> | |\ <-- possible rounded corner
- // ----+--+-'-----...
- // | \ /
- // | \/
- // +-------...
- //
- // We calculate lowerDiff and upperDiff by considering the offset and width of the payload (this.element)
- // versus the offset and width of the element enclosing the triangle, because the payload is inside
- // whatever decorations (such as borders, shadow, rounded corners) and thus can give a reliable indication
- // of the thickness of the combined decorations
-
- arrowBeg = ctxpopup._ui.arrow[arrow].offset()[coord.beg],
- arrowSize = ctxpopup._ui.arrow[arrow][coord.outerSize](true),
- payloadBeg = self.element.offset()[coord.beg],
- payloadSize = self.element[coord.outerSize](true),
- triangleSize = ctxpopup._ui.arrow[arrow][coord.triangleSize](),
- triangleOffset =
- Math.max(
- triangleSize // triangle size
- + Math.max(0, payloadBeg - arrowBeg), // lowerDiff
- Math.min(
- arrowSize // bottom
- - triangleSize // triangle size
- - Math.max(0, arrowBeg + arrowSize - (payloadBeg + payloadSize)), // upperDiff
- arrowSize / 2 // arrow unrestricted offset
- + desired[coord.point]
- - orig[coord.point]
- - halfSize[coord.size])),
- // Triangle points here
- final = {
- "x": orig.x + ( isHorizontal ? triangleOffset : 0) + ("r" === arrow ? size.cx : 0),
- "y": orig.y + (!isHorizontal ? triangleOffset : 0) + ("b" === arrow ? size.cy : 0)
- },
- ret = {
- actual : orig,
- triangleOffset : triangleOffset,
- absDiff : Math.abs(x - final.x) + Math.abs(y - final.y)
- };
-
- // Hide it back
- ctxpopup._ui.arrow[arrow].hide();
-
- return ret;
- }
-
- coords = {
- l : getCoords("l", 1, 0),
- r : getCoords("r", -1, 0),
- t : getCoords("t", 0, 1),
- b : getCoords("b", 0, -1)
- };
-
- $.each(coords, function(key, value) {
- if (minDiff === undefined || value.absDiff < minDiff) {
- minDiff = value.absDiff;
- minDiffIdx = key;
- }
- });
-
- // Side-effect: show the appropriate arrow and move it to the right offset
- ctxpopup._ui.arrow[minDiffIdx]
- .show()
- .triangle("option", "offset", coords[minDiffIdx].triangleOffset);
- return coords[minDiffIdx].actual;
- }
- else
- return orig_placementCoords.call(this, x, y, cx, cy);
-};
-
-$.tizen.popupwindow.prototype.open = function(x, y) {
- var ctxpopup = this.element.data("ctxpopup");
-
- if (ctxpopup) {
- this._setShadow(false);
- this._setCorners(false);
- this._setOverlayTheme(null);
- this._setOption("overlayTheme", ctxpopup.options.overlayTheme);
- ctxpopup._ui.arrow.all.triangle("option", "color", ctxpopup._ui.container.css("background-color"));
-
- // temporary
- $('.ui-popupwindow').css('background', 'none');
- }
-
- origOpen.call(this, x, y);
-};
-
-//auto self-init widgets
-$( document ).bind( "pagecreate create", function( e ){
- var ctxpopups = $($.tizen.ctxpopup.prototype.options.initSelector, e.target);
- $.tizen.ctxpopup.prototype.enhanceWithin( e.target );
-
-});
-
-})(jQuery);
+/**
+ class ContextPopup
+ The context pop-up widget shows a list of options and automatically optimizes its size within the screen. This widget is intended for a small list of options for a larger list, use the List widget. <br/>The context pop-up widget requires a target button, which must be clicked to open the context pop-up. In the default application theme, an arrow pointer is displayed at the top-left corner of the context pop-up widget when it is opened.<br/><br/> To add a context pop-up widget to the application, use the following code:
+
+ // Target button
+ <a href="#pop_3_icons" id="btn_3_icons" data-role="button" data-inline="true" data-rel="popupwindow">3 Icons</a>
+ // Context pop-up
+ <div class="horizontal" id="pop_3_icons" data-role="popupwindow" data-show-arrow="true">
+ <ul>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="call"></a>
+ </li>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="favorite"></a>
+ </li>
+ <li class="text">
+ <a href="#">Function</a>
+ </li>
+ </ul>
+ </div>
+ The context pop-up can define callbacks for events as described in the [jQueryMobile documentation for pop-up events.][1]
+ You can use methods with the context pop-up as described in the [jQueryMobile documentation for pop-up methods.][2]
+ [1]: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/events.html
+ [2]: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/methods.html
+
+ @deprecated 2.0 verisons
+*/
+
+(function ( $, undefined ) {
+ $.widget( "tizen.ctxpopup", $.tizen.widgetex, {
+ options: $.extend( {}, $.tizen.popupwindow.prototype.options, {
+ initSelector: ":jqmData(show-arrow)"
+ } ),
+
+ _htmlProto: {
+ ui: {
+ outer : "#outer",
+ container : "#container", // the key has to have the name "container"
+ arrow : {
+ all : ":jqmData(role='triangle')",
+ l : "#left",
+ t : "#top",
+ r : "#right",
+ b : "#bottom"
+ }
+ }
+ },
+
+ _create: function () {
+ console.warn("ctxpopup() was deprecated. use popup() instead.");
+ if ( !this.element.data( "popupwindow" ) ) {
+ this.element.popupwindow();
+ }
+
+ this.element.data( "popupwindow" )
+ ._ui.container
+ .removeClass( "ui-popupwindow-padding" )
+ .append( this._ui.outer );
+ this._ui.outer.trigger( "create" ); // Creates the triangle widgets
+ this._ui.container
+ .addClass( "ui-popupwindow-padding" )
+ .append( this.element );
+ },
+
+ _setOption: function ( key, value ) {
+ $.tizen.popupwindow.prototype._setOption.apply( this.element.data( "popupwindow" ), arguments );
+ this.options[key] = value;
+ }
+ } );
+
+ var origOpen = $.tizen.popupwindow.prototype.open,
+ orig_setOption = $.tizen.popupwindow.prototype._setOption,
+ orig_placementCoords = $.tizen.popupwindow.prototype._placementCoords;
+
+ $.tizen.popupwindow.prototype._setOption = function ( key, value ) {
+ var ctxpopup = this.element.data( "ctxpopup" ),
+ needsApplying = true,
+ origContainer;
+ if ( ctxpopup ) {
+ if ( "shadow" === key || "overlayTheme" === key || "corners" === key ) {
+ origContainer = this._ui.container;
+
+ this._ui.container = ctxpopup._ui.container;
+ orig_setOption.apply( this, arguments );
+ this._ui.container = origContainer;
+ needsApplying = false;
+ }
+ ctxpopup.options[key] = value;
+ }
+
+ if ( needsApplying ) {
+ orig_setOption.apply(this, arguments);
+ }
+ };
+
+ $.tizen.popupwindow.prototype._placementCoords = function ( x, y, cx, cy ) {
+ var ctxpopup = this.element.data( "ctxpopup" ),
+ self = this,
+ coords = {},
+ minDiff,
+ minDiffIdx;
+
+ function getCoords( arrow, x_factor, y_factor ) {
+ // Unhide the arrow we want to test to take it into account
+ ctxpopup._ui.arrow.all.hide();
+ ctxpopup._ui.arrow[arrow].show();
+
+ var isHorizontal = ( "b" === arrow || "t" === arrow ),
+ // Names of keys used in calculations depend on whether things are horizontal or not
+ coord = ( isHorizontal
+ ? { point: "x", size: "cx", beg: "left", outerSize: "outerWidth", niceSize: "width", triangleSize : "height" }
+ : { point: "y", size: "cy", beg: "top", outerSize: "outerHeight", niceSize: "height", triangleSize : "width" } ),
+ size = {
+ cx : self._ui.container.width(),
+ cy : self._ui.container.height()
+ },
+ halfSize = {
+ cx : size.cx / 2,
+ cy : size.cy / 2
+ },
+ desired = {
+ "x" : x + halfSize.cx * x_factor,
+ "y" : y + halfSize.cy * y_factor
+ },
+ orig = orig_placementCoords.call( self, desired.x, desired.y, size.cx, size.cy ),
+
+ // The triangleOffset must be clamped to the range described below:
+ //
+ // +-------...
+ // | /\
+ // | / \
+ // ----+--+-,-----...
+ //lowerDiff -->____| |/ <-- possible rounded corner
+ //triangle size --> | /|
+ // ____|/ |
+ // ^ |\ | <-- lowest possible offset for triangle
+ // actual range of | | \|
+ // arrow offset | | |
+ // values due to | . . Payload table cell looks like
+ // possible rounded | . . a popup window, and it may have
+ // corners and arrow | . . arbitrary things like borders,
+ // triangle size - | | | shadows, and rounded corners.
+ // our clamp range | | /|
+ // _v__|/ |
+ //triangle size --> |\ | <-- highest possible offset for triangle
+ // ____| \|
+ //upperDiff --> | |\ <-- possible rounded corner
+ // ----+--+-'-----...
+ // | \ /
+ // | \/
+ // +-------...
+ //
+ // We calculate lowerDiff and upperDiff by considering the offset and width of the payload (this.element)
+ // versus the offset and width of the element enclosing the triangle, because the payload is inside
+ // whatever decorations (such as borders, shadow, rounded corners) and thus can give a reliable indication
+ // of the thickness of the combined decorations
+
+ arrowBeg = ctxpopup._ui.arrow[arrow].offset()[coord.beg],
+ arrowSize = ctxpopup._ui.arrow[arrow][coord.outerSize]( true ),
+ payloadBeg = self.element.offset()[coord.beg],
+ payloadSize = self.element[coord.outerSize]( true ),
+ triangleSize = ctxpopup._ui.arrow[arrow][coord.triangleSize](),
+ triangleOffset =
+ Math.max(
+ triangleSize // triangle size
+ + Math.max( 0, payloadBeg - arrowBeg ), // lowerDiff
+ Math.min(
+ arrowSize // bottom
+ - triangleSize // triangle size
+ - Math.max( 0, arrowBeg + arrowSize - ( payloadBeg + payloadSize ) ), // upperDiff
+ arrowSize / 2 // arrow unrestricted offset
+ + desired[coord.point]
+ - orig[coord.point]
+ - halfSize[coord.size]
+ )
+ ),
+ // Triangle points here
+ final = {
+ "x": orig.x + ( isHorizontal ? triangleOffset : 0) + ("r" === arrow ? size.cx : 0),
+ "y": orig.y + (!isHorizontal ? triangleOffset : 0) + ("b" === arrow ? size.cy : 0)
+ },
+ ret = {
+ actual : orig,
+ triangleOffset : triangleOffset,
+ absDiff : Math.abs( x - final.x ) + Math.abs( y - final.y )
+ };
+
+ // Hide it back
+ ctxpopup._ui.arrow[arrow].hide();
+
+ return ret;
+ }
+
+ if ( ctxpopup ) {
+ // Returns:
+ // {
+ // absDiff: int
+ // triangleOffset: int
+ // actual: { x: int, y: int }
+ // }
+
+ coords = {
+ l : getCoords( "l", 1, 0 ),
+ r : getCoords( "r", -1, 0 ),
+ t : getCoords( "t", 0, 1 ),
+ b : getCoords( "b", 0, -1 )
+ };
+
+ $.each( coords, function ( key, value ) {
+ if ( minDiff === undefined || value.absDiff < minDiff ) {
+ minDiff = value.absDiff;
+ minDiffIdx = key;
+ }
+ } );
+
+ // Side-effect: show the appropriate arrow and move it to the right offset
+ ctxpopup._ui.arrow[minDiffIdx]
+ .show()
+ .triangle( "option", "offset", coords[minDiffIdx].triangleOffset );
+ return coords[minDiffIdx].actual;
+ }
+
+ return orig_placementCoords.call( this, x, y, cx, cy );
+ };
+
+ $.tizen.popupwindow.prototype.open = function ( x, y ) {
+ var ctxpopup = this.element.data( "ctxpopup" );
+
+ if ( ctxpopup ) {
+ this._setFade( false );
+ this._setShadow( false );
+ this._setCorners( false );
+ this._setOverlayTheme( null );
+ this._setOption( "overlayTheme", ctxpopup.options.overlayTheme );
+ ctxpopup._ui.arrow.all.triangle( "option", "color", ctxpopup._ui.container.css( "background-color" ) );
+
+ // temporary
+ $( '.ui-popupwindow' ).css( 'background', 'none' );
+ }
+
+ origOpen.call( this, x, y, true );
+ };
+
+ //auto self-init widgets
+ $( document ).bind( "pagecreate create", function ( e ) {
+ var ctxpopups = $( $.tizen.ctxpopup.prototype.options.initSelector, e.target );
+ $.tizen.ctxpopup.prototype.enhanceWithin( e.target );
+ } );
+}( jQuery ) );
projects / platform / framework / web / web-ui-fw.git / blobdiff