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 (2009-11-26)
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>&nbsp;</td><td><input type="submit" name="submit_button" value="Submit" /></td></tr>
+<tr><td>&nbsp;</td><td>{% comment_dialogs %}<input type="submit" name="submit_button" value="Submit" /></td></tr>
 </table>
 </form>
 <p><a href="{% url gcalendar-index %}">&laquo; 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;
+   });
+});