From 755003e2039f22cc115577713745d3bf537316d1 Mon Sep 17 00:00:00 2001
From: Al Azhar <alazhar@indomaret.co.id>
Date: Mon, 27 Apr 2026 23:00:42 +0700
Subject: [PATCH] rev2.1

---
 index.html       | 370 +++++++++++++++++++++++++++--------------------
 js/hammer.min.js |   7 +
 2 files changed, 224 insertions(+), 153 deletions(-)
 create mode 100644 js/hammer.min.js
diff --git a/index.html b/index.html
index 5df5bd3..564eeed 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Log Viewer // Grafana Style</title>
+    <title>Log Viewer Pro // Zoom Edition</title>
 
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
     <script src="js/lucide.min.js"></script>
+
     <script src="js/chart.js"></script>
+    <script src="js/hammer.min.js"></script>
     <script src="js/chartjs-plugin-zoom.min.js"></script>
 
     <style>
@@ -35,7 +37,6 @@
             height: 100vh;
         }
 
-        /* Sidebar */
         aside {
             width: var(--sidebar-width);
             background: var(--card-dark);
@@ -61,9 +62,8 @@
             cursor: pointer;
             display: flex;
             justify-content: space-between;
+            font-size: 0.8rem;
             margin-bottom: 2px;
-            font-size: 0.75rem;
-            transition: 0.2s;
         }
 
         .file-item:hover {
@@ -73,9 +73,9 @@
         .file-item.active {
             background: rgba(74, 222, 128, 0.15);
             color: var(--brand-color);
+            font-weight: 600;
         }
 
-        /* Main Content */
         main {
             flex-grow: 1;
             display: flex;
@@ -90,63 +90,88 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            z-index: 10;
         }
 
-        /* Chart Area - Styled like Grafana */
-        .chart-section {
-            height: 200px;
+        .chart-container {
+            height: 160px;
             background: #0b0e14;
             padding: 10px 20px;
             border-bottom: 1px solid var(--border-color);
             position: relative;
         }
 
-        .chart-hint {
-            position: absolute;
-            top: 5px;
-            right: 20px;
-            font-size: 0.7rem;
-            color: #64748b;
-            pointer-events: none;
-        }
-
-        /* Toggles */
         .level-toggles .btn {
             border: none;
             font-size: 0.7rem;
             font-weight: 700;
-            padding: 4px 12px;
-            margin-right: 4px;
-            border-radius: 4px;
+            padding: 4px 10px;
+            margin-right: 3px;
         }
 
         .btn-check:not(:checked)+.btn {
-            opacity: 0.15;
-            filter: grayscale(1);
-        }
-
-        .btn-dbg {
-            background: #38bdf8;
-            color: #000;
+            opacity: 0.2;
+            filter: grayscale(0.8);
         }
 
         .btn-inf {
-            background: #4ade80;
-            color: #000;
+            background: #10b981;
+            color: #fff;
         }
 
         .btn-wrn {
-            background: #fbbf24;
-            color: #000;
+            background: #f59e0b;
+            color: #fff;
         }
 
         .btn-err {
-            background: #f87171;
-            color: #000;
+            background: #ef4444;
+            color: #fff;
+        }
+
+        .btn-crt {
+            background: #a855f7;
+            color: #fff;
+        }
+
+        /* Search Input Styling */
+        .search-container {
+            position: relative;
+            width: 280px;
+        }
+
+        .search-container input {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--border-color);
+            color: white;
+            border-radius: 6px;
+            padding: 4px 30px;
+            width: 100%;
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: 0.4;
+        }
+
+        .clear-btn {
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            border: none;
+            background: none;
+            color: #64748b;
+            cursor: pointer;
+            display: none;
+        }
+
+        .clear-btn:hover {
+            color: #fff;
         }
 
-        /* Table */
         .content-area {
             flex-grow: 1;
             padding: 1rem;
@@ -155,33 +180,32 @@
 
         .table-container {
             background: var(--card-dark);
-            border-radius: 6px;
+            border-radius: 8px;
             border: 1px solid var(--border-color);
         }
 
         table.dataTable thead th {
-            background: #111827;
-            font-size: 0.7rem;
+            background: rgba(255, 255, 255, 0.02);
+            font-size: 0.65rem;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: #94a3b8;
+            padding: 10px 15px !important;
             border-bottom: 1px solid var(--border-color) !important;
         }
 
-        .search-input {
-            background: #0f172a;
-            border: 1px solid var(--border-color);
-            color: white;
-            border-radius: 4px;
-            padding: 4px 12px;
-            font-size: 0.8rem;
-            width: 280px;
+        .lvl-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 8px;
         }
 
-        .range-info {
-            font-size: 0.75rem;
-            color: var(--brand-color);
-            font-weight: 600;
+        .row-INF .lvl-indicator {
+            background: #10b981;
+        }
+
+        .row-ERR .lvl-indicator {
+            background: #ef4444;
         }
     </style>
 </head>
@@ -190,13 +214,12 @@
 
     <div class="wrapper">
         <aside>
-            <div class="sidebar-header text-center">
-                <h6 class="mb-3 d-flex align-items-center justify-content-center gap-2">
-                    <i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER
+            <div class="sidebar-header">
+                <h6 class="mb-3 d-flex align-items-center gap-2">
+                    <i data-lucide="shield-check" class="text-success"></i> LogViewer Pro
                 </h6>
-                <button class="btn btn-sm btn-outline-primary w-100 mb-2"
-                    onclick="document.getElementById('dir-input').click()">
-                    <i data-lucide="plus" size="14"></i> Select Project Folder
+                <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
+                    <i data-lucide="folder" size="14"></i> Open Directory
                 </button>
                 <input type="file" id="dir-input" webkitdirectory hidden>
             </div>
@@ -206,40 +229,41 @@
         <main>
             <div class="top-bar">
                 <div class="level-toggles">
-                    <input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
-                    <label class="btn btn-dbg" for="toggle-DBG">DBG</label>
-                    <input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
-                    <label class="btn btn-inf" for="toggle-INF">INF</label>
-                    <input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
-                    <label class="btn btn-wrn" for="toggle-WRN">WRN</label>
-                    <input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
-                    <label class="btn btn-err" for="toggle-ERR">ERR</label>
-                    <span id="range-display" class="range-info ms-3"></span>
+                    <input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
+                    <label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>
+                    <input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
+                    <label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>
+                    <input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
+                    <label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>
+                    <input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
+                    <label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
                 </div>
 
                 <div class="d-flex align-items-center gap-2">
-                    <input type="text" id="global-search" class="search-input" placeholder="Regex Search...">
-                    <button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters">
-                        <i data-lucide="refresh-cw" size="14"></i>
+                    <button class="btn btn-sm btn-outline-secondary" id="reset-chart-btn" title="Reset Chart Zoom">
+                        <i data-lucide="maximize" size="14"></i> Reset Chart
                     </button>
+                    <div class="search-container">
+                        <i data-lucide="search" size="14" class="search-icon"></i>
+                        <input type="text" id="global-search" placeholder="Search... (RegEx enabled)">
+                        <button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
+                    </div>
                 </div>
             </div>
 
-            <div class="chart-section">
-                <span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
-                    range</span>
+            <div class="chart-container" id="chart-parent" title="Drag to Zoom | Right Click to Zoom Out">
                 <canvas id="intensityChart"></canvas>
             </div>
 
             <div class="content-area">
-                <div class="table-container shadow-lg">
+                <div class="table-container shadow">
                     <table id="log-table" class="table table-dark table-hover table-sm w-100">
                         <thead>
                             <tr>
-                                <th width="30"></th>
-                                <th width="80">Level</th>
-                                <th width="120">Time</th>
-                                <th>Description</th>
+                                <th width="35"></th>
+                                <th width="90">Level</th>
+                                <th width="130">Time</th>
+                                <th>Message</th>
                             </tr>
                         </thead>
                         <tbody></tbody>
@@ -249,6 +273,21 @@
         </main>
     </div>
 
+    <div class="modal fade" id="logModal" tabindex="-1">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content bg-dark border-secondary">
+                <div class="modal-header py-2 border-secondary">
+                    <h6 class="modal-title small">Log Context / Exception</h6>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-0">
+                    <pre id="modal-content" class="m-0 p-4 text-success-emphasis"
+                        style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="js/jquery-3.7.0.min.js"></script>
     <script src="js/jquery.dataTables.min.js"></script>
     <script src="js/dataTables.bootstrap5.min.js"></script>
@@ -256,95 +295,109 @@
 
     <script>
         lucide.createIcons();
-        let chart;
-        let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}
+        let chart, table;
+        let rawLogs = [];
+        let visibleTimeRange = { min: null, max: null };
 
         $(document).ready(function () {
-            const table = $('#log-table').DataTable({
+            table = $('#log-table').DataTable({
                 dom: 'rtip',
                 pageLength: 50,
                 order: [[2, 'desc']],
                 columns: [
-                    { data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
-                    {
-                        data: 'level',
-                        render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
-                    },
-                    { data: 'time' },
-                    { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
+                    { className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
+                    { data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
+                    { data: 'time', className: 'text-muted' },
+                    { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
                 ],
+                createdRow: (row, data) => $(row).addClass('row-' + data.level),
                 drawCallback: () => lucide.createIcons()
             });
 
-            // Chart.js Configuration
+            // Search Controls
+            $('#global-search').on('keyup', function () {
+                table.search(this.value, true, false).draw();
+                $('#clear-search').toggle(this.value.length > 0);
+            });
+
+            $('#clear-search').on('click', function () {
+                $('#global-search').val('').trigger('keyup');
+                chart.resetZoom();
+            });
+
+            // Initialize Chart with Zoom Plugin
             const ctx = document.getElementById('intensityChart').getContext('2d');
             chart = new Chart(ctx, {
                 type: 'bar',
-                data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
+                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
                 options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
-                        y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
-                    },
+                    responsive: true, maintainAspectRatio: false,
                     plugins: {
                         legend: { display: false },
                         zoom: {
                             zoom: {
-                                drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },
+                                drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.1)', borderColor: 'rgba(74, 222, 128, 0.4)', borderWidth: 1 },
                                 mode: 'x',
-                                onZoomComplete: ({ chart }) => {
-                                    const { min, max } = chart.scales.x;
-                                    const labels = chart.data.labels;
-                                    const start = labels[Math.max(0, Math.floor(min))];
-                                    const end = labels[Math.min(labels.length - 1, Math.ceil(max))];
-
-                                    selectedTimeRange = { start, end };
-                                    $('#range-display').text(`Range: ${start} - ${end}`);
-                                    table.draw();
-                                }
-                            }
+                                onZoomComplete: ({ chart }) => updateFiltersFromZoom(chart)
+                            },
+                            pan: { enabled: true, mode: 'x', onPanComplete: ({ chart }) => updateFiltersFromZoom(chart) }
                         }
+                    },
+                    scales: {
+                        x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
+                        y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
                     }
                 }
             });
 
-            // Custom Table Filter for Levels + Time Range
-            $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
-                const level = data[1];
-                const timeStr = data[2]; // HH:mm:ss.SSS
-                const timeShort = timeStr.substring(0, 5); // HH:mm
+            // Manual Zoom Controls
+            $('#reset-chart-btn').on('click', () => chart.resetZoom());
 
-                // 1. Filter by Level
-                const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();
-                if (!checkedLevels.includes(level)) return false;
-
-                // 2. Filter by Time Range (if zoomed)
-                if (selectedTimeRange) {
-                    return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;
-                }
-
-                return true;
+            // Right Click on Canvas to Zoom Out
+            document.getElementById('intensityChart').addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                chart.resetZoom();
             });
 
-            // Search & Reset
-            $('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
-            $('#reset-all').on('click', () => {
-                chart.resetZoom();
-                selectedTimeRange = null;
-                $('#range-display').text('');
-                $('#global-search').val('');
-                table.search('').draw();
+            function updateFiltersFromZoom(chartInstance) {
+                const minIndex = Math.floor(chartInstance.scales.x.min);
+                const maxIndex = Math.ceil(chartInstance.scales.x.max);
+                const labels = chartInstance.data.labels;
+
+                visibleTimeRange = {
+                    min: labels[Math.max(0, minIndex)],
+                    max: labels[Math.min(labels.length - 1, maxIndex)]
+                };
+
+                // Update main level counters based on zoomed logs
+                const filteredLogs = rawLogs.filter(l => {
+                    const time = l.time.substring(0, 5);
+                    return time >= visibleTimeRange.min && time <= visibleTimeRange.max;
+                });
+
+                updateLevelCounts(filteredLogs);
+                table.draw(); // Refresh table view based on global search + new time range
+            }
+
+            // Combined Filter (DataTable search + Level toggles + Zoom range)
+            $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
+                const lvl = data[1];
+                const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
+                if (!checked.includes(lvl)) return false;
+
+                if (visibleTimeRange.min && visibleTimeRange.max) {
+                    const logTime = data[2].substring(0, 5);
+                    return logTime >= visibleTimeRange.min && logTime <= visibleTimeRange.max;
+                }
+                return true;
             });
 
             $('.btn-check').on('change', () => table.draw());
 
-            // File/Directory Loading
+            // File/Directory logic
             $('#dir-input').on('change', function (e) {
                 const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
-                const list = $('#file-list').empty();
-                files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
+                $('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
                 window.loadedFiles = files;
             });
 
@@ -352,36 +405,47 @@
                 $('.file-item').removeClass('active').eq(idx).addClass('active');
                 const reader = new FileReader();
                 reader.onload = e => {
-                    const logs = parseLogs(e.target.result);
-                    table.clear().rows.add(logs).draw();
-                    updateChart(logs);
+                    rawLogs = parseLogs(e.target.result);
+                    table.clear().rows.add(rawLogs).draw();
+
+                    // Set initial chart data
+                    const bins = {};
+                    rawLogs.forEach(l => {
+                        const min = l.time.substring(0, 5);
+                        bins[min] = (bins[min] || 0) + 1;
+                    });
+                    const sortedLabels = Object.keys(bins).sort();
+                    chart.data.labels = sortedLabels;
+                    chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
+
+                    chart.resetZoom();
+                    updateLevelCounts(rawLogs);
                 };
                 reader.readAsText(window.loadedFiles[idx]);
             };
 
             function parseLogs(text) {
-                const lines = text.split(/\r?\n/);
                 const logs = [];
-                const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
-                lines.forEach(line => {
+                const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(INF|WRN|ERR|CRT|DBG|TRC)\]\s(.*)$/;
+                text.split(/\r?\n/).forEach(line => {
                     const match = line.match(regex);
-                    if (match) logs.push({ time: match[1], level: match[2], message: match[3] });
+                    if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
+                    else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";
                 });
                 return logs;
             }
 
-            function updateChart(logs) {
-                const bins = {};
-                logs.forEach(l => {
-                    const m = l.time.substring(0, 5);
-                    bins[m] = (bins[m] || 0) + 1;
-                });
-                const labels = Object.keys(bins).sort();
-                chart.data.labels = labels;
-                chart.data.datasets[0].data = labels.map(l => bins[l]);
-                chart.resetZoom();
-                chart.update();
+            function updateLevelCounts(logs) {
+                const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 };
+                logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
+                Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
             }
+
+            $('#log-table tbody').on('click', 'tr', function () {
+                const data = table.row(this).data();
+                $('#modal-content').text(`[TIME] ${data.time}\n[LVL]  ${data.level}\n\n${data.message}\n\n${data.exception}`);
+                new bootstrap.Modal('#logModal').show();
+            });
         });
     </script>
 </body>
diff --git a/js/hammer.min.js b/js/hammer.min.js
new file mode 100644
index 0000000..34a8c86
--- /dev/null
+++ b/js/hammer.min.js
@@ -0,0 +1,7 @@
+/*! Hammer.JS - v2.0.7 - 2016-04-22
+ * http://hammerjs.github.io/
+ *
+ * Copyright (c) 2016 Jorik Tangelder;
+ * Licensed under the MIT license */
+!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(b,c,d){var e="DEPRECATED METHOD: "+c+"\n"+d+" AT \n";return function(){var c=new Error("get-stack-trace"),d=c&&c.stack?c.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&la(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==oa?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function s(a){return Array.prototype.slice.call(a,0)}function t(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];r(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ma.length;){if(c=ma[g],e=c?c+f:b,e in a)return e;g++}return d}function v(){return ua++}function w(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function x(a,b){var c=this;this.manager=a,this.callback=b,this.element=a.element,this.target=a.options.inputTarget,this.domHandler=function(b){k(a.options.enable,[a])&&c.handler(b)},this.init()}function y(a){var b,c=a.options.inputClass;return new(b=c?c:xa?M:ya?P:wa?R:L)(a,z)}function z(a,b,c){var d=c.pointers.length,e=c.changedPointers.length,f=b&Ea&&d-e===0,g=b&(Ga|Ha)&&d-e===0;c.isFirst=!!f,c.isFinal=!!g,f&&(a.session={}),c.eventType=b,A(a,c),a.emit("hammer.input",c),a.recognize(c),a.session.prevInput=c}function A(a,b){var c=a.session,d=b.pointers,e=d.length;c.firstInput||(c.firstInput=D(b)),e>1&&!c.firstMultiple?c.firstMultiple=D(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=E(d);b.timeStamp=ra(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=I(h,i),b.distance=H(h,i),B(c,b),b.offsetDirection=G(b.deltaX,b.deltaY);var j=F(b.deltaTime,b.deltaX,b.deltaY);b.overallVelocityX=j.x,b.overallVelocityY=j.y,b.overallVelocity=qa(j.x)>qa(j.y)?j.x:j.y,b.scale=g?K(g.pointers,d):1,b.rotation=g?J(g.pointers,d):0,b.maxPointers=c.prevInput?b.pointers.length>c.prevInput.maxPointers?b.pointers.length:c.prevInput.maxPointers:b.pointers.length,C(c,b);var k=a.element;o(b.srcEvent.target,k)&&(k=b.srcEvent.target),b.target=k}function B(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};b.eventType!==Ea&&f.eventType!==Ga||(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function C(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Ha&&(i>Da||h.velocity===d)){var j=b.deltaX-h.deltaX,k=b.deltaY-h.deltaY,l=F(i,j,k);e=l.x,f=l.y,c=qa(l.x)>qa(l.y)?l.x:l.y,g=G(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function D(a){for(var b=[],c=0;c<a.pointers.length;)b[c]={clientX:pa(a.pointers[c].clientX),clientY:pa(a.pointers[c].clientY)},c++;return{timeStamp:ra(),pointers:b,center:E(b),deltaX:a.deltaX,deltaY:a.deltaY}}function E(a){var b=a.length;if(1===b)return{x:pa(a[0].clientX),y:pa(a[0].clientY)};for(var c=0,d=0,e=0;b>e;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:pa(c/b),y:pa(d/b)}}function F(a,b,c){return{x:b/a||0,y:c/a||0}}function G(a,b){return a===b?Ia:qa(a)>=qa(b)?0>a?Ja:Ka:0>b?La:Ma}function H(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function I(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function J(a,b){return I(b[1],b[0],Ra)+I(a[1],a[0],Ra)}function K(a,b){return H(b[0],b[1],Ra)/H(a[0],a[1],Ra)}function L(){this.evEl=Ta,this.evWin=Ua,this.pressed=!1,x.apply(this,arguments)}function M(){this.evEl=Xa,this.evWin=Ya,x.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function N(){this.evTarget=$a,this.evWin=_a,this.started=!1,x.apply(this,arguments)}function O(a,b){var c=s(a.touches),d=s(a.changedTouches);return b&(Ga|Ha)&&(c=t(c.concat(d),"identifier",!0)),[c,d]}function P(){this.evTarget=bb,this.targetIds={},x.apply(this,arguments)}function Q(a,b){var c=s(a.touches),d=this.targetIds;if(b&(Ea|Fa)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=s(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return o(a.target,i)}),b===Ea)for(e=0;e<f.length;)d[f[e].identifier]=!0,e++;for(e=0;e<g.length;)d[g[e].identifier]&&h.push(g[e]),b&(Ga|Ha)&&delete d[g[e].identifier],e++;return h.length?[t(f.concat(h),"identifier",!0),h]:void 0}function R(){x.apply(this,arguments);var a=j(this.handler,this);this.touch=new P(this.manager,a),this.mouse=new L(this.manager,a),this.primaryTouch=null,this.lastTouches=[]}function S(a,b){a&Ea?(this.primaryTouch=b.changedPointers[0].identifier,T.call(this,b)):a&(Ga|Ha)&&T.call(this,b)}function T(a){var b=a.changedPointers[0];if(b.identifier===this.primaryTouch){var c={x:b.clientX,y:b.clientY};this.lastTouches.push(c);var d=this.lastTouches,e=function(){var a=d.indexOf(c);a>-1&&d.splice(a,1)};setTimeout(e,cb)}}function U(a){for(var b=a.srcEvent.clientX,c=a.srcEvent.clientY,d=0;d<this.lastTouches.length;d++){var e=this.lastTouches[d],f=Math.abs(b-e.x),g=Math.abs(c-e.y);if(db>=f&&db>=g)return!0}return!1}function V(a,b){this.manager=a,this.set(b)}function W(a){if(p(a,jb))return jb;var b=p(a,kb),c=p(a,lb);return b&&c?jb:b||c?b?kb:lb:p(a,ib)?ib:hb}function X(){if(!fb)return!1;var b={},c=a.CSS&&a.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(d){b[d]=c?a.CSS.supports("touch-action",d):!0}),b}function Y(a){this.options=la({},this.defaults,a||{}),this.id=v(),this.manager=null,this.options.enable=l(this.options.enable,!0),this.state=nb,this.simultaneous={},this.requireFail=[]}function Z(a){return a&sb?"cancel":a&qb?"end":a&pb?"move":a&ob?"start":""}function $(a){return a==Ma?"down":a==La?"up":a==Ja?"left":a==Ka?"right":""}function _(a,b){var c=b.manager;return c?c.get(a):a}function aa(){Y.apply(this,arguments)}function ba(){aa.apply(this,arguments),this.pX=null,this.pY=null}function ca(){aa.apply(this,arguments)}function da(){Y.apply(this,arguments),this._timer=null,this._input=null}function ea(){aa.apply(this,arguments)}function fa(){aa.apply(this,arguments)}function ga(){Y.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function ha(a,b){return b=b||{},b.recognizers=l(b.recognizers,ha.defaults.preset),new ia(a,b)}function ia(a,b){this.options=la({},ha.defaults,b||{}),this.options.inputTarget=this.options.inputTarget||a,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=a,this.input=y(this),this.touchAction=new V(this,this.options.touchAction),ja(this,!0),g(this.options.recognizers,function(a){var b=this.add(new a[0](a[1]));a[2]&&b.recognizeWith(a[2]),a[3]&&b.requireFailure(a[3])},this)}function ja(a,b){var c=a.element;if(c.style){var d;g(a.options.cssProps,function(e,f){d=u(c.style,f),b?(a.oldCssProps[d]=c.style[d],c.style[d]=e):c.style[d]=a.oldCssProps[d]||""}),b||(a.oldCssProps={})}}function ka(a,c){var d=b.createEvent("Event");d.initEvent(a,!0,!0),d.gesture=c,c.target.dispatchEvent(d)}var la,ma=["","webkit","Moz","MS","ms","o"],na=b.createElement("div"),oa="function",pa=Math.round,qa=Math.abs,ra=Date.now;la="function"!=typeof Object.assign?function(a){if(a===d||null===a)throw new TypeError("Cannot convert undefined or null to object");for(var b=Object(a),c=1;c<arguments.length;c++){var e=arguments[c];if(e!==d&&null!==e)for(var f in e)e.hasOwnProperty(f)&&(b[f]=e[f])}return b}:Object.assign;var sa=h(function(a,b,c){for(var e=Object.keys(b),f=0;f<e.length;)(!c||c&&a[e[f]]===d)&&(a[e[f]]=b[e[f]]),f++;return a},"extend","Use `assign`."),ta=h(function(a,b){return sa(a,b,!0)},"merge","Use `assign`."),ua=1,va=/mobile|tablet|ip(ad|hone|od)|android/i,wa="ontouchstart"in a,xa=u(a,"PointerEvent")!==d,ya=wa&&va.test(navigator.userAgent),za="touch",Aa="pen",Ba="mouse",Ca="kinect",Da=25,Ea=1,Fa=2,Ga=4,Ha=8,Ia=1,Ja=2,Ka=4,La=8,Ma=16,Na=Ja|Ka,Oa=La|Ma,Pa=Na|Oa,Qa=["x","y"],Ra=["clientX","clientY"];x.prototype={handler:function(){},init:function(){this.evEl&&m(this.element,this.evEl,this.domHandler),this.evTarget&&m(this.target,this.evTarget,this.domHandler),this.evWin&&m(w(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&n(this.element,this.evEl,this.domHandler),this.evTarget&&n(this.target,this.evTarget,this.domHandler),this.evWin&&n(w(this.element),this.evWin,this.domHandler)}};var Sa={mousedown:Ea,mousemove:Fa,mouseup:Ga},Ta="mousedown",Ua="mousemove mouseup";i(L,x,{handler:function(a){var b=Sa[a.type];b&Ea&&0===a.button&&(this.pressed=!0),b&Fa&&1!==a.which&&(b=Ga),this.pressed&&(b&Ga&&(this.pressed=!1),this.callback(this.manager,b,{pointers:[a],changedPointers:[a],pointerType:Ba,srcEvent:a}))}});var Va={pointerdown:Ea,pointermove:Fa,pointerup:Ga,pointercancel:Ha,pointerout:Ha},Wa={2:za,3:Aa,4:Ba,5:Ca},Xa="pointerdown",Ya="pointermove pointerup pointercancel";a.MSPointerEvent&&!a.PointerEvent&&(Xa="MSPointerDown",Ya="MSPointerMove MSPointerUp MSPointerCancel"),i(M,x,{handler:function(a){var b=this.store,c=!1,d=a.type.toLowerCase().replace("ms",""),e=Va[d],f=Wa[a.pointerType]||a.pointerType,g=f==za,h=r(b,a.pointerId,"pointerId");e&Ea&&(0===a.button||g)?0>h&&(b.push(a),h=b.length-1):e&(Ga|Ha)&&(c=!0),0>h||(b[h]=a,this.callback(this.manager,e,{pointers:b,changedPointers:[a],pointerType:f,srcEvent:a}),c&&b.splice(h,1))}});var Za={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},$a="touchstart",_a="touchstart touchmove touchend touchcancel";i(N,x,{handler:function(a){var b=Za[a.type];if(b===Ea&&(this.started=!0),this.started){var c=O.call(this,a,b);b&(Ga|Ha)&&c[0].length-c[1].length===0&&(this.started=!1),this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}}});var ab={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},bb="touchstart touchmove touchend touchcancel";i(P,x,{handler:function(a){var b=ab[a.type],c=Q.call(this,a,b);c&&this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}});var cb=2500,db=25;i(R,x,{handler:function(a,b,c){var d=c.pointerType==za,e=c.pointerType==Ba;if(!(e&&c.sourceCapabilities&&c.sourceCapabilities.firesTouchEvents)){if(d)S.call(this,b,c);else if(e&&U.call(this,c))return;this.callback(a,b,c)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var eb=u(na.style,"touchAction"),fb=eb!==d,gb="compute",hb="auto",ib="manipulation",jb="none",kb="pan-x",lb="pan-y",mb=X();V.prototype={set:function(a){a==gb&&(a=this.compute()),fb&&this.manager.element.style&&mb[a]&&(this.manager.element.style[eb]=a),this.actions=a.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var a=[];return g(this.manager.recognizers,function(b){k(b.options.enable,[b])&&(a=a.concat(b.getTouchAction()))}),W(a.join(" "))},preventDefaults:function(a){var b=a.srcEvent,c=a.offsetDirection;if(this.manager.session.prevented)return void b.preventDefault();var d=this.actions,e=p(d,jb)&&!mb[jb],f=p(d,lb)&&!mb[lb],g=p(d,kb)&&!mb[kb];if(e){var h=1===a.pointers.length,i=a.distance<2,j=a.deltaTime<250;if(h&&i&&j)return}return g&&f?void 0:e||f&&c&Na||g&&c&Oa?this.preventSrc(b):void 0},preventSrc:function(a){this.manager.session.prevented=!0,a.preventDefault()}};var nb=1,ob=2,pb=4,qb=8,rb=qb,sb=16,tb=32;Y.prototype={defaults:{},set:function(a){return la(this.options,a),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(a){if(f(a,"recognizeWith",this))return this;var b=this.simultaneous;return a=_(a,this),b[a.id]||(b[a.id]=a,a.recognizeWith(this)),this},dropRecognizeWith:function(a){return f(a,"dropRecognizeWith",this)?this:(a=_(a,this),delete this.simultaneous[a.id],this)},requireFailure:function(a){if(f(a,"requireFailure",this))return this;var b=this.requireFail;return a=_(a,this),-1===r(b,a)&&(b.push(a),a.requireFailure(this)),this},dropRequireFailure:function(a){if(f(a,"dropRequireFailure",this))return this;a=_(a,this);var b=r(this.requireFail,a);return b>-1&&this.requireFail.splice(b,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(a){return!!this.simultaneous[a.id]},emit:function(a){function b(b){c.manager.emit(b,a)}var c=this,d=this.state;qb>d&&b(c.options.event+Z(d)),b(c.options.event),a.additionalEvent&&b(a.additionalEvent),d>=qb&&b(c.options.event+Z(d))},tryEmit:function(a){return this.canEmit()?this.emit(a):void(this.state=tb)},canEmit:function(){for(var a=0;a<this.requireFail.length;){if(!(this.requireFail[a].state&(tb|nb)))return!1;a++}return!0},recognize:function(a){var b=la({},a);return k(this.options.enable,[this,b])?(this.state&(rb|sb|tb)&&(this.state=nb),this.state=this.process(b),void(this.state&(ob|pb|qb|sb)&&this.tryEmit(b))):(this.reset(),void(this.state=tb))},process:function(a){},getTouchAction:function(){},reset:function(){}},i(aa,Y,{defaults:{pointers:1},attrTest:function(a){var b=this.options.pointers;return 0===b||a.pointers.length===b},process:function(a){var b=this.state,c=a.eventType,d=b&(ob|pb),e=this.attrTest(a);return d&&(c&Ha||!e)?b|sb:d||e?c&Ga?b|qb:b&ob?b|pb:ob:tb}}),i(ba,aa,{defaults:{event:"pan",threshold:10,pointers:1,direction:Pa},getTouchAction:function(){var a=this.options.direction,b=[];return a&Na&&b.push(lb),a&Oa&&b.push(kb),b},directionTest:function(a){var b=this.options,c=!0,d=a.distance,e=a.direction,f=a.deltaX,g=a.deltaY;return e&b.direction||(b.direction&Na?(e=0===f?Ia:0>f?Ja:Ka,c=f!=this.pX,d=Math.abs(a.deltaX)):(e=0===g?Ia:0>g?La:Ma,c=g!=this.pY,d=Math.abs(a.deltaY))),a.direction=e,c&&d>b.threshold&&e&b.direction},attrTest:function(a){return aa.prototype.attrTest.call(this,a)&&(this.state&ob||!(this.state&ob)&&this.directionTest(a))},emit:function(a){this.pX=a.deltaX,this.pY=a.deltaY;var b=$(a.direction);b&&(a.additionalEvent=this.options.event+b),this._super.emit.call(this,a)}}),i(ca,aa,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.scale-1)>this.options.threshold||this.state&ob)},emit:function(a){if(1!==a.scale){var b=a.scale<1?"in":"out";a.additionalEvent=this.options.event+b}this._super.emit.call(this,a)}}),i(da,Y,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[hb]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime>b.time;if(this._input=a,!d||!c||a.eventType&(Ga|Ha)&&!f)this.reset();else if(a.eventType&Ea)this.reset(),this._timer=e(function(){this.state=rb,this.tryEmit()},b.time,this);else if(a.eventType&Ga)return rb;return tb},reset:function(){clearTimeout(this._timer)},emit:function(a){this.state===rb&&(a&&a.eventType&Ga?this.manager.emit(this.options.event+"up",a):(this._input.timeStamp=ra(),this.manager.emit(this.options.event,this._input)))}}),i(ea,aa,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.rotation)>this.options.threshold||this.state&ob)}}),i(fa,aa,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Na|Oa,pointers:1},getTouchAction:function(){return ba.prototype.getTouchAction.call(this)},attrTest:function(a){var b,c=this.options.direction;return c&(Na|Oa)?b=a.overallVelocity:c&Na?b=a.overallVelocityX:c&Oa&&(b=a.overallVelocityY),this._super.attrTest.call(this,a)&&c&a.offsetDirection&&a.distance>this.options.threshold&&a.maxPointers==this.options.pointers&&qa(b)>this.options.velocity&&a.eventType&Ga},emit:function(a){var b=$(a.offsetDirection);b&&this.manager.emit(this.options.event+b,a),this.manager.emit(this.options.event,a)}}),i(ga,Y,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[ib]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime<b.time;if(this.reset(),a.eventType&Ea&&0===this.count)return this.failTimeout();if(d&&f&&c){if(a.eventType!=Ga)return this.failTimeout();var g=this.pTime?a.timeStamp-this.pTime<b.interval:!0,h=!this.pCenter||H(this.pCenter,a.center)<b.posThreshold;this.pTime=a.timeStamp,this.pCenter=a.center,h&&g?this.count+=1:this.count=1,this._input=a;var i=this.count%b.taps;if(0===i)return this.hasRequireFailures()?(this._timer=e(function(){this.state=rb,this.tryEmit()},b.interval,this),ob):rb}return tb},failTimeout:function(){return this._timer=e(function(){this.state=tb},this.options.interval,this),tb},reset:function(){clearTimeout(this._timer)},emit:function(){this.state==rb&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),ha.VERSION="2.0.7",ha.defaults={domEvents:!1,touchAction:gb,enable:!0,inputTarget:null,inputClass:null,preset:[[ea,{enable:!1}],[ca,{enable:!1},["rotate"]],[fa,{direction:Na}],[ba,{direction:Na},["swipe"]],[ga],[ga,{event:"doubletap",taps:2},["tap"]],[da]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};var ub=1,vb=2;ia.prototype={set:function(a){return la(this.options,a),a.touchAction&&this.touchAction.update(),a.inputTarget&&(this.input.destroy(),this.input.target=a.inputTarget,this.input.init()),this},stop:function(a){this.session.stopped=a?vb:ub},recognize:function(a){var b=this.session;if(!b.stopped){this.touchAction.preventDefaults(a);var c,d=this.recognizers,e=b.curRecognizer;(!e||e&&e.state&rb)&&(e=b.curRecognizer=null);for(var f=0;f<d.length;)c=d[f],b.stopped===vb||e&&c!=e&&!c.canRecognizeWith(e)?c.reset():c.recognize(a),!e&&c.state&(ob|pb|qb)&&(e=b.curRecognizer=c),f++}},get:function(a){if(a instanceof Y)return a;for(var b=this.recognizers,c=0;c<b.length;c++)if(b[c].options.event==a)return b[c];return null},add:function(a){if(f(a,"add",this))return this;var b=this.get(a.options.event);return b&&this.remove(b),this.recognizers.push(a),a.manager=this,this.touchAction.update(),a},remove:function(a){if(f(a,"remove",this))return this;if(a=this.get(a)){var b=this.recognizers,c=r(b,a);-1!==c&&(b.splice(c,1),this.touchAction.update())}return this},on:function(a,b){if(a!==d&&b!==d){var c=this.handlers;return g(q(a),function(a){c[a]=c[a]||[],c[a].push(b)}),this}},off:function(a,b){if(a!==d){var c=this.handlers;return g(q(a),function(a){b?c[a]&&c[a].splice(r(c[a],b),1):delete c[a]}),this}},emit:function(a,b){this.options.domEvents&&ka(a,b);var c=this.handlers[a]&&this.handlers[a].slice();if(c&&c.length){b.type=a,b.preventDefault=function(){b.srcEvent.preventDefault()};for(var d=0;d<c.length;)c[d](b),d++}},destroy:function(){this.element&&ja(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},la(ha,{INPUT_START:Ea,INPUT_MOVE:Fa,INPUT_END:Ga,INPUT_CANCEL:Ha,STATE_POSSIBLE:nb,STATE_BEGAN:ob,STATE_CHANGED:pb,STATE_ENDED:qb,STATE_RECOGNIZED:rb,STATE_CANCELLED:sb,STATE_FAILED:tb,DIRECTION_NONE:Ia,DIRECTION_LEFT:Ja,DIRECTION_RIGHT:Ka,DIRECTION_UP:La,DIRECTION_DOWN:Ma,DIRECTION_HORIZONTAL:Na,DIRECTION_VERTICAL:Oa,DIRECTION_ALL:Pa,Manager:ia,Input:x,TouchAction:V,TouchInput:P,MouseInput:L,PointerEventInput:M,TouchMouseInput:R,SingleTouchInput:N,Recognizer:Y,AttrRecognizer:aa,Tap:ga,Pan:ba,Swipe:fa,Pinch:ca,Rotate:ea,Press:da,on:m,off:n,each:g,merge:ta,extend:sa,assign:la,inherit:i,bindFn:j,prefixed:u});var wb="undefined"!=typeof a?a:"undefined"!=typeof self?self:{};wb.Hammer=ha,"function"==typeof define&&define.amd?define(function(){return ha}):"undefined"!=typeof module&&module.exports?module.exports=ha:a[c]=ha}(window,document,"Hammer");
+//# sourceMappingURL=hammer.min.js.map
\ No newline at end of file
