Dokumentation
Web API
Aktualisiert: 14.05.2020
View on GitHub
Getting started
Requirements
CSS
<link href="https://api.brogit.de/brogit.min.css" rel="stylesheet">
<link href="https://api.brogit.de/brogit.feature.min.css" rel="stylesheet">
JS
<script src="https://api.brogit.de/brogit.min.js"></script>
<script src="https://api.brogit.de/brogit.feature.min.js"></script>
CDN
Requirements and scripts via CDN
<!-- jQuery, bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<!-- brogit-web-api -->
<script src="https://api.brogit.de/brogit.min.js"></script>
<link href="https://api.brogit.de/brogit.min.css" rel="stylesheet">
<script src="https://api.brogit.de/brogit.feature.min.js"></script>
<link href="https://api.brogit.de/brogit.feature.min.css" rel="stylesheet">
Features
anim-slide
Let an Element easy slide in on Scroll.
Element gets invisible, and fade & slide in when element position is in window.
<div class="anim-slide"><img src="..."></div>
anim-zoom
Scale a element i a ratio calculated by scroll position.
Use .anim-zoom-container
to define dimensions for the .anim-zoom
element.
X-Element Zoom
Scale: 1 + (0.2 * (1 - ( (offsetTop + height - scrollTop) / (windowY + height) )))
<div class="anim-zoom-container" style="height: 200px;">
<div class="anim-zoom p-4 text-center gradient-light">
<h1>X-Element Zoom</h1>
<p class="lead">Scale: 1 + (0.2 * (1 - ( (offsetTop + height - scrollTop) / (windowY + height) )))</p>
</div>
</div>
Smooth Scroll
Scroll smooth to a anchor element
<a href="#..." class="smooth">Scroll Smooth to #...</a>
imgFullscreen
Show a image in a bootstrap modal when clicking on it
- data-url URL High Res Image URL for fullscreen
- data-name String Title in the modal head
- data-description String Description in the modal bottom
Click on the image
<img class="img-fullscreen" data-url="..." data-name="..." data-description="..." src="..." />
Background gradient
Dark
Grey
Light
Dark
Grey
Light
<div class="gradient-dark">...</div>
<div class="gradient-grey">...</div>
<div class="gradient-light">...</div>
Technical Features
client.xhr
Params
client.xhr(mode, route, data, callback);
- mode String Requestmethod like GET, POST, PUT, DELETE ...
- route String Relative URL from client.origin
- data PlainObject or String or Array Data which is send in the request
- callback function Callback with the args resultdata, data, textStatus, jqXHR which is executed on success and error
- resultdata Object If the request was successful it contains the response data. If not it contains the errorThrown Object
- data PlainObject or String or Array Contains data from the request
- textStatus String String Can be "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror" -- Look in jQuery Documentation
- jqXHR jqXHR XMLHTTPRequest object
Example
client.xhr(
'get',
'api/user',
{id: 1, foo:"bar"},
function(resultdata, data, textStatus, jqXHR) {
if(textStatus == 'success') {
console.log(resultdata);
console.log("Request successful");
}
else {
console.log("Request not successful: "+textStatus);
}
}
);
client.loxhr
For this feature your Server have to accept limit and offset
Params
client.loxhr(mode, route, data, callback, containerElement);
- data PlainObject or String or Array Data which is send in the request. Auto add limit (default=10) and offset
- containerElement The container element where you append content with the callback
- All other arguments are equal client.xhr
Example
client.loxhr(
'get',
'api/user',
{val:"example", foo:"bar"},
function(resultdata, data, textStatus, jqXHR) {
if(textStatus == 'success') {
if(resultdata.data) {
for(var i = 0; i < resultdata.data.length; i++) {
$('#containerElement').append(resultdata.data[i].name);
}
}
}
},
$('#containerElement')
);
client.* Variables
- client.origin String URL for requests
- client.status String Indicator if requests are still in progress ("load", "ready")
client.loadCallback
Function which is executed when a request via client.xhr or client.loxhr is started. Default: Add loading spinner on bottom left of the main element
client.readyCallback
Function which is executed when all requests are done Default: Fade out and remove all elements with the class .load
View on GitHub
Requirements
CSS
<link href="https://api.brogit.de/brogit.min.css" rel="stylesheet">
<link href="https://api.brogit.de/brogit.feature.min.css" rel="stylesheet">
JS
<script src="https://api.brogit.de/brogit.min.js"></script>
<script src="https://api.brogit.de/brogit.feature.min.js"></script>
CDN
Requirements and scripts via CDN
<!-- jQuery, bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<!-- brogit-web-api -->
<script src="https://api.brogit.de/brogit.min.js"></script>
<link href="https://api.brogit.de/brogit.min.css" rel="stylesheet">
<script src="https://api.brogit.de/brogit.feature.min.js"></script>
<link href="https://api.brogit.de/brogit.feature.min.css" rel="stylesheet">
anim-slide
Let an Element easy slide in on Scroll.
Element gets invisible, and fade & slide in when element position is in window.
<div class="anim-slide"><img src="..."></div>
anim-zoom
Scale a element i a ratio calculated by scroll position.
Use .anim-zoom-container
to define dimensions for the .anim-zoom
element.
X-Element Zoom
Scale: 1 + (0.2 * (1 - ( (offsetTop + height - scrollTop) / (windowY + height) )))
<div class="anim-zoom-container" style="height: 200px;">
<div class="anim-zoom p-4 text-center gradient-light">
<h1>X-Element Zoom</h1>
<p class="lead">Scale: 1 + (0.2 * (1 - ( (offsetTop + height - scrollTop) / (windowY + height) )))</p>
</div>
</div>
Smooth Scroll
Scroll smooth to a anchor element
<a href="#..." class="smooth">Scroll Smooth to #...</a>
imgFullscreen
Show a image in a bootstrap modal when clicking on it
- data-url URL High Res Image URL for fullscreen
- data-name String Title in the modal head
- data-description String Description in the modal bottom
Click on the image
<img class="img-fullscreen" data-url="..." data-name="..." data-description="..." src="..." />
Background gradient
Dark
Grey
Light
Dark
Grey
Light
<div class="gradient-dark">...</div>
<div class="gradient-grey">...</div>
<div class="gradient-light">...</div>
client.xhr
Params
client.xhr(mode, route, data, callback);
- mode String Requestmethod like GET, POST, PUT, DELETE ...
- route String Relative URL from client.origin
- data PlainObject or String or Array Data which is send in the request
- callback function Callback with the args resultdata, data, textStatus, jqXHR which is executed on success and error
- resultdata Object If the request was successful it contains the response data. If not it contains the errorThrown Object
- data PlainObject or String or Array Contains data from the request
- textStatus String String Can be "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror" -- Look in jQuery Documentation
- jqXHR jqXHR XMLHTTPRequest object
Example
client.xhr(
'get',
'api/user',
{id: 1, foo:"bar"},
function(resultdata, data, textStatus, jqXHR) {
if(textStatus == 'success') {
console.log(resultdata);
console.log("Request successful");
}
else {
console.log("Request not successful: "+textStatus);
}
}
);
client.loxhr
For this feature your Server have to accept limit and offset
Params
client.loxhr(mode, route, data, callback, containerElement);
- data PlainObject or String or Array Data which is send in the request. Auto add limit (default=10) and offset
- containerElement The container element where you append content with the callback
- All other arguments are equal client.xhr
Example
client.loxhr(
'get',
'api/user',
{val:"example", foo:"bar"},
function(resultdata, data, textStatus, jqXHR) {
if(textStatus == 'success') {
if(resultdata.data) {
for(var i = 0; i < resultdata.data.length; i++) {
$('#containerElement').append(resultdata.data[i].name);
}
}
}
},
$('#containerElement')
);
client.* Variables
- client.origin String URL for requests
- client.status String Indicator if requests are still in progress ("load", "ready")
client.loadCallback
Function which is executed when a request via client.xhr or client.loxhr is started. Default: Add loading spinner on bottom left of the main element
client.readyCallback
Function which is executed when all requests are done Default: Fade out and remove all elements with the class .load
Captcha
Aktualisiert: 14.05.2020
View on GitHub
Getting started
Requirements
JS
<script src="https://api.brogit.de/brogit.captcha.min.js"></script>
CDN
Requirements and scripts via CDN
<!-- jQuery, bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- sha256 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
<!-- brogit-captcha -->
<script src="https://api.brogit.de/brogit.captcha.min.js"></script>
How it works
The client is generating hashes with key
+nonce which have leading zero's (difficulty
). The start nonce is a random number.
These nonce's are sent back to the Server (token), which can fast check if they generate valid hashes with the key
. hashes
are the count how much Hashes should be generated.
Callback
The callback will be executed when the captcha is done.
Params
callback(token, key, difficulty, hashes, element);
- token string Its a base64 concatenation of nonces, limiter is ';'
- key string The key which was used to generate valid hashes
- difficulty int The count of the leading zeros the valid hashes should have
- hashes int The count how much hashes should be generated
- element jQueryElement The element from which the callback is executed
Example
You can try out a Signin Livedemo with Server-/Client Example
Load Captcha...
<div class="brogit-captcha"
data-difficulty="2"
data-hashes="100"
data-key="1234567890"
data-callback="captchaCallback">
Load Captcha...
</div>
$('div.my-selector').brogit_captcha(difficulty, hashes, key, callback);
View on GitHub
Requirements
JS
<script src="https://api.brogit.de/brogit.captcha.min.js"></script>
CDN
Requirements and scripts via CDN
<!-- jQuery, bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- sha256 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
<!-- brogit-captcha -->
<script src="https://api.brogit.de/brogit.captcha.min.js"></script>
How it works
The client is generating hashes with key
+nonce which have leading zero's (difficulty
). The start nonce is a random number.
These nonce's are sent back to the Server (token), which can fast check if they generate valid hashes with the key
. hashes
are the count how much Hashes should be generated.
Callback
The callback will be executed when the captcha is done.
Params
callback(token, key, difficulty, hashes, element);
- token string Its a base64 concatenation of nonces, limiter is ';'
- key string The key which was used to generate valid hashes
- difficulty int The count of the leading zeros the valid hashes should have
- hashes int The count how much hashes should be generated
- element jQueryElement The element from which the callback is executed
Example
You can try out a Signin Livedemo with Server-/Client Example
<div class="brogit-captcha"
data-difficulty="2"
data-hashes="100"
data-key="1234567890"
data-callback="captchaCallback">
Load Captcha...
</div>
$('div.my-selector').brogit_captcha(difficulty, hashes, key, callback);