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
--------------------------------------------------------------------------------
  • Add Memory
  • Share This Entry
(4 comments)

Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting

If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.