chicago
Version:
A front-end JavaScript library for user-interface developers.
117 lines (105 loc) • 4.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chicago Test</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
<header class="header">
<h1>#Browser</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>Browser</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-12-12">
<div class="panel panel-box">
<legend>Browser Object:</legend>
<pre><code class="language-javascript"></code></pre>
</div>
</div>
</div>
</article>
</div>
<script src="js/jquery.js"></script>
<script src="../../dist/Chicago.js"></script>
<script>
;(function(_c, $, window, document) {
function objectAsString( object, depth ) {
var output = [];
for( var prop in object ) {
var len = output.length,
index = len - 1,
val = object[prop],
string = '\t'.repeat( depth ) + prop + ' <span class="token punctuation">:</span> ';
if( _c.utils.is.function( val ) ) {
continue;
}
// console.log( prop, val );
if( _c.utils.is.string( val ) ) {
string += '<span class="token string">\'' + val + '\'</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.boolean( val ) ) {
string += '<span class="token boolean">' + val + '</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.object( val ) ) {
string += '<span class="token punctuation">{</span>\n' + objectAsString( val, ( depth + 1 ) ) + '\n' + '\t'.repeat( depth ) + '<span class="token punctuation">}</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.numeric( val ) ) {
string += '<span class="token number">' + val + '</span><span class="token punctuation">,</span>';
}
if( prop == 'plugins' ) {
var stringVal = '';
val.forEach(function(plugin, idx) {
var obj = {};
stringVal += '<span class="token punctuation">{</span>\n';
for(var key in plugin) {
var _val = plugin[key],
_valType = Object.prototype.toString.call( _val );
if( _valType == '[object String]' || _valType == '[object Number]' || _valType == '[object Boolean]' ) {
var spanClass = _valType.split(' ')[1].replace(']', '').toLowerCase();
console.log(spanClass);
if( spanClass == 'string' ) {
_val = '\'' + _val + '\'';
}
stringVal += '\t'.repeat( depth + 1 ) + key + ' <span class="token punctuation">:</span> <span class="token ' + spanClass + '">' + _val + '</span><span class="token punctuation">,</span>\n';
}
}
if( idx == val.length - 1 ) {
stringVal += '\t<span class="token punctuation">}],</span>';
} else {
stringVal += '\t<span class="token punctuation">},</span>';
}
});
stringVal += '';
string += '<span class="token punctuation">[</span>' + stringVal;
}
output.splice( index, 0, string );
}
return output.join('\n');
}
_c.$doc.on('updated.chicago.browser', function() {
var output = [
'<span class="token punctuation">{</span>',
'\tis <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>string<span class="token punctuation">) {</span>',
'\t\t<span class="token comment">// ...</span>',
'\t<span class="token punctuation">}</span>',
'\tcan <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>style<span class="token punctuation">) {</span>',
'\t\t<span class="token comment">// ...</span>',
'\t<span class="token punctuation">}</span>',
'\tgetPrefix <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>prop<span class="token punctuation">) {</span>',
'\t\t<span class="token comment">// ...</span>',
'\t<span class="token punctuation">}</span>',
'<span class="token punctuation">}</span>',
],
string = objectAsString( _c.browser, 1 );
output.splice( 1, 0, string );
_c.$('code').html( output.join('\n') );
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>