Requirements

• brogit.js
  • jQuery > 3.0.0


• brogit.feature.js
  • jQuery > 3.0.0
  • bootstrap > 4.0.0
  • (optional) Moment.js > 2.0.0
  • (optional) toastr > 2.0.0

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.

<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

<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

Requirements

• brogit.captcha.js
  • jQuery > 3.0.0
  • bootstrap > 4.0.0
  • sha256 > 0.9.0

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);