kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed rinput restriction

Browse Source
This commit is contained in:
Kenneth Jao 2016-09-05 14:51:40 -04:00
parent 604db80371
commit d6a8c94941
6 changed files with 87 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hourglass/client/main/main.css
View File

@ -460,6 +460,10 @@ input, textarea {
margin-top: 5%;
}
#workNamerestrict, #workDescrestrict, #commentrestrict {
display: none;
}
.workOptions, .prefOptions {
box-shadow: 2px 2px 5px 3px #666;

12
hourglass/client/main/main.html
View File

@ -119,7 +119,8 @@
<div id="workTypeBar" style="background-color:{{workType}}"></div>
<div id="workInfoContainer">
<div>
<span class="change req" id="workName">{{work 'name'}}</span>
<span id="workNamerestrict">{{commentLength}}</span>
<span class="change req" id="workName" restrict="50">{{work 'name'}}</span>
</div>
<div id="workInfoNmCont">
<div>
@ -128,7 +129,8 @@
</div>
<div>
<span class="workTitle">Description:</span><br>
<span class="change" type="textarea" id="workDesc">{{work 'description'}}</span>
<span id="workDescrestrict">{{commentLength}}</span>
<span class="change" type="textarea" id="workDesc" restrict="150">{{work 'description'}}</span>
</div>
<div>
<div class="inputRadio">
@ -153,13 +155,13 @@
<div id="workComments">
<h3>Comments</h3>
<div>
<textarea id="workComment" rows="4" cols="50" maxlength="200"></textarea><br>
<textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200"></textarea><br>
<div>
<span id="commentRestrict">{{commentLength}}</span>
<span id="commentrestrict">{{commentLength}}</span>
<div id="commentSubmit">Submit</div>
</div>
</div>
<div id="comment" style="max-height:{{commentDim}}">
<div id="comment">
{{#each work 'comments'}}
{{> comment}}
{{/each}}

90
hourglass/client/main/main.js
View File

@ -36,7 +36,7 @@ var ref = {
};
// Reactive variables.
Session.set("user",null);
Session.set("user",null); // Stores user preferences.
Session.set("calendarClasses", null);
Session.set("sidebar", null); // Status of sidebar
Session.set("newWork", null); // If user creating new work.
@ -48,12 +48,11 @@ Session.set("calCreWork", null); // If user is creating a work from calendar.
Session.set("classDisp", []); // Stores current filter for classes.
Session.set("classDispHover", null); // Stores current hovered filter.
Session.set("refetchEvents", null); // Stores whether to get calendar events again.
Session.set("commentRestrict", null); // Stores text for comment character restriction.
Session.set("commentRestrict", ""); // Stores text for comment character restriction.
Template.registerHelper('user', () => {
var user = Meteor.user().profile;
if(user === undefined || user === null) return;
Session.set("user", user);
if(Meteor.user() === undefined || Meteor.user() === null) return;
Session.set("user", Meteor.user().profile);
return;
});
@ -173,6 +172,10 @@ Template.registerHelper('pref', (val) => { // Obtains all user preferences.
return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
});
Template.registerHelper('commentLength', () => { // Returns characters left for comment length.
return Session.get("commentRestrict");
})
Template.main.helpers({
schoolName() { // Finds the name of the user's school.
if(Session.get("user").school === undefined) return;
@ -188,9 +191,7 @@ Template.main.helpers({
}
},
defaultMode() { //Loads the default display mode for user.
if(load) {
Session.set("mode",Session.get("user").preferences.mode);
}
if(load) Session.set("mode",Session.get("user").preferences.mode);
return;
},
bgSrc() { // Returns background.
@ -219,12 +220,7 @@ Template.main.helpers({
return themeColors[Session.get("user").preferences.theme].highlightText;
},
currMode(name) { // Status of display mode.
var mode = Session.get("mode");
if (name === mode) {
return true;
} else {
return false;
}
return Session.equals("mode",name);
},
calendarOptions() { // Settings for the calendar, including work displaying.
return {
@ -345,12 +341,6 @@ Template.main.helpers({
var h = window.innerHeight * 0.7;
return "width:" + w.toString() + "px;height:" + h.toString() + "px;margin-left:" + -0.5 * w.toString() + "px;margin-top:" + -0.5 * h.toString() + "px";
},
commentDim() { // Dimensions of comment container.
var work = Session.get("currentWork");
if (Session.equals("newWork", null) || work === null) return;
if (Session.get("newWork") || work.comments.length <= 3) return;
return 0.23 * window.innerHeight.toString() + "px";
},
work(value) { // Returns the specified work value.
if (Session.equals("currentWork", null)) return;
return Session.get("currentReadableWork")[value];
@ -365,9 +355,6 @@ Template.main.helpers({
return workColors[type];
}
},
commentLength() { // Returns characters left for comment length.
return Session.get("commentRestrict");
},
newWork() { // If user is creating a new work.
return Session.get("newWork");
},
@ -599,16 +586,14 @@ Template.main.events({
input.className += " form-control";
}
input.focus();
if (ele.getAttribute("restrict") !== null) {
var span = document.createElement("span");
span.id = "restrict";
var num = parseInt(ele.getAttribute("restrict")) - input.value.length;
if (num <= 0) {
span.style.setProperty("color", "#FF1A1A", "important");
num = 0;
}
span.appendChild(document.createTextNode(num.toString() + " characters left"));
ele.parentNode.appendChild(span);
var restrict = ele.getAttribute("restrict");
if (restrict !== null) {
input.maxLength = restrict;
input.className += " restrict";
Session.set("commentRestrict",restrict-input.value.length.toString() + " characters left");
var text = document.getElementById(Session.get("modifying")+"restrict");
text.style.display = "initial";
text.style.color = "#7E7E7E";
}
},
'click .radio' (event) { // Click dropdown input. Opens the dropdown menu.
@ -664,7 +649,14 @@ Template.main.events({
closeDivFade(p.parentNode);
input.focus();
},
'keydown' (event) { // Enter to close input.
'click #workComment' (event) {
var restrict = event.target.maxLength;
Session.set("commentRestrict",restrict-event.target.value.length.toString() + " characters left");
var text = document.getElementById("commentrestrict");
text.style.display = "initial";
text.style.color = "#7E7E7E";
},
'keydown input' (event) { // Enter to close input.
var modifyingInput = Session.get("modifying");
if (event.keyCode == 13 && modifyingInput != "workDesc") {
try {
@ -672,6 +664,19 @@ Template.main.events({
} catch (err) {}
}
},
'input .restrict' (event) {
var restrict = event.target.maxLength;
var chars = restrict - event.target.value.length;
var text = document.getElementById(Session.get("modifying")+"restrict");
text.style.color = "#7E7E7E";
if (chars === restrict) { // Don't display if nothing in comment.
Session.set("commentRestrict", "");
return;
} else if (chars === 0) {
text.style.color = "#FF1A1A"; // Make text red if 0 characters left.
}
Session.set("commentRestrict", chars.toString() + " characters left");
},
'focus #workDatea' () { // Open date picker.
$('#workDatea').datepicker({
format: 'DD, MM d, yyyy',
@ -716,17 +721,6 @@ Template.main.events({
sendData("deleteWork");
closeDivFade(document.getElementsByClassName("overlay")[0]);
},
'input #workComment' (event) { // Restrict length on comment.
var chars = 200 - event.target.value.length;
document.getElementById("commentRestrict").style.color = "#7E7E7E";
if (chars === 200) { // Don't display if nothing in comment.
Session.set("commentRestrict", "");
return;
} else if (chars === 0) {
document.getElementById("commentRestrict").style.color = "#FF1A1A"; // Make text red if 0 characters left.
}
Session.set("commentRestrict", chars.toString() + " characters left");
},
'click #markDone' () { // Click done button.
serverData = [Session.get("currentWork")._id, "done"];
sendData("toggleWork");
@ -836,10 +830,10 @@ function closeInput(modifyingInput) { // Close a changeable input and change it
color = "#8C8C8C";
}
span.style.color = color;
input.parentNode.removeChild(input);
Session.set("commentRestrict","");
try {
var restrict = document.getElementById("restrict");
restrict.parentNode.removeChild(restrict);
input.parentNode.removeChild(input);
document.getElementById(modifyingInput+"restrict").style.display = "none";
} catch (err) {}
if (input.value === "") { // If input has nothing.
span.childNodes[0].nodeValue = "Click here to edit...";

5
hourglass/client/profile/profile.css
View File

@ -96,6 +96,11 @@
margin-left: 20% !important;
}
#motdrestrict {
margin-right: 1% !important;
float: right;
}
.profOptions {
box-shadow: 2px 2px 5px 3px #666;

4
hourglass/client/profile/profile.html
View File

@ -7,7 +7,9 @@
<img id="profBanner" src='{{banner}}' alt="Banner">
<img id="profAvatar" src='{{avatar}}' alt="Avatar">
<div id="motdBox">
<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
<span class="username">{{username}} - </span>
<span class="change mo" restrict="50" id="motd">{{motd}}</span>
<span id="motdrestrict">{{commentLength}}</span>
</div>
</div>
<div id="profCards">

58
hourglass/client/profile/profile.js
View File

@ -435,16 +435,14 @@ Template.profile.events({
input.select();
}
input.focus();
if (ele.getAttribute("restrict") !== null) {
var span = document.createElement("span");
span.id = "restrict";
var num = parseInt(ele.getAttribute("restrict")) - input.value.length;
if (num <= 0) {
span.style.setProperty("color", "#FF1A1A", "important");
num = 0;
}
span.appendChild(document.createTextNode(num.toString() + " characters left"));
ele.parentNode.appendChild(span);
var restrict = ele.getAttribute("restrict");
if (restrict !== null) {
input.maxLength = restrict;
input.className += " restrict";
Session.set("commentRestrict",restrict-input.value.length.toString() + " characters left");
var text = document.getElementById(Session.get("modifying")+"restrict");
text.style.display = "inherit";
text.style.color = "#7E7E7E";
}
},
'click .radio' (event) { // Click dropdown input. Opens the dropdown menu.
@ -465,32 +463,27 @@ Template.profile.events({
openDivFade(op.parentNode.parentNode.childNodes[3]);
}
},
'keydown' (event) { // Restricts characters for certain inputs.
'keydown input' (event) { // Restricts characters for certain inputs.
var modifyingInput = Session.get("modifying");
if (event.keyCode == 13) {
try {
closeInput(modifyingInput);
} catch (err) {}
}
if (modifyingInput !== null && event.keyCode !== 13) {
var restrict = document.getElementById(modifyingInput).getAttribute("restrict");
if (restrict !== null) {
var num = parseInt(restrict) - event.target.value.length;
var restext = document.getElementById("restrict");
if (num === 1) {
restext.childNodes[0].nodeValue = num.toString() + " character left";
restext.style.setProperty("color", "#999", "important");
} else if (num <= 0) {
var input = document.getElementById(modifyingInput + "a");
input.value = input.value.substring(0, parseInt(restrict));
restext.childNodes[0].nodeValue = "0 characters left";
restext.style.setProperty("color", "#FF1A1A", "important");
} else {
restext.childNodes[0].nodeValue = num.toString() + " characters left";
restext.style.setProperty("color", "#999", "important");
}
}
},
'input .restrict' (event) {
var restrict = event.target.maxLength;
var chars = restrict - event.target.value.length;
var text = document.getElementById(Session.get("modifying")+"restrict");
text.style.color = "#7E7E7E";
if (chars === restrict) { // Don't display if nothing in comment.
Session.set("commentRestrict", "");
return;
} else if (chars === 0) {
text.style.color = "#FF1A1A"; // Make text red if 0 characters left.
text.style.opacity = "0";
}
Session.set("commentRestrict", chars.toString() + " characters left");
},
'click .profOptionText' (event) { // Click each profile option setting.
var modifyingInput = Session.get("modifying");
@ -562,10 +555,11 @@ function closeInput(modifyingInput) { // Closes current modifying input.
var input = document.getElementById(modifyingInput + "a");
var span = document.getElementById(modifyingInput);
input.parentNode.removeChild(input);
Session.set("commentRestrict", "");
try {
var restrict = document.getElementById("restrict");
restrict.parentNode.removeChild(restrict);
} catch (err) {}
document.getElementById("modifyingInput"+"restrict").style.display = "none";
} catch(err) {}
if (input.value === "") {
span.childNodes[0].nodeValue = "Click here to edit...";
} else {