mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
775 lines
36 KiB
PHP
775 lines
36 KiB
PHP
<?php
|
|
$session = session();
|
|
$token = $session->get('token') ?? '';
|
|
$tfa = $session->get('tfa') ?? false;
|
|
$settings = $session->get('settings');
|
|
|
|
$picture = session()->get('picture');
|
|
$pulse = session()->get('pulse');
|
|
$notification = session()->get('notification');
|
|
|
|
if (!empty($token) && $tfa == false) {
|
|
//echo "<script>window.location.href = '/'; </script>";
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
|
|
<html
|
|
lang="<?= $session->get('lang') ?>"
|
|
class="h-100 light-style layout-navbar-fixed layout-menu-fixed"
|
|
dir="ltr"
|
|
data-theme="theme-default"
|
|
data-assets-path="<?= site_url('themes/vuexy/') ?>"
|
|
data-template="vertical-menu-template-no-customizer"
|
|
>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
|
|
/>
|
|
|
|
<title><?= lang("App.dashboard_title") ?> - <?= $settings['title'] ?? '' ?></title>
|
|
|
|
<meta name="description" content=""/>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="<?= site_url('themes/vuexy/img/favicon/favicon.ico') ?>"/>
|
|
<link rel="apple-touch-icon" sizes="57x57" href="<?= site_url('themes/vuexy/img/favicon/apple-icon-57x57.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="<?= site_url('themes/vuexy/img/favicon/apple-icon-60x60.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="<?= site_url('themes/vuexy/img/favicon/apple-icon-72x72.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="<?= site_url('themes/vuexy/img/favicon/apple-icon-76x76.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="114x114"
|
|
href="<?= site_url('themes/vuexy/img/favicon/apple-icon-114x114.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="120x120"
|
|
href="<?= site_url('themes/vuexy/img/favicon/apple-icon-120x120.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="144x144"
|
|
href="<?= site_url('themes/vuexy/img/favicon/apple-icon-144x144.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="152x152"
|
|
href="<?= site_url('themes/vuexy/img/favicon/apple-icon-152x152.png') ?>">
|
|
<link rel="apple-touch-icon" sizes="180x180"
|
|
href="<?= site_url('themes/vuexy/img/favicon/apple-icon-180x180.png') ?>">
|
|
<link rel="icon" type="image/png" sizes="192x192"
|
|
href="<?= site_url('themes/vuexy/img/favicon/android-icon-192x192.png') ?>">
|
|
<link rel="icon" type="image/png" sizes="32x32"
|
|
href="<?= site_url('themes/vuexy/img/favicon/favicon-32x32.png') ?>">
|
|
<link rel="icon" type="image/png" sizes="96x96"
|
|
href="<?= site_url('themes/vuexy/img/favicon/favicon-96x96.png') ?>">
|
|
<link rel="icon" type="image/png" sizes="16x16"
|
|
href="<?= site_url('themes/vuexy/img/favicon/favicon-16x16.png') ?>">
|
|
<link rel="manifest" href="<?= site_url('themes/vuexy/img/favicon/manifest.json') ?>">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https:/fonts.googleapis.com"/>
|
|
<link rel="preconnect" href="https:/fonts.gstatic.com" crossorigin/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Icons -->
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/fonts/fontawesome.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/fonts/tabler-icons.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/fonts/flag-icons.css') ?>"/>
|
|
|
|
<!-- Core CSS -->
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/css/rtl/core.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/css/rtl/theme-semi-dark.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/css/demo.css') ?>"/>
|
|
|
|
<!-- Vendors CSS -->
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/node-waves/node-waves.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/select2/select2.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/tagify/tagify.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/bootstrap-select/bootstrap-select.css') ?>"/>
|
|
<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/typeahead-js/typeahead.css') ?>"/>
|
|
|
|
<!-- Page CSS -->
|
|
|
|
<!-- Helpers -->
|
|
<script src="<?= site_url('themes/vuexy/vendor/js/helpers.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/js/config.js') ?>"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Layout wrapper -->
|
|
<div class="layout-wrapper layout-content-navbar">
|
|
<div class="layout-container">
|
|
|
|
<?php include "menu.php" ?>
|
|
|
|
<!-- Layout container -->
|
|
<div class="layout-page">
|
|
|
|
<!-- Navbar -->
|
|
<nav
|
|
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
|
|
id="layout-navbar"
|
|
>
|
|
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
|
|
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
|
|
<i class="ti ti-menu-2 ti-sm"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
|
|
<div class="navbar-nav align-items-center">
|
|
<a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
|
|
<i class="ti ti-sm"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
|
|
|
<!-- Notification -->
|
|
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-1">
|
|
<a
|
|
class="nav-link dropdown-toggle hide-arrow"
|
|
href="javascript:void(0);"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="ti ti-bell ti-md"></i>
|
|
<span class="badge bg-danger rounded-pill badge-notifications">5</span>
|
|
</a>
|
|
|
|
</li>
|
|
<!--/ Notification -->
|
|
|
|
<!-- Language -->
|
|
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
|
|
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
|
|
<i class="fi fi-es fis rounded-circle me-1 fs-3"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="<?= site_url('lang/es'); ?>" data-language="es">
|
|
<i class="fi fi-es fis rounded-circle me-1 fs-3"></i>
|
|
<span class="align-middle"><?= lang("App.lang_es") ?></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="<?= site_url('lang/en'); ?>" data-language="en">
|
|
<i class="fi fi-gb fis rounded-circle me-1 fs-3"></i>
|
|
<span class="align-middle"><?= lang("App.lang_en") ?></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!--/ Language -->
|
|
|
|
<!-- User -->
|
|
<li class="nav-item navbar-dropdown dropdown-user dropdown">
|
|
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);"
|
|
data-bs-toggle="dropdown">
|
|
<div class="avatar">
|
|
<img src="<?= $picture ?? '' ?>" alt class="h-auto rounded-circle"/>
|
|
</div>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="#">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="avatar avatar-online">
|
|
<img src="<?= $picture ?? '' ?>" alt class="h-auto rounded-circle"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<span class="fw-semibold d-block"><?= $session->get('first_name') . ' ' . $session->get('first_name') ?></span>
|
|
<small class="text-muted">Admin</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<div class="dropdown-divider"></div>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="<?= site_url('profile'); ?>">
|
|
<i class="ti ti-user-check me-2 ti-sm"></i>
|
|
<span class="align-middle"><?= lang("App.menu_profile") ?></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="ti ti-settings me-2 ti-sm"></i>
|
|
<span class="align-middle">Settings</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="dropdown-divider"></div>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="<?= site_url("login/logout") ?>">
|
|
<i class="ti ti-logout me-2 ti-sm"></i>
|
|
<span class="align-middle"><?= lang("App.menu_logout") ?></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!--/ User -->
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- / Navbar -->
|
|
|
|
<!-- Content wrapper -->
|
|
<div class="content-wrapper">
|
|
<!-- Content -->
|
|
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<h4 class="fw-bold py-3 mb-4">Page 1</h4>
|
|
<div class="row">
|
|
<!-- Select2 -->
|
|
<div class="col-12">
|
|
<div class="card mb-4">
|
|
<h5 class="card-header">Select2</h5>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<!-- Basic -->
|
|
<div class="col-md-6 mb-4">
|
|
<label for="select2Basic" class="form-label">Basic</label>
|
|
<select id="select2Basic" class="select2 form-select form-select-lg" data-allow-clear="true">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
<option value="CA">California</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="WA">Washington</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="WY">Wyoming</option>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="WI">Wisconsin</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WV">West Virginia</option>
|
|
</select>
|
|
</div>
|
|
<!-- Multiple -->
|
|
<div class="col-md-6 mb-4">
|
|
<label for="select2Multiple" class="form-label">Multiple</label>
|
|
<select id="select2Multiple" class="select2 form-select" multiple>
|
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
</optgroup>
|
|
<optgroup label="Pacific Time Zone">
|
|
<option value="CA">California</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="WA">Washington</option>
|
|
</optgroup>
|
|
<optgroup label="Mountain Time Zone">
|
|
<option value="AZ">Arizona</option>
|
|
<option value="CO" selected>Colorado</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="WY">Wyoming</option>
|
|
</optgroup>
|
|
<optgroup label="Central Time Zone">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="WI">Wisconsin</option>
|
|
</optgroup>
|
|
<optgroup label="Eastern Time Zone">
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL" selected>Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WV">West Virginia</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Select2 -->
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / Content -->
|
|
|
|
<!-- Footer -->
|
|
<footer class="content-footer footer bg-footer-theme">
|
|
<div class="container-xxl">
|
|
<div class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column">
|
|
<div>
|
|
<a href="#" target="_blank" class="fw-semibold">Safekat</a> © <?= date('Y'); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- / Footer -->
|
|
|
|
<div class="content-backdrop fade"></div>
|
|
</div>
|
|
<!-- Content wrapper -->
|
|
</div>
|
|
<!-- / Layout page -->
|
|
</div>
|
|
|
|
<!-- Overlay -->
|
|
<div class="layout-overlay layout-menu-toggle"></div>
|
|
|
|
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
|
|
<div class="drag-target"></div>
|
|
</div>
|
|
<!-- / Layout wrapper -->
|
|
|
|
<!-- Core JS -->
|
|
<!-- build:js assets/vendor/js/core.js -->
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/jquery/jquery.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/popper/popper.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/js/bootstrap.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/node-waves/node-waves.js') ?>"></script>
|
|
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/hammer/hammer.js') ?>"></script>
|
|
<!--<script src="--><?php //= site_url('themes/vuexy/vendor/libs/i18n/i18n.js') ?><!--"></script>-->
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/typeahead-js/typeahead.js') ?>"></script>
|
|
|
|
<script src="<?= site_url('themes/vuexy/vendor/js/menu.js') ?>"></script>
|
|
<!-- endbuild -->
|
|
|
|
<!-- Vendors JS -->
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/select2/select2.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/tagify/tagify.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/bootstrap-select/bootstrap-select.js') ?>"></script>
|
|
<script src="<?= site_url('themes/vuexy/vendor/libs/bloodhound/bloodhound.js') ?>"></script>
|
|
|
|
<!-- Main JS -->
|
|
<script src="<?= site_url('themes/vuexy/js/main.js') ?>"></script>
|
|
|
|
<!-- Page JS -->
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
$(function () {
|
|
const selectPicker = $('.selectpicker'),
|
|
select2 = $('.select2'),
|
|
select2Icons = $('.select2-icons');
|
|
|
|
// Bootstrap Select
|
|
// --------------------------------------------------------------------
|
|
if (selectPicker.length) {
|
|
selectPicker.selectpicker();
|
|
}
|
|
|
|
// Select2
|
|
// --------------------------------------------------------------------
|
|
|
|
// Default
|
|
if (select2.length) {
|
|
select2.each(function () {
|
|
var $this = $(this);
|
|
$this.wrap('<div class="position-relative"></div>').select2({
|
|
placeholder: 'Select value',
|
|
dropdownParent: $this.parent()
|
|
});
|
|
});
|
|
}
|
|
|
|
// Select2 Icons
|
|
if (select2Icons.length) {
|
|
// custom template to render icons
|
|
function renderIcons(option) {
|
|
if (!option.id) {
|
|
return option.text;
|
|
}
|
|
var $icon = "<i class='" + $(option.element).data('icon') + " me-2'></i>" + option.text;
|
|
|
|
return $icon;
|
|
}
|
|
select2Icons.wrap('<div class="position-relative"></div>').select2({
|
|
templateResult: renderIcons,
|
|
templateSelection: renderIcons,
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
(function () {
|
|
// Basic
|
|
//------------------------------------------------------
|
|
const tagifyBasicEl = document.querySelector('#TagifyBasic');
|
|
const TagifyBasic = new Tagify(tagifyBasicEl);
|
|
|
|
// Read only
|
|
//------------------------------------------------------
|
|
const tagifyReadonlyEl = document.querySelector('#TagifyReadonly');
|
|
const TagifyReadonly = new Tagify(tagifyReadonlyEl);
|
|
|
|
// Custom list & inline suggestion
|
|
//------------------------------------------------------
|
|
const TagifyCustomInlineSuggestionEl = document.querySelector('#TagifyCustomInlineSuggestion');
|
|
const TagifyCustomListSuggestionEl = document.querySelector('#TagifyCustomListSuggestion');
|
|
|
|
const whitelist = [
|
|
'A# .NET',
|
|
'A# (Axiom)',
|
|
'A-0 System',
|
|
'A+',
|
|
'A++',
|
|
'ABAP',
|
|
'ABC',
|
|
'ABC ALGOL',
|
|
'ABSET',
|
|
'ABSYS',
|
|
'ACC',
|
|
'Accent',
|
|
'Ace DASL',
|
|
'ACL2',
|
|
'Avicsoft',
|
|
'ACT-III',
|
|
'Action!',
|
|
'ActionScript',
|
|
'Ada',
|
|
'Adenine',
|
|
'Agda',
|
|
'Agilent VEE',
|
|
'Agora',
|
|
'AIMMS',
|
|
'Alef',
|
|
'ALF',
|
|
'ALGOL 58',
|
|
'ALGOL 60',
|
|
'ALGOL 68',
|
|
'ALGOL W',
|
|
'Alice',
|
|
'Alma-0',
|
|
'AmbientTalk',
|
|
'Amiga E',
|
|
'AMOS',
|
|
'AMPL',
|
|
'Apex (Salesforce.com)',
|
|
'APL',
|
|
'AppleScript',
|
|
'Arc',
|
|
'ARexx',
|
|
'Argus',
|
|
'AspectJ',
|
|
'Assembly language',
|
|
'ATS',
|
|
'Ateji PX',
|
|
'AutoHotkey',
|
|
'Autocoder',
|
|
'AutoIt',
|
|
'AutoLISP / Visual LISP',
|
|
'Averest',
|
|
'AWK',
|
|
'Axum',
|
|
'Active Server Pages',
|
|
'ASP.NET'
|
|
];
|
|
// Inline
|
|
let TagifyCustomInlineSuggestion = new Tagify(TagifyCustomInlineSuggestionEl, {
|
|
whitelist: whitelist,
|
|
maxTags: 10,
|
|
dropdown: {
|
|
maxItems: 20,
|
|
classname: 'tags-inline',
|
|
enabled: 0,
|
|
closeOnSelect: false
|
|
}
|
|
});
|
|
// List
|
|
let TagifyCustomListSuggestion = new Tagify(TagifyCustomListSuggestionEl, {
|
|
whitelist: whitelist,
|
|
maxTags: 10,
|
|
dropdown: {
|
|
maxItems: 20,
|
|
classname: '',
|
|
enabled: 0,
|
|
closeOnSelect: false
|
|
}
|
|
});
|
|
|
|
// Users List suggestion
|
|
//------------------------------------------------------
|
|
const TagifyUserListEl = document.querySelector('#TagifyUserList');
|
|
|
|
const usersList = [
|
|
{
|
|
value: 1,
|
|
name: 'Justinian Hattersley',
|
|
avatar: 'https://i.pravatar.cc/80?img=1',
|
|
email: 'jhattersley0@ucsd.edu'
|
|
},
|
|
{
|
|
value: 2,
|
|
name: 'Antons Esson',
|
|
avatar: 'https://i.pravatar.cc/80?img=2',
|
|
email: 'aesson1@ning.com'
|
|
},
|
|
{
|
|
value: 3,
|
|
name: 'Ardeen Batisse',
|
|
avatar: 'https://i.pravatar.cc/80?img=3',
|
|
email: 'abatisse2@nih.gov'
|
|
},
|
|
{
|
|
value: 4,
|
|
name: 'Graeme Yellowley',
|
|
avatar: 'https://i.pravatar.cc/80?img=4',
|
|
email: 'gyellowley3@behance.net'
|
|
},
|
|
{
|
|
value: 5,
|
|
name: 'Dido Wilford',
|
|
avatar: 'https://i.pravatar.cc/80?img=5',
|
|
email: 'dwilford4@jugem.jp'
|
|
},
|
|
{
|
|
value: 6,
|
|
name: 'Celesta Orwin',
|
|
avatar: 'https://i.pravatar.cc/80?img=6',
|
|
email: 'corwin5@meetup.com'
|
|
},
|
|
{
|
|
value: 7,
|
|
name: 'Sally Main',
|
|
avatar: 'https://i.pravatar.cc/80?img=7',
|
|
email: 'smain6@techcrunch.com'
|
|
},
|
|
{
|
|
value: 8,
|
|
name: 'Grethel Haysman',
|
|
avatar: 'https://i.pravatar.cc/80?img=8',
|
|
email: 'ghaysman7@mashable.com'
|
|
},
|
|
{
|
|
value: 9,
|
|
name: 'Marvin Mandrake',
|
|
avatar: 'https://i.pravatar.cc/80?img=9',
|
|
email: 'mmandrake8@sourceforge.net'
|
|
},
|
|
{
|
|
value: 10,
|
|
name: 'Corrie Tidey',
|
|
avatar: 'https://i.pravatar.cc/80?img=10',
|
|
email: 'ctidey9@youtube.com'
|
|
}
|
|
];
|
|
|
|
function tagTemplate(tagData) {
|
|
return `
|
|
<tag title="${tagData.title || tagData.email}"
|
|
contenteditable='false'
|
|
spellcheck='false'
|
|
tabIndex="-1"
|
|
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
|
|
${this.getAttributes(tagData)}
|
|
>
|
|
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
|
|
<div>
|
|
<div class='tagify__tag__avatar-wrap'>
|
|
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
|
|
</div>
|
|
<span class='tagify__tag-text'>${tagData.name}</span>
|
|
</div>
|
|
</tag>
|
|
`;
|
|
}
|
|
|
|
function suggestionItemTemplate(tagData) {
|
|
return `
|
|
<div ${this.getAttributes(tagData)}
|
|
class='tagify__dropdown__item align-items-center ${tagData.class ? tagData.class : ''}'
|
|
tabindex="0"
|
|
role="option"
|
|
>
|
|
${
|
|
tagData.avatar
|
|
? `<div class='tagify__dropdown__item__avatar-wrap'>
|
|
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
|
|
</div>`
|
|
: ''
|
|
}
|
|
<strong>${tagData.name}</strong>
|
|
<span>${tagData.email}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// initialize Tagify on the above input node reference
|
|
let TagifyUserList = new Tagify(TagifyUserListEl, {
|
|
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
|
|
enforceWhitelist: true,
|
|
skipInvalid: true, // do not remporarily add invalid tags
|
|
dropdown: {
|
|
closeOnSelect: false,
|
|
enabled: 0,
|
|
classname: 'users-list',
|
|
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
|
|
},
|
|
templates: {
|
|
tag: tagTemplate,
|
|
dropdownItem: suggestionItemTemplate
|
|
},
|
|
whitelist: usersList
|
|
});
|
|
|
|
TagifyUserList.on('dropdown:show dropdown:updated', onDropdownShow);
|
|
TagifyUserList.on('dropdown:select', onSelectSuggestion);
|
|
|
|
let addAllSuggestionsEl;
|
|
|
|
function onDropdownShow(e) {
|
|
let dropdownContentEl = e.detail.tagify.DOM.dropdown.content;
|
|
|
|
if (TagifyUserList.suggestedListItems.length > 1) {
|
|
addAllSuggestionsEl = getAddAllSuggestionsEl();
|
|
|
|
// insert "addAllSuggestionsEl" as the first element in the suggestions list
|
|
dropdownContentEl.insertBefore(addAllSuggestionsEl, dropdownContentEl.firstChild);
|
|
}
|
|
}
|
|
|
|
function onSelectSuggestion(e) {
|
|
if (e.detail.elm == addAllSuggestionsEl) TagifyUserList.dropdown.selectAll.call(TagifyUserList);
|
|
}
|
|
|
|
// create an "add all" custom suggestion element every time the dropdown changes
|
|
function getAddAllSuggestionsEl() {
|
|
// suggestions items should be based on "dropdownItem" template
|
|
return TagifyUserList.parseTemplate('dropdownItem', [
|
|
{
|
|
class: 'addAll',
|
|
name: 'Add all',
|
|
email:
|
|
TagifyUserList.settings.whitelist.reduce(function (remainingSuggestions, item) {
|
|
return TagifyUserList.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1;
|
|
}, 0) + ' Members'
|
|
}
|
|
]);
|
|
}
|
|
|
|
// Email List suggestion
|
|
//------------------------------------------------------
|
|
// generate random whitelist items (for the demo)
|
|
let randomStringsArr = Array.apply(null, Array(100)).map(function () {
|
|
return (
|
|
Array.apply(null, Array(~~(Math.random() * 10 + 3)))
|
|
.map(function () {
|
|
return String.fromCharCode(Math.random() * (123 - 97) + 97);
|
|
})
|
|
.join('') + '@gmail.com'
|
|
);
|
|
});
|
|
|
|
const TagifyEmailListEl = document.querySelector('#TagifyEmailList'),
|
|
TagifyEmailList = new Tagify(TagifyEmailListEl, {
|
|
// email address validation (https://stackoverflow.com/a/46181/104380)
|
|
pattern:
|
|
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
whitelist: randomStringsArr,
|
|
callbacks: {
|
|
invalid: onInvalidTag
|
|
},
|
|
dropdown: {
|
|
position: 'text',
|
|
enabled: 1 // show suggestions dropdown after 1 typed character
|
|
}
|
|
}),
|
|
button = TagifyEmailListEl.nextElementSibling; // "add new tag" action-button
|
|
|
|
button.addEventListener('click', onAddButtonClick);
|
|
|
|
function onAddButtonClick() {
|
|
TagifyEmailList.addEmptyTag();
|
|
}
|
|
|
|
function onInvalidTag(e) {
|
|
console.log('invalid', e.detail);
|
|
}
|
|
})();
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|