modules/video_upload/video_upload_browser.js

// $Id: video_upload_browser.js,v 1.4 2008/06/13 18:15:14 jhedstrom Exp $

/**
 * Rename file field name to YouTube requirements on submit
 */
Drupal.behaviors.videoUploadAutoAttach = function() {
  // change form input name to "file", as required by youtube
  $("input[@type='file'].video-upload-file").attr('name', 'file');
  alert('foo');
  // add upload-module-like behavior to the *form* submit/preview buttons
  $('form.video-upload #edit-preview, form.video-upload #edit-submit').each(function() {
    var upload = new Drupal.videoUpload(this);
  })
}

/**
 * Double-submit behavior for submit and preview buttons
 * The following is based on Drupal.redirectFormButton()
 * in drupal.js
 */
Drupal.videoUpload = function(button) {
  // Trap the button
  button.onmouseover = button.onfocus = function() {
    button.onclick = function() {

      // @todo loop through all video upload file fields
      var upFile = $("input[@type='file'].video-upload-file");
      if (upFile.val().length > 0 && Drupal.videoUploadValidateFile(upFile.get(0))) {

	// Insert progressbar and stretch to take the same space.
	var progress = new Drupal.progressBar('uploadprogress');
	progress.setProgress(-1, 'Uploading video. This may take some time...');

	var el = progress.element;
	var offset = $('#edit-submit').get(0).offsetHeight;

	$(el).css({
          width: '28em',
	  height: offset +'px',
	  paddingTop: '10px',
          display: 'none'
	});

	$('#edit-submit').after(el);
	$(el).fadeIn('slow');
        $('#edit-submit, #edit-preview, #edit-delete, .video-upload-submit').fadeOut('slow');
	// end progress bar

        Drupal.videoUpload.sendVideo(button);
      }
      else {
        // no file in place, submit normally
        return true;
      }
    }
  }

  button.onmouseout = button.onblur = function() {
    button.onclick = null;
  }
}

Drupal.videoUpload.sendVideo = function(button) {
  // @fixme: this won't work with multiple YouTube posts. It needs to
  // pass the associated uri with the file, which will be looped
  var control = $('.video-upload-url').get(0);
  var base = control.id.substring(5,control.id.length - 4);
  var uri = control.value;
  var wrapper = '#' + base + '-wrapper';

  // get the current action and target
  var oldAction = button.form.action;
  var oldTarget = button.form.target;

  // Redirect form submission to iframe
  button.form.action = uri;
  button.form.target = 'redirect-target';

  // Create target iframe
  Drupal.createIframe();

  // Set iframe handler for later
  window.iframeHandler = function () {
      var iframe = $('#redirect-target').get(0);
    // Restore form submission
    button.form.action = oldAction;
    button.form.target = oldTarget;

    // Get response from iframe body
    try {
      response = (iframe.contentWindow || iframe.contentDocument || iframe).document.body.innerHTML;
      // Firefox 1.0.x hack: Remove (corrupted) control characters
      response = response.replace(/[\f\n\r\t]/g, ' ');
      if (window.opera) {
        // Opera-hack: it returns innerHTML sanitized.
        response = response.replace(/&quot;/g, '"');
      }

    }
    catch (e) {
      response = null;
    }

    response = Drupal.parseJson(response);
    // Check response code
    if (response.status == 0) {
      Drupal.videoUpload.sendVideo.onerror(response.data);
      return false;
    }
    Drupal.videoUpload.sendVideo.oncomplete(response.data, wrapper);

    // now submit form normally
    button.click();

    return true;
  }

  return true;
}

/**
 * Error handling function
 */
Drupal.videoUpload.sendVideo.onerror = function(data) {
    alert('An error has occurred:\n\n' + data);
}

Drupal.videoUpload.sendVideo.oncomplete = function(data, wrapper) {
  // Remove old form
  Drupal.freezeHeight(); // Avoid unnecessary scrolling
  $(wrapper).html('');

  // Place HTML into temporary div
  var div = document.createElement('div');
  $(div).html(data)

  $(div).hide();
  $(wrapper).append(div);
  $(div).fadeIn('slow');

  Drupal.uploadAutoAttach();

  Drupal.unfreezeHeight();
  return;
}

/**
 * Modified handler for the form redirection submission. Taken from
 * /misc/upload.js. This function hides the submit/preview/delete
 * buttons while the video is being sent to YouTube.
 */
Drupal.videoUpload.sendVideo.onsubmit = function () {
  // Insert progressbar and stretch to take the same space.
  this.progress = new Drupal.progressBar('uploadprogress');

  if ($(this.button).is('.video-upload')) {
    // If this is a video upload, hide preview/submit/delete buttons
    $('#edit-submit, #edit-preview, #edit-delete').fadeOut('slow');    
    // Change the message
    this.progress.setProgress(-1, 'Uploading video, this may take some time...');
  }
  else {
    // Default Drupal upload message
    this.progress.setProgress(-1, 'Uploading file');
  }  

  var hide = this.hide;
  var el = this.progress.element;
  var offset = $(hide).get(0).offsetHeight;
  $(el).css({
    width: '28em',
    height: offset +'px',
    paddingTop: '10px',
    display: 'none'
  });
  $(hide).css('position', 'absolute');

  $(hide).after(el);
  $(el).fadeIn('slow');
  $(hide).fadeOut('slow');
}

