fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-12-22 10:14 am
  • Add Memory
  • Share This Entry

[dw-free] Revamp /update

[commit: http://hg.dwscoalition.org/dw-free/rev/8a4c11cb2a00]

http://bugs.dwscoalition.org/show_bug.cgi?id=2524

Collapse modules in the post entry form. Includes automatic saving of last
known state.

Patch by [personal profile] fu.

Files modified:
  • cgi-bin/DW/Controller/Entry.pm
  • htdocs/js/jquery.collapsible.js
  • htdocs/js/jquery.postform.js
  • htdocs/stc/base-colors-dark.css
  • htdocs/stc/base-colors-light.css
  • htdocs/stc/jquery.collapsible.css
  • htdocs/stc/postform.css
  • views/entry/form.tt
  • views/entry/module-access.tt
  • views/entry/module-age_restriction.tt
  • views/entry/module-comments-new.tt
  • views/entry/module-comments.tt
  • views/entry/module-crosspost.tt
  • views/entry/module-currents.tt
  • views/entry/module-displaydate.tt
  • views/entry/module-icons.tt
  • views/entry/module-journal.tt
  • views/entry/module-scheduled.tt
  • views/entry/module-status.tt
  • views/entry/module-tags.tt
--------------------------------------------------------------------------------
diff -r 1989803b06cf -r 8a4c11cb2a00 cgi-bin/DW/Controller/Entry.pm
--- a/cgi-bin/DW/Controller/Entry.pm	Thu Dec 22 18:12:05 2011 +0800
+++ b/cgi-bin/DW/Controller/Entry.pm	Thu Dec 22 18:14:08 2011 +0800
@@ -43,6 +43,7 @@
 
 DW::Routing->register_string( '/entry/options', \&options_handler, app => 1 );
 DW::Routing->register_string( '/__rpc_entryoptions', \&options_rpc_handler, app => 1 );
+DW::Routing->register_string( '/__rpc_entryformcollapse', \&collapse_rpc_handler, app => 1, methods => { GET => 1 }, format => 'json' );
 
                              # /entry/username/ditemid/edit
 #DW::Routing->register_regex( '^/entry/(?:(.+)/)?(\d+)/edit$', \&edit_handler, app => 1 );
@@ -1074,6 +1075,48 @@
     return DW::Template->render_template( 'entry/options.tt', $vars, { fragment => 1 } );
 }
 
