Docs : Miscellaneous - Extended UI | Sneat

Miscellaneous

Miscellaneous page has Clipboard, Ideal Timer and NumeralJS.
Read the official ClipboardJs, Idle Timer, NumeralJS documentations for a full list of instructions and other options.

Clipboard

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why we have used clipboard.js.

Usage

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/clipboard/clipboard.js" />

Example

<div class="d-flex flex-wrap">
  <div class="input">
    <input class="form-control" id="clipboard-example-input" type="text" value="Copy Me!" />
  </div>
  <button class="clipboard-btn btn btn-primary mx-2" data-clipboard-action="copy" data-clipboard-target="#clipboard-example-input">
    Copy
  </button>
  <button class="clipboard-btn btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard-example-input">
    Cut
  </button>
</div>

const clipboardList = [].slice.call(document.querySelectorAll('.clipboard-btn'));

if (ClipboardJS) {
  clipboardList.map(function(clipboardEl) {
    const clipboard = new ClipboardJS(clipboardEl);
    clipboard.on('success', function(e) {
      if (e.action == 'copy') {
        toastr['success']('', 'Copied to Clipboard!!');
      }
    });
  });
} else {
  clipboardList.map(function(clipboardEl) {
    clipboardEl.setAttribute('disabled', true);
  });
}

Idle Timer

Usage

Idle Timer provides you a way to monitor user activity with a page. Check out below mentioned example code to create a timer.

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/moment/moment.js" />
<script src="assets/vendor/libs/idletimer/idletimer.js" />

Example

Document 5 second timeout

Element 3 second timeout

<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-6 col-12">
        <h5>
          Document
          <small>5 second timeout</small>
        </h5>
        <div class="btn-group mb-3">
          <button type="button" id="document-Pause" class="btn btn-primary btn-sm">
            Pause
          </button>
          <button type="button" id="document-Resume" class="btn btn-primary btn-sm">
            Resume
          </button>
          <button type="button" id="document-Elapsed" class="btn btn-primary btn-sm">
            Elapsed
          </button>
          <button type="button" id="document-Init" class="btn btn-primary btn-sm">
            Init
          </button>
          <button type="button" id="document-Destroy" class="btn btn-primary btn-sm">
            Destroy
          </button>
        </div>
        <textarea rows="10" cols="30" id="document-Status" class="form-control"></textarea>
      </div>
      <div class="col-md-6 col-12 mt-md-0 mt-4">
        <h5>
          Element
          <small>3 second timeout</small>
        </h5>
        <div class="btn-group mb-3">
          <button type="button" id="element-Reset" class="btn btn-primary btn-sm">
            Reset
          </button>
          <button type="button" id="element-LastActive" class="btn btn-primary btn-sm">
            Last Active
          </button>
          <button type="button" id="element-Remaining" class="btn btn-primary btn-sm">
            Remaining
          </button>
          <button type="button" id="element-State" class="btn btn-primary btn-sm">
            State
          </button>
        </div>
        <textarea rows="10" cols="30" id="element-Status" class="form-control"></textarea>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  /*** Document 5 Sec Timeout ***/
  var docTimeout = 5000;

  // Handle raised idle/active events
  $(document).on("idle.idleTimer", function(event, elem, obj) {
    $("#document-Status")
      .val(function(i, v) {
        return v + "Idle @ " + moment().format() + " \n";
      })
      .removeClass("alert-success")
      .addClass("alert-warning");
  });
  $(document).on("active.idleTimer", function(event, elem, obj, e) {
    $("#document-Status")
      .val(function(i, v) {
        return v + "Active [" + e.type + "] [" + e.target.nodeName + "] @ " + moment().format() + " \n";
      })
      .addClass("alert-success")
      .removeClass("alert-warning");
  });

  // Handle button events
  $("#document-Pause").on('click', function() {
    $(document).idleTimer("pause");
    $("#document-Status").val(function(i, v) {
      return v + "Paused @ " + moment().format() + " \n";
    });
    $(this).blur();
    return false;
  });
  $("#document-Resume").on('click', function() {
    $(document).idleTimer("resume");
    $("#document-Status").val(function(i, v) {
      return v + "Resumed @ " + moment().format() + " \n";
    });
    $(this).blur();
    return false;
  });
  $("#document-Elapsed").on('click', function() {
    $("#document-Status").val(function(i, v) {
      return v + "Elapsed (since becoming active): " + $(document).idleTimer("getElapsedTime") + " \n";
    });
    $(this).blur();
    return false;
  });
  $("#document-Destroy").on('click', function() {
    $(document).idleTimer("destroy");
    $("#document-Status")
      .val(function(i, v) {
        return v + "Destroyed: @ " + moment().format() + " \n";
      })
      .removeClass("alert-success")
      .removeClass("alert-warning");
    $(this).blur();
    return false;
  });
  $("#document-Init").on('click', function() {
    // for demo purposes show init with just object
    $(document).idleTimer({ timeout: docTimeout });
    $("#document-Status").val(function(i, v) {
      return v + "Init: @ " + moment().format() + " \n";
    });

    //Apply classes for default state
    if ($(document).idleTimer("isIdle")) {
      $("#document-Status")
        .removeClass("alert-success")
        .addClass("alert-warning");
    } else {
      $("#document-Status")
        .addClass("alert-success")
        .removeClass("alert-warning");
    }
    $(this).blur();
    return false;
  });

  //Clear old statuses
  $("#document-Status").val("");

  //Start timeout, passing no options
  //Same as $.idleTimer(docTimeout, docOptions);
  $(document).idleTimer(docTimeout);

  //For demo purposes, style based on initial state
  if ($(document).idleTimer("isIdle")) {
    $("#document-Status")
      .val(function(i, v) {
        return v + "Initial Idle State @ " + moment().format() + " \n";
      })
      .removeClass("alert-success")
      .addClass("alert-warning");
  } else {
    $("#document-Status")
      .val(function(i, v) {
        return v + "Initial Active State @ " + moment().format() + " \n";
      })
      .addClass("alert-success")
      .removeClass("alert-warning");
  }

  /*** Element 3 Sec Timeout ***/

  var elTimeout = 3000;

  // Handle raised idle/active events
  $("#element-Status").on("idle.idleTimer", function(event, elem, obj) {
    //If you don't stop propagation it will bubble up to document event handler
    event.stopPropagation();

    $("#element-Status")
      .val(function(i, v) {
        return v + "Idle @ " + moment().format() + " \n";
      })
      .removeClass("alert-success")
      .addClass("alert-warning");
  });
  $("#element-Status").on("active.idleTimer", function(event) {
    //If you don't stop propagation it will bubble up to document event handler
    event.stopPropagation();

    $("#element-Status")
      .val(function(i, v) {
        return v + "Active @ " + moment().format() + " \n";
      })
      .addClass("alert-success")
      .removeClass("alert-warning");
  });

  // Handle button events
  $("#element-Reset").on('click', function() {
    $("#element-Status")
      .idleTimer("reset")
      .val(function(i, v) {
        return v + "Reset @ " + moment().format() + " \n";
      });

    //Apply classes for default state
    if ($("#element-Status").idleTimer("isIdle")) {
      $("#element-Status")
        .removeClass("alert-success")
        .addClass("alert-warning");
    } else {
      $("#element-Status")
        .addClass("alert-success")
        .removeClass("alert-warning");
    }
    $(this).blur();
    return false;
  });
  $("#element-Remaining").on('click', function() {
    $("#element-Status").val(function(i, v) {
      return v + "Remaining: " + $("#element-Status").idleTimer("getRemainingTime") + " \n";
    });
    $(this).blur();
    return false;
  });
  $("#element-LastActive").on('click', function() {
    $("#element-Status").val(function(i, v) {
      return v + "LastActive: " + $("#element-Status").idleTimer("getLastActiveTime") + " \n";
    });
    $(this).blur();
    return false;
  });
  $("#element-State").on('click', function() {
    $("#element-Status").val(function(i, v) {
      return v + "State: " + ($("#element-Status").idleTimer("isIdle") ? "idle" : "active") + " \n";
    });
    $(this).blur();
    return false;
  });

  //Clear value if there was one cached & start time
  $("#element-Status")
    .val("")
    .idleTimer(elTimeout);

  //For demo purposes, show initial state
  if ($("#element-Status").idleTimer("isIdle")) {
    $("#element-Status")
      .val(function(i, v) {
        return v + "Initial Idle @ " + moment().format() + " \n";
      })
      .removeClass("alert-success")
      .addClass("alert-warning");
  } else {
    $("#element-Status")
      .val(function(i, v) {
        return v + "Initial Active @ " + moment().format() + " \n";
      })
      .addClass("alert-success")
      .removeClass("alert-warning");
  }
});

