attempting to lock screen orientation

This commit is contained in:
Godfrey M 2024-04-09 09:40:39 -07:00
parent d0f171ebc6
commit 858da800be
3 changed files with 27 additions and 1 deletions

5
package-lock.json generated
View file

@ -19162,6 +19162,11 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true "dev": true
}, },
"signature_pad": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.2.0.tgz",
"integrity": "sha512-YLWysmaUBaC5wosAKkgbX7XI+LBv2w5L0QUcI6Jc4moHYzv9BUBJtAyNLpWzHjtjKTeWOH6bfP4a4pzf0UinfQ=="
},
"simple-concat": { "simple-concat": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",

View file

@ -56,6 +56,7 @@
"papaparse": "^4.3.3", "papaparse": "^4.3.3",
"select2": "4.0.13", "select2": "4.0.13",
"sheetjs": "^2.0.0", "sheetjs": "^2.0.0",
"signature_pad": "^4.2.0",
"tableexport.jquery.plugin": "1.28.0", "tableexport.jquery.plugin": "1.28.0",
"tether": "^1.4.0", "tether": "^1.4.0",
"vue-resource": "^1.5.2", "vue-resource": "^1.5.2",

View file

@ -70,9 +70,10 @@
<h3 style="padding-top: 20px">{{trans('general.sign_tos')}}</h3> <h3 style="padding-top: 20px">{{trans('general.sign_tos')}}</h3>
<div id="signature-pad" class="m-signature-pad"> <div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body col-md-12 col-sm-12 col-lg-12 col-xs-12"> <div class="m-signature-pad--body col-md-12 col-sm-12 col-lg-12 col-xs-12">
<canvas></canvas> <canvas style="width:100%;"></canvas>
<input type="hidden" name="signature_output" id="signature_output"> <input type="hidden" name="signature_output" id="signature_output">
</div> </div>
<button id="lock_button">Lock</button>
<div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center"> <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">
<button type="button" class="btn btn-sm btn-default clear" data-action="clear" id="clear_button">{{trans('general.clear_signature')}}</button> <button type="button" class="btn btn-sm btn-default clear" data-action="clear" id="clear_button">{{trans('general.clear_signature')}}</button>
</div> </div>
@ -94,6 +95,25 @@
@section('moar_scripts') @section('moar_scripts')
<script nonce="{{ csrf_token() }}"> <script nonce="{{ csrf_token() }}">
const rotate_btn = document.querySelector("#lock_button");
rotate_btn.addEventListener("click", () => {
log.textContent += `Lock pressed \n`;
const oppositeOrientation = screen.orientation.type.startsWith("portrait")
? "landscape"
: "portrait";
screen.orientation
.lock(oppositeOrientation)
.then(() => {
log.textContent = `Locked to ${oppositeOrientation}\n`;
})
.catch((error) => {
log.textContent += `${error}\n`;
});
});
var wrapper = document.getElementById("signature-pad"), var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"), clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"), saveButton = wrapper.querySelector("[data-action=save]"),