| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128 | 2×
2×
2×
2×
2×
2×
2×
2×
4×
54×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
27×
2×
7×
7×
7×
7×
7×
7×
2×
20×
20×
20×
20×
2×
| var BS, CoursePlanDisplayEdit, CoursePlanDisplayMixin, CoursePlanDisplayQuickLook, DisplayProperties, React, Router, _, camelCase;
React = require('react');
Router = require('react-router');
camelCase = require('camelcase');
BS = require('react-bootstrap');
_ = require('underscore');
DisplayProperties = {
plan: React.PropTypes.shape({
id: React.PropTypes.string.isRequired,
durationLength: React.PropTypes.number.isRequired
}).isRequired,
display: React.PropTypes.shape({
offset: React.PropTypes.number.isRequired,
order: React.PropTypes.number.isRequired,
weekTopOffset: React.PropTypes.number.isRequired
}).isRequired,
label: React.PropTypes.node.isRequired,
courseId: React.PropTypes.string.isRequired,
planClasses: React.PropTypes.string.isRequired,
setHover: React.PropTypes.func.isRequired,
hasReview: React.PropTypes.bool,
isFirst: React.PropTypes.bool,
isLast: React.PropTypes.bool,
setIsViewing: React.PropTypes.func,
spacingMargin: React.PropTypes.number
};
CoursePlanDisplayMixin = {
propTypes: DisplayProperties,
getDefaultProps: function() {
return {
hasReview: false,
isFirst: false,
isLast: false,
spacingMargin: 2,
rangeLength: 7,
defaultPlansCount: 3
};
},
calcPercentOfRangeLength: function(partLength) {
return partLength / this.props.rangeLength * 100 + '%';
},
adjustPlanSpacing: function(planStyle) {
var isFirst, isLast, ref, spacingMargin;
ref = this.props, isFirst = ref.isFirst, isLast = ref.isLast, spacingMargin = ref.spacingMargin;
Eif (isFirst || isLast) {
planStyle.width = "calc(" + planStyle.width + " - " + (spacingMargin * 3) + "px)";
}
Eif (isFirst) {
planStyle.marginLeft = spacingMargin + 'px';
}
Iif (!(isFirst || isLast)) {
planStyle.marginLeft = -1 * spacingMargin + 'px';
}
return planStyle;
},
buildPlanStyles: function() {
var defaultPlansCount, display, durationLength, offset, order, plan, planStyle, ref, spacingMargin, weekTopOffset;
ref = this.props, display = ref.display, plan = ref.plan, spacingMargin = ref.spacingMargin, defaultPlansCount = ref.defaultPlansCount;
offset = display.offset, weekTopOffset = display.weekTopOffset, order = display.order;
durationLength = plan.durationLength;
planStyle = {
width: this.calcPercentOfRangeLength(durationLength),
left: this.calcPercentOfRangeLength(offset),
top: (weekTopOffset + (spacingMargin * 2) - order * defaultPlansCount) + 'rem'
};
return this.adjustPlanSpacing(planStyle);
}
};
CoursePlanDisplayEdit = React.createClass({
displayName: 'CoursePlanDisplayEdit',
mixins: [CoursePlanDisplayMixin],
render: function() {
var courseId, label, linkTo, params, plan, planClasses, planStyle, ref, setHover;
ref = this.props, plan = ref.plan, planClasses = ref.planClasses, label = ref.label, courseId = ref.courseId, setHover = ref.setHover;
linkTo = camelCase("edit-" + plan.type);
params = {
id: plan.id,
courseId: courseId
};
planStyle = this.buildPlanStyles();
return React.createElement("div", {
"style": planStyle,
"className": planClasses,
"data-assignment-type": plan.type,
"onMouseEnter": _.partial(setHover, true),
"onMouseLeave": _.partial(setHover, false),
"ref": 'plan'
}, React.createElement(Router.Link, {
"to": linkTo,
"params": params
}, label));
}
});
CoursePlanDisplayQuickLook = React.createClass({
displayName: 'CoursePlanDisplayQuickLook',
mixins: [CoursePlanDisplayMixin],
render: function() {
var hasReview, label, plan, planClasses, planModal, planStyle, ref, setHover, setIsViewing;
ref = this.props, planClasses = ref.planClasses, planModal = ref.planModal, label = ref.label, setHover = ref.setHover, setIsViewing = ref.setIsViewing, plan = ref.plan, hasReview = ref.hasReview;
planStyle = this.buildPlanStyles();
return React.createElement("div", {
"style": planStyle,
"className": planClasses,
"data-assignment-type": plan.type,
"data-has-review": hasReview,
"onMouseEnter": _.partial(setHover, true),
"onMouseLeave": _.partial(setHover, false),
"onClick": _.partial(setIsViewing, true),
"ref": 'plan'
}, label);
}
});
module.exports = {
CoursePlanDisplayEdit: CoursePlanDisplayEdit,
CoursePlanDisplayQuickLook: CoursePlanDisplayQuickLook
};
|