[geeklog-hg] geeklog: Fixed the topic control UI, and improved usability

geeklog-cvs at lists.geeklog.net geeklog-cvs at lists.geeklog.net
Sat Feb 15 01:33:12 EST 2014 

changeset 9491:d20b1a5c7dd7
url:  http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/d20b1a5c7dd7
user: dengen <taharaxp at gmail.com>
date: Sat Feb 15 15:30:36 2014 +0900
description:
Fixed the topic control UI, and improved usability

* Fixed the problem that radio option selector does not work correctly.
* Modified template (added the label tags) for improving usability.
* Added feature, if selected tid is only one, set default tid to that value.
* Improved the interactivity of the user interface.

diffstat:

 language/japanese_utf-8.php                                        |    2 +-
 public_html/javascript/topic_control.js                            |  144 ++++++---
 public_html/layout/denim/admin/common/edit_topics.thtml            |    4 +-
 public_html/layout/modern_curve/admin/common/edit_topics.thtml     |    4 +-
 public_html/layout/professional/admin/common/edit_topics.thtml     |    4 +-
 public_html/layout/professional_css/admin/common/edit_topics.thtml |    4 +-
 system/lib-topic.php                                               |   29 +-
 7 files changed, 119 insertions(+), 72 deletions(-)

diffs (truncated from 314 to 300 lines):

diff -r ce854d9eec04 -r d20b1a5c7dd7 language/japanese_utf-8.php
--- a/language/japanese_utf-8.php	Fri Feb 14 23:32:21 2014 +0900
+++ b/language/japanese_utf-8.php	Sat Feb 15 15:30:36 2014 +0900
@@ -1002,7 +1002,7 @@
     39 => 'ホームページのみ',
     40 => '1つ以上の話題を割り当ててください。',
     41 => '"すべて" を選ぶと、そのアイテムはすべての話題に表示します。"ホームページのみ"を選ぶと、ホームページだけに表示します。それ以外の場合は少なくとも1つ以上の話題を選択してください。 ',
-    42 => '継承の欄は割り当てられている話題のリストを含んでいます。話題を選択すると、その話題の親の話題に継承されます。継承の欄に表示するには、å
ˆã«ã‚¢ã‚¤ãƒ†ãƒ ã‚’保存またはプレビューしなければなりません。',
+    42 => '継承の欄は割り当てられている話題のリストを含んでいます。話題を選択すると、その話題の親の話題に継承されます。',
     43 => 'デフォルトは、割り当てた話題のリストを含んでいます。これは、ユーザーが実際の話題をみつけられないときに、アイテムを表示する時に使用するデフォルトの話題です。',
     44 => '継承',
     45 => 'デフォルト',
diff -r ce854d9eec04 -r d20b1a5c7dd7 public_html/javascript/topic_control.js
--- a/public_html/javascript/topic_control.js	Fri Feb 14 23:32:21 2014 +0900
+++ b/public_html/javascript/topic_control.js	Sat Feb 15 15:30:36 2014 +0900
@@ -4,66 +4,86 @@
 // On all radio selected, clear selection of tids
 $('#topic_option_all').change( function () {
     // Clear all selections
-    $('select#tid option').attr('selected',false);
+    $('select#tid option').attr('selected', false);
 });
 // On homeonly radio option selected, clear selection of tids
 $('#topic_option_homeonly').change( function () {
     // Clear all selections
-    $('select#tid option').attr('selected',false);
+    $('select#tid option').attr('selected', false);
 });