/**
 * Modified handler for the form redirection completion. Taken from
 * /misc/upload.js. This function must re-display the
 * submit/preview/delete buttons hidden by the onsubmit handler.
 */
Drupal.videoUpload.sendVideo.oncomplete = function (data) {
  if ($(this.button).is('.video-upload')) {
    // If this is a video upload, hide preview/submit/delete buttons
    $('#edit-submit, #edit-preview, #edit-delete').fadeIn('slow');    
  }

  // Remove old form
  Drupal.freezeHeight(); // Avoid unnecessary scrolling
  $(this.wrapper).html('');

  // Place HTML into temporary div
  var div = document.createElement('div');
  $(div).html(data);

  // If uploading the first attachment fade in everything
  if ($('tr', div).size() == 2) {
    // Replace form and re-attach behaviour
    $(div).hide();
    $(this.wrapper).append(div);
    $(div).fadeIn('slow');
    Drupal.uploadAutoAttach();
  }
  // Else fade in only the last table row
  else {
    // Hide form and last table row
    $('table tr:last-of-type td', div).hide();

    // Note: workaround because jQuery's #id selector does not work outside of 'document'
    // Should be: $(this.hide, div).hide();
    var hide = this.hide;
    $('div', div).each(function() {
      if (('#'+ this.id) == hide) {
        this.style.display = 'none';
      }
    });

    // Replace form, fade in items and re-attach behaviour
    $(this.wrapper).append(div);
    $('table tr:last-of-type td', div).fadeIn('slow');
    $(this.hide, div).fadeIn('slow');
    Drupal.uploadAutoAttach();
  }
  Drupal.unfreezeHeight();
}
1	// $Id: video_upload_browser.js,v 1.4 2008/06/13 18:15:14 jhedstrom Exp $
2
3	/**
4	* Rename file field name to YouTube requirements on submit
5	*/
6	Drupal.behaviors.videoUploadAutoAttach = function() {
7	// change form input name to "file", as required by youtube
8	$("input[@type='file'].video-upload-file").attr('name', 'file');
9	alert('foo');
10	// add upload-module-like behavior to the form submit/preview buttons
11	$('form.video-upload #edit-preview, form.video-upload #edit-submit').each(function() {
12	var upload = new Drupal.videoUpload(this);
13	})
14	}
15
16	/**
17	* Double-submit behavior for submit and preview buttons
18	* The following is based on Drupal.redirectFormButton()
19	* in drupal.js
20	*/
21	Drupal.videoUpload = function(button) {
22	// Trap the button
23	button.onmouseover = button.onfocus = function() {
24	button.onclick = function() {
25
26	// @todo loop through all video upload file fields
27	var upFile = $("input[@type='file'].video-upload-file");
28	if (upFile.val().length > 0 && Drupal.videoUploadValidateFile(upFile.get(0))) {
29
30	// Insert progressbar and stretch to take the same space.
31	var progress = new Drupal.progressBar('uploadprogress');
32	progress.setProgress(-1, 'Uploading video. This may take some time...');
33
34	var el = progress.element;
35	var offset = $('#edit-submit').get(0).offsetHeight;
36
37	$(el).css({
38	width: '28em',
39	height: offset +'px',
40	paddingTop: '10px',
41	display: 'none'
42	});
43
44	$('#edit-submit').after(el);
45	$(el).fadeIn('slow');
46	$('#edit-submit, #edit-preview, #edit-delete, .video-upload-submit').fadeOut('slow');
47	// end progress bar
48
49	Drupal.videoUpload.sendVideo(button);
50	}
51	else {
52	// no file in place, submit normally
53	return true;
54	}
55	}
56	}
57
58	button.onmouseout = button.onblur = function() {
59	button.onclick = null;
60	}
61	}
62
63	Drupal.videoUpload.sendVideo = function(button) {
64	// @fixme: this won't work with multiple YouTube posts. It needs to
65	// pass the associated uri with the file, which will be looped
66	var control = $('.video-upload-url').get(0);
67	var base = control.id.substring(5,control.id.length - 4);
68	var uri = control.value;
69	var wrapper = '#' + base + '-wrapper';
70
71	// get the current action and target
72	var oldAction = button.form.action;
73	var oldTarget = button.form.target;
74
75	// Redirect form submission to iframe
76	button.form.action = uri;
77	button.form.target = 'redirect-target';
78
79	// Create target iframe
80	Drupal.createIframe();
81
82	// Set iframe handler for later
83	window.iframeHandler = function () {
84	var iframe = $('#redirect-target').get(0);
85	// Restore form submission
86	button.form.action = oldAction;
87	button.form.target = oldTarget;
88
89	// Get response from iframe body
90	try {
91	response = (iframe.contentWindow \|\| iframe.contentDocument \|\| iframe).document.body.innerHTML;
92	// Firefox 1.0.x hack: Remove (corrupted) control characters
93	response = response.replace(/[\f\n\r\t]/g, ' ');
94	if (window.opera) {
95	// Opera-hack: it returns innerHTML sanitized.
96	response = response.replace(/"/g, '"');
97	}
98
99	}
100	catch (e) {
101	response = null;
102	}
103
104	response = Drupal.parseJson(response);
105	// Check response code
106	if (response.status == 0) {
107	Drupal.videoUpload.sendVideo.onerror(response.data);
108	return false;
109	}
110	Drupal.videoUpload.sendVideo.oncomplete(response.data, wrapper);
111
112	// now submit form normally
113	button.click();
114
115	return true;
116	}
117
118	return true;
119	}
120
121	/**
122	* Error handling function
123	*/
124	Drupal.videoUpload.sendVideo.onerror = function(data) {
125	alert('An error has occurred:\n\n' + data);
126	}
127
128	Drupal.videoUpload.sendVideo.oncomplete = function(data, wrapper) {
129	// Remove old form
130	Drupal.freezeHeight(); // Avoid unnecessary scrolling
131	$(wrapper).html('');
132
133	// Place HTML into temporary div
134	var div = document.createElement('div');
135	$(div).html(data)
136
137	$(div).hide();
138	$(wrapper).append(div);
139	$(div).fadeIn('slow');
140
141	Drupal.uploadAutoAttach();
142
143	Drupal.unfreezeHeight();
144	return;
145	}
146
147	/**
148	* Modified handler for the form redirection submission. Taken from
149	* /misc/upload.js. This function hides the submit/preview/delete
150	* buttons while the video is being sent to YouTube.
151	*/
152	Drupal.videoUpload.sendVideo.onsubmit = function () {
153	// Insert progressbar and stretch to take the same space.
154	this.progress = new Drupal.progressBar('uploadprogress');
155
156	if ($(this.button).is('.video-upload')) {
157	// If this is a video upload, hide preview/submit/delete buttons
158	$('#edit-submit, #edit-preview, #edit-delete').fadeOut('slow');
159	// Change the message
160	this.progress.setProgress(-1, 'Uploading video, this may take some time...');
161	}
162	else {
163	// Default Drupal upload message
164	this.progress.setProgress(-1, 'Uploading file');
165	}
166
167	var hide = this.hide;
168	var el = this.progress.element;
169	var offset = $(hide).get(0).offsetHeight;
170	$(el).css({
171	width: '28em',
172	height: offset +'px',
173	paddingTop: '10px',
174	display: 'none'
175	});
176	$(hide).css('position', 'absolute');
177
178	$(hide).after(el);
179	$(el).fadeIn('slow');
180	$(hide).fadeOut('slow');
181	}
182
183	/**
184	* Modified handler for the form redirection completion. Taken from
185	* /misc/upload.js. This function must re-display the
186	* submit/preview/delete buttons hidden by the onsubmit handler.
187	*/
188	Drupal.videoUpload.sendVideo.oncomplete = function (data) {
189	if ($(this.button).is('.video-upload')) {
190	// If this is a video upload, hide preview/submit/delete buttons
191	$('#edit-submit, #edit-preview, #edit-delete').fadeIn('slow');
192	}
193
194	// Remove old form
195	Drupal.freezeHeight(); // Avoid unnecessary scrolling
196	$(this.wrapper).html('');
197
198	// Place HTML into temporary div
199	var div = document.createElement('div');
200	$(div).html(data);
201
202	// If uploading the first attachment fade in everything
203	if ($('tr', div).size() == 2) {
204	// Replace form and re-attach behaviour
205	$(div).hide();
206	$(this.wrapper).append(div);
207	$(div).fadeIn('slow');
208	Drupal.uploadAutoAttach();
209	}
210	// Else fade in only the last table row
211	else {
212	// Hide form and last table row
213	$('table tr:last-of-type td', div).hide();
214
215	// Note: workaround because jQuery's #id selector does not work outside of 'document'
216	// Should be: $(this.hide, div).hide();
217	var hide = this.hide;
218	$('div', div).each(function() {
219	if (('#'+ this.id) == hide) {
220	this.style.display = 'none';
221	}
222	});
223
224	// Replace form, fade in items and re-attach behaviour
225	$(this.wrapper).append(div);
226	$('table tr:last-of-type td', div).fadeIn('slow');
227	$(this.hide, div).fadeIn('slow');
228	Drupal.uploadAutoAttach();
229	}
230	Drupal.unfreezeHeight();
231	}