Notice form cleanup: removing hardcoded IDs from attachment handling (prep for reusable notice forms)

This commit is contained in:
Brion Vibber 2011-03-03 16:56:54 -08:00
parent 77a3017e9e
commit 1ff17f0ed9
14 changed files with 46 additions and 50 deletions

View File

@ -53,8 +53,6 @@ var SN = { // StatusNet
NoticeDataText: 'notice_data-text',
NoticeTextCount: 'notice_text-count',
NoticeInReplyTo: 'notice_in-reply-to',
NoticeDataAttach: 'notice_data-attach',
NoticeDataAttachSelected: 'notice_data-attach_selected',
NoticeActionSubmit: 'notice_action-submit',
NoticeLat: 'notice_data-lat',
NoticeLon: 'notice_data-lon',
@ -368,7 +366,7 @@ var SN = { // StatusNet
if (parseInt(xhr.status) === 0 || jQuery.inArray(parseInt(xhr.status), SN.C.I.HTTP20x30x) >= 0) {
form
.resetForm()
.find('#'+SN.C.S.NoticeDataAttachSelected).remove();
.find('.attach-status').remove();
SN.U.FormNoticeEnhancements(form);
}
else {
@ -425,8 +423,8 @@ var SN = { // StatusNet
}
}
form.resetForm();
form.find('#'+SN.C.S.NoticeInReplyTo).val('');
form.find('#'+SN.C.S.NoticeDataAttachSelected).remove();
form.find('[name=inreplyto]').val('');
form.find('.attach-status').remove();
SN.U.FormNoticeEnhancements(form);
}
},
@ -850,36 +848,34 @@ var SN = { // StatusNet
*
* This preview box will also allow removing the attachment
* prior to posting.
*
* @param {jQuery} form
*/
NoticeDataAttach: function() {
NDA = $('#'+SN.C.S.NoticeDataAttach);
NoticeDataAttach: function(form) {
var NDA = form.find('input[type=file]');
NDA.change(function(event) {
form.find('.attach-status').remove();
var filename = $(this).val();
if (!filename) {
// No file -- we've been tricked!
$('#'+SN.C.S.NoticeDataAttachSelected).remove();
return false;
}
// @fixme appending filename straight in is potentially unsafe
S = '<div id="'+SN.C.S.NoticeDataAttachSelected+'" class="'+SN.C.S.Success+'"><code>'+filename+'</code> <button class="close">&#215;</button></div>';
NDAS = $('#'+SN.C.S.NoticeDataAttachSelected);
if (NDAS.length > 0) {
NDAS.replaceWith(S);
}
else {
$('#'+SN.C.S.FormNotice).append(S);
}
$('#'+SN.C.S.NoticeDataAttachSelected+' button').click(function(){
$('#'+SN.C.S.NoticeDataAttachSelected).remove();
var attachStatus = $('<div class="attach-status '+SN.C.S.Success+'"><code></code> <button class="close">&#215;</button></div>');
attachStatus.find('code').text(filename);
attachStatus.find('button').click(function(){
attachStatus.remove();
NDA.val('');
return false;
});
form.append(attachStatus);
if (typeof this.files == "object") {
// Some newer browsers will let us fetch the files for preview.
for (var i = 0; i < this.files.length; i++) {
SN.U.PreviewAttach(this.files[i]);
SN.U.PreviewAttach(form, this.files[i]);
}
}
});
@ -915,13 +911,14 @@ var SN = { // StatusNet
* Known fail:
* - Opera 10.63, 11 beta (no input.files interface)
*
* @param {jQuery} form
* @param {File} file
*
* @todo use configured thumbnail size
* @todo detect pixel size?
* @todo should we render a thumbnail to a canvas and then use the smaller image?
*/
PreviewAttach: function(file) {
PreviewAttach: function(form, file) {
var tooltip = file.type + ' ' + Math.round(file.size / 1024) + 'KB';
var preview = true;
@ -981,11 +978,11 @@ var SN = { // StatusNet
.attr('alt', tooltip)
.attr('src', url)
.attr('style', 'height: 120px');
$('#'+SN.C.S.NoticeDataAttachSelected).append(img);
form.find('.attach-status').append(img);
});
} else {
var img = $('<div></div>').text(tooltip);
$('#'+SN.C.S.NoticeDataAttachSelected).append(img);
form.find('.attach-status').append(img);
}
},
@ -1365,9 +1362,8 @@ var SN = { // StatusNet
$('.'+SN.C.S.FormNotice).each(function() {
SN.U.FormNoticeXHR($(this));
SN.U.FormNoticeEnhancements($(this));
SN.U.NoticeDataAttach($(this));
});
SN.U.NoticeDataAttach();
}
},

2
js/util.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -651,7 +651,7 @@ width:81.5%;
margin-bottom:0;
line-height:1.618;
}
.form_notice #notice_data-attach_selected code {
.form_notice .attach-status code {
float:left;
width:80%;
display:block;
@ -659,7 +659,7 @@ overflow:auto;
margin-right:2.5%;
font-size:1.1em;
}
.form_notice #notice_data-attach_selected button.close {
.form_notice .attach-status button.close {
float:right;
font-size:0.8em;
}

View File

@ -26,11 +26,11 @@ display:block;
width:17%;
max-width:17%;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}

View File

@ -519,7 +519,7 @@ margin-bottom:0;
line-height:1.618;
}
.form_notice #notice_data-attach_selected button.close {
.form_notice .attach-status button.close {
float:right;
font-size:0.8em;
}

View File

@ -22,11 +22,11 @@ display:block;
width: 96px;
max-width: 96px;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}

