2022.2

});
function getCameraIndex(){
return $("input.camera-dyn").length;
}
function addCameraWidget(cameraID, value) {
if(typeof value == 'undefined') {
value = '';
}
var html = '<label>Camera' +
var html = '<label>Camera' +
'<div id="' + cameraID + '" role="cotg.PhotoWidget">' +
'<div class="panel" role="control-wrapper" style="position:relative;">' +
'<img role="photo" src="">' +
'<input role="photo-data" class="camera-dyn" name="' + cameraID + '" type="hidden" value="' + value + '">' +
'</div>' +
'<button class="small" role="take-button" type="button">Take now</button>' +
'<button class="small" role="pick-button" type="button">Library</button>' +
'<button class="small" role="clear-button" type="button">Clear</button>' +
'</div></label>';
$('#cameras').append(html); // add the camera object to the DOM
$('#' + cameraID).cotgPhotoWidget(); // init COTG widget
}
Saving and restoring custom data and widgets
TheCaptureOnTheGo(COTG)appstoresthevaluesoftheinputfieldstothelocalrepositoryofthe
appuponclosingtheForm.OnreopeningtheFormtheoriginalinputfieldsandtheirvaluesare
restored.However,dynamicallyaddedwidgets(see"DynamicallyaddingCOTGwidgets"onpage548)
don'tgetrestored.Thisneedstobehandledincode.Thistopicexplainshowtodothat.
Addingeventlisteners
IntheprocessofclosingandopeningaFormtwoimportanteventsaretriggeredbytheCOTGlibrary:
l
olcotgsavestate.Thiseventismeantforcustomscriptstosaveinformationwhentheuser
closesorsubmitstheForm.Itoccursafterthestateofallstaticinputfieldshasbeensaved.
l
olcotgrestorestate.ThiseventallowscustomscriptstodosomethingwhentheFormis
reopened.Itoccursafterallstaticinputshavebeenrestored.
Tolatchontotheseevents,youhavetoregisteraolcotgsavestatelistenerandaolcot-
grestorestatelistener,respectively,onthewindowobject.Thewindowobjectrepresentsawin-
dowcontainingaDOM(documentobjectmodel),inthiscasetheCOTGForm.
ThefunctioncallbackonitsaddEventListenermethodallowsyoutoimplementcustomcodeaspart
ofthesaveandrestoreprocesses.
(FormoreinformationabouttheaddEventListenermethodseethedocumentation:Mozillaand
w3schools.)
Thefollowingcoderegisterstheolcotgsavestatelisteneronthewindowobject.
window.addEventListener('olcotgsavestate', function(event) {
/* code to save custom data */
});
Page 551