-
Notifications
You must be signed in to change notification settings - Fork 0
/
Image.aspx
214 lines (199 loc) · 11.4 KB
/
Image.aspx
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Image" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<!-- StyleSheets -->
<link rel="stylesheet" type="text/css" href="/stylesheets/image.css" />
<!-- Scripts -->
<script type="text/javascript" src="/scripts/jquery.autosize.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- FACEBOOK JS SDK -->
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="content">
<br />
<!--SCRIPT MANAGER FOR UPDATE PANELS -->
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<div class="outer">
<div class="inner">
<!-- UPDATE PANEL 1 CONTAINS THE TITLE OF IMAGE -->
<asp:UpdatePanel ID="UpdatePanel1" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="updateButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="imageTitle" CssClass="img-title" runat="server" Text="Title of the image goes here"></asp:Label>
<asp:TextBox ID="updateTitle" ClientIDMode="Static" CssClass="img-title updateBox" Visible="false" runat="server"></asp:TextBox>
<asp:Label ID="imageUser" CssClass="img-user" runat="server" Text="Label"></asp:Label>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<!-- UPDATE PANEL 1 ENDS -->
<div class="img-container">
<!-- MAIN IMAGE IS OUTSIDE OF UPDATE PANELS -->
<asp:Image ID="Image1" runat="server" CssClass="image" />
<!-- UPDATE PANEL 2 CONTAINS THE DELETE/UPDATE/SAVE BUTTONS -->
<asp:UpdatePanel ID="UpdatePanel2" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="updateButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="deleteButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<div class="buttonGroup">
<asp:LinkButton ID="deleteButton" CssClass="updateButton submitButton" Visible="false" OnClick="delete_Click" OnClientClick="if (!confirm('Are you sure you want to delete this image?')) return false;" runat="server">Delete</asp:LinkButton>
<asp:LinkButton ID="updateButton" CssClass="updateButton submitButton" Visible="false" OnClick="updateButton_Click" runat="server">Update Info</asp:LinkButton>
<asp:LinkButton ID="saveButton" CssClass="updateButton submitButton" Visible="false" OnClick="saveButton_Click" runat="server">Save</asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UPDATE PANEL 2 ENDS -->
</div>
</div>
</div>
<div class="clear"></div>
<!-- UPDATE PANEL 3 CONTAINS THE IMG DESCRIPTION -->
<asp:UpdatePanel ID="UpdatePanel3" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="updateButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="imageDescription" CssClass="img-desc" runat="server" Text="Description of the image goes here"></asp:Label>
<asp:TextBox ID="updateDesc" ClientIDMode="Static" CssClass="img-desc" TextMode="MultiLine" Visible="false" runat="server"></asp:TextBox>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<!-- UPDATE PANEL 3 ENDS -->
<div class="buttons">
<!-- UPDATE PANEL 4 CONTAINS THE BUTTONS FOR VOTING -->
<asp:UpdatePanel ID="UpdatePanel4" RenderMode="Inline" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="upButton" OnClick="upButton_Click" Text="Up ↑" CssClass="uploadButton" />
<asp:TextBox runat="server" ID="upCount" Width="10" Text="0" Enabled="false" />
<asp:Button runat="server" ID="downButton" OnClick="downButton_Click" Text="Down ↓" CssClass="uploadButton" />
<asp:TextBox runat="server" ID="downCount" Width="10" Text="0" Enabled="false" />
<asp:Button runat="server" ID="cuddleButton" OnClick="cuddleButton_Click" Text="Cuddle ♥" CssClass="uploadButton"/>
<asp:TextBox runat="server" ID="cuddleCount" Width="10" Text="0" Enabled="false" />
</ContentTemplate>
</asp:UpdatePanel>
<!-- UPDATE PANEL 4 ENDS -->
<!-- FB LIKE / SHARE BUTTON -->
<fb:like send="true" layout="button_count" width="0" show_faces="true"></fb:like>
<!-- AddThis Button BEGIN -->
<div style="display: inline-block" id="addThis" class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a style="font-size: 13px; color: #3B5998; position: relative" class="addthis_button_email">Email</a>
</div>
<!-- AddThis Button END -->
<br />
</div>
<!-- UPDATE PANEL 5 CONTAINS THE COMMENTS -->
<asp:UpdatePanel ID="UpdatePanel5" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="commentButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<div class="comments">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:LoginStatus ID="LoginStatus1" runat="server" />
to leave a comment. Don't have an account?
<a href="Register.aspx">Sign up.</a>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:TextBox ID="AddCommentBox" CssClass="comment-box" Rows="1" Columns="60" placeholder="Add a comment..." TextMode="MultiLine" ClientIDMode="Static" runat="server"></asp:TextBox>
</LoggedInTemplate>
</asp:LoginView>
<asp:Button ID="commentButton" CssClass="uploadButton" runat="server" OnClick="commentButton_Click" Style="display: none;" Text="Comment"></asp:Button>
<br />
<br />
<b>Comments</b>
<asp:Panel ID="commentPanel" runat="server">
<asp:Panel ID="nocomment" Style='font-size: 16px; margin-top: 10px;' runat="server">No comments yet.</asp:Panel>
</asp:Panel>
<br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UPDATE PANEL 5 ENDS -->
<!-- UPDATE PANEL 6 CONTAINS ERROR -->
<asp:UpdatePanel ID="UpdatePanel6" ClientIDMode="Static" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="deleteButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="updateButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="closeError" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="upButton" EventName="Click"/>
<asp:AsyncPostBackTrigger ControlID="downButton" EventName="Click"/>
<asp:AsyncPostBackTrigger ControlID="cuddleButton" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Panel runat="server" ClientIDMode="Static" ID="lightbox" Visible="false">
<div id="content">
<asp:Label ID="error" ClientIDMode="Static" CssClass="error" runat="server" Text=""></asp:Label>
<asp:Button ID="closeError" runat="server" OnClick="closeError_Click" Text="Close" CssClass="submitButton" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- ENTER KEY PRESSED ON COMMENT BOX-->
<script>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
//autosize textarea
$('textarea').autosize();
//get panels updated
var panelsUpdated = args.get_panelsUpdated();
for (var i = 0; i < panelsUpdated.length; i++) {
if (panelsUpdated[i].id === "UpdatePanel5") {
//it's ok
//console.log("YES: "+i + " "+ panelsUpdated[i].id);
}
//we don't want other update panels
else {
//console.log("NO: " + panelsUpdated[i].id);
return;
}
}
//console.log("HERE");
$("#AddCommentBox").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
//simulate the button click
__doPostBack("<%=commentButton.UniqueID %>", "");
}
});
/* DELETING A COMMENT */
/* The page method deleteComment is called when delete button is clicked on server side */
/* If return value is true than we remove the comment from the page */
/* the actual comment entry from database is removed by the page method */
//comment id being deleted
var commId;
//delete a comment when button is clicked.
$(".deleteCommentButton").click(function (e) {
//ask if user wants to delet a comment.
if (!confirm('Are you sure you want to delete this comment?')) return false;
commId = $(this).val();
PageMethods.deleteComment(commId, onResultDelete);
});
//on delete remove the div
function onResultDelete(result) {
if (result === true) {
$("#comment" + commId).remove();
}
}
}
</script>
</asp:Content>