+=head2 C<< DW::Controller::Entry::collapse_rpc_handler( ) >>
+
+Load or save entry form module header settings
+
+=cut
+sub collapse_rpc_handler {
+    my ( $ok, $rv ) = controller();
+    return $rv unless $ok;
+
+    my $u = $rv->{remote};
+    my $r = DW::Request->get;
+    my $args = $r->get_args;
+
+    my $module = $args->{id} || "";
+    my $expand = $args->{expand} && $args->{expand} eq "true" ? 1 : 0;
+
+    my $show = sub {
+        $r->print( JSON::objToJson( $u->entryform_panels_collapsed ) );
+        return $r->OK;
+    };
+
+    if ( $module ) {
+        my $is_collapsed = $u->entryform_panels_collapsed;
+
+        # no further action needed
+        return $show->() if $is_collapsed->{$module} && ! $expand;
+        return $show->() if ! $is_collapsed->{$module} && $expand;
+
+        if ( $expand ) {
+            delete $is_collapsed->{$module};
+        } else {
+            $is_collapsed->{$module} = 1;
+        }
+        $u->entryform_panels_collapsed( $is_collapsed );
+
+        return $show->();
+    } else {
+        # just view
+        return $show->();
+    }
+}
+
 sub _load_visible_panels {
     my $u = $_[0];
 
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/js/jquery.collapsible.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/js/jquery.collapsible.js	Thu Dec 22 18:14:08 2011 +0800
@@ -0,0 +1,65 @@
+(function($) {
+$.fn.ultrafocus = function( focus, blur ) {
+    return $(this)
+        .focus(focus)
+        .blur(blur)
+        .hover(focus, blur);
+}
+
+$.widget("ui.collapsible", {
+    _init: function() {
+        var self = this;
+        var $trigger = $(self.element).find(self.options.trigger).eq(0);
+
+        // no appropriate trigger element found; nothing to do here
+        if ( $trigger.length == 0 )
+            return self;
+
+        var opts = self.options;
+        self._trigger = $trigger;
+        self._target = $(opts.target, self.element);
+        self.element.data("collapsibleid", $.proxy(opts.parseid, self.element)());
+
+        $trigger.ultrafocus(function() {
+            $(this).addClass(opts.triggerHoverClass);
+        }, function() {
+            $(this).removeClass(opts.triggerHoverClass);
+        })
+        .addClass(opts.triggerClass)
+        .append("<span class='ui-icon'></span>")
+        .wrapInner($("<a href='#'></a>").attr({ href: "#" }))
+        .click(function(e) {
+            var clicked = this;
+            e.preventDefault();
+
+            if ( opts.endpointurl ) {
+                $.getJSON(opts.endpointurl,
+                    {"id": self.element.data("collapsibleid"), "expand": !$(self._target).is(":visible")})
+            }
+
+            self._target.slideToggle(null, $.proxy(self, "_update") );
+        });
+
+        if ( opts.endpointurl && $.ui.collapsible.cache[self.element.data("collapsibleid")]) {
+            self._target.hide();
+        }
+
+        self._update();
+    },
+    _update: function() {
+        var self = this;
+        var open = $(self._target).is(":visible");
+        self._trigger.find('.ui-icon')
+            .toggleClass('ui-icon-minus', open).toggleClass('ui-icon-plus', !open)
+            .text(open? self.options.strings.collapse : self.options.strings.expand)
+    },
+    options: {
+        strings: { expand: "Expand", collapse: "Collapse" },
+        trigger: ":header:first",     // selector of element to click to trigger collapse
+        triggerClass: "collapsible_trigger ui-state-default",
+        triggerHoverClass: "ui-state-hover",
+        parseid: function() { return this.attr("id") },
+        target: ".inner" // selector of element to collapse
+    }
+});
+})(jQuery);
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/js/jquery.postform.js
--- a/htdocs/js/jquery.postform.js	Thu Dec 22 18:12:05 2011 +0800
+++ b/htdocs/js/jquery.postform.js	Thu Dec 22 18:14:08 2011 +0800
@@ -443,6 +443,17 @@
     initCrosspost();
     initToolbar();
 
+    $.getJSON("/__rpc_entryformcollapse", null, function(data) {
+        var xhr = this;
+        $.ui.collapsible.cache = data;
+        // make all components collapsible
+        $("#post_entry .component").collapsible({ /*expanded: expanded[val],*/
+            parseid: function() { return this.attr("id").replace("_component","") },
+            endpointurl: xhr.url,
+            trigger: "h3" });
+    })
+
+
     // trigger all handlers associated with a journal selection
     if ( $("#usejournal").length == 1 ) {
         $("#usejournal").triggerHandler("change");
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/stc/base-colors-dark.css
--- a/htdocs/stc/base-colors-dark.css	Thu Dec 22 18:12:05 2011 +0800
+++ b/htdocs/stc/base-colors-dark.css	Thu Dec 22 18:14:08 2011 +0800
@@ -33,10 +33,6 @@
   color: #999;
   text-shadow: -1px 0 0 #777;
 }
-.component-header-hover {
-  background-color: #999;
-}
-
 .ui-widget-header {
   background-color:#727272;
   background-image: url();
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/stc/base-colors-light.css
--- a/htdocs/stc/base-colors-light.css	Thu Dec 22 18:12:05 2011 +0800
+++ b/htdocs/stc/base-colors-light.css	Thu Dec 22 18:14:08 2011 +0800
@@ -32,10 +32,6 @@
   color: #444;
   text-shadow: 1px 1px 0px #fff;
 }
-.component-header-hover {
-  background-color: #ccc;
-}
-
 .ui-widget-header {
   background-color:#F2F2F2;
   background-image: url();
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/stc/jquery.collapsible.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/stc/jquery.collapsible.css	Thu Dec 22 18:14:08 2011 +0800
@@ -0,0 +1,17 @@
+.collapsible_trigger.ui-state-default {
+  border: none;
+}
+
+.collapsible_trigger a {
+  display: block;
+  position: relative;
+  padding-right: 20px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.collapsible_trigger .ui-icon {
+  position: absolute;
+  right: 2px;
+  top: 0;
+}
diff -r 1989803b06cf -r 8a4c11cb2a00 htdocs/stc/postform.css
--- a/htdocs/stc/postform.css	Thu Dec 22 18:12:05 2011 +0800
+++ b/htdocs/stc/postform.css	Thu Dec 22 18:14:08 2011 +0800
@@ -311,7 +311,7 @@
 
 /* Display Dates */
 
-#displaydate_component .ui-icon {
+#displaydate_component .inner .ui-icon {
     float: left;
     margin-right: 0.5em;
 }
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/form.tt
--- a/views/entry/form.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/form.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -52,6 +52,10 @@
     "js/md5.js"
     "js/jquery.crosspost.js"
 
+    # collapsing
+    "js/jquery.collapsible.js"
+    "stc/jquery.collapsible.css"
+
     # page-specific
     "js/jquery.postform.js"
 ) -%]
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-access.tt
--- a/views/entry/module-access.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-access.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 -%]
 
     <fieldset>