NumeralJS

Usage

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/numeral/numeral.js" />

Example

NumeralJS is a javascript library for formatting and manipulating numbers.

Input	Value
numeral(974)
numeral(1230974).format('0.0a')
numeral(1000.234).format('$0,0.00')
numeral(3467479682787).format('0.000 ib')
numeral(0.974878234).format('0.000%')
numeral(63846).format('00:00:00')
numeral(1123456789).format('0,0e+0')

<div class="table-responsive">
  <table class="table ">
    <thead>
      <tr>
        <th class="border-top-0">Input</th>
        <th class="border-top-0">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>numeral(974)</td>
        <td class="dNum"></td>
      </tr>
      <tr>
        <td>numeral(1230974).format('0.0a')</td>
        <td class="fNum"></td>
      </tr>
      <tr>
        <td>numeral(1000.234).format('$0,0.00')</td>
        <td class="fCurrency"></td>
      </tr>
      <tr>
        <td>numeral(3467479682787).format('0.000 ib')</td>
        <td class="fBytes"></td>
      </tr>
      <tr>
        <td>numeral(0.974878234).format('0.000%')</td>
        <td class="fPercent"></td>
      </tr>
      <tr>
        <td>numeral(63846).format('00:00:00')</td>
        <td class="fTime"></td>
      </tr>
      <tr>
        <td>numeral(1123456789).format('0,0e+0')</td>
        <td class="fExponential"></td>
      </tr>
    </tbody>
  </table>
</div>

const dNum = document.querySelector('.dNum'),
  fNum = document.querySelector('.fNum'),
  fCurrency = document.querySelector('.fCurrency'),
  fBytes = document.querySelector('.fBytes'),
  fPercent = document.querySelector('.fPercent'),
  fTime = document.querySelector('.fTime'),
  fExponential = document.querySelector('.fExponential');

if (dNum) {
  dNum.innerHTML = numeral(974).value();
}
if (fNum) {
  fNum.innerHTML = numeral(1230974).format('0.0a');
}
if (fCurrency) {
  fCurrency.innerHTML = numeral(1000.234).format('$0,0.000');
}
if (fBytes) {
  fBytes.innerHTML = numeral(3467479682787).format('0.000ib');
}
if (fPercent) {
  fPercent.innerHTML = numeral(0.974878234).format('0.000%');
}
if (fTime) {
  fTime.innerHTML = numeral(63846).format('00:00:00');
}
if (fExponential) {
  fExponential.innerHTML = numeral(1123456789).format('0,0e+0');
}