Skip to content
Browse files

Merge branch 'feature-move-refresh-and-count' into develop

  • Loading branch information...
2 parents cbfd8e3 + 622cd20 commit 63691e8cc1ab412d2a030ee8eea6f78094ff9565 @mattgibson committed
Showing with 205 additions and 59 deletions.
  1. +4 −14 block_ajax_marking.php
  2. +2 −1 lang/en/block_ajax_marking.php
  3. +119 −44 module.js
  4. BIN pix/cog.png
  5. BIN pix/refresh-arrow.png
  6. +80 −0 styles.css
View
18 block_ajax_marking.php
@@ -78,7 +78,7 @@ public function get_content() {
//start building content output
$this->content = new stdClass();
$this->content->footer = '';
- $this->content->text = '';
+ $this->content->text = '<div id="block_ajax_marking">';
// Add a style to hide the HTML list and prevent flicker
$script = '<script type="text/javascript" defer="defer">
@@ -130,6 +130,7 @@ public function get_content() {
array('recentitems', 'block_ajax_marking'),
array('mediumitems', 'block_ajax_marking'),
array('overdueitems', 'block_ajax_marking'),
+ array('errorcontactadmin', 'block_ajax_marking'),
array('recentitem',
'block_ajax_marking'),
array('mediumitem',
@@ -186,20 +187,8 @@ class="dynamicicon"
$divs .= '
</div>
</div>
- <div id="block_ajax_marking_top_bar">
- <div id="total">
- <div id="totalmessage">
- ' . get_string('totaltomark', 'block_ajax_marking') .
- ': <span id="count"></span>
- </div>
- <div id="mainicon"></div>
- </div>
- <div id="status"></div>
- </div>
- <div id="treetabs">
- </div>
+ <div id="treetabs"></div>
<div id="block_ajax_marking_refresh_button"></div>
- <div id="block_ajax_marking_configure_button"></div>
<div id="block_ajax_marking_error"></div>
<div class="block_ajax_marking_spacer"></div>';
$this->content->text .= $divs;
@@ -211,6 +200,7 @@ class="dynamicicon"
'</p>
</noscript>';
$this->content->text .= $noscript;
+ $this->content->this .= '</div>'; // end of #block_ajax_marking container
// Set things going
$PAGE->requires->js_init_call('M.block_ajax_marking.initialise', null, true,
View
3 lang/en/block_ajax_marking.php
@@ -43,7 +43,7 @@
$string['pluginname'] = 'AJAX marking block';
$string['refresh'] = 'Refresh';
$string['submitted'] = 'Submitted';
-$string['totaltomark'] = 'Total to mark';
+$string['totaltomark'] = 'Total:';
$string['waiting'] = 'Pieces of work';
$string['show'] = 'Show this item';
$string['showgroups'] = 'Show group nodes';
@@ -59,6 +59,7 @@
$string['recentitem'] = 'recent item';
$string['mediumitem'] = 'medium item';
$string['overdueitem'] = 'overdue item';
+$string['cog'] = 'Configuration icon';
// Specific to modules
View
163 module.js
@@ -551,7 +551,7 @@ YAHOO.lang.extend(M.block_ajax_marking.tree_node, YAHOO.widget.HTMLNode, {
html += '<strong>)</strong>'+
'</div> ';
- html += '<div class="nodelabel" title="'+this.get_tooltip()+'">'+
+ html += '<div class="nodelabel" >'+
this.get_displayname();
html += '</div>';
html += '<div class="block_ajax_marking_spacer">';
@@ -1540,6 +1540,8 @@ YAHOO.lang.extend(M.block_ajax_marking.tree_base, YAHOO.widget.TreeView, {
// send the ajax request
YAHOO.util.Connect.asyncRequest('POST', M.block_ajax_marking.ajaxnodesurl,
M.block_ajax_marking.callback, this.initial_nodes_data);
+ this.add_loading_icon();
+
},
/**
@@ -1584,6 +1586,7 @@ YAHOO.lang.extend(M.block_ajax_marking.tree_base, YAHOO.widget.TreeView, {
M.block_ajax_marking.ajaxnodesurl,
M.block_ajax_marking.callback,
nodefilters);
+
},
/**
@@ -1610,7 +1613,8 @@ YAHOO.lang.extend(M.block_ajax_marking.tree_base, YAHOO.widget.TreeView, {
*/
update_total_count : function () {
this.recalculate_total_count();
- document.getElementById('count').innerHTML = this.totalcount.toString();
+ this.countdiv.innerHTML = this.totalcount.toString();
+ var debugpause = '';
},
/**
@@ -1732,8 +1736,30 @@ YAHOO.lang.extend(M.block_ajax_marking.tree_base, YAHOO.widget.TreeView, {
}
node.recalculate_counts();
+ },
+
+ /**
+ * Changes the refresh button into a loading icon button
+ */
+ add_loading_icon : function () {
+ this.tab.refreshbutton.set('label', '<img src="blocks/ajax_marking/pix/ajax-loader.gif"'+
+ ' class="refreshicon"'+
+ ' alt="'+M.str.block_ajax_marking.refresh+'" />');
+ this.tab.refreshbutton.focus();
+
+ },
+
+ /**
+ * Changes the loading icon button back to a refresh button
+ */
+ remove_loading_icon : function () {
+ this.tab.refreshbutton.set('label', '<img src="blocks/ajax_marking/pix/refresh-arrow.png"' +
+ ' class="refreshicon"'+
+ ' alt="'+M.str.block_ajax_marking.refresh+'" />');
+ this.tab.refreshbutton.blur();
}
+
});
/**
@@ -2020,7 +2046,7 @@ YAHOO.lang.extend(M.block_ajax_marking.config_tree, M.block_ajax_marking.tree_ba
* Should empty the count
*/
update_total_count : function() {
- document.getElementById('count').innerHTML = '-';
+ // Deliberately empty
},
/**
@@ -2309,7 +2335,9 @@ M.block_ajax_marking.ajax_success_handler = function (o) {
}
}
- YAHOO.util.Dom.removeClass(document.getElementById('mainicon'), 'loaderimage');
+ // TODO this needs to get the right tab from the request details in case we switch tabs quickly
+ M.block_ajax_marking.get_current_tab().displaywidget.remove_loading_icon();
+
};
M.block_ajax_marking.update_menu_item = function(newsetting,
@@ -2425,12 +2453,10 @@ M.block_ajax_marking.ajax_failure_handler = function (o) {
// communication failure
if (o.tId === 0) {
+ // TODO set cleaner error
document.getElementById('status').innerHTML = M.str.block_ajax_marking.connectfail;
//YAHOO.util.Dom.removeClass(M.block_ajax_marking.markingtree.icon, 'loaderimage');
- if (!document.getElementById('block_ajax_marking_collapse')) {
- M.block_ajax_marking.make_footer();
- }
}
var tree = M.block_ajax_marking.get_current_tab().displaywidget;
tree.rebuild_parent_and_tree_count_after_new_nodes();
@@ -2462,26 +2488,6 @@ M.block_ajax_marking.remove_all_child_nodes = function (parentnode) {
}
};
-/**
- * This is to generate the footer controls once the tree has loaded
- *
- * @return void
- */
-M.block_ajax_marking.make_footer = function () {
- // Create all text nodes
-
- // the two links
- return new YAHOO.widget.Button({
- label : M.str.block_ajax_marking.refresh,
- id : 'block_ajax_marking_collapse',
- onclick : {fn : function () {
- document.getElementById('status').innerHTML = '';
- YAHOO.util.Dom.setStyle('block_ajax_marking_error',
- 'display', 'none');
- M.block_ajax_marking.get_current_tab().displaywidget.initialise();
- }},
- container : 'block_ajax_marking_refresh_button'});
-};
/**
* Callback object for the AJAX call, which fires the correct function. Doesn't work when part
@@ -2653,7 +2659,7 @@ M.block_ajax_marking.initialise = function () {
M.block_ajax_marking.make_icon_styles();
- YUI().use('tabview', function (Y) {
+ YUI().use('tabview', 'node', function (Y) {
// this waits till much too late. Can we trigger earlier?
M.block_ajax_marking.tabview = new Y.TabView({
srcNode : '#treetabs'
@@ -2662,37 +2668,97 @@ M.block_ajax_marking.initialise = function () {
// Must render first so treeviews have container divs ready
M.block_ajax_marking.tabview.render();
- // Define the tabs here and add them dynamically.
+ // Courses tab
var coursetabconfig = {
- 'label' : 'Courses',
- 'content' : '<div id="coursestree" class="ygtv-highlight"></div>'};
+ 'label' : 'Courses',
+ id : 'coursestab',
+
+ 'content' : '<div id="coursessheader" class="treetabheader">'+
+ '<div id="coursesrefresh" class="refreshbutton"></div>'+
+ '<div id="coursesstatus" class="statusdiv">'+
+ M.str.block_ajax_marking.totaltomark+
+ ' <span id="coursescount" class="countspan"></span>'+
+ '</div>'+
+ '<div class="block_ajax_marking_spacer"></div>'+
+ '</div>'+
+ '<div id="coursestree" class="ygtv-highlight markingtree"></div>'};
var coursestab = new Y.Tab(coursetabconfig);
M.block_ajax_marking.tabview.add(coursestab);
+
+
coursestab.displaywidget = new M.block_ajax_marking.courses_tree();
// reference so we can tell the tree to auto-refresh
M.block_ajax_marking.coursestab_tree = coursestab.displaywidget;
coursestab.displaywidget.render();
coursestab.displaywidget.subscribe('clickEvent', M.block_ajax_marking.treenodeonclick);
coursestab.displaywidget.tab = coursestab; // reference to allow links back to tab from tree
-
+ coursestab.displaywidget.countdiv = document.getElementById('coursescount'); // reference to allow links back to tab from tree
+
+ coursestab.refreshbutton = new YAHOO.widget.Button({
+ label : '<img src="blocks/ajax_marking/pix/refresh-arrow.png" class="refreshicon"' +
+ ' alt="'+M.str.block_ajax_marking.refresh+'" />',
+ id : 'coursesrefresh_button',
+ title : M.str.block_ajax_marking.refresh,
+ onclick : {fn : function () {
+ YAHOO.util.Dom.setStyle('block_ajax_marking_error',
+ 'display',
+ 'none');
+ coursestab.displaywidget.initialise();
+ }},
+ container : 'coursesrefresh'});
+
+ // Cohorts tab
var cohortstabconfig = {
'label' : 'Cohorts',
- 'content' : '<div id="cohortstree" class="ygtv-highlight"></div>'};
+ id : 'cohortstab',
+ 'content' : '<div id="cohortsheader" class="treetabheader">'+
+ '<div id="cohortsrefresh" class="refreshbutton"></div>'+
+ '<div id="cohortsstatus" class="statusdiv">'+
+ M.str.block_ajax_marking.totaltomark+
+ ' <span id="cohortscount" class="countspan"></span>'+
+ '</div>'+
+ '<div class="block_ajax_marking_spacer"></div>'+
+ '</div>'+
+ '<div id="cohortstree" class="ygtv-highlight markingtree"></div>'};
var cohortstab = new Y.Tab(cohortstabconfig);
M.block_ajax_marking.tabview.add(cohortstab);
cohortstab.displaywidget = new M.block_ajax_marking.cohorts_tree();
M.block_ajax_marking.cohortstab_tree = cohortstab.displaywidget;
-
+ cohortstab.displaywidget.tab = cohortstab; // reference to allow links back to tab from tree
cohortstab.displaywidget.render();
cohortstab.displaywidget.subscribe('clickEvent', M.block_ajax_marking.treenodeonclick);
+ cohortstab.displaywidget.countdiv = document.getElementById('cohortscount'); // reference to allow links back to tab from tree
+
+ cohortstab.refreshbutton = new YAHOO.widget.Button({
+ label : '<img src="blocks/ajax_marking/pix/refresh-arrow.png" class="refreshicon" ' +
+ 'alt="'+M.str.block_ajax_marking.refresh+'" />',
+ id : 'cohortsrefresh_button',
+ title : M.str.block_ajax_marking.refresh,
+ onclick : {fn : function () {
+ YAHOO.util.Dom.setStyle('block_ajax_marking_error',
+ 'display',
+ 'none');
+ cohortstab.displaywidget.initialise();
+ }},
+ container : 'cohortsrefresh'});
+
+ // Config tab
var configtabconfig = {
- 'label' : 'Config',
- 'content' : '<div id="configtree" class="ygtv-highlight"></div>'};
+ 'label' : '<img src="blocks/ajax_marking/pix/cog.png" alt="cogs" id="configtabicon" />',
+ id : 'configtab',
+ 'content' : '<div id="configheader" class="treetabheader">'+
+ '<div id="configrefresh" class="refreshbutton"></div>'+
+ '<div id="configstatus" class="statusdiv"></div>'+
+ '<div class="block_ajax_marking_spacer"></div>'+
+ '</div>'+
+ '<div id="configtree" class="ygtv-highlight markingtree"></div>'};
var configtab = new Y.Tab(configtabconfig);
M.block_ajax_marking.tabview.add(configtab);
configtab.displaywidget = new M.block_ajax_marking.config_tree();
M.block_ajax_marking.configtab_tree = configtab.displaywidget;
+ configtab.displaywidget.tab = configtab; // reference to allow links back to tab from tree
+
configtab.displaywidget.render();
configtab.displaywidget.subscribe('clickEvent',
M.block_ajax_marking.config_treenodeonclick);
@@ -2700,6 +2766,18 @@ M.block_ajax_marking.initialise = function () {
// open)
configtab.displaywidget.subscribe('expand', M.block_ajax_marking.hide_open_menu);
+ configtab.refreshbutton = new YAHOO.widget.Button({
+ label : '<img src="blocks/ajax_marking/pix/refresh-arrow.png" ' +
+ 'class="refreshicon alt="'+M.str.block_ajax_marking.refresh+'" />',
+ id : 'configrefresh_button',
+ onclick : {fn : function () {
+ YAHOO.util.Dom.setStyle('block_ajax_marking_error',
+ 'display',
+ 'none');
+ configtab.displaywidget.initialise();
+ }},
+ container : 'configrefresh'});
+
// Make the context menu for the courses tree
// Attach a listener to the root div which will activate the menu
// menu needs to be repositioned next to the clicked node
@@ -2750,12 +2828,11 @@ M.block_ajax_marking.initialise = function () {
// TODO use cookies/session to store the one the user wants between sessions
M.block_ajax_marking.tabview.selectChild(0); // this will initialise the courses tree
- });
+ // Unhide that tabs block - preventing flicker
- // Unhide that tabs block - preventing flicker
- YUI().use('node', function (Y) {
Y.one('#treetabs').setStyle('display', 'block');
- Y.one('#totalmessage').setStyle('display', 'block');
+ // Y.one('#totalmessage').setStyle('display', 'block');
+
});
// workaround for odd https setups. Probably not needed in most cases, but you can get an error
@@ -2764,10 +2841,6 @@ M.block_ajax_marking.initialise = function () {
M.cfg.wwwroot = M.cfg.wwwroot.replace('http:', 'https:');
}
- // Make the footer
- if (!document.getElementById('block_ajax_marking_collapse')) {
- M.block_ajax_marking.make_footer();
- }
};
/**
@@ -2926,3 +2999,5 @@ M.block_ajax_marking.grading_unhighlight = function (node) {
M.block_ajax_marking.hide_open_menu = function(expandednode) {
expandednode.renderedmenu.hide();
};
+
+
View
BIN pix/cog.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN pix/refresh-arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
80 styles.css
@@ -162,4 +162,84 @@ table.ygtvtable {
margin-right: 3px;
}
+/* Styles for the tree tab headers where the refresh button and counts live */
+.treetabheader {
+ height: 25px;
+ /*border-width: 0 0 1px 0;*/
+ /*border-style: solid;*/
+ /*border-color: #000;*/
+}
+#block_ajax_marking .yui3-tabview-panel {
+ padding: 0;
+}
+#block_ajax_marking .markingtree {
+ margin: 0 7px 3px 7px;
+}
+#block_ajax_marking .refreshbutton {
+ width: 25px;
+ /*border-right: 1px solid #000;*/
+ height: 100%;
+ float: left;
+}
+#block_ajax_marking .statusdiv {
+ padding-left: 4px;
+ padding-top: 2px;
+ float: left;
+}
+#block_ajax_marking img.refreshicon {
+ width: 12px;
+ margin: 2px;
+}
+#block_ajax_marking #coursesrefresh_button-button,
+#block_ajax_marking #configrefresh_button-button,
+#block_ajax_marking #cohortsrefresh_button-button {
+ padding: 2px;
+ height: auto;
+ font-size: 0;
+}
+#block_ajax_marking .countspan {
+ font-weight: bold;
+}
+#block_ajax_marking .treetabheader {
+ border-bottom: 1px solid #c3c3c3;
+}
+#block_ajax_marking .refreshbutton {
+ padding-top: 1px;
+}
+#block_ajax_marking .statusdiv {
+ margin-top: 3px;
+ padding-left: 5px;
+}
+#block_ajax_marking #configtabicon {
+ width: 11px;
+}
+#block_ajax_marking div.nodelabelwrapper div.nodelabel:hover {
+ position: absolute;
+ float: left;
+ overflow-x: visible;
+ white-space: normal;
+ height: auto;
+ background-color: #fff;
+ color: #000;
+ border: 1px solid #ccc;
+ padding-left: 2px;
+}
+/* Stop the node labels at different levels from overlapping the block when hovered over */
+#block_ajax_marking .ygtvdepth0 div.nodelabelwrapper div.nodelabel:hover {
+ width: 80%;
+}
+#block_ajax_marking .ygtvdepth1 div.nodelabelwrapper div.nodelabel:hover {
+ width: 70%;
+}
+#block_ajax_marking .ygtvdepth2 div.nodelabelwrapper div.nodelabel:hover {
+ width: 60%;
+}
+#block_ajax_marking .ygtvdepth3 div.nodelabelwrapper div.nodelabel:hover {
+ width: 50%;
+}
+#block_ajax_marking .ygtvdepth4 div.nodelabelwrapper div.nodelabel:hover {
+ width: 40%;
+}
+
+

0 comments on commit 63691e8

Please sign in to comment.
Something went wrong with that request. Please try again.