Posts: 535
Threads: 31
Joined: Jul 2010
This is a planned feature for version 1.4. So far it's still quite undeveloped. What currently is done:
"comments/Admin/index.php" Extra (uncommented) javascript:
PHP Code:
<?php
<!-- Javascript BBCode tags would be a plus. This part has the main changes so far. -->
<script type="text/javascript">
document.onkeydown = checkShift;
document.onkeyup = checkUpShift;
var shiftKey = 0;
var lastCommentId = -1;
function checkShift(e) {
if(e.which == 16){shiftKey = 1;}
}
function checkUpShift(e) {
if(e.which == 16){shiftKey = 0;}
}
function get_checkboxes() {
var checks = document.getElementsByName('selectbox');
var checked = new String();
for(i = 0; i < checks.length; i++)
{
if(checks[i].checked == 1)
{
checked += checks[i].value+" | ";
}
}
alert(checked);
return false;
}
</script>
<script type="text/javascript">
function invert_checks(check) {
if(shiftKey && lastCommentId != -1) {
var boxes = document.getElementsByName('selectbox');
for(i = 0; i < boxes.length; i++) {
if(parseInt(boxes[i].id) >= parseInt(check.id) && parseInt(boxes[i].id) < lastCommentId){boxes[i].checked = boxes[lastCommentId].checked;/*!boxes[i].checked;*/ continue;}
if(parseInt(boxes[i].id) <= parseInt(check.id) && parseInt(boxes[i].id) > lastCommentId){boxes[i].checked = boxes[lastCommentId].checked;/*!boxes[i].checked;*/ continue;}
}
}
lastCommentId = parseInt(check.id);
}
</script>
The main test page "comments/Admin/includes/pages/manage_comments.php"
PHP Code:
<?php
<!-- put this above the table tag. This part is yet unfinished, and neither are the actions associated with the buttons, though that's the easy
part. -->
<img src="images/buttons/edit.png" class="button_edit" title="Edit" alt="Edit" />
<a href="index.php?page=manage_comments" onclick="return get_checkboxes();"><img src="images/buttons/delete.png" class="button_delete" title="Delete" alt="Delete" /></a>
PHP Code:
<?php
<!-- this should be the first <th> element in the table. It's action doesn't yet work. If you fix that in index.php, make sure you take into
account that some users want to select the items on only the current page,
or all of the items on all pages. Gmail has a good solution that would
also work here as well (select only current page, ask if user wants all pages) -->
<th><input type="checkbox" name="checkAll" value="all" onclick="select_all();"></input></th>
PHP Code:
<?php
$sb_id = 0; ///This part is the main php change so far
$comments = mysql_query("SELECT * FROM `".$mysql_table_prefix."comments` ORDER BY dated DESC");
while ($comment = mysql_fetch_assoc($comments)) {
?>
<tr>
<td><input type="checkbox" name="selectbox" id="<?php echo $sb_id; ?>selectbox" value="<?php echo $comment['id']; ?>" onclick="invert_checks(this);"></input></td>
<!-- <?php /** Ignore this part. It's unrelated and has some changes that are for testing other things, only first td element should be added
td><?php echo htmlentities($comment["name"], ENT_NOQUOTES, 'UTF-8'); ?></td>
<?php
$page_id = $comment["page_id"];
$page_reference_query = mysql_query("SELECT reference, url FROM `".$mysql_table_prefix."pages` WHERE id = '$page_id'");
$page_reference_result = mysql_fetch_assoc($page_reference_query);
?>
<td><?php echo "<a href='" . $page_reference_result["url"] . "' target='_blank'>" . $page_id .':'.$page_reference_result["reference"].' : '.$page_reference_result['url'].'</a>'; ?></td>
<td><?php echo substr(htmlentities($comment["comment"], ENT_NOQUOTES, 'UTF-8'), 0, 75); ?></td>
<td><?php if ($comment["is_approved"]) { echo "Yes"; } else { echo "No"; } ?></td>
<?php if ($enabled_notifications) { ?>
<td><?php if ($comment["is_sent"]) { echo "Yes"; } else { echo "No"; } ?></td>
<?php } ?>
<td><span style="display:none;"><?php echo date("YmdHis", strtotime($comment["dated"])); ?></span><?php echo date("jS F Y g:ia", strtotime($comment["dated"])); ?></td>
<td>
<a href="<?php echo "index.php?page=edit_comment&id=" . $comment["id"];?>"><img src="images/buttons/edit.png" class="button_edit" title="Edit" alt="Edit"></a>
<a href="<?php echo "index.php?page=manage_comments&action=delete&id=" . $comment["id"];?>"><img src="images/buttons/delete.png" class="button_delete" onclick="return delete_comment_confirmation()" title="Delete" alt="Delete"></a>
</td**/ ?> -->
</tr>
<?php $sb_id++;/*same here*/ } ?>
As you can see, it's very much incomplete. A lot of this has to be changed to accommodate Datatables' sorting and filters. Do not consider this code as the main approach to the feature, as it will be changed according to the previous point. If someone wants to contribute, feel free. A good chunk of this feature requires javascript.
So far, I'm planning to use JS to determine which checkbox was selected relative to the table, not to the id as currently used. Then, I'll take the id of the checkbox to set it as selected, as is done now. The main change needs to be shift-clicking as the normal selection (regular click) works anyway. Sorry for the bad explanation, It'll be clearer when demonstrated. Also, the code is still uncommented, so sorry for that too.
Posts: 2,894
Threads: 59
Joined: Jun 2010
Instead of using shift-click to select multiple rows how about adding an extra column of checkboxes? Would that make it any easier to implement?
Have
you completed
the interview?
Posts: 535
Threads: 31
Joined: Jul 2010
I am using a column of checkboxes if that's what you mean. Shift-clicking is very useful, so that's why I want to include it. It already works without shift-clicking anyway.
I'm giving you three guesses...
Posts: 2,894
Threads: 59
Joined: Jun 2010
Ah okay. Yeah I agree shift-clicking would be really good in addition to the more traditional tick box method. I will add it as a knowledgebase tip to make sure that users know they can select multiple rows in that way.
Have
you completed
the interview?
Posts: 535
Threads: 31
Joined: Jul 2010
Isn't shift-clicking a de-facto standard for column selections by now
I'm giving you three guesses...
Posts: 2,894
Threads: 59
Joined: Jun 2010
Yeah it probably is but some people may not know about it and a tip about it won't do any harm
Have
you completed
the interview?
Posts: 535
Threads: 31
Joined: Jul 2010
Perhaps I'll make it in time for 1.3? The new method includes the use of an object to store each checkbox and it's id, value, and whether it's selected or not, due to how datatables works. New (largely incomplete) Javascript in index.php:
PHP Code:
<?php
<script type="text/javascript">
document.onkeydown = checkShift;
document.onkeyup = checkUpShift;
var shiftKey = 0;
var lastCommentId = -1;
/**vvv Important stuff vvv**/
var checkBoxes = {id : new Array(), value : new Array(), selected : new Array()/*needs to be changed to "checked"*/, get_selected : function() {
var ret_arr = new Array();
for(i = 0; i < this.id.length; i++) {
if(this.selected[i]){ret_arr.push(this.id[i]);}
}
return ret_arr;
}, addCheck : function(n_id,n_value,n_selected) {
this.id.push(n_id);
this.value.push(n_value);
this.selected.push(n_selected);
}, getID : function(input) {
for(i=0; i < this.id.length; i++) {
if(parseInt(this.id[i]) == input) {return i;}
}
return undefined;
}};
/**^^^ Important stuff ^^^**/
function checkShift(e) {
if(e.which == 16){shiftKey = 1;}
}
function checkUpShift(e) {
if(e.which == 16){shiftKey = 0;}
}
function get_checkboxes() {
//var checks = checkBoxes.get_selected();//document.getElementsByName('selectbox');
var checked = new String();
for(i = 0; i < checkBoxes.id.length; i++)
{
if(checkBoxes.selected[i] == 1)
{
checked += checkBoxes.value[i]+" | ";
}
}
alert(checked);
return false;
}
/*</script>
commented out for easier reading on the forum
<script type="text/javascript">*/
function invert_checks(check) { //ignore this part for now. I'm still working on it
var skip = 0;
for(i = 0; i < checkBoxes.id.length; i++) {
if(check.id == checkBoxes.id[i]) {
skip = 1;
break;
}
}
if(!skip) {
checkBoxes.addCheck(check.id,check.value,!check.selected);
}
//alert(checkBoxes.get_selected());
if(shiftKey && lastCommentId != -1) {
var boxes = document.getElementsByName('selectbox'); //only includes boxes on currently visible "page" of datatables
var invalid_LCI = true;
var first = new String();
for(j = 0; j < boxes.length; j++) { //For some weird reason, this doesn't work with "i", only "j"?!?
//Try it out for yourself, it gets stuck in an infinite loop, and doesn't increment "i"! Ideas?????
if(boxes[j].id == checkBoxes.id[checkBoxes.getID(lastCommentId)]) {invalid_LCI = false;}
if(first == "" && boxes[j].id == check.id){first = "check";} //determine which comes first
if(first == "" && parseInt(boxes[j].id) == lastCommentId){first = "LCI";} //determine which comes first
//i++;
}
if(invalid_LCI){lastCommentId = parseInt(check.id);}
var started = 0; //did not start checking
var quit = 0;
for(k = 0; k < boxes.length; k++) { //I used 'k' just in case... This part needs a little fixing, unchecking doesn't work, random "select all after this one" bug.
if(lastCommentId != parseInt(check.id)) {
if(!started && (boxes[k].id == check.id || parseInt(boxes[k].id) == lastCommentId)) {started = 1; continue;}
if(started){
var cbid = checkBoxes.getID(boxes[k].id);
if(cbid == undefined) {
checkBoxes.addCheck(boxes[k].id,boxes[k].value,!boxes[k].selected);
boxes[k].checked = checkBoxes.selected[checkBoxes.getID(lastCommentId)];
}
switch(first) {
case "LCI":
if(boxes[k].id == check.id){quit = 1;}
break;
case "check":
if(parseInt(boxes[k].id == lastCommentId)){quit = 1;}
break;
}
}
}
if(quit){break;}
//if(parseInt(boxes[i].id) >= parseInt(check.id) && parseInt(boxes[i].id) < lastCommentId){boxes[i].checked = checkBoxes.selected[checkBoxes.getID(lastCommentId)];/*!boxes[i].checked;*/ continue;}
//if(parseInt(boxes[i].id) <= parseInt(check.id) && parseInt(boxes[i].id) > lastCommentId){boxes[i].checked = checkBoxes.selected[checkBoxes.getID(lastCommentId)];/*!boxes[i].checked;*/ continue;}
}
}
lastCommentId = parseInt(check.id);
}
</script>
The second part can be ignored as it doesn't work, and is very messy and confusing. There's also this one weird bug where the variable i doesn't want to increment in a for loop. As soon as I switched it to j, it started working. What's up with that
I'm giving you three guesses...
Posts: 535
Threads: 31
Joined: Jul 2010
I now made the selections work. I'll iron out a few bugs before continuing on to the "select all" checkbox. The main obstacle there is selecting all checkboxes on all pages when filtering is in effect. I'll also take a look at the
DataTables API along with their
plugin API to see if it's easier and prettier to implement it using those (and it probably is).
I just tried a couple of the already existing datatables API examples related to selecting. While they work, they don't support shift-clicking, and don't take into account filtering. This pretty much makes them useless in Commentics. They do however supply good examples of using the API. I plan on making it work without the API first (since it already pretty much does), and then adopting the API to make things more readable, and take up less space.
I just tried a couple of the already existing datatables API examples related to selecting. While they work, they don't support shift-clicking, and don't take into account filtering. This pretty much makes them useless in Commentics. They do however supply good examples of using the API. I plan on making it work without the API first (since it already pretty much does), and then adopting the API to make things more readable, and take up less space.
I'm giving you three guesses...
Posts: 2,894
Threads: 59
Joined: Jun 2010
Have
you completed
the interview?
Posts: 2,894
Threads: 59
Joined: Jun 2010
How is this feature progressing Static? I ask because I may release v1.3 very soon so would you be okay with this not being included until the next version?
Have
you completed
the interview?
