mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-08-05 14:17:49 +02:00
Code Issues Releases Wiki Activity

Admin area - checkbox field auto-toggle feature finished

Browse Source
This commit is contained in:
secretr
2008-12-11 11:25:21 +00:00
parent 187c5c547b
commit e50dd8d467
3 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
e107_admin/image.php
View File

@@ -9,8 +9,8 @@
* Image Administration Area
*
* $Source: /cvs_backup/e107_0.8/e107_admin/image.php,v $
* $Revision: 1.13 $
* $Date: 2008-12-10 23:46:47 $
* $Revision: 1.14 $
* $Date: 2008-12-11 11:25:21 $
* $Author: secretr $
*
*/
@@ -279,10 +279,7 @@ if (isset($_POST['show_avatars']))
if(is_dir(e_FILE."public/avatars/".$image_name))
{
//File info
$users = "<a class='e-tooltip' href='#' title='".IMALAN_69.": {$image_name}'><img src='".e_IMAGE_ABS."admin_images/docs_16.png' alt='".IMALAN_66.": {$image_name}' /></a> <span class='error'>".IMALAN_69."</span>";
// Control over the image size (design)
$image_size = getimagesize(e_FILE."public/avatars/".$image_name);
$users = "<a class='e-tooltip' href='#' title='".IMALAN_69.": {$image_name}'><img class='icon S16' src='".e_IMAGE_ABS."admin_images/docs_16.png' alt='".IMALAN_66.": {$image_name}' /></a> <span class='error'>".IMALAN_69."</span>";
//Friendly UI - click text to select a form element
$img_src = '<span class="error">'.IMALAN_70.'</span>';
@@ -303,14 +300,15 @@ if (isset($_POST['show_avatars']))
$img_src = "<a class='image-preview' href='".e_FILE_ABS."public/avatars/".rawurlencode($image_name)."' rel='external'>".IMALAN_57."</a>";
}
}
//style attribute allowed here - server side width/height control
//options class - used for JS selectors (see eCoreImage object)
//autocheck class - used for JS selectors (see eCoreImage object)
$text .= "
<div class='image-box f-left center options' style='width: ".(intval($pref['im_width'])+40)."px; height: ".(intval($pref['im_height'])+100)."px;'>
<div class='image-box f-left center autocheck' style='width: ".(intval($pref['im_width'])+40)."px; height: ".(intval($pref['im_height'])+100)."px;'>
<div class='spacer'>
<div class='image-users'>{$users}</div>
<div class='image-preview'>{$img_src}</div>
<div class='image-delete options'>
<div class='image-delete'>
<input type='checkbox' class='checkbox' id='image-action-{$count}' name='multiaction[]' value='{$row['user_id']}#{$image_pre}{$image_name}'{$disabled} />
</div>
@@ -441,7 +439,7 @@ if (isset($_POST['check_avatar_sizes']))
$found = true;
$text .= "
<tr>
<td class='options center'>
<td class='autocheck center'>
<input class='checkbox' type='checkbox' name='multiaction[]' id='avdelete-{$row['user_id']}' value='{$row['user_id']}' />
</td>
<td>
@@ -563,9 +561,11 @@ $text = "
<td class='label'>
".IMALAN_1."
</td>
<td class='options control'>
<input class='checkbox' type='checkbox' name='image_post' value='1'".($pref['image_post'] ? " checked='checked'" : '')." />
<div class='smalltext field-help'>".IMALAN_2."</div>
<td class='control'>
<div class='auto-toggle-area autocheck'>
<input class='checkbox' type='checkbox' name='image_post' value='1'".($pref['image_post'] ? " checked='checked'" : '')." />
<div class='smalltext field-help'>".IMALAN_2."</div>
</div>
</td>
</tr>
<tr>
@@ -614,9 +614,11 @@ $text = "
<tr>
<td class='label'>".IMALAN_34."
</td>
<td class='options control'>
<input type='checkbox' class='checkbox' name='enable_png_image_fix' value='1'".($pref['enable_png_image_fix'] ? " checked='checked'" : '')." />
<div class='smalltext field-help'>".IMALAN_35."</div>
<td class='control'>
<div class='auto-toggle-area autocheck'>
<input type='checkbox' class='checkbox' name='enable_png_image_fix' value='1'".($pref['enable_png_image_fix'] ? " checked='checked'" : '')." />
<div class='smalltext field-help'>".IMALAN_35."</div>
</div>
</td>
</tr>
@@ -653,7 +655,7 @@ if(!e_AJAX_REQUEST) require_once("footer.php");
function headerjs()
{
require_once(e_HANDLER.'js_helper.php');
//FIXME - how exactly to call JS lan?
//FIXME - how exactly to call JS lan?
$ret = "
<script type='text/javascript'>
//add required core lan

22
e107_files/jslib/core/admin.js
View File

@@ -8,8 +8,8 @@
* e107 Admin Helper
*
* $Source: /cvs_backup/e107_0.8/e107_files/jslib/core/admin.js,v $
* $Revision: 1.1 $
* $Date: 2008-12-10 23:46:47 $
* $Revision: 1.2 $
* $Date: 2008-12-11 11:25:21 $
* $Author: secretr $
*
*/
@@ -30,7 +30,7 @@ e107Admin.Helper = {
this.allCheckedEventHandler = this.allChecked.bindAsEventListener(this);
this.allUncheckedEventHandler = this.allUnchecked.bindAsEventListener(this);
$$('.options').invoke('observe', 'click', this.toggleCheckedHandler);
$$('.autocheck').invoke('observe', 'click', this.toggleCheckedHandler);
$$('button.action[name=check_all]').invoke('observe', 'click', this.allCheckedEventHandler);
$$('button.action[name=uncheck_all]').invoke('observe', 'click', this.allUncheckedEventHandler);
$$('button.delete').invoke('observe', 'click', function(e){ if( !e107Helper.confirm(e107.getModLan('delete_confirm')) ) e.stop(); });
@@ -42,17 +42,21 @@ e107Admin.Helper = {
* if e107Admin.Helper#init is executed
*
* Example:
* <div class='options'>
* <div class='autocheck'>
* <input type='checkbox' class='checkbox' />
* <div class='smalltext field-help'>Inline Help Text</div>
* </div>
* OR
* <td class='options control'>
* <input class='checkbox' type='checkbox' />
* <div class='smalltext field-help'>Inline Help Text</div>
* <td class='control'>
* <div class='auto-toggle-area autocheck'>
* <input class='checkbox' type='checkbox' />
* <div class='smalltext field-help'>Inline Help Text</div>
* </div>
* </td>
* Note: The important part are classes 'options' and 'checkbox'.
* Note: The important part are classes 'autocheck' and 'checkbox'.
* Container tagName is not important (everything is valid)
* 'auto-toggle-area' class should be defined by the admin theme
* to control the e.g. width of the auto-toggle clickable area
*
* Demo: e107_admin/image.php
*
@@ -65,7 +69,7 @@ e107Admin.Helper = {
event.stop();
//checkbox container element
var element = event.findElement('.options'), check = null;
var element = event.findElement('.autocheck'), check = null;
if(element) {
check = element.select('input.checkbox'); //search for checkbox
}

2
e107_themes/_blank/admin_style.css
View File

@@ -118,7 +118,9 @@ select.tbox { min-height:17px; padding: 0px; /* to set the height for empty sel
#core-emoticon-configure input.input-text { width: 300px; }
.select.order { width: 40px; }
/* Related JS functionality - .autocheck together with .auto-toggle-area (see admin/image.php) */
.inline-help { width: 280px; }
.auto-toggle-area { width: 280px; }
/* form used for settings */
.col-label { width: 250px; }