Posts made by Perlchamp

Perlchamp

    // Override dom generator.
    getDom: function() {
	var wrapper = document.createElement("div");


	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // tabelle erstellen
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table';
	    wrapper.id = 'birthday-table';

	    // tabellenkopf erstellen
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = this.translate(this.config.title);
	    headerTR.appendChild(headerTH);
	    			
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);
			
	    // Create TBODY section with day names
	    var eintraege = 3;
	    for (var i=1; i< =eintraege; i++) {
		var tBody = document.createElement("tBody");
		tBody.className = "tbody";
		tBody.id = "birthday-tbody";

		var bodyTR = document.createElement("tr");
		bodyTR.className = "tr-body";
		bodyTR.id = "birthday-tr-body";

		var bodyTDimage = document.createElement("td");
		bodyTDimage.className = "td-image";
		bodyTDimage.id = "birthday-td-image";
		bodyTDimage.innerHTML = "23";

		var bodyTD = document.createElement("td");
		bodyTD.className = "td-body";
		bodyTD.id = "birthday-td-body";
		bodyTD.innerHTML = "Bettina Zimmermann&nbsp;&nbsp;< span class=\"age-span\"> 46 < /span > < /br > Frank Dubiel&nbsp;&nbsp; < span class=\"age-span\" > 54 < /span > < /br >Jürgen Gruse&nbsp;&nbsp; < span class=\"age-span\" > 52 < /span > ";

/*
		var bodyAgeSpan = document.createElement("span");
		bodyAgeSpan.className = "age-span";
		bodyAgeSpan.id = "birthday-age-span";
		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
		bodyTD.appendChild(bodyAgeSpan);
*/		

		bodyTR.appendChild(bodyTDimage);
		bodyTR.appendChild(bodyTD);
		tBody.appendChild(bodyTR);
		wrapper.appendChild(tBody);
	    }
	
	    this.loaded = true;
	    return wrapper;
	}
		
    },

this code looks like the image i did send before

Perlchamp

in the moment you’re too fast for me …
this code is from the test-module:

    getDom: function() {
	var wrapper = document.createElement("div");


	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // tabelle erstellen
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table';
	    wrapper.id = 'birthday-table';

	    // tabellenkopf erstellen
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = this.translate(this.config.title);
	    headerTR.appendChild(headerTH);
	    			
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);
			
	    // Create TBODY section with day names
	    var eintraege = 3;
	    for (var i=1; i<=eintraege; i++) {
		var tBody = document.createElement("tBody");
		tBody.className = "tbody";
		tBody.id = "birthday-tbody";

		var bodyTR = document.createElement("tr");
		bodyTR.className = "tr-body";
		bodyTR.id = "birthday-tr-body";

		var bodyTDimage = document.createElement("td");
		bodyTDimage.className = "td-image";
		bodyTDimage.id = "birthday-td-image";
		bodyTDimage.innerHTML = "23";

		var bodyTD = document.createElement("td");
		bodyTD.className = "td-body";
		bodyTD.id = "birthday-td-body";
		bodyTD.innerHTML = "Bettina Zimmermann&nbsp;&nbsp;<span class=\"age-span\">46</span></br>Frank Dubiel&nbsp;&nbsp;<span class=\"age-span\">54</span></br>Jürgen Gruse&nbsp;&nbsp;<span class=\"age-span\">52</span>";

/*
		var bodyAgeSpan = document.createElement("span");
		bodyAgeSpan.className = "age-span";
		bodyAgeSpan.id = "birthday-age-span";
		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
		bodyTD.appendChild(bodyAgeSpan);
*/		

		bodyTR.appendChild(bodyTDimage);
		bodyTR.appendChild(bodyTD);
		tBody.appendChild(bodyTR);
		wrapper.appendChild(tBody);
	    }
	
	    this.loaded = true;
	    return wrapper;
	}
		
    },

and looks like :

Perlchamp

you were too fast !!
to your information:
table needs a header (thead, tr, th) and a footer (tfoot, tr, td), and, of
course a boda (tbody, tr, td), my cose, where a put html-tags in the table and text without variable works fine.
but later, if i should dissapointed, i will try this.

Perlchamp

getDom:

    getDom: function() {
	var self = this;
	var wrapper = document.createElement("div");
		
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays))

	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // create table
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table'; 
	    wrapper.id = 'birthday-table';

	    // create header
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = "&nbsp;";
	    
	    headerTR.appendChild(headerTH);
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "&nbsp;";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);

	    // create TBODY section with day names
	    var tBody = document.createElement("tBody");
	    tBody.className = "tbody";
	    tBody.id = "birthday-tbody";
	    
	    for(var birthday of Object.keys(this.active_birthdays)) {
		for(var person of this.active_birthdays[birthday]) {
				
		    //var m = document.createElement('div');
				
		    // create looped row section
		    var bodyTR = document.createElement("tr");
		    bodyTR.className = "tr-body";
		    bodyTR.id = "birthday-tr-body";

		    var bodyTDimage = document.createElement("td");
		    //bodyTDimage.className = "td-image";
		    bodyTDimage.id = "birthday-td-image";
		    if (birthday.charAt(0) === "0") {
			birthday = birthday.replace("0","");
			birthday = birthday.substring(0,1);
		    }
		    bodyTDimage.innerText = birthday.substring(0,2);

		    var bodyTD = document.createElement("td");
		    bodyTD.className = "td-body";
		    bodyTD.id = "birthday-td-body";
		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp;<span class=\"age-span\">" + person.age + "</span>";
		    				
		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
		    //wrapper.appendChild(m);
		    
		    bodyTR.appendChild(bodyTDimage);
		    bodyTR.appendChild(bodyTD);
		    tBody.appendChild(bodyTR);
		    wrapper.appendChild(tBody);
		    
		}
	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	
	this.loaded = true;

/*
			


//		var bodyAgeSpan = document.createElement("span");
//		bodyAgeSpan.className = "age-span";
//		bodyAgeSpan.id = "birthday-age-span";
//		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
//		bodyTD.appendChild(bodyAgeSpan);
		

	    }
*/	
    },

Perlchamp

wrong line, moment:

//bodyTDimage.className = "td-image";

this works, but unformatted, of course

i don’t like things like:
innerHTLM = tags, tags, tags …

Perlchamp

width:27px; is placed in css
but this:

//bodyTDimage.id = "birthday-td-image";

works. i really have to write html-text in the module-file ?

Perlchamp

yes, of course, sir …

Perlchamp

this is the status at the moment :

Perlchamp

but this does not work yet:

		    var bodyTDimage = document.createElement("td");
		    bodyTDimage.className = "td-image";
		    bodyTDimage.id = "birthday-td-image";
		    if (birthday.charAt(0) === "0") {
			birthday = birthday.replace("0","");
			birthday = birthday.substring(0,1);
		    }
		    bodyTDimage.innerHTML = birthday.substring(0,2);

the value will not displayed, but i will find a way. my code yet is far away from a smart code :-))