L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-57447 block_myoverview: bug fixes and code clean up

Browse Source 
Part of MDL-55611 epic.
This commit is contained in:
Simey Lameze
2017-04-03 11:36:32 +08:00
committed by Damyon Wiese
parent 6391b320e6
commit afe1a3c3b6
11 changed files with 39 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/myoverview/amd/src/courses_view.js
+1 -109
View File
@@ -29,53 +29,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]'
};
/**
* Set a flag on the element to indicate that it has completed
* loading all event data.
*
* @method setLoadedAll
* @param {object} root The container element
*/
var setLoadedAll = function(root) {
root.attr('data-loaded-all', true);
};
/**
* Set the element state to loading.
*
* @method startLoading
* @param {object} root The container element
*/
var startLoading = function(root) {
var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
root.addClass('loading');
loadingIcon.removeClass('hidden');
};
/**
* Remove the loading state from the element.
*
* @method stopLoading
* @param {object} root The container element
*/
var stopLoading = function(root) {
var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
root.removeClass('loading');
loadingIcon.addClass('hidden');
};
/**
* Check if the element is currently loading some event data.
*
* @method isLoading
* @param {object} root The container element
*/
var isLoading = function(root) {
return root.hasClass('loading');
};
/**
* Load the module.
*
@@ -97,7 +50,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
return $.Deferred().resolve();
}
startLoading(root);
// Request data from the server.
return CoursesRepository.queryFromStatus(status, limit, offset).then(function(courses) {
@@ -112,7 +64,7 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
// Render the courses.
render(root, courses);
setLoadedAll(root);
}
}).fail(
Notification.exception
@@ -123,37 +75,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
});
};
/**
* Render the paging bar.
*
* @param pagingRoot The root element of the paging bar.
* @param {int} limit Limit of courses per page.
* @param {int} total Total of courses per status.
* @returns {string} Rendered paging bar html.
*/
var renderPagingBar = function(pagingRoot, limit, total) {
pagingRoot = $(pagingRoot);
pagingRoot.empty();
var pageCounter,
pageTotal = total / limit;
var pagingBar = {
haspages: (total > 0),
previous : {},
pages: [],
next: {}
};
for(pageCounter = 0; pageCounter < pageTotal; pageCounter++) {
pagingBar.pages.push({page: pageCounter + 1});
}
return Templates.render(
'core/paging_bar',pagingBar
).done(function(html, js) {
Templates.appendNodeContents(pagingRoot, html, js);
});
};
/**
* Render the list of courses.
@@ -176,35 +97,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
});
};
/**
* Register event listeners.
*/
var registerEventListener = function(root, pagingRoot) {
root = $(root);
pagingRoot = $(pagingRoot);
var offset = +root.attr('data-offset'),
limit = +root.attr('data-limit'),
status = root.attr('data-status');
pagingRoot.on('click', 'a', function(e) {
// Don't go anywhere!
e.preventDefault();
var targetElement = $(e.currentTarget);
var pageNumber = targetElement[0].innerText,
calc = (limit * pageNumber / pageNumber);
if (pageNumber == 1) {
calc = 0;
}
root.attr('data-offset', calc);
load(root, pagingRoot);
});
};
return {
init: function(root, pagingRoot) {
root = $(root);
blocks/myoverview/amd/src/courses_view_repository.js
+5 -4
View File
@@ -30,7 +30,7 @@ define(['jquery'], function($) {
},
dataCache = {
past: [
0: [
{
courseid: 1,
shortname: 'Course 1',
@@ -128,7 +128,7 @@ define(['jquery'], function($) {
status: STATUS.PAST
}
],
inprogress: [
1: [
{
courseid: 13,
shortname: 'Course 13',
@@ -234,7 +234,7 @@ define(['jquery'], function($) {
status: STATUS.IN_PROGRESS
}
],
future: [
2: [
{
courseid: 26,
shortname: 'Course 26',
@@ -345,7 +345,8 @@ define(['jquery'], function($) {
*/
var queryFromStatus = function(status, limit, offset) {
var deferred = $.Deferred();
offset = parseInt(offset);
limit = parseInt(limit);
setTimeout(function() {
deferred.resolve(dataCache[status].slice(offset, offset + limit));
}, 1000);
blocks/myoverview/amd/src/paging_content.js
+20 -15
View File
@@ -27,6 +27,7 @@ define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
var SELECTORS = {
ROOT: '[data-region="paging-content"]',
PAGE_REGION: '[data-region="paging-content-item"]'
};
var PagingContent = function(root, pagingBarElement, loadContentCallback) {
@@ -38,37 +39,41 @@ define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
PagingContent.rootSelector = SELECTORS.ROOT;
PagingContent.prototype.createPage = function(pageNumber) {
this.loadContent(pageNumber).done(function(html, js) {
Templates.appendTo(this.root, html, js);
}.bind(this));
var page = null;
return page;
return this.loadContent(pageNumber).then(function(html, js) {
console.log(html);
Templates.appendNodeContents(this.root, html, js);
}.bind(this)).then(function () {
return this.findPage(pageNumber);
}.bind(this)
);
};
PagingContent.prototype.findPage = function(pageNumber) {
return this.root.find('[data-page="'+pageNumber+'"]');
};
PagingContent.prototype.showPage = function(pageNumber) {
var existingPage = this.findPage(pageNumber);
this.root.find(SELECTORS.PAGE_REGION).addClass('hidden');
if (existingPage) {
existingPage.addClass('active');
if (existingPage.length) {
existingPage.removeClass('hidden');
} else {
var newPage = this.createPage(pageNumber);
newPage.addClass('active');
this.root.append(newPage);
this.createPage(pageNumber).done(function (newPage) {
newPage.removeClass('hidden');
}
);
}
};
PagingContent.prototype.registerEventListeners = function() {
this.pagingBar.one(PagingBar.events.PAGE_SELECTED, function(e, data) {
this.pagingBar.on(PagingBar.events.PAGE_SELECTED, function(e, data) {
if (!data.isSamePage) {
this.showPage(data.pageNumber);
};
}
}.bind(this));
};
blocks/myoverview/templates/course-paging-content-item.mustache
+3 -1
View File
@@ -25,6 +25,8 @@
}}
{{< block_myoverview/paging-content-item }}
{{$content}}
<p>FILL ME WITH CONTENT</p>
{{#courses}}
{{> block_myoverview/courses-view-course-item }}
{{/courses}}
{{/content}}
{{/ block_myoverview/paging-content-item }}
blocks/myoverview/templates/course-paging-content.mustache
+1 -1
View File
@@ -25,6 +25,6 @@
}}
{{< block_myoverview/paging-content }}
{{$paging-content-item}}
{{> block_myoverview/course-paging-content-item }}
{{> block_myoverview/course-summary }}
{{/paging-content-item}}
{{/ block_myoverview/paging-content }}
blocks/myoverview/templates/courses-view-by-status.mustache
+5 -2
View File
@@ -27,6 +27,7 @@
data-status="{{$status}}{{/status}}">
{{> block_myoverview/course-paging-content }}
<div class="text-xs-center text-center">
{{> block_myoverview/paging-bar }}
</div>
@@ -42,9 +43,10 @@ require(
],
function($, Templates, PagingBar, PagingContent, CoursesRepository) {
var root = $('{{$id}}courses-view-status-{{uniqid}}{{/id}}');
var root = $('#{{$id}}courses-view-status-{{uniqid}}{{/id}}');
var pagingBarElement = root.find(PagingBar.rootSelector);
var pagingContentElement = root.find(PagingContent.rootSelector);
var loadContentCallback = function(pageNumber) {
var limit = root.attr('data-limit');
var offset = (pageNumber - 1) * limit;
@@ -52,11 +54,12 @@ require(
return CoursesRepository.queryFromStatus(status, limit, offset)
.then(function(courses) {
return Templates.render('block_myoverview/course-paging-content-item', courses);
return Templates.render('block_myoverview/course-paging-content-item', {courses: courses});
})
};
var content = new PagingContent(pagingContentElement, pagingBarElement, loadContentCallback);
content.registerEventListeners();
content.showPage(1);
});
{{/js}}
blocks/myoverview/templates/courses-view-course-item.mustache
+2 -2
View File
@@ -28,7 +28,7 @@
"summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
}
}}
<li class="list-group-item col-md-4 m-b-1">
<div class="list-group-item col-md-4 m-b-1">
<div class="d-inline-block">
<div class="d-inline-block m-x-1">
<div class="course-info-container" id="course-info-container-{{id}}">
@@ -50,4 +50,4 @@
</div>
</div>
</div>
</li>
</div>
blocks/myoverview/templates/courses-view-future.mustache
-44
View File
@@ -1,44 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/courses-view
This template renders the courses view for the myoverview block.
Example context (json):
{}
}}
<ul class="list-group unstyled" id="courses-view-future-{{uniqid}}">
<span class="hidden" data-region="loading-icon-container">
{{> core/loading }}
</span>
<div id="courses-future-container"
data-limit="{{$limit}}6{{/limit}}"
data-offset="{{$offset}}0{{/offset}}"
data-status="future"
data-region="courses-future-container">
</div>
</ul>
<div class="text-xs-center text-center" data-region="courses-future-paging-bar" id="courses-future-paging-bar-{{uniqid}}"></div>
{{#js}}
require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
var root = $("#courses-future-container"),
pagingRoot = $("#courses-future-paging-bar-{{uniqid}}");
CoursesView.init(root, pagingRoot);
});
{{/js}}
blocks/myoverview/templates/courses-view-past.mustache
-44
View File
@@ -1,44 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/courses-view
This template renders the courses view for the myoverview block.
Example context (json):
{}
}}
<ul class="list-group unstyled" id="courses-view-past-{{uniqid}}">
<span class="hidden" data-region="loading-icon-container">
{{> core/loading }}
</span>
<div id="courses-past-container"
data-limit="{{$limit}}6{{/limit}}"
data-offset="{{$offset}}0{{/offset}}"
data-status="past"
data-region="courses-past-container">
</div>
</ul>
<div class="text-xs-center text-center" data-region="courses-view-past-paging-bar" id="courses-past-paging-bar-{{uniqid}}"></div>
{{#js}}
require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
var root = $("#courses-past-container"),
pagingRoot = $("#courses-past-paging-bar-{{uniqid}}");
CoursesView.init(root, pagingRoot);
});
{{/js}}
blocks/myoverview/templates/main.mustache
+1 -1
View File
@@ -43,7 +43,7 @@
<div role="tabpanel" class="tab-pane fade in active" id="myoverview_timeline_view">
{{> block_myoverview/timeline-view }}
</div>
<div role="tabpanel" class="tab-pane fade" id="myoverview_courses_view">
<div role="tabpanel" class="tab-pane fade " id="myoverview_courses_view">
{{#coursesview}}
{{> block_myoverview/courses-view }}
{{/coursesview}}
blocks/myoverview/templates/paging-content-item.mustache
+1 -1
View File
@@ -23,7 +23,7 @@
{
}
}}
<div data-region="paging-content-item">
<div data-region="paging-content-item" data-page="{{page}}" class="container-fluid">
{{$content}}
{{{content}}}
{{/content}}