I create the object eqC from function ColsProt.
In constructor of this function i instantiate this.colsO = {}; as empty.
If i log the value - it is empty.
If i try to run function, which fills the this.colsO with values (actually it is deep nesting 5 functions) in my logs this.colsO gets filled with values before these functions are executed. It logs values already in constructor, before any function execution, but only if this function in code will be executed in feature ( if it is not executed in future, this.colsO log is empty).
The order of logs is normal, but in logs i find this.colsO values, although normally this.colsO object shall be empty till step 7.
1 constructor this.colsO= undefined
2 constructor this.colsO= { object full of style variables, though should be empty }
2 end of constructor this.idArr= //empty
3 ColsProt.prototype.init this.colsO= { object full of style variables, though should be empty }
3 ColsProt.prototype.init this.idArr = //empty
4 ColsProt.prototype.getVars this.colsO = { object full of style variables, though should be empty }
4f ColsProt.prototype.getVars fullOname = { object full of style variables, though should be empty }
4 ColsProt.prototype.getVars this.idArr= //empty
// repeates several tims
5 ColsProt.prototype.findColumns this.idArr=loccontPck,introPck,servicesPck
5 ColsProt.prototype.findEls this.colsO = { object full of style variables, though should be empty }
5f ColsProt.prototype.findEls fullOname= //undefined
6 ColsProt.prototype.getProps ans= { object with style parameters }
6 ColsProt.prototype.getProps this.colsO= { object full of style variables, though should be empty, the ans is already part of the object, although it is not yet assigned to be }
7 ColsProt.prototype.findEls this.colsO = { object full of style variables, the ones which should be assigned, and the ones which will be assigned in future }
Actually, I need an empty this.colsO in some deeper places, but it is full of variables and I can not delete them, because deletion seems occur earlier than this.colsO gets filled with variables. Additionally to that nothing is deleted, if i try to delete the object, in it occurs a new item, named "rem".
var ColsProt = function( gO ) {
//this.win = $(window); //the window object
//UNC //console.log(' From ColsProt constructor '); // ['ecols']
this.colCss = null;
if( (gO['colCss']!==undefined) && (gO['colCss']!==null) ) { this.colCss = gO['colCss']; }
this.mode = 'dev'; // 'prod'|'dev'; //the main difference is on resize events. In once case the different stylesheet is included. In another case - the stylesheet is generated and window is reset
if( (gO['mode']!==undefined) && (gO['mode']!==null) ) { this.mode = gO['mode']; }
this.oNameArr = []; ////oName of [ 'imgO', 'divO', 'oelO']
this.oSelArr = [];
var mi;
//the names of Object which contains images, divs, other elements
//[ { cssSel : ['img'], oName : 'imgO' },
//{ oName : 'oelO', cssSel : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div //h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ] } // '#'+colid +' h1',
//{ cssSel : ['div:not(:has(img))'], oName : 'divO' } ];
var onm, me, sels;
if ( ( gO['oMap']!==undefined ) && ( gO['oMap']!==null) ) {
this.oNameArr = Object.keys( gO['oMap'] );
for ( onm of this.oNameArr ) {
me = gO['oMap'][onm];
sels = JSON.parse( JSON.stringify ( me['cssSelArr'] ) );
this.oSelArr.push( sels );
} // for ( mi of gO['oMap'] ) {
this.oMap = JSON.parse( JSON.stringify ( gO['oMap'] ) );
} // if ( ( gO['oMap']!==undefined ) && ( gO['oMap']!==null) ) {
else {
this.oNameArr = [ 'imgO', 'divO', 'oelO' ];
this.oSelArr = [ ['img'], ['div:not(:has(img))'], [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ] ];
this.oMap = {
//'imgO' : { cssSelArr:['img'], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} },
'imgO' : { cssSelArr:['img'], rules:{} }, //adj is top and bottom padding
//'divO' : { cssSelArr:['div:not(:has(img))'], rules:{ mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0 },
'divO' : { cssSelArr:['div:not(:has(img))'], rules:{adj:20} },
//'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} }
'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:12 } }
};
}
/*this.oNameSelMap = {};
for ( mi of this.oMap ) {
var oName = this.oMap['oName'];
var cssSelArr = this.oMap['cssSel'];
this.oNameSelMap['oName'] = cssSelArr;
} */
//class of images, which are very reduced in size, but enlarge in case of column resizing
this.imgClass = null;
if( (gO['imgClass']!==undefined) && (gO['imgClass']!==null) ) { this.imgClass = gO['imgClass']; }
//ids of topdiv elements, mostly images, where you should not apply any styling, nto to make spaces
this.topDivsIds=null;
if( (gO['topDivsIds']!==undefined) && (gO['topDivsIds']!==null) ) { this.topDivsIds = gO['topDivsIds']; }
this.stSettStr='';
if( (gO['stSettStr']!==undefined) && (gO['stSettStr']!==null) ) { this.stSettStr = gO['stSettStr']; } ////console.log('this.stSettStr='); //console.log(this.stSettStr);
this.cusIdMap = null; this.cusIdArr=[];
if( (gO['cusIdMap']!==undefined) && (gO['cusIdMap']!==null) ) {
this.cusIdMap = gO['cusIdMap'];
this.custIdArr = Object.keys(this.cusIdMap);
}
this.styleDataFname = 'coffStyleSett170926.json';
if( (gO['styleDataFname']!==undefined) && (gO['styleDataFname']!==null) ) { this.styleDataFname = gO['styleDataFname'] +'.json'; }
this.tallestColId = ""; //id of tallest column
this.shorterCalIdArr = [];
this.colsOdif = {}; //this.colsOdif[id] = diff;
this.stSettStr = '';
if ( ( this.stSettStr!==undefined ) && ( this.stSettStr!==null ) && ( this.stSettStr.length > 0 ) ) { this.colsSettO = JSON.parse( this.stSettStr ); }
//this.colsSettO = { ecols:{}, objectName:'colsSettO' }; //contains settings data
//this.colsO = { ecols:{}, objectName:'colsO' }; //is filled with current data in function init() -- //contains id : { hBefore, hAfter, bhighest, imgFallArr
console.log('1 constructor this.colsO='); console.log(this.colsO); //empty
this.colsO = {};
console.log('2 constructor this.colsO='); console.log(this.colsO); // filled with variables
//this.colsO['ecols'] = {};//contains this.colsO['ecols'][id] [ parameters for equal columns, like diff, L ]..
var on;
for ( on of this.oNameArr ) { this.colsO[on] = {}; }
//console.log(' before the init, in constructor this.idArr=' + this.idArr.toString() ); undefined
this.idArr = []; //ids of columns
console.log('2 end of constructor this.idArr=' + this.idArr.toString() );
//this.oiDivAdj = 20; //maximum size to increase the div ( currently is applied to margin// REFACTOR to be able to apply to border or to padding
//this.oiAdj = 12; //maximum size to increase the element. Make different size for p, ul li, a etc....
//this.imgAdj = 200; //amoun to strech, add borders, etc to images
//UNC //console.log( 'this.colsSettO=' ); //console.log(this.colsSettO);
//UNC //console.log( 'this.colsO=' ); //console.log(this.colsO);
} // var ColsProt = function( gO ) {
ColsProt.prototype.init = function() {
console.log( ' 3 ColsProt.prototype.init this.colsO=' ); console.log( this.colsO );
console.log( ' 3 ColsProt.prototype.init this.idArr=' + this.idArr.toString() );
this.getVars( this.colsO );
}
ColsProt.prototype.getVars = function (fullOname) {
console.log( ' 4 ColsProt.prototype.getVars this.colsO=' ); console.log( this.colsO );
console.log( ' 4f ColsProt.prototype.getVars fullOname=' ); console.log( fullOname );
console.log( ' 4 ColsProt.prototype.getVars this.idArr=' + this.idArr.toString() );
//this.findColumns();
//this.findColumns2(this.colCss);
this.findColumns(this.colCss);
var colid, oName, css, cssStr;
for( colid of this.idArr ) {
for ( oName of this.oNameArr ) {
if ( ( this.colsO[oName]===undefined ) || ( this.colsO[oName]===null ) ) { this.colsO[oName] = {}; }
if ( ( this.colsO[oName]['cssSelArr']===undefined ) || ( this.colsO[oName]['cssSelArr']===null ) ) {
var cssSelArr = this.oMap[oName]['cssSelArr'];
////console.log( '154 From ColsProt.prototype.getVars, before this.findEls. cssSelArr = ' ); //console.log( cssSelArr );
this.findEls( { colid:colid, cssSelArr:cssSelArr, oName:oName, fullOname:fullOname } );
} // if ( ( this.colsO[oName]['cssSelArr']===undefined )
} // for ( oName of [ 'imgO', 'divO', 'oelO'] ) {
} // for( let colid of this.idArr ) {
}
ColsProt.prototype.findColumns = function() {
var css;
for( css of this.colCss ) {
var that = this;
$(css).each( function () {
var id = $(this).attr('id');
that.idArr.push(id);
}); // $(css).each( function () {
} // for( css of this.colCss ) {
console.log( ' 5 ColsProt.prototype.findColumns this.idArr=' + this.idArr.toString() );
} //ColsProt.prototype.findColumns = function() {
////get data for oName and colid.
//(i) this can be used for downlaoding to StyleSettingsFile ( fullOname = ,
//(ii) or For adjusting style settings
//cold - id of the column div.pck
//Gell all images
//var css = [ '#'+colid +' img'];
//var css = ['#'+colid +' div:not(:has(img))'];
//var css = this.oiEls //for ( sel of this.oiEls ) {
//oName = imgO | divO | oiO
//fullOname - object, which will containt the selected information
ColsProt.prototype.findEls = function( gO ) {
console.log( ' 5 ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //filled, but hsould be empty
console.log( ' 5f ColsProt.prototype.findEls fullOname=' ); console.log( fullOname ); //filled, but hsould be empty
var colid, css, oName, fullOname; var berr = false;
if( (gO!==undefined) && (gO!==null) ) {
if ( ( gO['colid']!==undefined) && (gO['colid']!==null) ) {
colid = gO['colid']; } else { berr = true; }
if ( ( gO['cssSelArr']!==undefined) && (gO['cssSelArr']!==null) ) {
css = gO['cssSelArr']; } else { berr = true; }
if ( ( gO['oName']!==undefined) && (gO['oName']!==null) ) {
oName = gO['oName']; } else { berr = true; }
if ( ( gO['fullOname']!==undefined) && (gO['fullOname']!==null) ) {
fullOname = gO['fullOname']; } else { berr = true; }
} // if( (gO!==undefined) && (gO!==null) ) {
else {
berr = true;
//UNC //console.log(' ERROR, ERROR ');
}
if(!berr) {
//UNC //console.log( '349 From ColsProt.prototype.findEls colid='+colid+', css='+css+', oName='+oName );
// find elements for given oName and columnid //oName is the name of css rule, like 'img', 'ul', etc...
var citem;
var tmpO = {}; var tmpOcss = {};
//remove the same elements
var uOcss = {}; var uO = {};
var int, inu;
//push to this.fullOname[oName][colid]
var iu, citem;
var selO = {}; var selOcss = {};
var cnt = 0;
for ( citem of css ) {
var that = this;
$( '#' + colid).find(citem).each( function() {
cnt++;
if( $(this).length > 0 ) {
if( $(this).length == 1 ) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
} // if( $(this) == 1 ) {
//separate between different items, and items having the same selector like ul li
else if ( $(this).length > 1 ) {
var elemcopy = $(this);
$(this).each ( function() {
var that = $(this);
$(elemcopy ).each ( function() {
var buniq = true;
////console.log( '140 that=' ) ; //console.log( that );
////console.log( '140 this=' ) ; //console.log( $(this) );
//UNC //console.log( '349 citem='+citem+' !that.is( $(this) ) =' ); //console.log( !that.is( $(this) ) );
if( !that.is( $(this) ) ) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
buniq = false;
} // if( !that.is( $(this) ) ) {
if(buniq) {
tmpO[cnt] = $(this);
tmpOcss[cnt] = citem;
} // if(buniq) {
} ); // $(elem).each ( function() {
} ); // $(elem).each ( function(elem) {
} // else if ( elem.length > 1 ) {
} // if( $(this) > 0 ) {
} ); // $( css ).each( function() {
} // for (citem of css ) {
////console.log('tmpArr'); //console.log(tmpArr);
//UNC //console.log('tmpO'); //console.log(tmpO);
////console.log('tmpOcss'); //console.log(tmpOcss); //
//remove the same elements
for ( int of Object.keys(tmpO) ) {
var elt = tmpO[int];
var cc = tmpOcss[int]; //css condition
var L = Object.keys(uO).length;
if( L > 0 ) {
var bnew = true;
//for ( let elu of uArr ) {
for ( let inu of Object.keys(uO) ) {
var elu = uO[inu];
if ( elt.is(elu) ) { bnew = false; }
// removes the same parent chldrens // if ( $(e1).parent().children().is($(e2)); )
//because you need to apply margin only once to div div a, not as many times as there are <a> elements
if ( elt.parent().children().is(elu) ) { bnew = false; }
} // for ( let elu of uArr ) {
if ( bnew ) {
//uArr.push(elt);
uOcss[int] = cc; uO[int] = elt;
}
} // if ( uArr.length > 0 ) {
else {
//uArr.push(elt)
uOcss[int] = cc; uO[int] = elt;
}
} // for ( let elt of tmpArr ) {
//UNC //console.log('uO'); //console.log(uO);
//UNC //console.log('uOcss'); //console.log(uOcss);
////console.log('uArr'); //console.log(uArr);
////console.log('uOcss'); //console.log(uOcss); //console.log('uO'); //console.log(uO);
//gett properties and push to fullArr
if( (fullOname[oName]===undefined) || (fullOname[oName]===null) ) {
fullOname[oName] = {};
}
if( (fullOname[oName][colid]===undefined) || (fullOname[oName][colid]===null) ) {
fullOname[oName][colid] = {};
}
if( (fullOname['map']===undefined) || (fullOname['map']===null) ) {
fullOname['map'] = {};
}
if( (fullOname['map'][oName]===undefined) || (fullOname['map'][oName]===null) ) {
fullOname['map'][oName] = {};
}
if( (fullOname['map'][oName][colid]===undefined) || (fullOname['map'][oName][colid]===null) ) {
fullOname['map'][oName][colid] = {};
}
var idMap = {};
var cssMap = {};
var classMap = {};
var id, css, cls;
for ( iu of Object.keys( uO ) ) {
var el = uO[iu]; //elements
var css = uOcss[iu];
////console.log('289 css=' + css );
var propO = this.getProps( {el:el,css:css} );
//UNC //console.log('propO='); //console.log(propO);
//fullOname[oName][colid].push( propO );
if(iu=="rem") { console.log("ERROR iu = rem propO="); console.log(propO); }
fullOname[oName][colid][iu] = propO;
if( (propO['id']!==undefined) && (propO['id']!==null) ) {
id = propO['id'];
if( (fullOname['map'][oName][colid]['id']==undefined) || (fullOname['map'][oName][colid]['id']==null) ) { fullOname['map'][oName][colid]['id'] = {}; }
if( (fullOname['map'][oName][colid]['id'][id]==undefined) || (fullOname['map'][oName][colid]['id'][id]==null) ) { fullOname['map'][oName][colid]['id'][id] = []; }
fullOname['map'][oName][colid]['id'][id].push(iu);
}
if( (propO['css']!==undefined) && (propO['css']!==null) ) {
css = propO['css'];
if( (fullOname['map'][oName][colid]['css']==undefined) || (fullOname['map'][oName][colid]['css']==null) ) { fullOname['map'][oName][colid]['css'] = {}; }
if( (fullOname['map'][oName][colid]['css'][css]==undefined) || (fullOname['map'][oName][colid]['css'][css]==null) ) { fullOname['map'][oName][colid]['css'][css] = []; }
fullOname['map'][oName][colid]['css'][css].push(iu);
}
if( (propO['cls']!==undefined) && (propO['cls']!==null) ) {
cls = propO['cls'];
if( ( fullOname['map'][oName][colid]['setCl']==undefined) || (fullOname['map'][oName][colid]['setCl']==null) ) { fullOname['map'][oName][colid]['setCl'] = {}; }
if( ( fullOname['map'][oName][colid]['setCl'][cls]==undefined ) || ( fullOname['map'][oName][colid]['setCl'][cls]==null ) ) { fullOname['map'][oName][colid]['setCl'][cls] = []; }
fullOname['map'][oName][colid]['setCl'][cls].push(iu);
} // if( (propO['cls']!==undefined) && (propO['cls']!==null) ) {
} // for ( int of Object.keys(tmpO) ) {
if( (fullOname['ecols']===undefined) || (fullOname['ecols']===null) ) { fullOname['ecols']={}; }
if( (fullOname['ecols'][oName]===undefined) || (fullOname['ecols'][oName]===null) ) { fullOname['ecols'][oName]={}; }
if( (fullOname['ecols'][oName][colid]===undefined) || (fullOname['ecols'][oName][colid]===null) ) { fullOname['ecols'][oName][colid]={}; }
fullOname['ecols'][oName][colid]['elArrL'] = Object.keys( uO ).length;
}// if berr
//console.log('ColsProt.prototype.findEls = fullOname='); console.log(fullOname);
console.log( ' 7 ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //here should be filled
console.log( ' 7f ColsProt.prototype.findEls this.colsO=' ); console.log( this.colsO ); //here should be filled
}; // ColsProt.prototype.findEls = function(colid, css, oName ) {
ColsProt.prototype.getProps = function( gO ) {
var el, css; var berr = false;
if ( (gO!==undefined) && (gO!==null) ) {
if ( ( gO['el']!==undefined) && (gO['el']!==null) ) {
el = gO['el']; } else { berr = true; }
if ( ( gO['css']!==undefined) && (gO['css']!==null) ) {
css = gO['css']; } else { berr = true; }
} // if( (gO!==undefined) && (gO!==null) ) {
else { berr = true;
console.log(' ERROR , ERROR ');
}
if(!berr) {
var mT = parseInt ( el.css('margin-top') );
var mR = parseInt ( el.css('margin-right') );
var mB = parseInt ( el.css('margin-bottom') );
var mL = parseInt ( el.css('margin-left') );
var bT = parseInt ( el.css('border-top') );
var bR = parseInt ( el.css('border-right') );
var bB = parseInt ( el.css('border-bottom') );
var bL = parseInt ( el.css('border-left') );
var pT = parseInt ( el.css('padding-top') );
var pR = parseInt ( el.css('padding-right') );
var pB = parseInt ( el.css('padding-bottom') );
var pL = parseInt ( el.css('padding-left') );
var id = el.attr( 'id' );
var cls = el.attr( 'class' );
var width = el.width();
var height = el.height();
var boxSizing = el.attr( 'box-sizing' );
var css = css;
var ans = { mT:mT, mR:mR, mB:mB, mL:mL, bT:bT, bR:bR, bB:bB, bL:bL, pT:pT, pL:pL, pB:pB, pR:pR, id:id, cls:cls, width:width, height:height, boxSizing:boxSizing, css:css };
console.log( ' 6 ColsProt.prototype.getProps ans=' ); console.log( ans );
console.log( ' 6 ColsProt.prototype.getProps this.colsO=' ); console.log( this.colsO ); //filled, but hsould be empty
return ans;
}
}; // ColsProt.prototype.getProps = function( el) {
//THe part of main script, which initialize the object
var oMap = {
//'imgO' : { cssSelArr:['img'], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} },
imgO : { cssSelArr:['img'], rules:{} }, //adj is top and bottom padding
//'divO' : { cssSelArr:['div:not(:has(img))'], rules:{ mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0 },
divO : { cssSelArr:['div:not(:has(img))'], rules:{adj:20} },
//'oelO' : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:150, mT:0,mR:0,mB:0,mL:0,bT:0,bR:0,bB:0,bL:0,pT:0,pL:0,pB:0,pR:0} }
oelO : { cssSelArr : [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ' p', ' a', ' ul', ' ul li', ' div h1', ' div h2', ' div h3', ' div h4', ' div h5', ' div h6', ' div p', ' div a', ' div div a', ' div ul', ' div ul li' ], rules:{ adj:12 } }
};
var cusIdMap = {};
var topDivsIds = [ 'loccontPck', 'locontPckItem', 'introPck', 'imgPckiEyePckItem', 'servicesPck', 'carePgPckItem' ]; //do not apply to values for these items
var botDivsIds = [];
//var stSettStr = from C:\Bitnami\wampstack-7.0.22-1\apache2\htdocs\type70823\src\HotColImgBundle\Resources\actions\person\certifOfficer2\settings\StyleData_certifO.json
//var stSettStr = "";
var stSettStr =$( "#stSettStr" ).text();
//console.log('stSettStr='); console.log(stSettStr);
var eqC = new ColsProt( { colCss:['.pck' ], cusIdMap:cusIdMap, oMap:oMap, topDivsIds:topDivsIds, botDivsIds:botDivsIds, stSettStr:null, styleDataFname:'coffStyleSett170926', mode:'dev' } );
eqC.init();
