Commit @9a5e1b601f53cd831c26e1299edd356e832a4937

Jihan Kim 2014-02-28

ui.Common: add sDescription param on alert, confirm, ajaxConfirm

@9a5e1b601f53cd831c26e1299edd356e832a4937

783b53a

9a5e1b6

app/assets/stylesheets/less/_yobiUI.less

--- app/assets/stylesheets/less/_yobiUI.less

+++ app/assets/stylesheets/less/_yobiUI.less


             font-weight:bold; font-size:18px;
             margin-bottom:20px; line-height:1.5em;
         }
+
+        .desc {
+            text-align:center;
+            font-weight: normal; font-size: 14px;
+            margin: 20px 0 25px; line-height: 150%;
+            color: #555;
+        }
     }
 }
 

783b53a

9a5e1b6

app/views/common/scripts.scala.html

--- app/views/common/scripts.scala.html

+++ app/views/common/scripts.scala.html


 
 @**<!-- yobi.ui.Dialog -->**@
 <div id="yobiDialog" class="modal hide fade yobiDialog" tabindex="-1" role="dialog" aria-hidden="true">
-	<div class="btn-dismiss"><button type="button" class="btn-transparent" data-dismiss="modal">&times;</button></div>
-	<div class="message">
-		<p class="center-text msg"></p>
-		<p class="center-txt buttons">
-			<button type="button" class="ybtn ybtn-info" data-dismiss="modal">@Messages("button.confirm")</button>
-		</p>
-	</div>
+    <div class="btn-dismiss"><button type="button" class="btn-transparent" data-dismiss="modal">&times;</button></div>
+    <div class="message">
+        <div class="center-text">
+            <p class="msg"></p>
+            <p class="desc"></p>
+        </div>
+        <div class="center-txt buttons">
+            <button type="button" class="ybtn ybtn-info" data-dismiss="modal">@Messages("button.confirm")</button>
+        </div>
+    </div>
 </div>
 @**<!-- //yobi.ui.Dialog -->**@
 

 	<div class="btn-dismiss"><button type="button" class="btn-transparent">&times;</button></div>
 	<div class="center-text">
         <span class="v"></span>
-        <p class="msg"></p>
+        <div class="msg"></div>
     </div>
 </div>
 </script>

783b53a

9a5e1b6

public/javascripts/common/yobi.Common.js

--- public/javascripts/common/yobi.Common.js

+++ public/javascripts/common/yobi.Common.js


      * Show alert dialog
      * @param {String} sMessage Message string
      * @param {Function} fOnAfterHide Call this function after hidden dialog (optional)
+     * @param {String} sDescription Description string (optional)
      */
