Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathSFDynamicHTML.js
More file actions
Latest commit
133 lines (109 loc) · 3.42 KB
/
Copy pathSFDynamicHTML.js
File metadata and controls
133 lines (109 loc) · 3.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
SFDynamicHTML
Dynamically/Asynchronously change DOM content
https://github.com/ScarletsFiction/SFDynamicHTML
Make sure you include this header on this script
*/
'use strict';
// values = {id:{href, html, src}}
functionSFDynamicHTML(tagName,values,target){
// Add to pending element
if(typeoftagName!=='string'){
varname=tagName.tagName;
if(SFDynamicHTML.pending[name]===undefined)
name=SFDynamicHTML.pending[name]={};
elsename=SFDynamicHTML.pending[name];
if(name[tagName.id]===undefined)
name[tagName.id]=[tagName];
elsename[tagName.id].push(tagName);
return;
}
functiongetRelatedChildren(element){
varresult=[];
varskipExclude=function(parent){
varchilds=parent.children;
for(vari=0;i<childs.length;i++){
if(childs[i].classList.contains(SFDynamicHTML.attributes.skip))
continue;
if(childs[i].hasAttribute(SFDynamicHTML.attributes.part))
result.push(childs[i]);
skipExclude(childs[i]);
}
}
skipExclude(element);
returnresult;
}
// Check any pending element
if(SFDynamicHTML.pending[name]!==undefined){
vartemp=SFDynamicHTML.pending[name];
for(varidinvalues){
// Apply to all element for this ID
for(vari=0;i<temp[id].length;i++){
// Find child element that need to be modified and related to this ID
varelement=getRelatedChildren(temp[id][i]);
for(vara=0;a<element.length;a++){
varsfpart=element[a].getAttribute(SFDynamicHTML.attributes.part);
// Call handler
if(SFDynamicHTML.processing[sfpart]!==undefined)
SFDynamicHTML.processing[sfpart](element[a],values[id]);
}
}
deletetemp[id];
}
// Skip DOM check
if(target===null)return;
}
// Build query
varquery=false;
varinitial=tagName+'#';
for(varidinvalues){
if(query===false){
query=initial+CSS.escape(id);
continue;
}
query+=','+initial+CSS.escape(id);
}
// DOM Check
varelemList=(target||document).querySelectorAll(query);
for(vari=0;i<elemList.length;i++){
// Get the value reference for the ID
varvalue=values[elemList[i].id];
// Find child element that need to be modified and related to this ID
varelement=getRelatedChildren(elemList[i]);
for(vara=0;a<element.length;a++){
varsfpart=element[a].getAttribute(SFDynamicHTML.attributes.part);
// Call handler
if(SFDynamicHTML.processing[sfpart]!==undefined)
SFDynamicHTML.processing[sfpart](element[a],value);
}
}
}
SFDynamicHTML.pending={};
SFDynamicHTML.attributes={
skip:'sf-skip',// class
part:'sf-part'
};
(function(){
functionimageLoaded(){
this.classList.add('lazy-img-loaded');
this.onerror=this.onload=null;
}
SFDynamicHTML.processing={
html:function(element,value){
varpattern=element.getAttribute('pattern');// ex: `*` will be `text`
if(pattern)
element.innerText=pattern.split('*').join(value.html);
elseelement.innerText=value.html;
},
src:function(element,value){
element.setAttribute('src',value.src);
},
lazyImg:function(element,value){
// Lazy loading image
element.classList.add('lazy-img');
element.classList.remove('lazy-img-loaded');
element.onerror=element.onload=imageLoaded;
element.setAttribute('src',value.src);
}
};
})();