Remove CMS Course Checklists feature
This commit is contained in:
Sarina Canelake
@@ -34,7 +34,6 @@
|
||||
modules: getModulesList([
|
||||
'js/factories/asset_index',
|
||||
'js/factories/base',
|
||||
'js/factories/checklists',
|
||||
'js/factories/container',
|
||||
'js/factories/course',
|
||||
'js/factories/course_create_rerun',
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
define(["backbone", "underscore", "js/models/checklist"],
|
||||
function(Backbone, _, ChecklistModel) {
|
||||
var ChecklistCollection = Backbone.Collection.extend({
|
||||
model : ChecklistModel,
|
||||
|
||||
parse: function(response) {
|
||||
_.each(response,
|
||||
function( element, idx ) {
|
||||
element.id = idx;
|
||||
});
|
||||
|
||||
return response;
|
||||
},
|
||||
|
||||
// Disable caching so the browser back button will work (checklists have links to other
|
||||
// places within Studio).
|
||||
fetch: function (options) {
|
||||
options.cache = false;
|
||||
return Backbone.Collection.prototype.fetch.call(this, options);
|
||||
}
|
||||
});
|
||||
return ChecklistCollection;
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
define([
|
||||
'jquery', 'js/collections/checklist', 'js/views/checklist'
|
||||
], function($, ChecklistCollection, ChecklistView) {
|
||||
'use strict';
|
||||
return function (handlerUrl) {
|
||||
var checklistCollection = new ChecklistCollection(),
|
||||
editor;
|
||||
|
||||
checklistCollection.url = handlerUrl;
|
||||
editor = new ChecklistView({
|
||||
el: $('.course-checklists'),
|
||||
collection: checklistCollection
|
||||
});
|
||||
checklistCollection.fetch({reset: true});
|
||||
};
|
||||
});
|
||||
@@ -1,93 +0,0 @@
|
||||
define(["js/views/baseview", "underscore", "jquery"], function(BaseView, _, $) {
|
||||
var ChecklistView = BaseView.extend({
|
||||
// takes CMS.Models.Checklists as model
|
||||
|
||||
events : {
|
||||
'click .course-checklist .checklist-title' : "toggleChecklist",
|
||||
'click .course-checklist .task input' : "toggleTask",
|
||||
'click a[rel="external"]' : "popup"
|
||||
},
|
||||
|
||||
initialize : function() {
|
||||
var self = this;
|
||||
this.template = this.loadTemplate('checklist');
|
||||
this.collection.fetch({
|
||||
reset: true,
|
||||
complete: function() {
|
||||
self.render();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// catch potential outside call before template loaded
|
||||
if (!this.template) return this;
|
||||
|
||||
this.$el.empty();
|
||||
|
||||
var self = this;
|
||||
_.each(this.collection.models,
|
||||
function(checklist, index) {
|
||||
self.$el.append(self.renderTemplate(checklist, index));
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
renderTemplate: function (checklist, index) {
|
||||
var checklistItems = checklist.attributes['items'];
|
||||
var itemsChecked = 0;
|
||||
_.each(checklistItems,
|
||||
function(checklist) {
|
||||
if (checklist['is_checked']) {
|
||||
itemsChecked +=1;
|
||||
}
|
||||
});
|
||||
var percentChecked = Math.round((itemsChecked/checklistItems.length)*100);
|
||||
return this.template({
|
||||
checklistIndex : index,
|
||||
checklistShortDescription : checklist.attributes['short_description'],
|
||||
items: checklistItems,
|
||||
itemsChecked: itemsChecked,
|
||||
percentChecked: percentChecked});
|
||||
},
|
||||
|
||||
toggleChecklist : function(e) {
|
||||
e.preventDefault();
|
||||
$(e.target).closest('.course-checklist').toggleClass('is-collapsed');
|
||||
},
|
||||
|
||||
toggleTask : function (e) {
|
||||
var self = this;
|
||||
|
||||
var completed = 'is-completed';
|
||||
var $checkbox = $(e.target);
|
||||
var $task = $checkbox.closest('.task');
|
||||
$task.toggleClass(completed);
|
||||
|
||||
var checklist_index = $checkbox.data('checklist');
|
||||
var task_index = $checkbox.data('task');
|
||||
var model = this.collection.at(checklist_index);
|
||||
model.attributes.items[task_index].is_checked = $task.hasClass(completed);
|
||||
|
||||
model.save({},
|
||||
{
|
||||
success : function() {
|
||||
var updatedTemplate = self.renderTemplate(model, checklist_index);
|
||||
self.$el.find('#course-checklist'+checklist_index).first().replaceWith(updatedTemplate);
|
||||
|
||||
analytics.track('Toggled a Checklist Task', {
|
||||
'course': course_location_analytics,
|
||||
'task': model.attributes.items[task_index].short_description,
|
||||
'state': model.attributes.items[task_index].is_checked
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
popup: function(e) {
|
||||
e.preventDefault();
|
||||
window.open($(e.target).attr('href'));
|
||||
}
|
||||
});
|
||||
return ChecklistView;
|
||||
});
|
||||
@@ -61,7 +61,6 @@
|
||||
@import 'views/unit';
|
||||
@import 'views/container';
|
||||
@import 'views/users';
|
||||
@import 'views/checklists';
|
||||
@import 'views/textbooks';
|
||||
@import 'views/export-git';
|
||||
@import 'views/group-configuration';
|
||||
|
||||
@@ -368,12 +368,10 @@ body.course.view-certificates .nav-course-settings-certificates,
|
||||
// course tools
|
||||
body.course.view-import .nav-course-tools .title,
|
||||
body.course.view-export .nav-course-tools .title,
|
||||
body.course.view-checklists .nav-course-tools .title,
|
||||
body.course.view-export-git .nav-course-tools .title,
|
||||
|
||||
body.course.view-import .nav-course-tools-import,
|
||||
body.course.view-export .nav-course-tools-export,
|
||||
body.course.view-checklists .nav-course-tools-checklists,
|
||||
body.course.view-export-git .nav-course-tools-export-git,
|
||||
|
||||
// content library settings
|
||||
|
||||
@@ -1,341 +0,0 @@
|
||||
// Studio - Course Settings
|
||||
// ====================
|
||||
|
||||
.view-checklists {
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
@extend .ui-col-wide;
|
||||
}
|
||||
|
||||
// checklists - general
|
||||
.course-checklist {
|
||||
@extend %ui-window;
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// visual status
|
||||
.viz-checklist-status {
|
||||
@extend %cont-text-hide;
|
||||
@include size(100%,($baseline/4));
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
background: $gray-l4;
|
||||
|
||||
.viz-checklist-status-value {
|
||||
@include transition(width $tmg-s2 ease-in-out .25s);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: ($baseline/4);
|
||||
background: $green;
|
||||
|
||||
.int {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// header/title
|
||||
header {
|
||||
@include clearfix();
|
||||
box-shadow: inset 0 -1px 1px $shadow-l1;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
|
||||
.checklist-title {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
width: flex-grid(6, 9);
|
||||
margin: 0;
|
||||
@include margin-right(flex-gutter());
|
||||
@include float(left);
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@extend %t-action1;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include margin-right($baseline/2);
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
&.is-selectable {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
|
||||
.ui-toggle-expansion {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-status {
|
||||
@extend %t-copy-sub1;
|
||||
width: flex-grid(3, 9);
|
||||
@include float(right);
|
||||
margin-top: ($baseline/2);
|
||||
@include text-align(right);
|
||||
color: $gray-l2;
|
||||
|
||||
|
||||
.fa-check-square-o {
|
||||
@extend %t-icon4;
|
||||
display: inline-block;
|
||||
margin-left: ($baseline/2);
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
.status-count {
|
||||
@extend %t-copy-base;
|
||||
@extend %t-strong;
|
||||
margin-left: ($baseline/4);
|
||||
margin-right: ($baseline/4);
|
||||
color: $gray-d3;
|
||||
}
|
||||
|
||||
.status-amount {
|
||||
@extend %t-copy-base;
|
||||
@extend %t-strong;
|
||||
margin-left: ($baseline/4);
|
||||
color: $gray-d3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// checklist actions
|
||||
.course-checklist-actions {
|
||||
@include clearfix();
|
||||
@include transition(border $tmg-f2 ease-in-out .25s);
|
||||
box-shadow: inset 0 1px 1px $shadow-l1;
|
||||
border-top: 1px solid $gray-l2;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
background: $gray-l4;
|
||||
|
||||
.action-primary {
|
||||
@include green-button();
|
||||
@include float(left);
|
||||
|
||||
.fa-plus {
|
||||
@extend %t-icon7;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@include grey-button();
|
||||
@extend %t-action3;
|
||||
@extend %t-regular;
|
||||
@include float(right);
|
||||
|
||||
.fa-trash-o {
|
||||
@extend %t-icon7;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// state - collapsed
|
||||
&.is-collapsed {
|
||||
|
||||
header {
|
||||
box-shadow: none;
|
||||
|
||||
.checklist-title {
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transform(rotate(-90deg));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-tasks {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// state - completed
|
||||
&.is-completed {
|
||||
|
||||
.viz-checklist-status {
|
||||
|
||||
.viz-checklist-status-value {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
.checklist-title, .fa-caret-down {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.checklist-status {
|
||||
|
||||
.status-count, .status-amount, .fa-check-square-o {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// state - not available
|
||||
.is-not-available {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// list of tasks
|
||||
.list-tasks {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
.task {
|
||||
@include transition(background $tmg-f2 ease-in-out 0s, border $tmg-f3 ease-in-out 0s);
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
border-top: 1px solid $white;
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
background: $white;
|
||||
opacity: 1.0;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.task-input {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
@include float(left);
|
||||
margin-top: ($baseline/2);
|
||||
@include margin-right(flex-gutter());
|
||||
}
|
||||
|
||||
.task-details {
|
||||
@extend %t-strong;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
@include float(left);
|
||||
width: flex-grid(6,9);
|
||||
|
||||
.task-name {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
@extend %ui-fake-link;
|
||||
vertical-align: baseline;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.task-description {
|
||||
@extend %t-copy-sub1;
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.task-support {
|
||||
@extend %t-copy-sub2;
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0s);
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
@include transition(opacity $tmg-f2 ease-in-out $tmg-f2);
|
||||
@include clearfix();
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include float(right);
|
||||
width: flex-grid(2,9);
|
||||
margin: ($baseline/2) 0 0 flex-gutter();
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
text-align: right;
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
@extend %t-action3;
|
||||
}
|
||||
|
||||
.action-secondary {
|
||||
@extend %t-action4;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
// state - hover
|
||||
&:hover {
|
||||
background: $blue-l5;
|
||||
border-bottom-color: $blue-l4;
|
||||
border-top-color: $blue-l4;
|
||||
opacity: 1.0;
|
||||
|
||||
.task-details {
|
||||
|
||||
.task-support {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// state - completed
|
||||
&.is-completed {
|
||||
background: $gray-l6;
|
||||
border-top-color: $gray-l5;
|
||||
border-bottom-color: $gray-l5;
|
||||
|
||||
.task-name {
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-secondary-blue;
|
||||
@extend %t-action3;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-l5;
|
||||
border-bottom-color: $gray-l4;
|
||||
border-top-color: $gray-l4;
|
||||
|
||||
.task-details {
|
||||
opacity:1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
@extend .ui-col-narrow;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user