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.
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);
});
}
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
<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-4">
<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-6">
<h5>
Element
<small>3 second timeout</small>
</h5>
<div class="btn-group mb-4">
<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");
}
});
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');
}