You've already forked gentelella
Dependency cleanup
This commit is contained in:
Aigars Silkalns
119
package-lock.json
generated
119
package-lock.json
generated
@@ -12,31 +12,26 @@
|
||||
"@eonasdan/tempus-dominus": "^6.10.4",
|
||||
"@fortawesome/fontawesome-free": "^6.6.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@simonwep/pickr": "^1.9.1",
|
||||
"autosize": "^6.0.1",
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-wysiwyg": "^2.0.1",
|
||||
"chart.js": "^4.4.2",
|
||||
"cropper": "^4.1.0",
|
||||
"datatables.net": "^2.3.2",
|
||||
"datatables.net-bs5": "^2.3.2",
|
||||
"daterangepicker": "^3.1.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"flot": "^4.2.6",
|
||||
"gaugeJS": "^1.3.9",
|
||||
"icheck": "^1.0.2",
|
||||
"inputmask": "^5.0.9",
|
||||
"ion-rangeslider": "^2.3.1",
|
||||
"jquery": "^3.6.1",
|
||||
"jquery-knob": "^1.2.11",
|
||||
"jquery-sparkline": "^2.4.0",
|
||||
"jquery-ui": "^1.14.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"malihu-custom-scrollbar-plugin": "^3.1.5",
|
||||
"nprogress": "^0.2.0",
|
||||
"parsleyjs": "^2.9.2",
|
||||
"select2": "^4.1.0-rc.0",
|
||||
"skycons": "^1.0.0",
|
||||
"starrr": "^2.0.4",
|
||||
"switchery": "^0.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -1196,6 +1191,16 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@simonwep/pickr": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.9.1.tgz",
|
||||
"integrity": "sha512-fR3qmfAcPf/HSFS7GEnTmZLM3+xERv1+jyMBbzT63ilRRM8veYjI7ELvkHHKk0/du3lHp7uh/FqatjM3646X1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-js": "3.37.0",
|
||||
"nanopop": "2.4.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
|
||||
@@ -1288,12 +1293,6 @@
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-wysiwyg": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-wysiwyg/-/bootstrap-wysiwyg-2.0.1.tgz",
|
||||
"integrity": "sha512-lZsz2sU0NoOJmUaVg86ZJHmNXSfAb13EThfzMhY1K/nUAXPHcBPAxvG3sIfaonKkchEDDAI1jAWxQUsmvsOR4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
|
||||
@@ -1368,6 +1367,17 @@
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.37.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
|
||||
"integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/cropper": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cropper/-/cropper-4.1.0.tgz",
|
||||
@@ -1429,16 +1439,6 @@
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
},
|
||||
"node_modules/daterangepicker": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/daterangepicker/-/daterangepicker-3.1.0.tgz",
|
||||
"integrity": "sha512-DxWXvvPq4srWLCqFugqSV+6CBt/CvQ0dnpXhQ3gl0autcIDAruG1PuGG3gC7yPRNytAD1oU1AcUOzaYhOawhTw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.10",
|
||||
"moment": "^2.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||
@@ -1524,11 +1524,6 @@
|
||||
"@esbuild/win32-x64": "0.25.5"
|
||||
}
|
||||
},
|
||||
"node_modules/fastclick": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
|
||||
"integrity": "sha512-cXyDBT4g0uWl/Xe75QspBDAgAWQ0lkPi/zgp6YFEUHj6WV6VIZl7R6TiDZhdOVU3W4ehp/8tG61Jev1jit+ztQ=="
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
@@ -1581,12 +1576,6 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gaugeJS": {
|
||||
"version": "1.3.9",
|
||||
"resolved": "https://registry.npmjs.org/gaugeJS/-/gaugeJS-1.3.9.tgz",
|
||||
"integrity": "sha512-kPh837SZNKpm4aPq4PNbvMKTqZktlxkfsqIN1/WwX+JaoiTuUIAVTcwQZkPlgp+Q7/WLCxEBmeYuUKPD6fYXIw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/glob": {
|
||||
"version": "11.0.2",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz",
|
||||
@@ -1611,10 +1600,10 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/icheck": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/icheck/-/icheck-1.0.2.tgz",
|
||||
"integrity": "sha512-1oDqj9ikiH4csFWKZnfbD1S9IY/MqzEt4cir6PIfkT84D/8QYaAZFrplXoyz5eaATmaoawY3KMTkMAO+fP4wGg==",
|
||||
"node_modules/inputmask": {
|
||||
"version": "5.0.9",
|
||||
"resolved": "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9.tgz",
|
||||
"integrity": "sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ion-rangeslider": {
|
||||
@@ -1701,14 +1690,11 @@
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jquery-mousewheel": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.2.2.tgz",
|
||||
"integrity": "sha512-JP71xTAg08ZY3hcs9ZbYUZ5i+dkSsz4yRl/zpWkAmtzc+kMs5EfPkpkINSidiLYMaR0MTo3DfFGF9WIezMsFQQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.2.6"
|
||||
}
|
||||
"node_modules/jquery-knob": {
|
||||
"version": "1.2.11",
|
||||
"resolved": "https://registry.npmjs.org/jquery-knob/-/jquery-knob-1.2.11.tgz",
|
||||
"integrity": "sha512-gyeWDmtr2x8XJLSNS2JGNYDUNmfmMrwmFcGPDJ074jnPPvMYf3PJFud4/6AubCT8ahOY7UL4YvALtSwCrxtBBQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jquery-sparkline": {
|
||||
"version": "2.4.0",
|
||||
@@ -1741,15 +1727,6 @@
|
||||
"node": "20 || >=22"
|
||||
}
|
||||
},
|
||||
"node_modules/malihu-custom-scrollbar-plugin": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/malihu-custom-scrollbar-plugin/-/malihu-custom-scrollbar-plugin-3.1.5.tgz",
|
||||
"integrity": "sha512-lwW3LgI+CNDMPnP4ED2la6oYxWMkCXlnhex+s2wuOLhFDFGnGmQuTQVdRK9bvDLpxs10sGlfErVufJy9ztfgJQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery-mousewheel": ">=3.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
@@ -1791,15 +1768,6 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
@@ -1819,6 +1787,12 @@
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/nanopop": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.4.2.tgz",
|
||||
"integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
@@ -1840,15 +1814,6 @@
|
||||
"dev": true,
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/parsleyjs": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/parsleyjs/-/parsleyjs-2.9.2.tgz",
|
||||
"integrity": "sha512-DKS2XXTjEUZ1BJWUzgXAr+550kFBZrom2WYweubqdV7WzdNC1hjOajZDfeBPoAZMkXumJPlB3v37IKatbiW8zQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
@@ -2078,12 +2043,6 @@
|
||||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/starrr": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/starrr/-/starrr-2.0.4.tgz",
|
||||
"integrity": "sha512-s1EF1OaWMSiqkRA/o5pZb6u3XQ2ZxCtF5/+Faki+BZPxs9K/BjJRM9IPAGxa3aPc2wydbHNVFmfQo/tB1EFl/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
|
||||
|
||||
11
package.json
11
package.json
@@ -43,31 +43,26 @@
|
||||
"@eonasdan/tempus-dominus": "^6.10.4",
|
||||
"@fortawesome/fontawesome-free": "^6.6.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@simonwep/pickr": "^1.9.1",
|
||||
"autosize": "^6.0.1",
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-wysiwyg": "^2.0.1",
|
||||
"chart.js": "^4.4.2",
|
||||
"cropper": "^4.1.0",
|
||||
"datatables.net": "^2.3.2",
|
||||
"datatables.net-bs5": "^2.3.2",
|
||||
"daterangepicker": "^3.1.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"flot": "^4.2.6",
|
||||
"gaugeJS": "^1.3.9",
|
||||
"icheck": "^1.0.2",
|
||||
"inputmask": "^5.0.9",
|
||||
"ion-rangeslider": "^2.3.1",
|
||||
"jquery": "^3.6.1",
|
||||
"jquery-knob": "^1.2.11",
|
||||
"jquery-sparkline": "^2.4.0",
|
||||
"jquery-ui": "^1.14.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"malihu-custom-scrollbar-plugin": "^3.1.5",
|
||||
"nprogress": "^0.2.0",
|
||||
"parsleyjs": "^2.9.2",
|
||||
"select2": "^4.1.0-rc.0",
|
||||
"skycons": "^1.0.0",
|
||||
"starrr": "^2.0.4",
|
||||
"switchery": "^0.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
|
||||
<script type="module" src="/src/main-minimal.js"></script>
|
||||
<script type="module" src="/src/main-form-basic.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="nav-md">
|
||||
@@ -304,42 +304,42 @@
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">Date Mask</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask': '99/99/9999'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-calendar form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">Phone mask</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask' : '(999) 999-9999'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-phone form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">Custom Mask</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask': '99-999999'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-tag form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">Serial Number</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask' : '****-****-****-****-****-***'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-barcode form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">TaxID Mask</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask' : '99-99999999'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-receipt form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3 col-xs-3">Credit Card Mask</label>
|
||||
<div class="col-md-9 col-sm-9 col-xs-9">
|
||||
<input type="text" class="form-control" data-inputmask="'mask' : '9999-9999-9999-9999'">
|
||||
<span class="fas fa-user form-control-feedback right" aria-hidden="true"></span>
|
||||
<span class="fas fa-credit-card form-control-feedback right" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ln_solid"></div>
|
||||
@@ -357,11 +357,11 @@
|
||||
</div>
|
||||
<!-- /form input mask -->
|
||||
|
||||
<!-- form color picker -->
|
||||
<!-- modern color picker -->
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Color Picker</h2>
|
||||
<h2>Modern Color Picker <small>Powered by Pickr</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
||||
</li>
|
||||
@@ -384,47 +384,96 @@
|
||||
<form class="form-horizontal form-label-left">
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Default Input</label>
|
||||
<label class="control-label col-md-3 col-sm-3">Classic Theme</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<input type="text" class="demo1 form-control" value="#5367ce" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Styled</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="input-group demo2">
|
||||
<input type="text" value="#e01ab5" class="form-control" />
|
||||
<span class="input-group-addon"><i></i></span>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: calc(100% - 2px); margin-top: 1px; margin-bottom: 1px;">
|
||||
<div class="color-picker-classic" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1);"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="classic-result" readonly value="#5367ce" />
|
||||
<span class="input-group-text"><i class="fas fa-palette"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Full-featured picker with all components</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Horizontal bar</label>
|
||||
<label class="control-label col-md-3 col-sm-3">Monolith Theme</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<input type="text" class="form-control demo colorpicker-element" data-horizontal="true" id="demo_forceformat" value="#8fff00">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Vertical bar</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<input type="text" class="form-control demo colorpicker-element" id="demo_forceformat3" value="#8fff00">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Inline picker</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="well">
|
||||
<div id="demo_cont" class="demo demo-auto inl-bl colorpicker-element" data-container="#demo_cont" data-color="rgba(150,216,62,0.55)" data-inline="true"></div>
|
||||
<div class="demo demo-auto inl-bl colorpicker-element" data-container="true" data-color="rgb(50,216,62)" data-inline="true" style="margin-left:20px;"></div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: calc(100% - 2px); margin-top: 1px; margin-bottom: 1px;">
|
||||
<div class="color-picker-monolith" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1);"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="monolith-result" readonly value="#e91e63" />
|
||||
<span class="input-group-text"><i class="fas fa-droplet"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Compact design with modern styling</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Nano Theme</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: calc(100% - 2px); margin-top: 1px; margin-bottom: 1px;">
|
||||
<div class="color-picker-nano" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1);"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="nano-result" readonly value="#ff9800" />
|
||||
<span class="input-group-text"><i class="fas fa-circle"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Minimal picker for simple color selection</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">With Opacity</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
|
||||
<div class="color-picker-opacity" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="opacity-result" readonly value="rgba(156, 39, 176, 0.7)" />
|
||||
<span class="input-group-text"><i class="fas fa-adjust"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Includes alpha/transparency control</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Swatches & Presets</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
|
||||
<div class="color-picker-swatches" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="swatches-result" readonly value="#4caf50" />
|
||||
<span class="input-group-text"><i class="fas fa-swatchbook"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Pre-defined color palette with custom swatches</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-md-3 col-sm-3">Output Formats</label>
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text d-flex align-items-center justify-content-center p-0" style="width: 50px; height: 38px;">
|
||||
<div class="color-picker-formats" style="width: 32px; height: 32px; border: 2px solid #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); margin-top: 1px;"></div>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="formats-result" readonly value="#2196f3" />
|
||||
<span class="input-group-text"><i class="fas fa-code"></i></span>
|
||||
</div>
|
||||
<small class="text-muted">Supports HEX, RGB, HSL, HSV formats</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /form color picker -->
|
||||
<!-- /modern color picker -->
|
||||
|
||||
<!-- form input knob -->
|
||||
<div class="col-md-12">
|
||||
@@ -1280,10 +1329,329 @@
|
||||
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
|
||||
|
||||
|
||||
<!-- Initialize Tempus Dominus datetimepicker -->
|
||||
<!-- Initialize Form Advanced Components -->
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof TempusDominus !== 'undefined') {
|
||||
console.log('🚀 DOM loaded, initializing form components...');
|
||||
|
||||
// Wait for all modules to load, then initialize
|
||||
function waitForLibraries() {
|
||||
// Check if all required libraries are available
|
||||
const hasJQuery = typeof window.$ !== 'undefined' && typeof window.jQuery !== 'undefined';
|
||||
const hasInputmask = typeof window.Inputmask !== 'undefined';
|
||||
const hasPickr = typeof window.Pickr !== 'undefined';
|
||||
const hasCropper = typeof window.Cropper !== 'undefined';
|
||||
const hasTempusDominus = typeof window.TempusDominus !== 'undefined';
|
||||
|
||||
console.log('🔍 Checking available libraries...');
|
||||
console.log('jQuery available:', hasJQuery);
|
||||
console.log('Inputmask available:', hasInputmask);
|
||||
console.log('Pickr available:', hasPickr);
|
||||
console.log('Cropper available:', hasCropper);
|
||||
console.log('TempusDominus available:', hasTempusDominus);
|
||||
|
||||
if (hasJQuery) {
|
||||
// Use jQuery from window object
|
||||
const $ = window.$;
|
||||
console.log('ionRangeSlider available:', $.fn.ionRangeSlider ? 'yes' : 'no');
|
||||
console.log('knob available:', $.fn.knob ? 'yes' : 'no');
|
||||
}
|
||||
|
||||
if (!hasJQuery) {
|
||||
console.warn('⚠️ jQuery not ready yet, waiting...');
|
||||
setTimeout(waitForLibraries, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// All libraries are ready, start initialization
|
||||
initializeComponents();
|
||||
}
|
||||
|
||||
function initializeComponents() {
|
||||
// Use jQuery from window object
|
||||
const $ = window.$;
|
||||
|
||||
console.log('🚀 Starting component initialization...');
|
||||
|
||||
// Initialize Input Masks
|
||||
if (typeof window.Inputmask !== 'undefined') {
|
||||
const Inputmask = window.Inputmask;
|
||||
// Date mask
|
||||
Inputmask('99/99/9999').mask(document.querySelectorAll('[data-inputmask*="99/99/9999"]'));
|
||||
|
||||
// Phone mask
|
||||
Inputmask('(999) 999-9999').mask(document.querySelectorAll('[data-inputmask*="(999) 999-9999"]'));
|
||||
|
||||
// Custom mask
|
||||
Inputmask('99-999999').mask(document.querySelectorAll('[data-inputmask*="99-999999"]'));
|
||||
|
||||
// Serial number mask
|
||||
Inputmask('****-****-****-****-****-***').mask(document.querySelectorAll('[data-inputmask*="****-****-****-****-****-***"]'));
|
||||
|
||||
// Tax ID mask
|
||||
Inputmask('99-99999999').mask(document.querySelectorAll('[data-inputmask*="99-99999999"]'));
|
||||
|
||||
// Credit card mask
|
||||
Inputmask('9999-9999-9999-9999').mask(document.querySelectorAll('[data-inputmask*="9999-9999-9999-9999"]'));
|
||||
}
|
||||
|
||||
// Initialize Modern Color Pickers
|
||||
if (typeof window.Pickr !== 'undefined') {
|
||||
const Pickr = window.Pickr;
|
||||
|
||||
// Classic Theme Picker
|
||||
const classicPicker = Pickr.create({
|
||||
el: '.color-picker-classic',
|
||||
theme: 'classic',
|
||||
default: '#5367ce',
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
document.getElementById('classic-result').value = color.toHEXA().toString();
|
||||
}).on('save', (color) => {
|
||||
classicPicker.hide();
|
||||
});
|
||||
|
||||
// Monolith Theme Picker
|
||||
const monolithPicker = Pickr.create({
|
||||
el: '.color-picker-monolith',
|
||||
theme: 'monolith',
|
||||
default: '#e91e63',
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
input: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
document.getElementById('monolith-result').value = color.toHEXA().toString();
|
||||
}).on('save', (color) => {
|
||||
monolithPicker.hide();
|
||||
});
|
||||
|
||||
// Nano Theme Picker
|
||||
const nanoPicker = Pickr.create({
|
||||
el: '.color-picker-nano',
|
||||
theme: 'nano',
|
||||
default: '#ff9800',
|
||||
components: {
|
||||
preview: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
input: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
document.getElementById('nano-result').value = color.toHEXA().toString();
|
||||
}).on('save', (color) => {
|
||||
nanoPicker.hide();
|
||||
});
|
||||
|
||||
// Opacity/Alpha Picker
|
||||
const opacityPicker = Pickr.create({
|
||||
el: '.color-picker-opacity',
|
||||
theme: 'classic',
|
||||
default: 'rgba(156, 39, 176, 0.7)',
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
input: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
document.getElementById('opacity-result').value = color.toRGBA().toString();
|
||||
}).on('save', (color) => {
|
||||
opacityPicker.hide();
|
||||
});
|
||||
|
||||
// Swatches Picker with Presets
|
||||
const swatchesPicker = Pickr.create({
|
||||
el: '.color-picker-swatches',
|
||||
theme: 'classic',
|
||||
default: '#4caf50',
|
||||
swatches: [
|
||||
'#f44336', '#e91e63', '#9c27b0', '#673ab7',
|
||||
'#3f51b5', '#2196f3', '#03a9f4', '#00bcd4',
|
||||
'#009688', '#4caf50', '#8bc34a', '#cddc39',
|
||||
'#ffeb3b', '#ffc107', '#ff9800', '#ff5722'
|
||||
],
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
document.getElementById('swatches-result').value = color.toHEXA().toString();
|
||||
}).on('save', (color) => {
|
||||
swatchesPicker.hide();
|
||||
});
|
||||
|
||||
// Format Demonstration Picker
|
||||
const formatsPicker = Pickr.create({
|
||||
el: '.color-picker-formats',
|
||||
theme: 'monolith',
|
||||
default: '#2196f3',
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
input: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
}).on('change', (color) => {
|
||||
// Demonstrate different format outputs
|
||||
const formats = [
|
||||
color.toHEXA().toString(),
|
||||
color.toRGBA().toString(),
|
||||
color.toHSLA().toString(),
|
||||
color.toHSVA().toString()
|
||||
];
|
||||
document.getElementById('formats-result').value = formats[Math.floor(Date.now() / 2000) % 4];
|
||||
}).on('save', (color) => {
|
||||
formatsPicker.hide();
|
||||
});
|
||||
|
||||
console.log('✅ Modern Pickr color pickers initialized');
|
||||
}
|
||||
|
||||
// Initialize jQuery Knob controls
|
||||
if ($ && $.fn.knob) {
|
||||
$('.knob').knob({
|
||||
draw: function() {
|
||||
if (this.$.data('skin') == 'tron') {
|
||||
var a = this.angle(this.cv),
|
||||
sa = this.startAngle,
|
||||
sat = this.startAngle,
|
||||
ea,
|
||||
eat = sat + a,
|
||||
r = true;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.value);
|
||||
this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.previousColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize Cropper.js for image cropping
|
||||
if (typeof window.Cropper !== 'undefined') {
|
||||
const Cropper = window.Cropper;
|
||||
const image = document.getElementById('image');
|
||||
if (image) {
|
||||
const cropper = new Cropper(image, {
|
||||
aspectRatio: 16 / 9,
|
||||
crop(event) {
|
||||
console.log(event.detail.x);
|
||||
console.log(event.detail.y);
|
||||
console.log(event.detail.width);
|
||||
console.log(event.detail.height);
|
||||
console.log(event.detail.rotate);
|
||||
console.log(event.detail.scaleX);
|
||||
console.log(event.detail.scaleY);
|
||||
}
|
||||
});
|
||||
|
||||
// Store cropper instance globally for demo buttons
|
||||
window.cropper = cropper;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Switchery for iOS-style toggle switches
|
||||
if (typeof window.Switchery !== 'undefined') {
|
||||
const Switchery = window.Switchery;
|
||||
const elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
|
||||
elems.forEach(function(html) {
|
||||
const switchery = new Switchery(html, { color: '#26B99A' });
|
||||
});
|
||||
}
|
||||
|
||||
// Note: Using TempusDominus for all date functionality instead of DateRangePicker
|
||||
// Date ranges can be implemented using two linked TempusDominus pickers (see below)
|
||||
|
||||
// Initialize Ion Range Slider
|
||||
if ($ && $.fn.ionRangeSlider) {
|
||||
$('.range_01').ionRangeSlider({
|
||||
type: 'double',
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
grid: true
|
||||
});
|
||||
|
||||
$('.range_02').ionRangeSlider({
|
||||
type: 'single',
|
||||
min: 0,
|
||||
max: 100,
|
||||
from: 50,
|
||||
postfix: '%',
|
||||
grid: true
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize TempusDominus DateTimePickers
|
||||
if (typeof window.TempusDominus !== 'undefined') {
|
||||
const TempusDominus = window.TempusDominus;
|
||||
// Basic DateTime Picker
|
||||
const picker1 = new TempusDominus(document.getElementById('myDatepicker'), {
|
||||
display: {
|
||||
@@ -1387,6 +1755,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} // Close initializeComponents function
|
||||
|
||||
// Start the initialization process
|
||||
waitForLibraries();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
85
src/main-form-advanced.js
Normal file
85
src/main-form-advanced.js
Normal file
@@ -0,0 +1,85 @@
|
||||
// Minimal main.js for form_advanced.html
|
||||
console.log('🚀 Form Advanced main.js starting...');
|
||||
|
||||
// Import jQuery setup first
|
||||
import $ from './jquery-setup.js';
|
||||
window.jQuery = window.$ = $;
|
||||
console.log('✅ jQuery loaded');
|
||||
|
||||
// Bootstrap 5 - No jQuery dependency needed
|
||||
import * as bootstrap from 'bootstrap';
|
||||
window.bootstrap = bootstrap;
|
||||
console.log('✅ Bootstrap loaded');
|
||||
|
||||
// Switchery (iOS-style toggle switches)
|
||||
import Switchery from 'switchery';
|
||||
window.Switchery = Switchery;
|
||||
console.log('✅ Switchery loaded');
|
||||
|
||||
// TempusDominus DateTimePicker (Bootstrap 5 compatible)
|
||||
import { TempusDominus } from '@eonasdan/tempus-dominus';
|
||||
window.TempusDominus = TempusDominus;
|
||||
console.log('✅ TempusDominus loaded');
|
||||
|
||||
// Global styles (Bootstrap 5 + custom)
|
||||
import './main.scss';
|
||||
console.log('✅ Styles loaded');
|
||||
|
||||
// TempusDominus CSS
|
||||
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css';
|
||||
console.log('✅ TempusDominus CSS loaded');
|
||||
|
||||
// Additional CSS for form components
|
||||
import '@simonwep/pickr/dist/themes/classic.min.css';
|
||||
import 'ion-rangeslider/css/ion.rangeSlider.min.css';
|
||||
import 'cropper/dist/cropper.min.css';
|
||||
console.log('✅ Form component CSS loaded');
|
||||
|
||||
// Add the essential JavaScript functionality
|
||||
try {
|
||||
// Import helpers and sidebar
|
||||
await import('./js/helpers/smartresize.js');
|
||||
console.log('✅ Smartresize helper loaded');
|
||||
|
||||
await import('./js/sidebar.js');
|
||||
console.log('✅ Sidebar functionality loaded');
|
||||
|
||||
await import('./js/init.js');
|
||||
console.log('✅ Initialization scripts loaded');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error loading JavaScript modules:', error);
|
||||
}
|
||||
|
||||
// Only add form-specific libraries after core is loaded
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
try {
|
||||
// Input Mask
|
||||
const { default: Inputmask } = await import('inputmask');
|
||||
window.Inputmask = Inputmask;
|
||||
console.log('✅ Inputmask loaded');
|
||||
|
||||
// Modern Color Picker
|
||||
const { default: Pickr } = await import('@simonwep/pickr');
|
||||
window.Pickr = Pickr;
|
||||
console.log('✅ Pickr loaded');
|
||||
|
||||
// Ion Range Slider
|
||||
await import('ion-rangeslider');
|
||||
console.log('✅ Ion Range Slider loaded');
|
||||
|
||||
// jQuery Knob
|
||||
await import('jquery-knob');
|
||||
console.log('✅ jQuery Knob loaded');
|
||||
|
||||
// Cropper.js
|
||||
await import('cropper');
|
||||
console.log('✅ Cropper loaded');
|
||||
|
||||
console.log('✅ All form advanced components loaded successfully!');
|
||||
} catch (error) {
|
||||
console.error('❌ Error loading form components:', error);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('✅ Form Advanced main.js fully loaded!');
|
||||
90
src/main-form-basic.js
Normal file
90
src/main-form-basic.js
Normal file
@@ -0,0 +1,90 @@
|
||||
// Very basic main.js for form_advanced.html - just core functionality
|
||||
console.log('🚀 Basic Form main.js starting...');
|
||||
|
||||
// Import jQuery setup first
|
||||
import $ from './jquery-setup.js';
|
||||
window.jQuery = window.$ = $;
|
||||
// Also ensure global access
|
||||
globalThis.jQuery = globalThis.$ = $;
|
||||
console.log('✅ jQuery loaded and globally accessible');
|
||||
|
||||
// Bootstrap 5 - No jQuery dependency needed
|
||||
import * as bootstrap from 'bootstrap';
|
||||
window.bootstrap = bootstrap;
|
||||
console.log('✅ Bootstrap loaded');
|
||||
|
||||
// Global styles (Bootstrap 5 + custom) - most important for layout
|
||||
import './main.scss';
|
||||
console.log('✅ Styles loaded');
|
||||
|
||||
// Essential scripts for layout
|
||||
import './js/helpers/smartresize.js';
|
||||
import './js/sidebar.js';
|
||||
import './js/init.js';
|
||||
console.log('✅ Core scripts loaded');
|
||||
|
||||
// TempusDominus for date/time pickers (synchronous import)
|
||||
import { TempusDominus } from '@eonasdan/tempus-dominus';
|
||||
window.TempusDominus = TempusDominus;
|
||||
console.log('✅ TempusDominus loaded');
|
||||
|
||||
// TempusDominus CSS
|
||||
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css';
|
||||
console.log('✅ TempusDominus CSS loaded');
|
||||
|
||||
// Switchery for iOS-style toggles (synchronous import)
|
||||
import * as SwitcheryModule from 'switchery';
|
||||
window.Switchery = SwitcheryModule.default || SwitcheryModule;
|
||||
console.log('✅ Switchery loaded');
|
||||
|
||||
// Input Mask for input formatting (synchronous import)
|
||||
import * as InputmaskModule from 'inputmask';
|
||||
window.Inputmask = InputmaskModule.default || InputmaskModule;
|
||||
console.log('✅ Inputmask loaded');
|
||||
|
||||
// Ion Range Slider (synchronous import)
|
||||
import 'ion-rangeslider';
|
||||
console.log('✅ Ion Range Slider loaded');
|
||||
|
||||
// Ion Range Slider CSS
|
||||
import 'ion-rangeslider/css/ion.rangeSlider.min.css';
|
||||
console.log('✅ Ion Range Slider CSS loaded');
|
||||
|
||||
// Modern Color Picker (Pickr) (synchronous import)
|
||||
import * as PickrModule from '@simonwep/pickr';
|
||||
window.Pickr = PickrModule.default || PickrModule;
|
||||
console.log('✅ Pickr color picker loaded');
|
||||
|
||||
// Pickr CSS - Multiple themes
|
||||
import '@simonwep/pickr/dist/themes/classic.min.css';
|
||||
import '@simonwep/pickr/dist/themes/monolith.min.css';
|
||||
import '@simonwep/pickr/dist/themes/nano.min.css';
|
||||
console.log('✅ Pickr CSS loaded (Classic, Monolith, Nano themes)');
|
||||
|
||||
// jQuery Knob for circular inputs (synchronous import)
|
||||
import 'jquery-knob';
|
||||
console.log('✅ jQuery Knob loaded');
|
||||
|
||||
// Cropper.js for image cropping (synchronous import)
|
||||
import * as CropperModule from 'cropper';
|
||||
window.Cropper = CropperModule.default || CropperModule;
|
||||
console.log('✅ Cropper.js loaded');
|
||||
|
||||
// Cropper CSS
|
||||
import 'cropper/dist/cropper.min.css';
|
||||
console.log('✅ Cropper CSS loaded');
|
||||
|
||||
console.log('✅ Enhanced form main.js fully loaded!');
|
||||
|
||||
// Debug: Check if all global variables are set
|
||||
setTimeout(() => {
|
||||
console.log('🔍 Final check - Global variables status:');
|
||||
console.log(' window.Inputmask:', typeof window.Inputmask);
|
||||
console.log(' window.Pickr:', typeof window.Pickr);
|
||||
console.log(' window.Cropper:', typeof window.Cropper);
|
||||
console.log(' window.Switchery:', typeof window.Switchery);
|
||||
console.log(' window.TempusDominus:', typeof window.TempusDominus);
|
||||
console.log(' window.jQuery:', typeof window.jQuery);
|
||||
console.log(' $.fn.ionRangeSlider:', window.jQuery && window.jQuery.fn.ionRangeSlider ? 'available' : 'missing');
|
||||
console.log(' $.fn.knob:', window.jQuery && window.jQuery.fn.knob ? 'available' : 'missing');
|
||||
}, 100);
|
||||
@@ -59,6 +59,41 @@ console.log('✅ Leaflet CSS loaded');
|
||||
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css';
|
||||
console.log('✅ TempusDominus CSS loaded');
|
||||
|
||||
// Ion Range Slider
|
||||
import 'ion-rangeslider';
|
||||
window.ionRangeSlider = true;
|
||||
console.log('✅ Ion Range Slider loaded');
|
||||
|
||||
// Ion Range Slider CSS
|
||||
import 'ion-rangeslider/css/ion.rangeSlider.min.css';
|
||||
console.log('✅ Ion Range Slider CSS loaded');
|
||||
|
||||
// Input Mask
|
||||
import Inputmask from 'inputmask';
|
||||
window.Inputmask = Inputmask;
|
||||
console.log('✅ Inputmask loaded');
|
||||
|
||||
// Modern Color Picker
|
||||
import Pickr from '@simonwep/pickr';
|
||||
window.Pickr = Pickr;
|
||||
console.log('✅ Pickr loaded');
|
||||
|
||||
// Pickr CSS
|
||||
import '@simonwep/pickr/dist/themes/classic.min.css';
|
||||
console.log('✅ Pickr CSS loaded');
|
||||
|
||||
// jQuery Knob (needs jQuery to be global first)
|
||||
import 'jquery-knob';
|
||||
console.log('✅ jQuery Knob loaded');
|
||||
|
||||
// Cropper.js for image cropping
|
||||
import 'cropper';
|
||||
console.log('✅ Cropper loaded');
|
||||
|
||||
// Cropper CSS
|
||||
import 'cropper/dist/cropper.min.css';
|
||||
console.log('✅ Cropper CSS loaded');
|
||||
|
||||
// Add the essential JavaScript functionality
|
||||
try {
|
||||
// Import helpers and sidebar
|
||||
|
||||
35
src/main.js
35
src/main.js
@@ -52,6 +52,20 @@ import './main.scss';
|
||||
// Leaflet CSS
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
// TempusDominus CSS
|
||||
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css';
|
||||
|
||||
// Pickr CSS
|
||||
import '@simonwep/pickr/dist/themes/classic.min.css';
|
||||
|
||||
|
||||
|
||||
// Ion Range Slider CSS
|
||||
import 'ion-rangeslider/css/ion.rangeSlider.min.css';
|
||||
|
||||
// Cropper CSS
|
||||
import 'cropper/dist/cropper.min.css';
|
||||
|
||||
// Legacy scripts that depend on global jQuery - LOAD IN CORRECT ORDER
|
||||
import './js/helpers/smartresize.js';
|
||||
import './js/sidebar.js';
|
||||
@@ -96,8 +110,21 @@ import 'flot/source/jquery.flot.resize.js';
|
||||
|
||||
// ECharts
|
||||
import * as echarts from 'echarts';
|
||||
window.echarts = echarts;
|
||||
|
||||
// Input Mask
|
||||
import Inputmask from 'inputmask';
|
||||
window.Inputmask = Inputmask;
|
||||
|
||||
// Modern Color Picker
|
||||
import Pickr from '@simonwep/pickr';
|
||||
window.Pickr = Pickr;
|
||||
|
||||
// jQuery Knob
|
||||
import 'jquery-knob';
|
||||
|
||||
// Cropper.js for image cropping
|
||||
import 'cropper';
|
||||
|
||||
|
||||
|
||||
// Legacy scripts that depend on global jQuery
|
||||
import './js/helpers/smartresize.js';
|
||||
import './js/sidebar.js';
|
||||
import './js/init.js';
|
||||
Reference in New Issue
Block a user