Loading and Re-rendering Data


Now the major step is to do in my project is to do loading and re-rendering of the data. These 2 areas are the major things which are equally important and are related sections.
First I will try to explain the 2 things:-

Loading

The Loading of the Data refers to getting and creating the basic DOM elements which we have stored in the database.

Re-Rendering

Re Rendering of the data refers to the fitting of the DOM elements when browser window or screen size changes. This is the major component for our tool.

Ironically, first I will start with the Re-rendering of the data despite the title of the post contains the Loading first in the name.
So for the Re-rendering of the data we need to an event window.onResize.

// Re Render the Data….
var reRenderTheData = function() {
console.log(rdData, ‘rdData’);
sliderChange();
rdData.highlighters.forEach((highLighterObj, index) => {
renderElementFromUniqueString(highLighterObj);
})
rdData.circles.forEach((dotObj, index) => {
let dotElement = document.getElementById(dotObj.id);
let highlighterElement = document.getElementById(dotObj.highlighterID);
let commentElement = document.getElementById(rdData.commentBoxes[index].id);
renderElementFromDOM(dotObj, dotElement, highlighterElement);
renderElementFromDOM(rdData.commentBoxes[index], commentElement, dotElement);
})
rdData.textHighlighters.forEach((textObj,index) => {
renderElementFromUniqueString(textObj)
})
}

// This function will re render the component based on UniqueString elements.
var renderElementFromUniqueString = function(elementObj) {
let originalElement = loadElementFromUnqiueSelector(elementObj.element);
let element = document.getElementById(elementObj.id);
console.log(element, “highlighter element from dom”)
renderElementFromDOM(elementObj, element, originalElement);
}

// This function will re render the component based on the DOM elements..
// dot(type = highlighter) requires highlighter(DOM elements) to get there styles.
var renderElementFromDOM = function(elementObj, rdElement, domElement) {
if(elementObj.elemType == ‘dot’ && elementObj.type == ‘normal’) {
rdElement.style.top = elementObj.top;
rdElement.style.left = elementObj.left;
}else {
var getAllElementstyles = window.getComputedStyle(domElement, null);
if (getAllElementstyles.display == ‘none’) {
rdElement.style.display = ‘none’;
}
else {
rdElement.style.display = ‘block’;
if (elementObj.elemType == ‘highlighter’ || elementObj.elemType == ‘text’) {
// Here the rdElement is the dom element
let elemBoundingRect = domElement.getBoundingClientRect();
let dataObj = {
width: elemBoundingRect.width,
height: elemBoundingRect.height,
top: getTop(domElement),
left: elemBoundingRect.left
}
renderHighlighterCommonPart(rdElement, dataObj);
} else if (elementObj.elemType == ‘dot’ && elementObj.type == ‘highlighter’) {
// this is highligher dot..
let elemBoundingRect = domElement.getBoundingClientRect();
let dataObj = {
top: getTop(domElement),
left: elemBoundingRect.left
}
// Render the comment correctly as well

rdElement.style.top = addPixels(dataObj.top);
rdElement.style.left = addPixels(dataObj.left);
}
else {
// this is comment

let elemBoundingRect = domElement.getBoundingClientRect();
let dataObj = {
top: getTop(domElement),
left: elemBoundingRect.left
}

if (elementObj.type == ‘highlighter’) {
rdElement.style.top = dataObj.top + COMMENTBOX_HEIGHT / 2 + ‘px’;
rdElement.style.left = addPixels(dataObj.left);
} else {
rdElement.style.top = dataObj.top + HALF_CIRCLE + ‘px’;
rdElement.style.left = dataObj.left + HALF_CIRCLE + ‘px’;
}
}
}
}
}

These are basically 3 functions
reRenderTheData, renderElementFromUniqueString, renderElementFromDOM.

reRenderTheData is the main function which encloses the 2 other functions renderElementFromUniqueString –> which is a function which generates a DOM element from the unique string.

renderElementFromDOM —> To this function we basically pass the actual DOM element and then , using it’s present styles re rendering the style of the elements.
Now since the elements are being rendered properly, now it’s time to make an API call and get the actual data.

Selection_225

loadBasicComponents: This is the function which is going to load and create the new elements

var loadBasicComponents = function(rdData) {
console.info(rdData, “rdData”)
rdData.highlighters.forEach((highObj, index) => {
let dataObj = giveStylesToHighlighterObj(highObj);
let highLight = createHighLighter(dataObj);

// when you store your colors
highLight.style.borderColor = highObj.backgroundColor;
highLight.children[0].style.backgroundColor = highObj.backgroundColor;

if(highObj.type == ‘image’) {
let imageElem = loadElementFromUnqiueSelector(highObj.element);
if(highObj.newSource) {
setTheImageUrl(imageElem,highObj.newSource);
}
imageElem.addEventListener(‘click’, () => predictImageTool(imageElem, highObj.originalSource, dataObj, highObj), false)
}
document.body.appendChild(highLight);
})

rdData.textHighlighters.forEach((textHighObj, index) => {
let dataObj = giveStylesToHighlighterObj(textHighObj)
let highLight = createTextHighLighter(dataObj);
// when you store your colors
highLight.style.borderColor = textHighObj.backgroundColor;
highLight.children[0].style.backgroundColor = textHighObj.backgroundColor;
highLight.children[0].style.borderColor = textHighObj.backgroundColor;
highLight.children[0].addEventListener(‘click’,() => openTextControlBox(textHighObj.element,textHighObj.id),false);
highLight.children[1].style.backgroundColor = textHighObj.backgroundColor;
let textElem = loadElementFromUnqiueSelector(textHighObj.element)
if(textHighObj.newStyles) {
textElem.style.fontFamily = textHighObj.newStyles.fontFamily;
textElem.style.fontWeight = textHighObj.newStyles.fontWeight;
textElem.style.fontStyle = textHighObj.newStyles.fontStyle;
}
document.body.appendChild(highLight);
})
rdData.circles.forEach((circleObj, index) => {
if (circleObj.type == ‘highlighter’) {
circleObj.highlighter = true;
}
console.log(circleObj, “circle-obj”)
var dot = createDot(circleObj);
if (circleObj.type == ‘highlighter’) {
let highlighterDOM = document.getElementById(circleObj.highlighterID);
let highlighterStyles = highlighterDOM.getBoundingClientRect();
dot.style.top = addPixels(getTop(highlighterDOM));
dot.style.left = addPixels(highlighterStyles.left);
}
dot.id = circleObj.id;
dot.style.backgroundColor = circleObj.backgroundColor;
dot.setAttribute(‘data-commentbox’, circleObj.commentID);
dot.addEventListener(‘click’, commentBoxHighLighterToggle, false);
let commentBox = createComment(dot);
if (circleObj.type == ‘highlighter’) {
commentBox.style.top = removePixels(commentBox.style.top) + COMMENTBOX_HEIGHT / 2 + ‘px’;
}
document.body.appendChild(dot);
commentBox.children[1].value = rdData.commentBoxes[index].comment;
document.body.appendChild(commentBox);
})

// Reloading the count of variables.
if(rdData.totalElements) {
highlighterCount = rdData.totalElements.highlighterCount || 0;
dotCommentCount = rdData.totalElements.dotCommentCount || 0;
textHighlighterCount = rdData.totalElements.textHighlighterCount || 0;
}else {
highlighterCount = 0;
dotCommentCount = 0;
textHighlighterCount = 0;
}
}

Highlighters and general elements are rendered using the loadBasicComponents and then the re-renderfunction will help us to resize the elements.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s