View File

@ -22,11 +22,11 @@ display:block;
width: 106px;
max-width: 106px;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}

View File

@ -549,7 +549,7 @@ width:81.5%;
margin-bottom:0;
line-height:1.618;
}
.form_notice #notice_data-attach_selected code,
.form_notice .attach-status code,
.form_notice #notice_data-geo_name {
float:left;
width:80%;
@ -557,10 +557,10 @@ display:block;
overflow:auto;
margin-right:2.5%;
}
.form_notice #notice_data-attach_selected code {
.form_notice .attach-status code {
font-size:1.1em;
}
.form_notice #notice_data-attach_selected button.close,
.form_notice .attach-status button.close,
.form_notice #notice_data-geo_selected button.close {
float:right;
font-size:0.8em;

View File

@ -992,7 +992,7 @@ width:81.5%;
margin-bottom:0;
line-height:1.618;
}
.form_notice #notice_data-attach_selected code {
.form_notice .attach-status code {
float:left;
width:80%;
display:block;
@ -1000,7 +1000,7 @@ overflow:auto;
margin-right:2.5%;
font-size:1.1em;
}
.form_notice #notice_data-attach_selected button.close {
.form_notice .attach-status button.close {
float:right;
font-size:0.8em;
}

View File

@ -33,11 +33,11 @@ display:block;
width:17%;
max-width:17%;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}

View File

@ -506,7 +506,7 @@ width:81.5%;
margin-bottom:0;
line-height:1.618;
}
.form_notice #notice_data-attach_selected code {
.form_notice .attach-status code {
float:left;
width:80%;
display:block;
@ -514,7 +514,7 @@ overflow:auto;
margin-right:2.5%;
font-size:1.1em;
}
.form_notice #notice_data-attach_selected button.close {
.form_notice .attach-status button.close {
float:right;
font-size:0.8em;
}

View File

@ -302,7 +302,7 @@ address .poweredby {
margin-left: -2px;
}
.form_notice #notice_data-attach_selected code {
.form_notice .attach-status code {
font-size: 1.2em;
}
@ -312,7 +312,7 @@ address .poweredby {
padding: 6px 2px 6px 5px;
}
.form_notice #notice_data-attach_selected button.close {
.form_notice .attach-status button.close {
float:right;
font-size:0.8em;
}

View File

@ -21,11 +21,11 @@ display:block;
width: 106px;
max-width: 106px;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}

View File

@ -23,11 +23,11 @@ display:block;
width: 96px;
max-width: 96px;
}
.form_notice #notice_data-attach_selected,
.form_notice .attach-status,
.form_notice #notice_data-geo_selected {
width:78.75%;
}
.form_notice #notice_data-attach_selected button,
.form_notice .attach-status button,
.form_notice #notice_data-geo_selected button {
padding:0 4px;
}