-        
+// On radio option changed, change topic control display
+$('input[name="topic_option"]').change( function () {
+    changeTopicControlDisplay();
+});
 
 $('#tid').change( function () {
-    
-    if($("#panel_radio_options").is(':visible')) {
+
+    if($('#panel_radio_options').is(':visible')) {
         // On selecting a tid make sure selecttopics radio option is selected
-        $('#topic_option_selectedtopics').attr('checked',true);
-        $('#topic_option_all').attr('checked',false);
-        $('#topic_option_homeonly').attr('checked',false);        
+        $('#topic_option_selectedtopics').click();
+    }
+
+    changeTopicControlDisplay();
+
+    // *********************************************
+    // Inherited tids Multi-Selection Box
+    // Get all selected tids and the not selected inherited
+    var options_inherited = $('select#tid option:selected').sort().clone();
+    var options_inherited_not_selected = $('select#inherit_tid option:not(:selected)').sort().clone();
+
+    // Cleanup tids and trim spaces and select everything
+    $(options_inherited).each(function(){
+        $(this).text($.trim($(this).text()));
+        $(this).attr('selected', true);
+    });
+
+    // Now add in inherited
+    $('select#inherit_tid')
+        .empty()
+        .append(options_inherited)
+        .sortSelect();
+
+    // Now deselect anything that has been before
+    $(options_inherited_not_selected).each(function(){
+        $("#inherit_tid option[value='" + $(this).val() + "']").attr('selected', false);
+    });
+
+    // *********************************************
+    // Default tid Selection Box
+    // Figure out Default tid. Grab all selected tids
+    var options_default = $('select#tid option:selected').sort().clone();
+
+    // Trim spaces and find which one was selected before if it still exists and select it again
+    $(options_default).each(function(){
+        $(this).text($.trim($(this).text()));
+    });
+
+    var select_default_tid = $('select#default_tid');
+
+    // Grab previous selection
+    var prev_default_tid = select_default_tid.val();
+
+    select_default_tid
+        .empty()
+        .append(options_default)
+        .sortSelect();
+
+    // Initialize Selection Box
+    options_default = select_default_tid.children();
+    options_default.attr('selected', false);
+    select_default_tid.val('');
+
+    // If the option is only one, set to that value
+    if (options_default.size() == 1) {
+        options_default.eq(0).attr('selected', true);
+        select_default_tid.val(options_default.eq(0).val());
     } else {
-        // *********************************************
-        // Inherited tids Multi-Selection Box
-        // Get all selected tids and the not selected inherited
-        var options_inherited = $('select#tid option:selected').sort().clone();
-        var options_inherited_not_selected = $('select#inherit_tid option:not(:selected)').sort().clone();
-        
-        // Cleanup tids and trim spaces and select everything
-        $(options_inherited).each(function(){
-            $(this).text($.trim($(this).text()));
-            $(this).attr('selected', true);
-        });
-       
-        // Now add in inherited
-        $('select#inherit_tid').empty();
-        $('select#inherit_tid').append(options_inherited);
-        $('select#inherit_tid').sortSelect();
-        
-        // Now deselect anything that has been before
-        $(options_inherited_not_selected).each(function(){
-                $("#inherit_tid option[value='"+$(this).val()+"']").attr("selected",false);
-        });    
-    
-    
-        // *********************************************
-        // Default tid Selection Box
-        // Figure out Default tid. Grab all selected tids
-        var options_default = $('select#tid option:selected').sort().clone();
-        // Grab previous selection
-        var option_default_tid = $('select#default_tid option:selected').sort().clone();
-        
-        // Trim spaces and find which one was selected before if it still exists and select it again
-        $(options_default).each(function(){
-            $(this).text($.trim($(this).text()));
-        });    
-        
-        $('select#default_tid').empty();
-        $('select#default_tid').append(options_default);
-         $('select#default_tid').sortSelect();
-        
-        // Clear all selections
-        $('select#default_tid option').attr('selected',false);
         // Set Selection as before if still exist
-        $('#default_tid').val($(option_default_tid).val());
+        var last_option = options_default.filter('[value="' + prev_default_tid + '"]');
+        if (last_option.size() == 1) {
+            last_option.attr('selected', true);
+            select_default_tid.val(prev_default_tid);
+        }
     }
 });
 
@@ -75,3 +95,27 @@
     })
     return this.empty().append(op);
 }
