Reorganize project structure and finalize Bootstrap 5 cleanup
- Create demo folder and move test files with proper naming - Rename test.html/js/php to demo/index.html/demo.js/demo.php - Update Gruntfile.js to Bootstrap 5 only configuration - Clean up package.json dependencies (remove unused webpack/popper.js) - Remove non-Bootstrap 5 dist directories - Update webpack config to use demo files - Fix demo paths and ensure fully functional demo
This commit is contained in:
Micha
73
demo/demo.js
Normal file
73
demo/demo.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import $ from 'jquery';
|
||||
// Ensure jQuery is available globally before any other imports
|
||||
window.$ = window.jQuery = $;
|
||||
global.$ = global.jQuery = $;
|
||||
|
||||
import "bootstrap"
|
||||
import "bootstrap/dist/css/bootstrap.min.css"
|
||||
import "bootstrap-icons/font/bootstrap-icons.min.css"
|
||||
|
||||
// bootstrap-datepicker loaded separately (not bundled in grunt build)
|
||||
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
|
||||
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
|
||||
|
||||
// Import the editable functionality (attaches to jQuery.fn) - using Grunt-built version
|
||||
require("../dist/bootstrap5-editable/js/bootstrap-editable");
|
||||
$.fn.editable.defaults.mode = 'inline';
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#yes-no-switch').editable({
|
||||
type: 'select',
|
||||
url: 'demo/demo.php', // URL to send the POST request
|
||||
source: 'demo/demo.php', // URL to fetch select options
|
||||
value: 1,
|
||||
success: function(response, newValue) {
|
||||
// Handle success
|
||||
},
|
||||
error: function(response) {
|
||||
// Handle error
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#yes-no-switch-json').editable({
|
||||
type: 'select',
|
||||
url: 'demo/demo.php', // URL to send the POST request
|
||||
source: [ // Static array instead of URL
|
||||
{value: 0, text: "No"},
|
||||
{value: 1, text: "Yes"},
|
||||
{value: 2, text: "Maybe"}
|
||||
],
|
||||
value: 1,
|
||||
success: function(response, newValue) {
|
||||
// Handle success
|
||||
},
|
||||
error: function(response) {
|
||||
// Handle error
|
||||
}
|
||||
});
|
||||
|
||||
const initialDateValue = new Date().toISOString().split('T')[0];
|
||||
|
||||
$('#datepicker').editable({
|
||||
type: 'date',
|
||||
url: 'demo/demo.php', // URL to send the POST request
|
||||
value: initialDateValue, // Set to current date (YYYY-MM-DD)
|
||||
format: 'yyyy-mm-dd', // Date format
|
||||
viewformat: 'dd/mm/yyyy', // How the user sees it
|
||||
datepicker: {
|
||||
weekStart: 1,
|
||||
autoclose: true,
|
||||
todayHighlight: true
|
||||
},
|
||||
success: (response, newValue)=> {
|
||||
// Handle success
|
||||
},
|
||||
error: (response) => {
|
||||
// Handle error
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
30
demo/demo.php
Normal file
30
demo/demo.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
header("Content-Type: application/json");
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
||||
// Sample data for select dropdown
|
||||
echo json_encode([
|
||||
["value" => 1, "text" => "Yes"],
|
||||
["value" => 0, "text" => "No"]
|
||||
]);
|
||||
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
// Simulate saving the data and returning success response
|
||||
$input = json_decode(file_get_contents("php://input"), true);
|
||||
|
||||
// If JSON is empty, try to read form-encoded data
|
||||
if (!$input) {
|
||||
$input = $_POST;
|
||||
}
|
||||
|
||||
if (!isset($input['name']) || !isset($input['value'])) {
|
||||
http_response_code(400);
|
||||
echo json_encode(["error" => "Invalid request"]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Normally, you would store this in a database, but for testing, just return success
|
||||
echo json_encode(["success" => true, "newValue" => $input['value']]);
|
||||
} else {
|
||||
http_response_code(405); // Method Not Allowed
|
||||
echo json_encode(["error" => "Method Not Allowed"]);
|
||||
}
|
||||
68
demo/index.html
Normal file
68
demo/index.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="./dist/bootstrap5-editable/css/bootstrap-editable.css">
|
||||
<!-- <script src="./dist/bootstrap5-editable/js/bootstrap-editable.js"></script>-->
|
||||
<!-- <script src="./dist/jquery.js"></script>-->
|
||||
<script src="./dist/app.js" type="module"></script>
|
||||
|
||||
<title>Bootstrap 5.3.3 Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="text-primary">jQuery 3.7.1 & Bootstrap 5.3.3 Test</h1>
|
||||
</div>
|
||||
|
||||
<form id="test-form" action="demo/demo.php" method="post">
|
||||
|
||||
<div class="container mb-3">
|
||||
<h3>Test X-Editable Yes/No Switch - AJAX Source</h3>
|
||||
<p>Click on the text below to toggle Yes/No:</p>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="yes-no-switch"
|
||||
class="editable editable-click"
|
||||
data-pk="101"
|
||||
>
|
||||
Yes
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container mb-3">
|
||||
<h3>Test X-Editable Static Source - JSON Source</h3>
|
||||
<p>Click on the text below (uses static array, not AJAX):</p>
|
||||
<a
|
||||
href="#"
|
||||
id="yes-no-switch-json"
|
||||
class="editable editable-click"
|
||||
data-type="select"
|
||||
data-pk="102"
|
||||
data-title="Select Yes/No"
|
||||
>
|
||||
Yes
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h3>Test X-Editable Datepicker</h3>
|
||||
<p>Click to select a date:</p>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="datepicker"
|
||||
class="editable editable-click"
|
||||
data-type="date"
|
||||
data-pk="103"
|
||||
data-title="Select Date"
|
||||
>
|
||||
Click to select date
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user