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

On Sun, Dec 15, 2013 at 10:46 AM, Dejan Marjanovic <dm@php.net> wrote: > Commit: b1f27ebc8fa8e569a77e2434e825587b0db34853 > Author: Dejan Marjanovic <dejan.marjanovic@gmail.com> Sun, 15 > Dec 2013 16:46:56 +0100 > Parents: 61a729a55c3a57404797c1964a49a30b0fea6d9c > Branches: master > > Link: > > http://git.php.net/?p=web/php.git;a=commitdiff;h=b1f27ebc8fa8e569a77e2434e825587b0db34853 > > 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 dm@php.net > $(function() { > > if ( ! document.getElementById('add-note-usernotes')) > @@ -370,6 +390,46 @@ $(function() { > }); > /* }}} */ > > +/* {{{ Flash Messenger */ > +// @author dm@php.net > +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; > +} > +/* }}} */ > > > -- > PHP Webmaster List Mailing List (http://www.php.net/) > To unsubscribe, visit: http://www.php.net/unsub.php > > Javascript for user notes should go in js/usernotes.js where I put its related code. I also don't think adding @author comments in the code is a good idea. Your contributions are logged in the commit log history. There's no need to leave direct attribution in an open-sourced project laying around.