Changeset 5067


Ignore:
Timestamp:
03/06/10 23:10:23 (10 years ago)
Author:
plg
Message:

feature 724: improved "add tags" form. Instead of a big list of checkboxes,
displays a dynamic list of tags with jQuery, with suggestions based on
existing tags and the ability to create new tags on the fly.

The change was applied only on admin/picture_modify.php for test purpose.

Note : FCBKcomplete 2.7 had a bug on "remote tag" click, and the bug was fixed
on 2.7.1. But the suggestions were not working with 2.7.1. So I took the 2.7
and applied the tiny change to make the "remove tag" click work.

Location:
trunk
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin.php

    r5014 r5067  
    3434// +-----------------------------------------------------------------------+ 
    3535check_status(ACCESS_ADMINISTRATOR); 
     36 
     37// tags 
     38if (isset($_GET['fckb_tags'])) 
     39{ 
     40  $query = ' 
     41SELECT 
     42    id, 
     43    name 
     44  FROM '.TAGS_TABLE.' 
     45;'; 
     46  $result = pwg_query($query); 
     47  $taglist = array(); 
     48  while ($row = pwg_db_fetch_assoc($result)) 
     49  { 
     50    array_push( 
     51      $taglist, 
     52      array( 
     53        'caption' => $row['name'], 
     54        'value' => '~~'.$row['id'].'~~', 
     55        ) 
     56      ); 
     57  } 
     58  echo json_encode($taglist); 
     59  exit(); 
     60} 
    3661 
    3762// +-----------------------------------------------------------------------+ 
  • trunk/admin/picture_modify.php

    r5021 r5067  
    107107    ); 
    108108 
     109  // In $_POST[tags] we receive something like array('~~6~~', '~~59~~', 'New 
     110  // tag', 'Another new tag') The ~~34~~ means that it is an existing 
     111  // tag. I've added the surrounding ~~ to permit creation of tags like "10" 
     112  // or "1234" (numeric characters only) 
     113  $tag_ids = array(); 
     114  if (isset($_POST['tags'])) 
     115  { 
     116    foreach ($_POST['tags'] as $raw_tag) 
     117    { 
     118      if (preg_match('/^~~(\d+)~~$/', $raw_tag, $matches)) 
     119      { 
     120        array_push($tag_ids, $matches[1]); 
     121      } 
     122      else 
     123      { 
     124        // we have to create a new tag 
     125        array_push( 
     126          $tag_ids,  
     127          tag_id_from_tag_name($raw_tag) 
     128          ); 
     129      } 
     130    } 
     131  } 
     132   
    109133  set_tags( 
    110     isset($_POST['tags']) ? $_POST['tags'] : array(), 
     134    $tag_ids, 
    111135    $_GET['image_id'] 
    112136    ); 
     
    170194} 
    171195 
     196// tags 
     197$tags = array(); 
     198 
     199$query = ' 
     200SELECT 
     201    tag_id, 
     202    name 
     203  FROM '.IMAGE_TAG_TABLE.' AS it 
     204    JOIN '.TAGS_TABLE.' AS t ON t.id = it.tag_id 
     205  WHERE image_id = '.$_GET['image_id'].' 
     206;'; 
     207$result = pwg_query($query); 
     208while ($row = pwg_db_fetch_assoc($result)) 
     209{ 
     210  array_push( 
     211    $tags, 
     212    array( 
     213      'value' => '~~'.$row['tag_id'].'~~', 
     214      'caption' => $row['name'], 
     215      ) 
     216    ); 
     217} 
     218 
    172219// retrieving direct information about picture 
    173220$query = ' 
     
    185232 
    186233$image_file = $row['file']; 
    187  
    188 // tags 
    189 $query = ' 
    190 SELECT tag_id 
    191   FROM '.IMAGE_TAG_TABLE.' 
    192   WHERE image_id = '.$_GET['image_id'].' 
    193 ;'; 
    194 $selected_tags = array_from_query($query, 'tag_id'); 
    195234 
    196235// +-----------------------------------------------------------------------+ 
     
    204243  ); 
    205244 
    206 $all_tags = get_all_tags(); 
    207  
    208 if (count($all_tags) > 0) 
    209 { 
    210   $tag_selection = get_html_tag_selection( 
    211     $all_tags, 
    212     'tags', 
    213     $selected_tags 
    214     ); 
    215 } 
    216 else 
    217 { 
    218   $tag_selection = 
    219     '<p>'. 
    220     l10n('No tag defined. Use Administration>Pictures>Tags'). 
    221     '</p>'; 
    222 } 
    223  
    224245$template->assign( 
    225246  array( 
     247    'tags' => $tags, 
    226248    'U_SYNC' => 
    227249        get_root_url().'admin.php?page=picture_modify'. 
     
    245267 
    246268    'AUTHOR' => isset($_POST['author']) ? $_POST['author'] : @$row['author'], 
    247  
    248     'TAG_SELECTION' => $tag_selection, 
    249269 
    250270    'DESCRIPTION' => 
  • trunk/admin/template/goto/default-layout.css

    r3283 r5067  
    456456        cursor : pointer; 
    457457} 
     458 
     459/* jQuery FCBKcomplete */ 
     460/* TextboxList sample CSS */ 
     461ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; } 
     462*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */ 
     463ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;} 
     464ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; } 
     465ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; } 
     466ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } 
     467ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */ 
     468ul.holder li.bit-input input.smallinput { width: 20px; } 
     469 
     470/* Facebook demo CSS */       
     471#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; } 
     472form ol li { list-style-type: none; } 
     473form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; } 
     474form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; } 
     475form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; } 
     476form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; } 
     477form ul.holder { width: 500px; } 
     478form ul { margin: 0 !important } 
     479ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;} 
     480#apple-list ul.holder li.bit-input { margin: 0; } 
     481#apple-list ul.holder li.bit-input input.smallinput { width: 5px; } 
     482ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; } 
     483ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; } 
     484ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url(icon/fcbkcomplete_close.gif); } 
     485ul.holder li.bit-box a.closebutton:hover { background-position: 7px; } 
     486ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; } 
     487 
     488/* Autocompleter */ 
     489 
     490.facebook-auto { display: none; position: absolute; width: 512px; background: #eee; } 
     491.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; } 
     492.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999} 
     493.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee } 
     494.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; } 
     495.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; } 
     496.facebook-auto ul li.auto-focus em { background: none; } 
     497.deleted { background-color:#4173CC !important; color:#ffffff !important;} 
     498.hidden { display:none;} 
     499 
     500#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; } 
     501.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;} 
  • trunk/admin/template/goto/picture_modify.tpl

    r5021 r5067  
    1  
    21{include file='include/autosize.inc.tpl'} 
    32{include file='include/dbselect.inc.tpl'} 
    43{include file='include/datepicker.inc.tpl'} 
     4 
     5{known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.fcbkcomplete.js"} 
     6{literal} 
     7<script type="text/javascript"> 
     8  $(document).ready(function() { 
     9    $("#tags").fcbkcomplete({ 
     10      json_url: "admin.php?fckb_tags=1", 
     11      cache: false, 
     12      filter_case: true, 
     13      filter_hide: true, 
     14      firstselected: true, 
     15      filter_selected: true, 
     16      maxitems: 10, 
     17      newel: true 
     18    }); 
     19  }); 
     20</script> 
     21{/literal} 
    522 
    623{literal} 
     
    120137      <tr> 
    121138        <td><strong>{'Tags'|@translate}</strong></td> 
    122         <td>{$TAG_SELECTION}</td> 
     139        <td> 
     140<select id="tags" name="tags"> 
     141{foreach from=$tags item=tag} 
     142  <option value="{$tag.value}" class="selected">{$tag.caption}</option> 
     143{/foreach} 
     144</select> 
     145        </td> 
    123146      </tr> 
    124147 
Note: See TracChangeset for help on using the changeset viewer.