+
+// Change topic control display
+function changeTopicControlDisplay() {
+    var $display = ($('#tid option:selected').size() == 0)
+                 ? 'none' : 'inline-block';
+    if ($('#panel_radio_options').is(':visible') &&
+        !$('#topic_option_selectedtopics').is(':checked')) {
+        $display = 'none';
+    }
+    $inherit = 'none';
+    if ($('input[name="topic_inherit_hide"]').val() == 0) {
+        $inherit = $display;
+    }
+    $defalut = 'none';
+    if ($('input[name="topic_default_hide"]').val() == 0) {
+        $defalut = $display;
+    }
+    $('#panel_inherit_options').css('display', $inherit);
+    $('#panel_default_options').css('display', $defalut);
+}
+
+$(function() {
+    changeTopicControlDisplay();
+});
diff -r ce854d9eec04 -r d20b1a5c7dd7 public_html/layout/denim/admin/common/edit_topics.thtml
--- a/public_html/layout/denim/admin/common/edit_topics.thtml	Fri Feb 14 23:32:21 2014 +0900
+++ b/public_html/layout/denim/admin/common/edit_topics.thtml	Sat Feb 15 15:30:36 2014 +0900
@@ -2,8 +2,8 @@
 
 <div id="panel_radio_options" style="vertical-align:top;display:inline-block;{options_hide}">
     <input type="hidden" name="topic_options_hide" value="{topic_options_hide}"{xhtml}>
-    <input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}
-    <input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}
+    <label><input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}</label>
+    <label><input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}</label>
     <span style="{topic_option_hide}"><input type="radio" name="topic_option" id="topic_option_selectedtopics" value="selectedtopics" {selectedtopics_checked}{xhtml}></span>
 </div>
 <div id="panel_topic_options" style="vertical-align:top;display:inline-block;{topic_hide}">
diff -r ce854d9eec04 -r d20b1a5c7dd7 public_html/layout/modern_curve/admin/common/edit_topics.thtml
--- a/public_html/layout/modern_curve/admin/common/edit_topics.thtml	Fri Feb 14 23:32:21 2014 +0900
+++ b/public_html/layout/modern_curve/admin/common/edit_topics.thtml	Sat Feb 15 15:30:36 2014 +0900
@@ -2,8 +2,8 @@
 
 <div id="panel_radio_options" style="vertical-align:top;display:inline-block;{options_hide}">
     <input type="hidden" name="topic_options_hide" value="{topic_options_hide}"{xhtml}>
-    <input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}
-    <input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}
+    <label><input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}</label>
+    <label><input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}</label>
     <span style="{topic_option_hide}"><input type="radio" name="topic_option" id="topic_option_selectedtopics" value="selectedtopics" {selectedtopics_checked}{xhtml}></span>
 </div>
 <div id="panel_topic_options" style="vertical-align:top;display:inline-block;{topic_hide}">
diff -r ce854d9eec04 -r d20b1a5c7dd7 public_html/layout/professional/admin/common/edit_topics.thtml
--- a/public_html/layout/professional/admin/common/edit_topics.thtml	Fri Feb 14 23:32:21 2014 +0900
+++ b/public_html/layout/professional/admin/common/edit_topics.thtml	Sat Feb 15 15:30:36 2014 +0900
@@ -2,8 +2,8 @@
 
 <div id="panel_radio_options" style="vertical-align:top;display:inline-block;{options_hide}">
     <input type="hidden" name="topic_options_hide" value="{topic_options_hide}"{xhtml}>
-    <input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}
-    <input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}
+    <label><input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}</label>
+    <label><input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}</label>
     <span style="{topic_option_hide}"><input type="radio" name="topic_option" id="topic_option_selectedtopics" value="selectedtopics" {selectedtopics_checked}{xhtml}></span>
 </div>
 <div id="panel_topic_options" style="vertical-align:top;display:inline-block;{topic_hide}">
