-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmessage.html
More file actions
130 lines (97 loc) · 4.23 KB
/
message.html
File metadata and controls
130 lines (97 loc) · 4.23 KB
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
129
130
<!DOCTYPE html>
<html>
<head>
<title>Add a Message Pls</title>
<link rel="stylesheet" type="text/css" href="/newstatic/stylesheets/redstyle.css" />
<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
<div class="info">
<form method=POST>
<!--The title of the page-->
<header>
<h1 id="thumbnails">Choose a Message<span>Insert your own message or choose from our collection</span></h1>
</header>
<!--The table of images/text-->
<div class="table">
<div class="row">
{% for message in messages %}
<div class="col-xs-6 col-md-3">
<input type="radio" class="thumbnail btn btn-2 btn-2b" name="message" value="{{message}}" id="{{message}}">
<label for="{{message}}"><span class="btn btn-2 btn-2b highlight btn-options" /> {{message}} </span></label>
</div>
{% endfor %}
</div>
</div>
<!--The box where the user inputs in his own message-->
<textarea type="text" class="bottomline" id="words" name="message" maxlength="140"> </textarea>
<!--The next button-->
<div class="next"><button class="btn btn-2 btn-2b" id="forward"> Next</button> </div>
<input name="key" value = "{{ templatekey }}" type="hidden">
</form>
<!--The back button-->
<form method=GET action="/photo">
<div class="back"><button class="btn btn-2 btn-2b"> Back</button> </div>
<input name="key" value = "{{ templatekey }}" type="hidden">
</form>
<!--The write button. No method or action required here. Only for visual-->
<div class="write"><button class="btn btn-2 btn-2b" id="write"> Write Message</button> </div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script type="text/javascript">
//Used by the textarea to make next button appear if the user has typed a message, next won't appear
//until there is some form text in the box
var oldVal = "";
$("textarea").on("keydown keyup paste", function() {
var currentVal = $(this).val();
oldVal = currentVal;
if(currentVal===''){
$('button[id="forward"]').fadeOut(500).hide(); return
}
//action to be performed on textarea changed
$('button[id="forward"]').fadeIn(500).show();
});
//Hide the next and write buttons at page load
$('button[id="forward"]').hide();
$('button[id="write"]').hide();
//If an message is selected from our list, then next/write buttons appear, textarea disappears
$('input[name="message"]').click( function() {
$('textarea').fadeOut(500).hide();
$('span[class="character-count"]').fadeOut(500).hide();
$('button[id="forward"]').fadeIn(500).show();
$('button[id="write"]').fadeIn(500).show();
});
//if the write button is clicked, then textarea/counter appears, next and write disappears
$('button[id="write"]').click(function(){
//$('button[class="thumbnail"]').style.opacity = 0.35;
$('textarea').fadeIn(500).show();
$('span[class="character-count"]').fadeIn(500).show();
$('button[id="forward"]').fadeOut(500).hide();
$('button[id="write"]').fadeOut(500).hide();
$('.btn:checked').attr('checked', false);
});
//Keeps count of the amount of characters user has typed, auto displays to the user next to textarea
$("textarea[maxlength]").each(function() {
var $this = $(this);
var maxLength = parseInt($this.attr('maxlength'));
$this.attr('maxlength', null);
var el = $("<span class=\"character-count\">" + maxLength + "</span>");
el.insertAfter($this);
el.css('font','Lato, sans-serif');
el.css('position', 'fixed');
el.css('bottom','22%');
el.css('left', '65%');
$this.on('keyup', function() {
var cc = $this.val().length;
el.text(maxLength - cc);
if(maxLength < cc) {
el.css('color', 'red');
}
else {
el.css('color', null);
}
});
});
</script>
</html>