DevHeads.net

com web/php: Add flash messenger and implement for notes voting for starters: include/header.inc js/common.js styles/theme-base.css

Link: <a href="http://git.php.net/?p=web/php.git;a=commitdiff;h=81fce1dcc4301b3ee2b7eeca74e762cbc8ad281d" title="http://git.php.net/?p=web/php.git;a=commitdiff;h=81fce1dcc4301b3ee2b7eeca74e762cbc8ad281d">http://git.php.net/?p=web/php.git;a=commitdiff;h=81fce1dcc4301b3ee2b7eec...</a>

Log:
Add flash messenger and implement for notes voting for starters

Changed paths:
M include/header.inc
M js/common.js
M styles/theme-base.css

Diff:
diff --git a/include/header.inc b/include/header.inc
index b72d85f..1f07257 100755
--- a/include/header.inc
+++ b/include/header.inc
@@ -85,6 +85,8 @@ if (isset($shortname) && $shortname) {
</div>
</div>
</div>
+<div id="flash-message">
+</div>
</nav>

<?php if (!empty($config['breadcrumbs'])): ?>
diff --git a/js/common.js b/js/common.js
index b2f6eac..bd8b296 100755
--- a/js/common.js
+++ b/js/common.js
@@ -235,6 +235,8 @@ $(document).ready(function() {
request.done(function(data) {
if(data.success != null && data.success == true) {
$("#V"+id).html("<div style=\"float: left; width: 16px; height: 16px; background-image: url(/images/notes-features.png); background-position:-32px 16px; margin-right: 8px; overflow: hidden;\" border=\"0\" alt=\"success\" title=\"Thank you for voting!\"></div>" + data.update);
+
+ flashMessage({text: 'Thank you for voting!'});
}
else {
var responsedata = "Error :(";
@@ -242,12 +244,16 @@ $(document).ready(function() {
responsedata = data.msg;
}
$("#V"+id).html("<div style=\"float: left; width: 16px; height: 16px; background-image: url(/images/notes-features.png); background-position:-32px 0px; margin-right: 8px; overflow: hidden;\" border=\"0\" alt=\"fail\" title=\"" + responsedata + "\"></div>");
+
+ flashMessage({text: 'Unexpected error occured, please try again later!', type: 'error'});
}
});
request.fail(function(jqXHR, textStatus) {
$("#Vu"+id).show();
$("#Vd"+id).show();
$("#V"+id).html("<div style=\"float: left; width: 16px; height: 16px; background-image: url(/images/notes-features.png); background-position:-32px 0px; margin-right: 8px; overflow: hidden;\" border=\"0\" alt=\"fail\" title=\"Error :(\"></div>");
+
+ flashMessage({text: 'Something went wrong :(', type: 'error'});
});
request.always(function(data) {
$("#V"+id).fadeIn(500, "linear");
@@ -309,9 +315,23 @@ $(document).ready(function() {
$('code.parameter').closest('em').addClass('reset');
/* }}} */

+/* {{{ Init template generated flash messages */
+ $('#flash-message .message').each(function()
+ {
+ var alertType = $(this).data('type');
+ var timeout = 6000;
+ var n = flashMessage({
+ text: $(this).html(),
+ type: alertType,
+ timeout: timeout
+ });
+ });
+/* }}} */
+
});

/* {{{ add-user.php animations */
+// @author <a href="mailto: ... at php dot net"> ... at php dot net</a>
$(function() {

if ( ! document.getElementById('add-note-usernotes'))
@@ -370,6 +390,46 @@ $(function() {
});
/* }}} */

+/* {{{ Flash Messenger */
+// @author <a href="mailto: ... at php dot net"> ... at php dot net</a>
+function flashMessage(options)
+{
+ var defaults = {
+ timeout: 6000,
+ type: 'success',
+ text: '',
+ parent: '#flash-message',
+ };
+
+ var options = $.extend(defaults, options);
+
+ var id = 'id_' + Math.random().toString().replace('0.', '');
+ var message = $('<div />').addClass('message ' + options.type).data('type', options.type).attr('id', id).html(options.text);
+ $(options.parent).append(message);
+
+ var o = $('#' + id);
+
+ if (options.timeout)
+ {
+ setTimeout(function()
+ {
+ if ( ! o.length)
+ return;
+ o.slideUp(400, function()
+ {
+ $(this).remove();
+ });
+ }, options.timeout);
+ }
+
+ o.on('click', function() {
+ o.remove();
+ });
+
+ return true;
+};
+/* }}} */
+
/**
* Determine what language to present to the user.
*/
diff --git a/styles/theme-base.css b/styles/theme-base.css
index 20b455b..7a7e167 100755
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -3619,3 +3619,70 @@ aside.tips div.inner {
margin: -0.5em 0 0 -0.5em;
}
/* }}} */
+
+/* {{{ Flash message */
+#flash-message {
+ height: auto;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ margin-top: 4px;
+ position: fixed;
+ width: 100%;
+ z-index: 9999999;
+ cursor: pointer;
+ text-align: center;
+ opacity: 0.9;
+}
+
+#flash-message .message:last-child {
+ box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
+ z-index: -1;
+}
+
+#flash-message .message {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ position: relative;
+ font-weight: 700;
+ font-size: 1.125em;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+#flash-message .message a {
+ color:#fff;
+ text-decoration: none;
+ border-bottom: 1px dotted #fff;
+ font-weight: bold;
+}
+
+#flash-message .success {
+ background-color: #DFF0D8;
+ border-color: #D6E9C6;
+ color: #3C763D;
+}
+
+#flash-message .error {
+ background-color: #F2DEDE;
+ border-color: #EBCCD1;
+ color: #A94442;
+}
+
+#flash-message .warning {
+ background-color: #FCF8E3;
+ border-color: #FAEBCC;
+ color: #8A6D3B;
+}
+#flash-message .warning a {
+ color: #826200 !important;
+ border-bottom: 1px dotted #826200;
+}
+
+#flash-message .info {
+ background-color: #D9EDF7;
+ border-color: #BCE8F1;
+ color: #31708F;
+}
+/* }}} */