Posts made by Perlchamp

Perlchamp

doesn’t work (black screen) yet, BUT:

the classes set in “” ?
no use of appendchild ?
the wrapper set in “” ?

i did :

no
correct
no

question:
get i problems with this.create… because of “var self = this” ?

Perlchamp

and the parent-element itselfs get a 0 (null) as parent ?

Perlchamp

when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

where i have to place it ?

sam, take my going code and see by yourself. here is the css:

/*
.birthdaylist .app {
    width: 200px;
    padding: 0px;
}
*/

.birthdaylist .table {
  padding: 0px;
  margin: 0px;
/*
  border: 1px solid white;
  width: 200px;
*/
}

.birthdaylist .thead {

}

.birthdaylist .tr-head {

}

.birthdaylist header {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 20px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #444444;
  line-height: 20px;
  padding-bottom: 5px;
  color: #ffffff;
/*
  font-variant: small-caps;
*/
}

.birthdaylist .tfoot {

/*
  height: 10px;
  padding: 0px;
  margin: 0px;
*/
}

.birthdaylist .tr-foot {

/*
  height: 10px;
  padding: 0px;
  margin: 0px;
*/
}

.birthdaylist .td-foot {
  line-height: 16px;
  font-size: 16px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  padding: 0px;
  margin: 0px;
/*
  border: 1px solid #444444;
*/
}

.birthdaylist .tbody {

}

.birthdaylist .tr-body {

}

.birthdaylist .td-image {
  width: 27px;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
  font-size: 20px;
  color: #000000;
  font-weight: 400;
  line-height: 26px;
  vertical-align: top;
  text-align: center;
  margin: 0px;
  padding: 10px 0px 0px 0px;
/*
  border: 1px solid orange;
  height: 28px;
*/
}

.birthdaylist .td-body {
  font-size: 18px;
  text-transform: uppercase;
  color: #888888;
  letter-spacing: 0.1em;
  vertical-align: top;
  line-height: 22px;
  padding: 0px 0px 8px 8px;
  margin: 0px;
/*
  border: 1px solid orange;
  height: 28px;
  font-variant: small-caps;
  width: 160px;
*/
}

.birthdaylist span {
  color: orange;
  font-weight: bold;
}

Perlchamp

doesn’t work either

Perlchamp

ok, i will try

Perlchamp

no i don’t override the general td-class, cause i use:
.modulname .classname
{
font: 16px;
…
}

Perlchamp

but the other cell (name plus age) works, WHY ?

Perlchamp

if i do this :

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

it looks like:

and i ask me, WHY css is not working only for this cell !!

Perlchamp

i don’t think so. therefor i’m a little bit toooooooo retro ;-)

Perlchamp

@sdetweil said in read csv-data and put it in an array:

when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

i will shurely take this, if my current html should work. now it’s too much “risk” for me, to change it.

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 :-))