-    function showAlert(sMessage, fOnAfterHide){
+    function showAlert(sMessage, fOnAfterHide, sDescription){
         if(!htVar.oAlertDialog){
             htVar.oAlertDialog = new yobi.ui.Dialog("#yobiDialog");
         }
 
-        htVar.oAlertDialog.show(sMessage, {
+        htVar.oAlertDialog.show(sMessage, sDescription, {
             "fOnAfterHide": fOnAfterHide
         });
     }

      * Show confirm dialog
      * @param {String} sMessage Message string
      * @param {Function} fCallback Call this function after click button
-     * @param {Array} aButtonLabels Specifying button labels (optional)
-     * @param {Array} aButtonStyles Specifying button CSS Class names (optional)
+     * @param {String} sDescription Description string (optional)
+     * @param {Hash Table} htOptions
+     * @param {Array} htOptions.aButtonLabels Specifying button labels (optional)
+     * @param {Array} htOptions.aButtonStyles Specifying button CSS Class names (optional)
      */
-    function showConfirm(sMessage, fCallback, aButtonLabels, aButtonStyles){
+    function showConfirm(sMessage, fCallback, sDescription, htOptions){
         if(!htVar.oConfirmDialog){
             htVar.oConfirmDialog = new yobi.ui.Dialog("#yobiDialog");
         }
 
-        aButtonLabels = aButtonLabels || [Messages("button.cancel"), Messages("button.confirm")];
+        htOptions = htOptions || {};
+        var aButtonStyles = htOptions.aButtonStyles;
+        var aButtonLabels = htOptions.aButtonLabels || [Messages("button.cancel"), Messages("button.confirm")];
 
-        htVar.oConfirmDialog.show(sMessage, {
+        htVar.oConfirmDialog.show(sMessage, sDescription, {
            "fOnClickButton": fCallback,
            "aButtonLabels" : aButtonLabels,
            "aButtonStyles" : aButtonStyles

      *
      * @param {String} sMessage confirm message
      * @param {Hash Table} htAjaxOptions jQuery.ajax settings
+     * @param {String} sDescription Description string (optional)
+     * @param {Hash Table} htConfirmOptions showConfirm options (optional)
      */
-    function ajaxConfirm(sMessage, htAjaxOptions){
+    function ajaxConfirm(sMessage, htAjaxOptions, sDescription, htConfirmOptions){
         showConfirm(sMessage, function(htData){
             if(htData.nButtonIndex === 1){
                 $.ajax(htAjaxOptions);
             }
-        });
+        }, sDescription, htConfirmOptions);
     }
 
     /**

783b53a

9a5e1b6

public/javascripts/common/yobi.ui.Dialog.js

--- public/javascripts/common/yobi.ui.Dialog.js

+++ public/javascripts/common/yobi.ui.Dialog.js


         function _initElement(sContainer){
             htElement.welContainer = $(sContainer).clone();
             htElement.welMessage = htElement.welContainer.find(".msg");
+            htElement.welDescription = htElement.welContainer.find(".desc");
             htElement.welButtons = htElement.welContainer.find(".buttons");
             htElement.welContainer.modal({
                 "show": false

          * 메시지 출력
          * @param {String} sMessage
          */
-        function showDialog(sMessage, htOptions){
+        function showDialog(sMessage, sDescription, htOptions){
             htVar.fOnAfterShow = htOptions.fOnAfterShow;
             htVar.fOnAfterHide = htOptions.fOnAfterHide;
             htVar.fOnClickButton = htOptions.fOnClickButton;

 
             htElement.welButtons.html(sButtonHTML);
             htElement.welMessage.html($yobi.nl2br(sMessage));
+            htElement.welDescription.html($yobi.nl2br(sDescription || ""));
             htElement.welContainer.modal("show");
         }
 

783b53a

9a5e1b6

public/javascripts/service/yobi.project.Member.js

--- public/javascripts/service/yobi.project.Member.js

+++ public/javascripts/service/yobi.project.Member.js


         function _onClickDelete(){
             var sURL = $(this).attr("data-href");
 
-            $yobi.confirm(Messages("project.member.deleteConfirm"), function(htData){
-                if(htData.nButtonIndex === 1){
-                    $.ajax(sURL, {
-                        "method"  : "delete",
-                        "dataType": "html",
-                        "success" : _onSuccessDeleteMember,
-                        "error"   : _onErrorDeleteMember
-                    });
-                }
-            },
-            [Messages("button.no"), Messages("button.yes")],
-            ["ybtn-default", "ybtn-danger"]);
+            $yobi.ajaxConfirm(Messages("project.member.deleteConfirm"),
+                {
+                    "url"     : sURL,
+                    "method"  : "delete",
+                    "dataType": "html",
+                    "success" : _onSuccessDeleteMember,
+                    "error"   : _onErrorDeleteMember
+                },
+                "",
+                {
+                    "aButtonLabels": [Messages("button.no"), Messages("button.yes")],
+                    "aButtonStyles": ["ybtn-default", "ybtn-danger"]
+                });
         }
 
         /**

Add a comment

Open 0
Closed 0

List

...	...	@@ -483,6 +483,13 @@
483	483	font-weight:bold; font-size:18px;
484	484	margin-bottom:20px; line-height:1.5em;
485	485	}
	486	+
	487	+ .desc {
	488	+ text-align:center;
	489	+ font-weight: normal; font-size: 14px;
	490	+ margin: 20px 0 25px; line-height: 150%;
	491	+ color: #555;
	492	+ }
486	493	}
487	494	}
488	495

...	...	@@ -250,13 +250,14 @@
250	250	* Show alert dialog
251	251	* @param {String} sMessage Message string
252	252	* @param {Function} fOnAfterHide Call this function after hidden dialog (optional)
	253	+ * @param {String} sDescription Description string (optional)
253	254	*/
254		- function showAlert(sMessage, fOnAfterHide){
	255	+ function showAlert(sMessage, fOnAfterHide, sDescription){
255	256	if(!htVar.oAlertDialog){
256	257	htVar.oAlertDialog = new yobi.ui.Dialog("#yobiDialog");
257	258	}
258	259
259		- htVar.oAlertDialog.show(sMessage, {
	260	+ htVar.oAlertDialog.show(sMessage, sDescription, {
260	261	"fOnAfterHide": fOnAfterHide
261	262	});
262	263	}
...	...	@@ -265,17 +266,21 @@
265	266	* Show confirm dialog
266	267	* @param {String} sMessage Message string
267	268	* @param {Function} fCallback Call this function after click button
268		- * @param {Array} aButtonLabels Specifying button labels (optional)
269		- * @param {Array} aButtonStyles Specifying button CSS Class names (optional)
	269	+ * @param {String} sDescription Description string (optional)
	270	+ * @param {Hash Table} htOptions
	271	+ * @param {Array} htOptions.aButtonLabels Specifying button labels (optional)
	272	+ * @param {Array} htOptions.aButtonStyles Specifying button CSS Class names (optional)
270	273	*/
271		- function showConfirm(sMessage, fCallback, aButtonLabels, aButtonStyles){
	274	+ function showConfirm(sMessage, fCallback, sDescription, htOptions){
272	275	if(!htVar.oConfirmDialog){
273	276	htVar.oConfirmDialog = new yobi.ui.Dialog("#yobiDialog");
274	277	}
275	278
276		- aButtonLabels = aButtonLabels \|\| [Messages("button.cancel"), Messages("button.confirm")];
	279	+ htOptions = htOptions \|\| {};
	280	+ var aButtonStyles = htOptions.aButtonStyles;
	281	+ var aButtonLabels = htOptions.aButtonLabels \|\| [Messages("button.cancel"), Messages("button.confirm")];
277	282
278		- htVar.oConfirmDialog.show(sMessage, {
	283	+ htVar.oConfirmDialog.show(sMessage, sDescription, {
279	284	"fOnClickButton": fCallback,
280	285	"aButtonLabels" : aButtonLabels,
281	286	"aButtonStyles" : aButtonStyles
...	...	@@ -287,13 +292,15 @@
287	292	*
288	293	* @param {String} sMessage confirm message
289	294	* @param {Hash Table} htAjaxOptions jQuery.ajax settings
	295	+ * @param {String} sDescription Description string (optional)
	296	+ * @param {Hash Table} htConfirmOptions showConfirm options (optional)
290	297	*/
291		- function ajaxConfirm(sMessage, htAjaxOptions){
	298	+ function ajaxConfirm(sMessage, htAjaxOptions, sDescription, htConfirmOptions){
292	299	showConfirm(sMessage, function(htData){
293	300	if(htData.nButtonIndex === 1){
294	301	$.ajax(htAjaxOptions);
295	302	}
296		- });
	303	+ }, sDescription, htConfirmOptions);
297	304	}
298	305
299	306	/**

...	...	@@ -55,6 +55,7 @@
55	55	function _initElement(sContainer){
56	56	htElement.welContainer = $(sContainer).clone();
57	57	htElement.welMessage = htElement.welContainer.find(".msg");
	58	+ htElement.welDescription = htElement.welContainer.find(".desc");
58	59	htElement.welButtons = htElement.welContainer.find(".buttons");
59	60	htElement.welContainer.modal({
60	61	"show": false
...	...	@@ -74,7 +75,7 @@
74	75	* 메시지 출력
75	76	* @param {String} sMessage
76	77	*/
77		- function showDialog(sMessage, htOptions){
	78	+ function showDialog(sMessage, sDescription, htOptions){
78	79	htVar.fOnAfterShow = htOptions.fOnAfterShow;
79	80	htVar.fOnAfterHide = htOptions.fOnAfterHide;
80	81	htVar.fOnClickButton = htOptions.fOnClickButton;
...	...	@@ -85,6 +86,7 @@
85	86
86	87	htElement.welButtons.html(sButtonHTML);
87	88	htElement.welMessage.html($yobi.nl2br(sMessage));
	89	+ htElement.welDescription.html($yobi.nl2br(sDescription \|\| ""));
88	90	htElement.welContainer.modal("show");
89	91	}
90	92

...	...	@@ -158,18 +158,19 @@
158	158	function _onClickDelete(){
159	159	var sURL = $(this).attr("data-href");
160	160
161		- $yobi.confirm(Messages("project.member.deleteConfirm"), function(htData){
162		- if(htData.nButtonIndex === 1){
163		- $.ajax(sURL, {
164		- "method" : "delete",
165		- "dataType": "html",
166		- "success" : _onSuccessDeleteMember,
167		- "error" : _onErrorDeleteMember
168		- });
169		- }
170		- },
171		- [Messages("button.no"), Messages("button.yes")],
172		- ["ybtn-default", "ybtn-danger"]);
	161	+ $yobi.ajaxConfirm(Messages("project.member.deleteConfirm"),
	162	+ {
	163	+ "url" : sURL,
	164	+ "method" : "delete",
	165	+ "dataType": "html",
	166	+ "success" : _onSuccessDeleteMember,
	167	+ "error" : _onErrorDeleteMember
	168	+ },
	169	+ "",
	170	+ {
	171	+ "aButtonLabels": [Messages("button.no"), Messages("button.yes")],
	172	+ "aButtonStyles": ["ybtn-default", "ybtn-danger"]
	173	+ });
173	174	}
174	175
175	176	/**

...	...	@@ -3,13 +3,16 @@
3	3
4	4	@<!-- yobi.ui.Dialog -->@
5	5	<div id="yobiDialog" class="modal hide fade yobiDialog" tabindex="-1" role="dialog" aria-hidden="true">
6		- <div class="btn-dismiss"><button type="button" class="btn-transparent" data-dismiss="modal">×</button></div>
7		- <div class="message">
8		- <p class="center-text msg"></p>
9		- <p class="center-txt buttons">
10		- <button type="button" class="ybtn ybtn-info" data-dismiss="modal">@Messages("button.confirm")</button>
11		- </p>
12		- </div>
	6	+ <div class="btn-dismiss"><button type="button" class="btn-transparent" data-dismiss="modal">×</button></div>
	7	+ <div class="message">
	8	+ <div class="center-text">
	9	+ <p class="msg"></p>
	10	+ <p class="desc"></p>
	11	+ </div>
	12	+ <div class="center-txt buttons">
	13	+ <button type="button" class="ybtn ybtn-info" data-dismiss="modal">@Messages("button.confirm")</button>
	14	+ </div>
	15	+ </div>
13	16	</div>
14	17	@<!-- //yobi.ui.Dialog -->@
15	18
...	...	@@ -20,7 +23,7 @@
20	23	<div class="btn-dismiss"><button type="button" class="btn-transparent">×</button></div>
21	24	<div class="center-text">
22	25	<span class="v"></span>
23		- <p class="msg"></p>
	26	+ <div class="msg"></div>
24	27	</div>
25	28	</div>
26	29	</script>

Delete comment