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%; margin-top: 5%;
} }
#workNamerestrict, #workDescrestrict, #commentrestrict {
display: none;
}
.workOptions, .prefOptions { .workOptions, .prefOptions {
box-shadow: 2px 2px 5px 3px #666; 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="workTypeBar" style="background-color:{{workType}}"></div>
<div id="workInfoContainer"> <div id="workInfoContainer">
<div> <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>
<div id="workInfoNmCont"> <div id="workInfoNmCont">
<div> <div>
@ -128,7 +129,8 @@
</div> </div>
<div> <div>
<span class="workTitle">Description:</span><br> <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> <div>
<div class="inputRadio"> <div class="inputRadio">
@ -153,13 +155,13 @@
<div id="workComments"> <div id="workComments">
<h3>Comments</h3> <h3>Comments</h3>
<div> <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> <div>
<span id="commentRestrict">{{commentLength}}</span> <span id="commentrestrict">{{commentLength}}</span>
<div id="commentSubmit">Submit</div> <div id="commentSubmit">Submit</div>
</div> </div>
</div> </div>
<div id="comment" style="max-height:{{commentDim}}"> <div id="comment">
{{#each work 'comments'}} {{#each work 'comments'}}
{{> comment}} {{> comment}}
{{/each}} {{/each}}

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

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

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

@ -96,6 +96,11 @@
margin-left: 20% !important; margin-left: 20% !important;
} }
#motdrestrict {
margin-right: 1% !important;
float: right;
}
.profOptions { .profOptions {
box-shadow: 2px 2px 5px 3px #666; 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="profBanner" src='{{banner}}' alt="Banner">
<img id="profAvatar" src='{{avatar}}' alt="Avatar"> <img id="profAvatar" src='{{avatar}}' alt="Avatar">
<div id="motdBox"> <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> </div>
<div id="profCards"> <div id="profCards">

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

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