fileapi
Version:
FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
255 lines (208 loc) • 7.81 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>FileAPI — a set of javascript tools for working with files.</title>
<meta name="keywords" content="FileAPI, upload, file, multipart, chunk, dragndrop, images, html5, rubaxa"/>
<meta name="description" content="The best library to upload files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF."/>
<link rel="stylesheet" href="statics/main.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet" type="text/css"/>
<script src="//code.jquery.com/jquery-1.8.2.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery.dev.js"><'+'/script>');</script>
<script src="./statics/xtpl.min.js"></script>
</head>
<body class="body">
<script x-ctrl="main" type="text/xtpl-xml">
<div id="sidebar" class="sidebar">
<div class="menu">
<div>
<ul x:if="ctx.lang == 'ru'">
<li><a href="https://github.com/mailru/FileAPI">Репозиторий на GitHub</a></li>
<li><a href="http://rubaxa.github.io/jquery.fileapi/">jQuery Plugin</a></li>
<li><a href="./examples/demo.html">Пример #1: demo</a></li>
<li><a href="./examples/userpic.html">Пример #2: userpic</a></li>
<li><a href="./examples/thumbnails.html">Пример #3: thumbnails</a></li>
<li><a href="./examples/watermark.html">Пример #4: watermark</a></li>
<li><a href="./examples/webcam.html">Пример #5: webcam</a></li>
<li><a href="./examples/caman.html">Пример #6: CamanJS</a></li>
<li><a href="#en/{{ctx.relpath}}">English version</a></li>
</ul>
</div>
<div>
<ul x:if="ctx.lang != 'ru'">
<li><a href="https://github.com/mailru/FileAPI">GitHub repository</a></li>
<li><a href="http://rubaxa.github.io/jquery.fileapi/">jQuery Plugin</a></li>
<li><a href="./examples/demo.html">Example #1: demo</a></li>
<li><a href="./examples/userpic.html">Example #2: userpic</a></li>
<li><a href="./examples/thumbnails.html">Example #3: thumbnails</a></li>
<li><a href="./examples/watermark.html">Example #4: watermark</a></li>
<li><a href="./examples/webcam.html">Example #5: webcam</a></li>
<li><a href="./examples/caman.html">Example #6: CamanJS</a></li>
<li><a href="#ru/{{ctx.relpath}}">Русская версия</a></li>
</ul>
</div>
</div>
<div>
<div class="menu" x:repeat="item in ctx.api">
<a href="#{{ctx.lang}}/{{item.label}}" class="menu__name">{{item['class']}}</a>
<ul>
<li x:repeat="prop in item.props">
<a href="#{{ctx.lang}}/{{prop.label}}">{{prop.name}}</a>
</li>
</ul>
<ul>
<li x:repeat="(name, item) in item.fn">
<a href="#{{ctx.lang}}/{{item.label}}">{{name}}</a>
</li>
</ul>
</div>
</div>
<div style="height: 5px;"></div>
</div>
<div>
<div class="body__top"></div>
<div> </div>
<div class="content">
<div class="logo"></div>
<div>
<div x:repeat="item in ctx.api">
<a name="{{ctx.lang}}/{{item.label}}"></a>
<h3>{{item['class']}}</h3>
<div style="margin-bottom: 30px;">
<div>{*item.descr[ctx.lang] | markdown*}</div>
<br/>
<div style="margin-left: 20px;">
<div>
<div x:repeat="prop in item.props">
<a name="{{ctx.lang}}/{{prop.label}}"></a>
<h4 class="fn" data-anchor="prop">
<span><x:value>prop.name</x:value></span>
<x:if test="prop.type != -1">
<x:text value=": "/>
<span class="type">{{prop.type}}</span>
</x:if>
</h4>
<div class="descr">{*prop.descr[ctx.lang] | markdown*}</div>
<div x:if="prop.code" x:highlight="prop.code.source[ctx.lang]"></div>
<div x:if="prop.code" style="height: 20px;"></div>
</div>
</div>
<div>
<div x:repeat="fn in item.fn">
<div x:repeat="variant in fn.variants">
<a name="{{ctx.lang}}/{{fn.label}}"></a>
<h4 data-anchor="fn" class="fn">
<span class="fn__name">{{fn.name}}</span>
<span class="fn__args">
<span>( </span>
<span>
<span x:repeat="(idx, arg) in variant.args">
<span>
<x:if test="arg.optional">
<span class="fn__arg__optional">
<span>[</span>
<span x:if="idx">, </span>
<span>{{arg.name}}:</span>
<span class="type">{{arg.type}}</span>
<span>]</span>
</span>
</x:if>
</span>
<span>
<x:if test="!arg.optional">
<span x:if="idx">, </span>
<span>{{arg.name}}:</span>
<span class="type">{{arg.type}}</span>
</x:if>
</span>
</span>
</span>
<span> ):</span>
</span>
<span class="type">{{fn.returns}}</span>
</h4>
<div class="descr">
{*variant.descr[ctx.lang] | markdown*}
</div>
<ul>
<li x:repeat="arg in variant.args">
<b>{{arg.name}}</b>
<span> — </span>
<span>{{fn.args[arg.name][ctx.lang]}}</span>
</li>
</ul>
<div>
<div x:if="fn.code" x:highlight="fn.code.source[ctx.lang]"></div>
</div>
<div style="height: 20px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script src="./dist/FileAPI.min.js"></script>
<script src="//yandex.st/highlightjs/7.2/highlight.min.js"></script>
<script>
/** @namespace hljs -- highlight.js */
if( window.hljs ){
xtpl.decl('x:highlight', {
init: function (el, code){
var type = $.attr(el, 'data-type');
el.className += ' language-' + (type == 'js' ? 'javascript' : type);
el.innerHTML = '<pre><code></code></pre>';
el.firstChild.firstChild.appendChild(document.createTextNode(code));
hljs.highlightBlock(el);
},
update: function (el, code){
this.init(el, code);
}
});
}
xtpl.mod('markdown', function (text){
return text ? text.replace(/`([^`]+)`/g, '<span class="code">$1</span>') : text;
});
$(window).resize(function (){
$('#sidebar').css('height', $(window).height());
});
xtpl.ctrl('main', function (ctx){
var lang = (window.navigator.userLanguage || window.navigator.language).split('-')[0];
var _rlang = /(?:\/|^)(en|ru)\//;
var _updScroll = function (){
var anchor = location.toString().replace(/^.+#/, '');
if( anchor ){
var offset = $('a[name="'+anchor+'"]').offset();
offset && $(window).scrollTop(offset.top);
}
$(window).trigger('resize');
};
ctx.api = {};
ctx.lang = /(en|ru)/.test(lang) ? lang : 'en';
ctx.getArgs = function (args){
return xtpl.utils.map(args, function (arg){
return arg.name;
}).join(', ');
};
$(window).bind('hashchange', function (evt, force){
var href = location.toString().split('#').pop();
var lang = (href.match(_rlang) || [,ctx.lang])[1];
ctx.lang = lang;
ctx.relpath = href.replace(/^.+\//, '');
if( !force ){
ctx.$apply(_updScroll);
}
}).trigger('hashchange', true);
$.getJSON('./statics/docs.json?ver='+FileAPI.version, function (json){
ctx.api = json;
ctx.$apply(_updScroll);
});
window.ctx = ctx;
});
</script>
</body>
</html>