diff -r ce854d9eec04 -r d20b1a5c7dd7 public_html/layout/professional_css/admin/common/edit_topics.thtml
--- a/public_html/layout/professional_css/admin/common/edit_topics.thtml	Fri Feb 14 23:32:21 2014 +0900
+++ b/public_html/layout/professional_css/admin/common/edit_topics.thtml	Sat Feb 15 15:30:36 2014 +0900
@@ -2,8 +2,8 @@
 
 <div id="panel_radio_options" style="vertical-align:top;display:inline-block;{options_hide}">
     <input type="hidden" name="topic_options_hide" value="{topic_options_hide}"{xhtml}>
-    <input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}
-    <input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}
+    <label><input type="radio" name="topic_option" value="all" id="topic_option_all" {all_checked}{xhtml}> {lang_all}</label>
+    <label><input type="radio" name="topic_option" value="homeonly" id="topic_option_homeonly" {homeonly_checked}{xhtml}> {lang_homeonly}</label>
     <span style="{topic_option_hide}"><input type="radio" name="topic_option" id="topic_option_selectedtopics" value="selectedtopics" {selectedtopics_checked}{xhtml}></span>
 </div>
 <div id="panel_topic_options" style="vertical-align:top;display:inline-block;{topic_hide}">
diff -r ce854d9eec04 -r d20b1a5c7dd7 system/lib-topic.php
--- a/system/lib-topic.php	Fri Feb 14 23:32:21 2014 +0900
+++ b/system/lib-topic.php	Sat Feb 15 15:30:36 2014 +0900
@@ -923,11 +923,11 @@
         $topic_templates->set_var('topic_options', $topiclist);
     }
     
-    // If no topic selection then do not show inherit or default
-    if (empty($tids)) {
-        $show_inherit = false;
-        $show_default = false;
-    }
+//    // If no topic selection then do not show inherit or default
+//    if (empty($tids)) {
+//        $show_inherit = false;
+//        $show_default = false;
+//    }
     
     if ($show_options) {
         $topic_templates->set_var('lang_all', $LANG27[38]);
@@ -939,15 +939,15 @@
             $topic_templates->set_var('homeonly_checked', '');
             $topic_templates->set_var('selectedtopics_checked', '');
             
-            $show_inherit = false;
-            $show_default = false;            
+//            $show_inherit = false;
+//            $show_default = false;            
         } elseif ($topic_option == TOPIC_HOMEONLY_OPTION) {
             $topic_templates->set_var('all_checked', '');
             $topic_templates->set_var('homeonly_checked', 'checked="checked"');
             $topic_templates->set_var('selectedtopics_checked', '');
 
-            $show_inherit = false;
-            $show_default = false;            
+//            $show_inherit = false;
+//            $show_default = false;            
         } else{
             $topic_templates->set_var('homeonly_checked', '');
             
@@ -969,8 +969,11 @@
         return '';
     }
    
+    $topic_templates->set_var('lang_inherit', $LANG27[44]);
+    $topic_templates->set_var('lang_default', $LANG27[45]);
+
     if ($show_inherit) {
-        $topic_templates->set_var('lang_inherit', $LANG27[44]);
+//        $topic_templates->set_var('lang_inherit', $LANG27[44]);
         $topic_templates->set_var('topic_inherit_hide', '0');
         $topic_info .= $LANG27[42];
         if ($from_db) {
@@ -979,13 +982,13 @@
             $topic_templates->set_var('inherit_options', TOPIC_getOtherListSelect($type, $id, $inherit_tids, $tids));
         }
     } else {
-        $topic_templates->set_var('inherit_hide', 'display: none;');
+//        $topic_templates->set_var('inherit_hide', 'display: none;');
         $topic_templates->set_var('topic_inherit_hide', '1');
         $topic_templates->set_var('inherit_options', '<option value="dummy">dummy</option>');
     }
     
     if ($show_default) {

More information about the geeklog-cvs mailing list