fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-11-29 01:27 pm
  • Add Memory
  • Share This Entry

[dw-free] jQuerify icon browser

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

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

Use the new icon browser.

Patch by [personal profile] fu.

Files modified:
  • cgi-bin/DW/BetaFeatures/journaljquery.pm
  • cgi-bin/LJ/S2/EntryPage.pm
  • cgi-bin/LJ/S2/ReplyPage.pm
  • cgi-bin/LJ/Talk.pm
  • cgi-bin/LJ/Web.pm
  • htdocs/js/jquery.iconselector.js
  • views/dev/tests/iconselector.html
  • views/dev/tests/iconselector.js
--------------------------------------------------------------------------------
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 cgi-bin/DW/BetaFeatures/journaljquery.pm
--- a/cgi-bin/DW/BetaFeatures/journaljquery.pm	Mon Nov 28 12:47:24 2011 -0600
+++ b/cgi-bin/DW/BetaFeatures/journaljquery.pm	Tue Nov 29 21:23:34 2011 +0800
@@ -18,7 +18,7 @@
 
 sub args_list {
     my @implemented = (
-        "Cut expand and collapse",
+        "Cut expand and collapse (basic)",
         "Logging in",
         "Screen/freeze/delete",
         "Control strip injection for non-supporting journals",
@@ -27,11 +27,12 @@
         "Same-page poll submission",
         "Media embed placeholder expansion",
         "Contextual hover",
+        "Icon browser",
     );
 
     my @notimplemented = (
-        "Icon browser",
         "Same-page comment tracking",
+        "Some features for the cut expand/collapse",
     );
 
     return (
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 cgi-bin/LJ/S2/EntryPage.pm
--- a/cgi-bin/LJ/S2/EntryPage.pm	Mon Nov 28 12:47:24 2011 -0600
+++ b/cgi-bin/LJ/S2/EntryPage.pm	Tue Nov 29 21:23:34 2011 +0800
@@ -76,7 +76,7 @@
     $p->{head_content} .= LJ::canonical_link( $permalink, $get->{thread} );
 
     # quickreply js libs
-    LJ::need_res( LJ::Talk::init_iconbrowser_js( 'stc/lj_base.css' ) )
+    LJ::need_res( LJ::Talk::init_iconbrowser_js( LJ::BetaFeatures->user_in_beta( LJ::get_remote() => "journaljquery" ) ? 'stc/jquery/jquery.ui.theme.smoothness.css' : 'stc/lj_base.css' ) )
         if $remote && $remote->can_use_userpic_select;
 
     LJ::need_res(qw(
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 cgi-bin/LJ/S2/ReplyPage.pm
--- a/cgi-bin/LJ/S2/ReplyPage.pm	Mon Nov 28 12:47:24 2011 -0600
+++ b/cgi-bin/LJ/S2/ReplyPage.pm	Tue Nov 29 21:23:34 2011 +0800
@@ -63,7 +63,7 @@
     LJ::need_res('stc/display_none.css');
     
     # libs for userpicselect
-    LJ::need_res( LJ::Talk::init_iconbrowser_js() )
+    LJ::need_res( LJ::Talk::init_iconbrowser_js( LJ::BetaFeatures->user_in_beta( LJ::get_remote() => "journaljquery" ) ? 'stc/jquery/jquery.ui.theme.smoothness.css' : 'stc/lj_base.css' ) )
         if $remote && $remote->can_use_userpic_select;
 
     if ($u->should_block_robots || $entry->should_block_robots) {
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 cgi-bin/LJ/Talk.pm
--- a/cgi-bin/LJ/Talk.pm	Mon Nov 28 12:47:24 2011 -0600
+++ b/cgi-bin/LJ/Talk.pm	Tue Nov 29 21:23:34 2011 +0800
@@ -2115,8 +2115,7 @@
         # userpic browse button
         if ( $remote && $remote->can_use_userpic_select ) {
             $ret .= '<input type="button" id="lj_userpicselect" value="Browse" />';
-            $ret .= LJ::Talk::js_iconbrowser_button()
-                unless LJ::BetaFeatures->user_in_beta( $remote => "journaljquery" );
+            $ret .= LJ::Talk::js_iconbrowser_button();
         }
 
         # random icon button - hidden for non-JS
@@ -2134,7 +2133,26 @@
 sub init_iconbrowser_js {
     my @additional = @_;
 
-    my @list = (
+    my $beta = LJ::BetaFeatures->user_in_beta( LJ::get_remote() => "journaljquery" );
+    my @list = $beta
+    ? (
+        { group => 'jquery' },
+        # base libraries
+        'js/jquery/jquery.ui.core.js',
+        'js/jquery/jquery.ui.widget.js',
+        'stc/jquery/jquery.ui.core.css',
+
+        # for the formatting of the icon selector popup
+        'js/jquery/jquery.ui.dialog.js',
+        'stc/jquery/jquery.ui.dialog.css',
+
+        # logic for the icon selector
+        'js/jquery.iconselector.js',
+        'stc/jquery.iconselector.css',
+
+        # additional files from arguments
+        @additional,
+    ) : (
         # base libraries
         'js/core.js',
         'js/dom.js',
@@ -2163,7 +2181,16 @@
 
 # generate the javascript code for the icon browser
 sub js_iconbrowser_button {
-    return qq {
+    return LJ::BetaFeatures->user_in_beta( LJ::get_remote() => "journaljquery" )
+    ?   qq {
+        <script type="text/javascript">
+        jQuery(function(jQ){
+            jQ("#prop_picture_keyword").iconselector({
+                selectorButtons: "#lj_userpicselect"
+            });
+        })
+        </script>
+    } : qq {
         <script type="text/javascript" language="JavaScript">
         DOM.addEventListener(window, "load", function (evt) {
             // attach userpicselect code to userpicbrowse button
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 cgi-bin/LJ/Web.pm
--- a/cgi-bin/LJ/Web.pm	Mon Nov 28 12:47:24 2011 -0600
+++ b/cgi-bin/LJ/Web.pm	Tue Nov 29 21:23:34 2011 +0800
@@ -1034,8 +1034,7 @@
 
     $ret .= "\n</script>";
 
-    $ret .= LJ::Talk::js_iconbrowser_button()
-        if $remote->can_use_userpic_select && ! LJ::BetaFeatures->user_in_beta( $remote => "journaljquery" );;
+    $ret .= LJ::Talk::js_iconbrowser_button() if $remote->can_use_userpic_select;
 
     return $ret;
 }
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 htdocs/js/jquery.iconselector.js
--- a/htdocs/js/jquery.iconselector.js	Mon Nov 28 12:47:24 2011 -0600
+++ b/htdocs/js/jquery.iconselector.js	Tue Nov 29 21:23:34 2011 +0800
@@ -15,7 +15,7 @@
                 });
         }
 
-        return $(this).wrap("<div class='iconselect_trigger_wrapper'></div>");
+        return $(this).wrap("<span class='iconselect_trigger_wrapper'></span>");
     };
 
     // selected icon
@@ -193,7 +193,8 @@
             $(":input", $.fn.iconselector.instance).attr("disabled", "true");
             $("#iconselector_search", $.fn.iconselector.instance).bind("keyup", _filterPics);
 
-            $.getJSON(Site.siteroot + "/tools/endpoints/getuserpics",
+            var url = Site.currentJournalBase ? "/" + Site.currentJournal + "/__rpc_userpicselect" : "/__rpc_userpicselect";
+            $.getJSON(url,
                 function(data) {
                     if ( !data ) {
                         $("#iconselector_icons").html("<h2>Error</h2><p>Unable to load icons data</p>");
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 views/dev/tests/iconselector.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/dev/tests/iconselector.html	Tue Nov 29 21:23:34 2011 +0800
@@ -0,0 +1,4 @@
+<select>
+</select><!-- normally populated by the backend -->
+
+<input id="browse-icons" value="Browse" type="button" />
diff -r 9f92be0f0cdc -r cf3b5f17e1f8 views/dev/tests/iconselector.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/dev/tests/iconselector.js	Tue Nov 29 21:23:34 2011 +0800
@@ -0,0 +1,72 @@
+/* INCLUDE:
+jquery: js/jquery/jquery.ui.core.js
+jquery: js/jquery/jquery.ui.widget.js
+jquery: js/jquery/jquery.ui.dialog.js
+jquery: js/jquery.iconselector.js
+*/
+
+module( "old" );
+test( "no corresponding old function", 0, function() {
+});
+
+module( "jquery" );
+test( "initialize iconselector", 4, function() {
+    // setup callback
+    var server = sinon.sandbox.useFakeServer();
+
+    var icons = {
+        "pics": {},
+        "ids" : []
+    };
+    var data = [
+        {
+            "id"     : 1,
+            "url"    : "/img/ajax-loader.gif",
+            "state"  : "A",
+            "width"  : 16,
+            "height" : 16,
+            "alt"    : "swirling loading icon",
+            "comment": "by ...",
+            "keywords": ["loading", "animated"]
+        }
+    ];
+    var keywords = [ "" ];
+    for ( var i = 0; i < data.length; i++ ) {
+        var icon = data[i];
+        icons.pics[icon.id] = icon;
+        icons.ids.push( icon.id )
+
+        for ( var k = 0; k < icon.keywords.length; k++ ) {
+            keywords.push(icon.keywords[k]);
+        }
+    }
+
+    server.respondWith( /userpicselect/, [
+        200,
+        {},
+        JSON.stringify(icons)
+    ] );
+
+    var $select = $("select");
+    $.map(keywords, function(keyword) {
+        $("<option></option>").val(keyword).text(keyword).appendTo($select)
+    })
+    equals( $select.val(), "", "currently selected the first item in the dropdown (blank)" )
+
+    // setup the icon selector
+    var selectCount = 0;
+    $select.iconselector({
+        selectorButtons: "#browse-icons",
+        onSelect: function() { selectCount++ }
+    });
+
+    $("#browse-icons").click();
+    server.respond();
+
+    $("#iconselector_icons .keyword:contains('animated')").click();
+    equals( $select.val(), "", "one click doesn't do anything");
+
+    $("#iconselector_icons .keyword:contains('animated')").dblclick();
+    equals( $select.val(), "animated", "two clicks selects");
+    equals( selectCount, 1, "select done once");
+} )
--------------------------------------------------------------------------------