Mercurial > public > sg101
changeset 131:5b69d6e01fd4
Creating a common way to display the smiley and markdown help dialogs for a markItUp textarea input form. Converted gcalendar over to it as a trial.
| author | Brian Neal <bgneal@gmail.com> |
|---|---|
| date | Thu, 26 Nov 2009 22:47:17 +0000 |
| parents | a4635c094f24 |
| children | 06503edcc56b |
| files | gpp/core/templatetags/core_tags.py gpp/gcalendar/forms.py gpp/templates/core/comment_dialogs.html gpp/templates/gcalendar/event.html media/js/gcalendar.js media/js/markitup/sets/markdown/set.js |
| diffstat | 6 files changed, 78 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/gpp/core/templatetags/core_tags.py Fri Nov 20 02:44:45 2009 +0000 +++ b/gpp/core/templatetags/core_tags.py Thu Nov 26 22:47:17 2009 +0000 @@ -17,3 +17,7 @@ return u"""<img src="%s" alt="%s" title="%s" />""" % ( params[0], params[1], params[1]) + +@register.inclusion_tag('core/comment_dialogs.html') +def comment_dialogs(): + return {'MEDIA_URL': settings.MEDIA_URL}
--- a/gpp/gcalendar/forms.py Fri Nov 20 02:44:45 2009 +0000 +++ b/gpp/gcalendar/forms.py Thu Nov 26 22:47:17 2009 +0000 @@ -69,6 +69,8 @@ end_time = forms.TimeField(required=False, widget=forms.Select(choices=TIME_CHOICES)) time_zone = forms.CharField(required=False, widget=forms.HiddenInput()) where = forms.CharField(required=False, widget=forms.TextInput(attrs={'size': 60})) + description = forms.CharField(required=False, + widget=forms.Textarea(attrs={'class': 'markItUp smileyTarget'})) TIME_FORMAT = '%H:%M' DEFAULT_START_TIME = '19:00' @@ -81,13 +83,13 @@ class Media: css = { - 'all': settings.GPP_THIRD_PARTY_CSS['markitup'] + \ - settings.GPP_THIRD_PARTY_CSS['jquery-ui'] + \ - ('css/gcalendar.css', ) + 'all': (settings.GPP_THIRD_PARTY_CSS['markitup'] + + settings.GPP_THIRD_PARTY_CSS['jquery-ui'] + + ('css/gcalendar.css', )) } - js = settings.GPP_THIRD_PARTY_JS['markitup'] + \ - settings.GPP_THIRD_PARTY_JS['jquery-ui'] + \ - ('js/timezone.js', 'js/gcalendar.js', ) + js = (settings.GPP_THIRD_PARTY_JS['markitup'] + + settings.GPP_THIRD_PARTY_JS['jquery-ui'] + + ('js/timezone.js', 'js/gcalendar.js', )) def __init__(self, *args, **kwargs): initial = kwargs.get('initial', {}) @@ -150,5 +152,3 @@ class PasswordForm(forms.Form): password = forms.CharField(widget=forms.PasswordInput()) - -# vim: ts=4 sw=4
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gpp/templates/core/comment_dialogs.html Thu Nov 26 22:47:17 2009 +0000 @@ -0,0 +1,10 @@ +<a href="#" id="more_smileys_link"> +<img src="{{ MEDIA_URL }}icons/emoticon_smile.png" alt="More smileys" title="More smileys" /></a> +<a href="#" id="markdown_help_link"> +<img src="{{ MEDIA_URL }}icons/help.png" alt="Help" title="Help" /></a> +<div id="smileys_dialog_popup" title="More Smileys"> +<img src="{{ MEDIA_URL }}icons/ajax_busy.gif" alt="Loading" id="smiley_busy" /> +</div> +<div id="markdown_help_dialog_popup" title="Markdown Help"> +<img src="{{ MEDIA_URL }}icons/ajax_busy.gif" alt="Loading" id="markdown_busy" /> +</div>
--- a/gpp/templates/gcalendar/event.html Fri Nov 20 02:44:45 2009 +0000 +++ b/gpp/templates/gcalendar/event.html Thu Nov 26 22:47:17 2009 +0000 @@ -1,4 +1,5 @@ {% extends 'base.html' %} +{% load core_tags %} {% block title %}{{ title }}{% endblock %} {% block custom_js %} {{ form.media }} @@ -36,7 +37,7 @@ <tr><th>Where:</th><td>{{ form.where.errors }}{{ form.where }}</td></tr> <tr><th>Details:</th><td>{{ form.description.errors }}{{ form.description }}</td></tr> {# form.as_p #} -<tr><td> </td><td><input type="submit" name="submit_button" value="Submit" /></td></tr> +<tr><td> </td><td>{% comment_dialogs %}<input type="submit" name="submit_button" value="Submit" /></td></tr> </table> </form> <p><a href="{% url gcalendar-index %}">« Back to the Event Calendar</a></p>
--- a/media/js/gcalendar.js Fri Nov 20 02:44:45 2009 +0000 +++ b/media/js/gcalendar.js Thu Nov 26 22:47:17 2009 +0000 @@ -1,5 +1,4 @@ $(document).ready(function() { - $('#id_description').markItUp(mySettings); $('#id_start_date').datepicker({constrainInput: true, onClose: function () { var end = $('#id_end_date');
--- a/media/js/markitup/sets/markdown/set.js Fri Nov 20 02:44:45 2009 +0000 +++ b/media/js/markitup/sets/markdown/set.js Thu Nov 26 22:47:17 2009 +0000 @@ -78,3 +78,57 @@ return '\n'+heading; } } + +$(document).ready(function() { + $('.markItUp').markItUp(mySettings); + + $('#smileys_dialog_popup').dialog({autoOpen:false}); + var firstTimeSmiley = true; + $('#more_smileys_link').click(function () { + $('#smileys_dialog_popup').dialog('open'); + var smileyTarget = $('.smileyTarget')[0]; + if (firstTimeSmiley) { + $.ajax({ + url: '/smiley/farm/extra/', + type: 'GET', + dataType: 'html', + success: function(data, textStatus) { + var img = $('#smiley_busy'); + img.hide(); + img.after(data); + $('#smileys_dialog_popup .smiley_farm img').click(function() { + smileyTarget.value += ' ' + this.alt + ' '; + smileyTarget.focus(); + }); + firstTimeSmiley = false; + }, + error: function (xhr, textStatus, ex) { + alert('Oops, an error occurred: ' + xhr.statusText + ' - ' + xhr.responseText); + } + }); + } + return false; + }); + $('#markdown_help_dialog_popup').dialog({autoOpen: false, width: 720, height: 600}); + var firstTimeMdHelp = true; + $('#markdown_help_link').click(function () { + $('#markdown_help_dialog_popup').dialog('open'); + if (firstTimeMdHelp) { + $.ajax({ + url: '/core/markdown_help/', + type: 'GET', + dataType: 'html', + success: function(data, textStatus) { + var img = $('#markdown_busy'); + img.hide(); + img.after(data); + firstTimeMdHelp = false; + }, + error: function (xhr, textStatus, ex) { + alert('Oops, an error occurred: ' + xhr.statusText + ' - ' + xhr.responseText); + } + }); + } + return false; + }); +});