developers/src/js/codeExamples.js at master · stellar-deprecated/developers · GitHub

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
134
/**
 * For multi-language code samples, show only one language add a time and add
 * a language switching UI.
 */
(function($){
'use strict';

varMATCH_LANGUAGE=/(?:lang|language)-([a-zA-Z]+)/;
varLANGUAGE_NAMES={
sh: 'Bash',
js: 'JavaScript',
json: 'JSON',
toml: 'TOML'
};
varDEFAULT_LANGUAGE='js';
varSTORAGE_KEY='code-examples';

varcodeExamples={
getLanguage: function(){
if(!this._language&&window.localStorage){
try{
vardata=JSON.parse(window.localStorage.getItem(STORAGE_KEY));
this._language=data.language;
}
catch(error){}
}
if(!this._language){
this._language=DEFAULT_LANGUAGE;
}
returnthis._language;
},
setLanguage: function(language){
this._language=language;
if(window.localStorage){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify({
language: language
}));
}
$(document).trigger('change-code-example-language',language);
}
};

functionclickedLanguageButton(event){
varlanguage=$(event.target).attr('data-language');
if(language){
codeExamples.setLanguage(language);
}
}

functionlanguageForElement(element){
varclassName=$(element).children('code').attr('class');
varmatch=className&&className.match(MATCH_LANGUAGE);
returnmatch&&match[1];
}

functionSwitcher(element){
this.element=element;
this.examples=this.findExamples();
this.addUi();
$(document).on('change-code-example-language',function(event,language){
this.setLanguage(language);
}.bind(this));
this.setLanguage(codeExamples.getLanguage());
}

Switcher.prototype.findExamples=function(){
varexamples={};
varself=this;
$('pre',this.element).each(function(index,pre){
varlanguage=languageForElement(pre);
if(language){
examples[language]=pre;
self._baseLanguage=self._baseLanguage||language;
}
});
returnexamples;
};

Switcher.prototype.addUi=function(){
this.createUi().prependTo(this.element);
};

Switcher.prototype.createUi=function(){
vartitle=$(this.element).attr('name');
varcontainer=$('<div class="language-switcher"></div>');
container.append($('<span class="code-example-title"></span>').text(title));
for(varlanguageinthis.examples){
varlanguageName=LANGUAGE_NAMES[language]||capitalize(language);
varbutton=$('<button class="language-switcher--setter"></button>')
.text(languageName)
.attr('data-language',language)
.on('click',clickedLanguageButton);
container.append(button);
}
returncontainer;
};

Switcher.prototype.setLanguage=function(value){
if(!(valueinthis.examples)){
// find the first available language and show it
value=this._baseLanguage;
}

varscrollTop=document.body.scrollTop;
varbounds=this.element.getBoundingClientRect();

for(varlanguageinthis.examples){
varvisible=language===value;
$(this.examples[language]).css('display',visible ? '' : 'none');
$('.language-switcher--setter[data-language="'+language+'"]',
this.element)
.toggleClass('selected',visible);
}

if(bounds.top<0){
varnewBounds=this.element.getBoundingClientRect();
window.scrollTo(
document.body.scrollLeft,
scrollTop+(newBounds.height-bounds.height));
}
};

functioncapitalize(text){
returntext.split(' ').map(function(word){
returnword.charAt(0).toUpperCase()+word.slice(1);
}).join(' ');
}

// ...and go!
$('code-example').each(function(index,element){
newSwitcher(element);
});

})(jQuery);