admin/pluggable-web-controls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit. \n 1. Screen capture plugin. \n 2. PNG annotation plugin

Browse Source
This commit is contained in:
teddy
2024-08-19 08:58:38 +01:00
parent 6e3fc47d36
commit 40a8406427
40 changed files with 5622 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
submission/view_capture_screen.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Layout Template</title>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="shared.js"></script>
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.min.css">
<link rel="stylesheet" href="capture-screen.css">
</head>
<body>
<header>
<h1>Website Title</h1>
</header>
<div class="content-wrapper">
<main>
<h2>Main Content</h2>
<p>This is where the main content of your page goes. You can add articles, blog posts, or any other primary content here.</p>
<input type="text" value="Test 1" />
<input type="number" value="2" />
<textarea>Test 3</textarea>
<!-- Start of Screen Capture Plugin HTML -->
<button class="capture-screen" role="button">Capture Screen</button>
<!-- End of Screen Capture Plugin HTML -->
<div id="notification-widget" class="modal">
<h3>Notifications</h3>
<p>You have 3 new messages.</p>
</div>
<button id="notification-toggle" class="widget-toggle">Toggle Notifications</button>
<div id="chat-widget" class="modal">
<h3>Chat</h3>
<p>Chat content goes here...</p>
</div>
<button id="chat-toggle" class="widget-toggle">Toggle Chat</button>
<div id="settings-widget" class="modal">
<h3>Quick Settings</h3>
<p>Adjust your settings here...</p>
</div>
<button id="settings-toggle" class="widget-toggle">Toggle Settings</button>
<div id="mocha"></div>
</main>
</div>
<div id="modalTest" class="modal">
<div class="modal-content">
<h2>Test Modal</h2>
<p>This is a test modal.</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/10.0.0/sinon.min.js"></script>
<div id="mocha"></div>
<script class="mocha-init">
mocha.setup({
ui: 'bdd',
globals: [
'flagInitialised',
'defaultOptions', 'flagCaptureScreen',
'idModalNotifications', 'idButtonToggleModalNotifications',
'idModalChat', 'idButtonToggleModalChat',
'idModalSettings', 'idButtonToggleModalSettings',
'idModalTest'
]
});
mocha.checkLeaks();
const expect = chai.expect;
</script>
<script src="plugin_capture_screen.js"></script>
<script src="test_plugin_capture_screen.js"></script>
<script class="mocha-exec">
mocha.run();
</script>
</body>
<!-- Start of Screen Capture Plugin JavaScript -->
<script>
var defaultOptions = {
buttonText: "Capture Screen",
fileName: "screenshot.png",
};
var flagCaptureScreen = "capture-screen";
/* These variables are for testing only */
var idModalNotifications = "#notification-widget";
var idButtonToggleModalNotifications = "#notification-toggle";
var idModalChat = "#chat-widget";
var idButtonToggleModalChat = "#chat-toggle";
var idModalSettings = "#settings-widget";
var idButtonToggleModalSettings = "#settings-toggle";
var idModalTest = "#modalTest";
$(document).ready(function() {
$(".capture-screen").screenshotButton(defaultOptions);
hookupTestModals();
});
</script>
<!-- End of Screen Capture Plugin JavaScript -->
</html>