-        <h3>[% ".header" | ml %]</h3>
+        <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
         <div class="inner">
         <div id="security_group">
             [%- securitylist = [];
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-age_restriction.tt
--- a/views/entry/module-age_restriction.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-age_restriction.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 -%]
 
   <fieldset>
-    <h3>[% ".header" | ml %]</h3>
+  <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
   <div class='inner'>
   <div class="age_level_reason">
     <p>
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-comments-new.tt
--- a/views/entry/module-comments-new.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-comments-new.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 -%]
 
   <fieldset class="comments_settings">
-    <h3>Comment Settings</h3>
+  <h3 class='ui-corner-top'>Comment Settings</h3>
   <div class='inner'>
   <p>
     <label class='unimplemented' for="comment_email">Email Comments:</label>
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-comments.tt
--- a/views/entry/module-comments.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-comments.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -14,7 +14,7 @@
 -%]
 
   <fieldset class="comments_settings">
-    <h3>[% ".header" | ml %]</h3>
+  <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
   <div class='inner'>
   <p>
     [%- form.select( label = "Comments:"
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-crosspost.tt
--- a/views/entry/module-crosspost.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-crosspost.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -15,7 +15,7 @@
 
 [% IF remote %]
   <fieldset>
-    <h3>[% ".header" | ml %]</h3>
+    <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
     <div class="inner">
 
     <span class="crosspost-settings">
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-currents.tt
--- a/views/entry/module-currents.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-currents.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -12,7 +12,7 @@
 'perldoc perlartistic' or 'perldoc perlgpl'.
 -%]
   <fieldset>
-    <h3>[% ".header" | ml %]</h3>
+    <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
     <div class='inner'>
       <p>
         [%- moodselect = [];
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-displaydate.tt
--- a/views/entry/module-displaydate.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-displaydate.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 -%]
 
   <fieldset>
-    <h3>[% ".header" | ml %]</h3>
+    <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
     <div class='inner'>
       <div class='time_container' id="entrytime_container">
         [%- form.hidden(
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-icons.tt
--- a/views/entry/module-icons.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-icons.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -14,7 +14,7 @@
 
 [% IF remote %]
 <fieldset>
-  <h3>[% ".header" | ml %]</h3>
+  <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
 
   <div class='inner'>
     <div id='icon_preview'>
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-journal.tt
--- a/views/entry/module-journal.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-journal.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 %]
 
  <fieldset>
-   <h3>[% ".header" | ml %]</h3>
+   <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
    <div class="inner">
 
    <div id="post_as">
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-scheduled.tt
--- a/views/entry/module-scheduled.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-scheduled.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 %]
 
 <fieldset>
-  <h3>Scheduled Publishing</h3>
+  <h3 class='ui-corner-top'>Scheduled Publishing</h3>
     <div class="inner">
     <div class='time_container' id="publishingtime_container">
       <input type="text" name="publishingtime" id="publishingtime" value="2010-04-10" maxlength="10" size="10" />
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-status.tt
--- a/views/entry/module-status.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-status.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 %]
 
   <fieldset>
-    <h3>Status</h3>
+    <h3 class='ui-corner-top'>Status</h3>
 
     <div class='inner'>
       <div class="status-notice">
diff -r 1989803b06cf -r 8a4c11cb2a00 views/entry/module-tags.tt
--- a/views/entry/module-tags.tt	Thu Dec 22 18:12:05 2011 +0800
+++ b/views/entry/module-tags.tt	Thu Dec 22 18:14:08 2011 +0800
@@ -13,7 +13,7 @@
 -%]
 
   <fieldset>
-    <h3>[% ".header" | ml %]</h3>
+    <h3 class='ui-corner-top'>[% ".header" | ml %]</h3>
     <div class="inner">
         [%- label = ".label.tags" | ml;
         form.textarea( label = label
--------------------------------------------------------------------------------
Flat | Top-Level Comments Only
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (badass)

[personal profile] ninetydegrees 2011-12-22 10:56 am (UTC)(link)
I won't lie. There was definitely some high-pitched squeeing when I saw this commit.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2011-12-22 11:46 am (UTC)(link)
Mwahahaha (\o/)
ninetydegrees: Art & Text: heart with aroace colors, "you are loved" (Default)

[personal profile] ninetydegrees 2011-12-22 12:51 pm (UTC)(link)
Oh and it looks so great!
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2011-12-22 12:58 pm (UTC)(link)
Eeeeh yay! :) That's very encouraging!
Flat | Top-Level Comments Only