jQuery: functie uitbreiden
Leuk een aardig: de eerste extensie komt er aan.
Preview van geuploade afbeeldingen.
Nu heb ik de HTML al klaar.
De CSS was een makkie.
Maar de jQuery is (vind ik) lastiger:
Ik heb nu deze functie aangepast:
Code (php)
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
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
/**
* Update the relevant elements and hidden data for an attachment.
*
* @param int index The index from phpbb.plupload.ids of the attachment to edit.
* @param array downloadUrl Optional array of download urls to update.
* @return undefined
*/
phpbb.plupload.updateRow = function(index, downloadUrl) {
var attach = phpbb.plupload.data[index],
row = $('[data-attach-id="' + attach.attach_id + '"]');
// Add the link to the file
if (typeof downloadUrl !== 'undefined' && typeof downloadUrl[index] !== 'undefined') {
var url = downloadUrl[index].replace('&', '&'),
link = $('<a></a>');
link.attr('href', url).html(attach.real_filename);
row.find('.file-name').html(link);
}
/* eddy */
row.find('.previewupload').attr('src', url);
row.find('textarea').attr('name', 'comment_list[' + index + ']');
phpbb.plupload.updateHiddenData(row, attach, index);
};
* Update the relevant elements and hidden data for an attachment.
*
* @param int index The index from phpbb.plupload.ids of the attachment to edit.
* @param array downloadUrl Optional array of download urls to update.
* @return undefined
*/
phpbb.plupload.updateRow = function(index, downloadUrl) {
var attach = phpbb.plupload.data[index],
row = $('[data-attach-id="' + attach.attach_id + '"]');
// Add the link to the file
if (typeof downloadUrl !== 'undefined' && typeof downloadUrl[index] !== 'undefined') {
var url = downloadUrl[index].replace('&', '&'),
link = $('<a></a>');
link.attr('href', url).html(attach.real_filename);
row.find('.file-name').html(link);
}
/* eddy */
row.find('.previewupload').attr('src', url);
row.find('textarea').attr('name', 'comment_list[' + index + ']');
phpbb.plupload.updateHiddenData(row, attach, index);
};
De enige EXTRA code is hetgeen wat onder /* Eddy */ staat.
Dat is al.
Maar ik wil deze functie niet aanpassen.
Ik wil in een (nieuw) bestand deze functie uitbreiden, zodanig dat mijn regel (die van onder /* eddy */) er aan toe wordt gevoegd.
De volgorde maakt niet uit, hij mag ook al aller laatste.
HOE?
Toevoeging op 27/12/2014 16:20:47:
Kan mij iemand vertellen wat voor functie dit eigenlijk is?
Is het een Widget?
Wat is 'phpbb' in deze naamstelling? Is het een NAMESPACE?
Wat is .updateRow? Want die wordt in mijn editor een andere kleur gegeven dan phpbb.plupload.
En vooral: hoe voeg ik mijn regel toe ZONDER de functie hierboven aan te passen?
Ook het aanroepen van een andere functie (ipv phpbb.plupload.updateRow) is niet mogelijk.
Het moet extern (ander bestand) uitgebreid worden.
phpbb is een object:
Code (js)
1
var phpbb = {};
Bron: https://github.com/phpbb/phpbb/blob/040d451dcca9ae54d8f4b7bdd2f231033765a8f2/phpBB/assets/javascript/core.js#L1
>> Wat is .updateRow? Want die wordt in mijn editor een andere kleur gegeven dan phpbb.plupload.
plupload is een property van phpbb (die trouwens ongedefinieerd is in PHPbb). updateRow is weer een property van deze property en deze bevat een functie. Je kan het dus zien als de method van de phpbb.plupload class.
Terug naar je vraag. Je zou de originele functie kunnen kopieren naar een andere property en dan deze property kunnen overschrijven met je eigen functie, die weer de oude functie aanroept + de custom code. Zoiets:
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
phpbb.plupload._updateRow = phpbb.plupload.updateRow;
phpbb.plupload.updateRow = function (index, downloadUrl) {
phpbb.plupload._updateRow(index, downloadUrl); // de methods zijn static en niet gebonden aan de prototype, dus geen this._updateRow() gebruiken!
var row = $('[data-attach-id="' + attach.attach_id + '"]');
var url = row.find('.file-name a').attr('href');
row.find('.previewupload').attr('src', url);
};
phpbb.plupload.updateRow = function (index, downloadUrl) {
phpbb.plupload._updateRow(index, downloadUrl); // de methods zijn static en niet gebonden aan de prototype, dus geen this._updateRow() gebruiken!
var row = $('[data-attach-id="' + attach.attach_id + '"]');
var url = row.find('.file-name a').attr('href');
row.find('.previewupload').attr('src', url);
};
Maar eigenlijk kopieer je eerst de oude.
Je maakt een nieuwe (ipv de oude)
Je roept in de nieuwe de oude aan.
Klinkt redelijk logisch.
Top!
Nu nog eens uitvogelen hoe ik via een extensie zelf een template (HTML) kan gebruiken.
Bestand is al klaar, maar hij doet er niets mee.
En dan is het voor mij toch lastiger zoeken dan producerele PHP-code.
Gewijzigd op 28/12/2014 13:19:09 door Eddy E
Als ik deze later toevoegd (in de footer), dan wordt deze niet uitgevoerd. Ook een alert('Hoi'); komt dan niet door.
Hoe zorg ik er voor dat deze functie (achteraf!) de eerder geschreven functie echt vervangt?
Toevoeging op 02/01/2015 13:25:35:
Als ik dit script gebruik, krijg ik alleen de "1" in de alert te zien.
De "2" dus niet.
Iemand een oplossing?
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
alert("1");
phpbb.plupload._updateRow = phpbb.plupload.updateRow;
phpbb.plupload.updateRow = function (index, downloadUrl) {
alert("2");
phpbb.plupload._updateRow(index, downloadUrl); // de methods zijn static en niet gebonden aan de prototype, dus geen this._updateRow() gebruiken!
var row = $('[data-attach-id="' + attach.attach_id + '"]');
var url = row.find('.file-name a').attr('href');
row.find('.previewupload').attr('src', url);
};
</script>
alert("1");
phpbb.plupload._updateRow = phpbb.plupload.updateRow;
phpbb.plupload.updateRow = function (index, downloadUrl) {
alert("2");
phpbb.plupload._updateRow(index, downloadUrl); // de methods zijn static en niet gebonden aan de prototype, dus geen this._updateRow() gebruiken!
var row = $('[data-attach-id="' + attach.attach_id + '"]');
var url = row.find('.file-name a').attr('href');
row.find('.previewupload').attr('src', url);
};
</script>
Toevoeging op 02/01/2015 13:27:38:
Online voorbeeld: http://zunflappie.nl/phpbb31/posting.php?mode=reply&f=2&t=1
Toevoeging op 02/01/2015 13:33:26:
Nog specifieker:
Code (js)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
alert("1");
phpbb.plupload._updateRow = phpbb.plupload.updateRow;
alert("1.5");
alert("1");
phpbb.plupload._updateRow = phpbb.plupload.updateRow;
alert("1.5");
Ik krijg alleen de 1 te zien. De 1.5 al niet meer.
Gewijzigd op 03/01/2015 08:14:06 door Eddy E