Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Overview Official Website

Choices.js is a lightweight and powerful datetime picker.

Usage

Choices.js's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.

Find the JS file for the following chart at: ../src/assets/js/components/form-clipboard.js

Copy text from another element #

The value you include on this attribute needs to match another's element selector.

                                                                 
                                                                      <div class="input-group">
                                                                           <input id="clipboard_example" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
                                                                           <button class="btn btn-primary btn-copy-clipboard" data-clipboard-target="#clipboard_example"> Copy </button>
                                                                      </div>
                                                                 
                                                            
                                                                 
                                                                      // Select elements
                                                                      const target = document.getElementById('clipboard_example');
                                                                      const button = target.nextElementSibling;
                                                                 
                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(button, {
                                                                           target: target,
                                                                           text: function () {
                                                                                return target.value;
                                                                           }
                                                                      });
                                                                 
                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = button.innerHTML;
                                                                 
                                                                           // Exit label update when already in progress
                                                                           if (button.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }
                                                                 
                                                                           // Update button label
                                                                           button.innerHTML = 'Copied!';
                                                                 
                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                button.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });
                                                                 
                                                            
Cut text from another element #

Additionally, you can define a data-clipboard-action attribute to specify if you want to either copy or cut content.

                                                                 
                                                                      <textarea id="clipboard_cut" class="form-control mb-3" cols="62" rows="6">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
                                                                      <button class="btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard_cut"> Copy </button>
                                                                 
                                                            
                                                                 
                                                                      // Select elements
                                                                      const target = document.getElementById('clipboard_cut');
                                                                      const button = target.nextElementSibling;

                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(button, {
                                                                           target: target,
                                                                           text: function () {
                                                                                return target.innerText;
                                                                           }
                                                                      });

                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = button.innerHTML;

                                                                           // Exit label update when already in progress
                                                                           if (button.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }

                                                                           // Update button label
                                                                           button.innerHTML = 'Copied!';

                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                button.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });
                                                                 
                                                            
Copy text from attribute #

Truth is, you don't even need another element to copy its content from. You can just include a data-clipboard-text attribute in your trigger element.

                                                                 
                                                                      <button id="clipboard_text" class="btn btn-primary" data-clipboard-text="Just because you can doesn't mean dfdyou should — clipboard.js">
                                                                           Copy to clipboard
                                                                      </button>
                                                                 
                                                            
                                                                 
                                                                      // Select element
                                                                      const target = document.getElementById('clipboard_text');

                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(target);

                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = target.innerHTML;

                                                                           // Exit label update when already in progress
                                                                           if (target.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }

                                                                           // Update button label
                                                                           target.innerHTML = 'Copied!';

                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                target.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });
                                                                 
                                                            
© Larkon. Crafted by Techzaa