Merge pull request #60 from marcusforsberg/curve_popups

New PM and help popups in Curve

Themes/default/css/index.css

@@ -3178,6 +3178,59 @@ span.hidelink {
 	box-shadow: 1px 2px 4px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.05) inset;
 }
 
+/* Styles for popup windows
+------------------------------------------------------- */
+.popup_container
+{
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,0.5);
+}
+
+.popup_window
+{
+	position: fixed;
+	width: 480px;
+	z-index: 99;
+	padding: 0;
+	box-shadow: 0 0 8px rgba(0,0,0,0.2);
+	border-radius: 5px;
+	max-height: none!important;
+	overflow: visible!important;
+}
+.popup_content, .popup_heading
+{
+	padding: 12px;
+	margin: 0;
+	border-top-right-radius: 5px;
+	border-top-left-radius: 5px;
+}
+
+.popup_content
+{
+	max-height: 20em;
+	overflow: auto;
+}
+
+.popup_heading .hide_popup
+{
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	background: url(../images/buttons/delete.png) center center no-repeat;
+	float: right;
+}
+
+.popup_heading .icon
+{
+	vertical-align: middle;
+	margin: -4px 4px 0 0;
+}
+
 /* Styles for the progress bar 
 -------------------------------------------------- */
 .progress_bar {

Themes/default/index.template.php

@@ -137,12 +137,16 @@ function template_html_above()
 		var smf_member_id = "', $context['user']['id'], '";', $context['show_pm_popup'] ? '
 		var fPmPopup = function ()
 		{
-			if (confirm("' . $txt['show_personal_messages'] . '"))
-				window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
+			new smc_Popup({
+				heading: ' . JavaScriptEscape($txt['show_personal_messages_heading']) . ',
+				content: ' . JavaScriptEscape(sprintf($txt['show_personal_messages'], $context['user']['unread_messages'], $scripturl . '?action=pm')) . ',
+				icon: smf_images_url + \'/im_sm_newmsg.png\'
+			});
 		}
 		addLoadEvent(fPmPopup);' : '', '
 		var ajax_notification_text = "', $txt['ajax_in_progress'], '";
 		var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
+		var help_popup_heading_text = "', $txt['help_popup'], '";
 	// ]]></script>';
 
 	echo '

Themes/default/languages/index.english.php

@@ -677,8 +677,10 @@ $txt['change_color'] = 'Change Color';
 $txt['quickmod_delete_selected'] = 'Remove Selected';
 $txt['quickmod_split_selected'] = 'Split Selected';
 
-// In this string, don't use entities. (&, etc.)
-$txt['show_personal_messages'] = 'You have received one or more new personal messages.\\nWould you like to open a new window to view them?';
+$txt['show_personal_messages_heading'] = 'New messages!';
+$txt['show_personal_messages'] = 'You have <strong>%1$s</strong> unread personal messages in your inbox!<br /><br /><a href="%2$s">Go to your inbox</a>';
+
+$txt['help_popup'] = 'A little lost? Let me explain:';
 
 $txt['previous_next_back'] = '&laquo; previous';
 $txt['previous_next_forward'] = 'next &raquo;';

Themes/default/scripts/script.js

@@ -317,22 +317,63 @@ String.prototype.easyReplace = function (oReplacements)
 	return sResult;
 }
 
-
-// Open a new window.
+// Open a new window (only exists for backwards compatibility) - DEPRECATED
 function reqWin(desktopURL, alternateWidth, alternateHeight, noScrollbars)
 {
-	if ((alternateWidth && self.screen.availWidth * 0.8 < alternateWidth) || (alternateHeight && self.screen.availHeight * 0.8 < alternateHeight))
-	{
-		noScrollbars = false;
-		alternateWidth = Math.min(alternateWidth, self.screen.availWidth * 0.8);
-		alternateHeight = Math.min(alternateHeight, self.screen.availHeight * 0.8);
-	}
-	else
-		noScrollbars = typeof(noScrollbars) == 'boolean' && noScrollbars == true;
+	// Load the help page content (we just want the text to show)
+	ajax_indicator(true);
+	$.ajax({
+		url: desktopURL,
+		success: function(help_html){
+			var help_content = $('<div id="temp_help">').html(help_html).find('a[href$="self.close();"]').hide().prev('br').hide().parent().html();
+			
+			ajax_indicator(false);
+			
+			// Reroute to the new function
+			return new smc_Popup({heading: help_popup_heading_text, content: help_content, icon: smf_images_url + '/helptopics.png'});
+		}
+	});
+	return false;
+}
 
-	window.open(desktopURL, 'requested_popup', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=' + (noScrollbars ? 'no' : 'yes') + ',width=' + (alternateWidth ? alternateWidth : 480) + ',height=' + (alternateHeight ? alternateHeight : 220) + ',resizable=no');
+// *** smc_Popup class.
+function smc_Popup(oOptions)
+{
+	this.opt = oOptions;
+	this.popup_id = this.opt.custom_id ? this.opt.custom_id : 'smf_popup';
+	this.show();
+}
+
+smc_Popup.prototype.show = function ()
+{
+	popup_class = 'popup_window ' + (this.opt.custom_class ? this.opt.custom_class : 'description');
+	icon = this.opt.icon ? '<img src="' + this.opt.icon + '" class="icon" alt="" /> ' : '';
+
+	// Create it
+	$('body').append('<div id="' + this.popup_id + '" class="popup_container"><div class="' + popup_class + '"><div class="catbg popup_heading"><a href="javascript:void(0);" class="hide_popup"></a>' + icon + this.opt.heading + '</div><div class="popup_content">' + this.opt.content + '</div></div></div>');
+
+	// Show it
+	this.popup_body = $('#' + this.popup_id).children('.popup_window');
+	this.popup_body.css({top:'25%',left:'50%',margin:'-'+($(this.popup_body).height() / 2)+'px 0 0 -'+($(this.popup_body).width() / 2)+'px'}).parent().fadeIn(300);
 
-	// Return false so the click won't follow the link ;).
+	// Trigger hide
+	var popup_instance = this;
+	$(document).mouseup(function (e){
+		if ($('#' + popup_instance.popup_id).has(e.target).length === 0)
+			popup_instance.hide();
+	}).keyup(function(e){
+		if(e.keyCode == 27)
+			popup_instance.hide();
+	});
+	$('#' + this.popup_id).find('.hide_popup').click(function (){ return popup_instance.hide(); });
+	
+	return false;
+}
+
+smc_Popup.prototype.hide = function ()
+{
+	$('#' + this.popup_id).fadeOut(300, function(){ $(this).remove(); });
+	
 	return false;
 }