Part of MDL-55611 epic.
--- /dev/null
+// 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/>.
+
+/**
+ * Javascript to load and render the list of calendar events for a
+ * given day range.
+ *
+ * @module block_myoverview/event_list
+ * @package block_myoverview
+ * @copyright 2016 Ryan Wyllie <ryan@moodle.com>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/custom_interaction_events'],
+ function($, CustomEvents) {
+
+ var SELECTORS = {
+ PAGE_LINK: '[data-region="page-link"]',
+ ACTIVE_PAGE_LINK: '.active > [data-region="page-link"]'
+ };
+
+ var EVENTS = {
+ PAGE_SELECTED: 'block_myoverview-paging-bar-page-selected',
+ };
+
+ var registerEventListeners = function(root) {
+ root = $(root);
+ CustomEvents.define(root, [
+ CustomEvents.events.activate
+ ]);
+
+ root.one(CustomEvents.events.activate, SELECTORS.PAGE_LINK, function(e, data) {
+ var page = $(e.target).closest(SELECTORS.PAGE_LINK);
+ var activePage = root.find(SELECTORS.ACTIVE_PAGE_LINK);
+ var isSamePage = page.is(activatePage);
+
+ if (!isSamePage) {
+ root.find(SELECTORS.PAGE_LINK).removeClass('active');
+ page.addClass('active');
+ }
+
+ root.trigger(EVENTS.PAGE_SELECTED, [{
+ pageNumber: page.attr('data-page-number'),
+ isSamePage: isSamePage,
+ }]);
+
+ data.originalEvent.preventDefault();
+ });
+ };
+
+ return {
+ registerEventListeners: registerEventListeners,
+ events: EVENTS,
+ };
+});
--- /dev/null
+// 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/>.
+
+/**
+ * Javascript to load and render the list of calendar events for a
+ * given day range.
+ *
+ * @module block_myoverview/event_list
+ * @package block_myoverview
+ * @copyright 2016 Ryan Wyllie <ryan@moodle.com>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
+ function($, Templates, PagingBar) {
+
+ var SELECTORS = {
+ };
+
+ var PagingContent = function(root, pagingBarElement, loadContentCallback) {
+ this.root = $(root);
+ this.pagingBar = $(pagingBarElement);
+ this.loadContent = loadContentCallback;
+ };
+
+ 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;
+ };
+
+ PagingContent.prototype.findPage = function(pageNumber) {
+
+ };
+
+ PagingContent.prototype.showPage = function(pageNumber) {
+ var existingPage = this.findPage(pageNumber);
+
+ if (existingPage) {
+ existingPage.addClass('active');
+ } else {
+ var newPage = this.createPage(pageNumber);
+ newPage.addClass('active');
+
+ this.root.append(newPage);
+ }
+ };
+
+ PagingContent.prototype.registerEventListeners = function() {
+ this.pagingBar.one(PagingBar.events.PAGE_SELECTED, function(e, data) {
+ if (!data.isSamePage) {
+ this.showPage(data.pageNumber);
+ };
+ }.bind(this));
+ };
+
+ return PagingContent;
+});
--- /dev/null
+{{!
+ 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/paging-bar
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+{{< block_myoverview/paging-content-item }}
+ {{$content}}
+ <p>FILL ME WITH CONTENT</p>
+ {{/content}}
+{{/ block_myoverview/paging-content-item }}
--- /dev/null
+{{!
+ 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/paging-bar
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+{{< block_myoverview/paging-content }}
+ {{$paging-content-item}}
+ {{> block_myoverview/course-paging-content-item }}
+ {{/paging-content-item}}
+{{/ block_myoverview/paging-content }}
Example context (json):
{}
}}
-<ul class="list-group unstyled" id="courses-view-in-progress-{{uniqid}}">
- <span class="hidden" data-region="loading-icon-container">
- {{> core/loading }}
- </span>
- <div id="courses-in-progress-container"
- data-limit="{{$limit}}6{{/limit}}"
- data-offset="{{$offset}}0{{/offset}}"
- data-status="inprogress"
- data-region="courses-in-progress-container">
+<div id data-limit="{{$limit}}6{{/limit}}" data-status="{{$status}}{{/status}}">
+ {{< block_myoverview/course-paging-content }}
+ {{$id}}paging-content-{{uniqid}}{{/id}}
+ {{/ block_myoverview/course-paging-content }}
+ <div class="text-xs-center text-center">
+ {{< block_myoverview/paging-bar }}
+ {{$id}}paging-bar-{{uniqid}}{{/id}}
+ {{/ block_myoverview/paging-bar }}
</div>
-</ul>
-<div class="text-xs-center text-center" data-region="courses-in-progress-paging-bar" id="courses-in-progress-paging-bar-{{uniqid}}"></div>
+</div>
{{#js}}
-require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
- var root = $("#courses-in-progress-container"),
- pagingRoot = $("#courses-in-progress-paging-bar-{{uniqid}}");
+require(
+ [
+ 'jquery',
+ 'core/templates',
+ 'block_myoverview/paging_bar',
+ 'block_myoverview/paging_content',
+ 'block_myoverview/courses_view_repository'
+ ],
+ function($, Templates, PagingBar, PagingContent, CoursesRepository) {
- CoursesView.init(root, pagingRoot);
+ var root = $();
+ var pagingBarElement = $('paging-bar-{{uniqid}}');
+ var pagingContentElement = $('paging-content-{{uniqid}}');
+ var loadContentCallback = function(pageNumber) {
+ var limit = root.attr('data-limit');
+ var offset = (pageNumber - 1) * limit;
+ var status = root.attr('data-status');
+
+ return CoursesRepository.queryFromStatus(status, limit, offset)
+ .then(function(courses) {
+ return Templates.render('block_myoverview/course-paging-content-item', courses);
+ })
+ };
+
+ PagingBar.registerEventListeners(pagingBarElement);
+ var content = new PagingContent(pagingContentElement, pagingBarElement, loadContentCallback);
+
+ content.registerEventListeners();
});
{{/js}}
</div>
<div class="tab-content">
<div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
- {{> block_myoverview/courses-view-in-progress }}
+ {{< block_myoverview/courses-view-by-status }}
+ {{$status}}1{{/status}}
+ {{/ block_myoverview/courses-view-by-status }}
</div>
<div class="tab-pane fade" id="myoverview_courses_view_future">
{{> block_myoverview/courses-view-future }}
root.find('.btn.active').removeClass('active');
});
});
-{{/js}}
\ No newline at end of file
+{{/js}}
--- /dev/null
+{{!
+ 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/paging-bar-item
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+<li class="page-item {{#active}}active{{/active}} {{#disabled}}disabled{{/disabled}}">
+ <a href="{{url}}"
+ class="page-link"
+ data-page-number="{{number}}"
+ data-region="page-link">
+ {{$item-content}}
+ {{page}}
+ {{#active}}
+ <span class="sr-only">{{#str}}currentinparentheses, theme_boost{{/str}}</span>
+ {{/active}}
+ {{/item-content}}
+ </a>
+</li>
--- /dev/null
+{{!
+ 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/paging-bar
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+<nav aria-label="{{label}}"
+ id="{{$id}}paging-bar-{{uniqid}}{{/id}}"
+ data-region="paging-bar">
+
+ <ul class="pagination">
+ {{#previous}}
+ {{< block_myoverview/paging-bar-item }}
+ {{$item-content}}
+ <span aria-hidden="true">«</span>
+ <span class="sr-only">{{#str}}previous{{/str}}</span>
+ {{/item-content}}
+ {{/ block_myoverview/paging-bar-item }}
+ {{/previous}}
+ {{#first}}
+ {{> block_myoverview/paging-bar-item }}
+ {{/first}}
+ {{#pages}}
+ {{> block_myoverview/paging-bar-item }}
+ {{/pages}}
+ {{#last}}
+ {{> block_myoverview/paging-bar-item }}
+ {{/last}}
+ {{#next}}
+ {{< block_myoverview/paging-bar-item }}
+ {{$item-content}}
+ <span aria-hidden="true">»</span>
+ <span class="sr-only">{{#str}}next{{/str}}</span>
+ {{/item-content}}
+ {{/ block_myoverview/paging-bar-item }}
+ {{/next}}
+ </ul>
+</nav>
+{{#js}}
+require(['jquery', 'block_myoverview/paging_bar'], function($, PagingBar) {
+ var root = $('#{{$id}}paging-bar-{{uniqid}}{{/id}}');
+ PagingBar.registerEventListeners(root);
+});
+{{/js}}
--- /dev/null
+{{!
+ 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/paging-bar
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+<div data-region="paging-content-item">
+ {{$content}}
+ {{{content}}}
+ {{/content}}
+</div>
--- /dev/null
+{{!
+ 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/paging-bar
+
+ This template renders the each course block containing a summary and calendar events.
+
+ Example context (json):
+ {
+ }
+}}
+<div id="{{$id}}paging-content-{{uniqid}}{{/id}}" data-region="paging-content">
+ {{#pages}}
+ {{$paging-content-item}}
+ {{> block_myoverview/paging-content-item }}
+ {{/paging-content-item}}
+ {{/pages}}
+</div>
