Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <canvas tabindex="-1" id="example" height="400" width="750" role="application" aria-busy="true">
- <!-- Canvas Subtree acts as Shadow DOM that the browser maps to the platform accessibility API -->
- <label id="labelA" for="showA"><input id="showA" role="checkbox" aria-labelledby="labelA" type="checkbox" /> Show "A"</label>
- <label id="labelB" for="showB"><input id="showB" role="checkbox" aria-labelledby="labelB" type="checkbox" /> Show "B"</label>
- <!-- ... -->
- </canvas>
- <script>
- /*/
- Canvas is a low level API and requires manual management of all interactivity.
- The following example is quite verbose, and demonstrates the minimum of programming
- necessary to enable a simple checkbox element within canvas.
- /*/
- function drawCheckbox(context, element, x, y, pathOnly) {
- context.save();
- context.font = '10px sans-serif';
- context.textAlign = 'left';
- context.textBaseline = 'middle';
- var label = document.getElementById(element.getAttribute('aria-labelledby'));
- var metrics = context.measureText(label.textContent);
- if(pathOnly) {
- var areaWidth = 15 + metrics.width;
- var areaHeight = 10;
- context.beginPath();
- context.rect(x-5, y-5, areaWidth, areaHeight);
- return;
- }
- context.beginPath();
- context.strokeStyle = 'black';
- context.rect(x-5, y-5, 10, 10);
- context.stroke();
- if (element.checked) {
- context.fillStyle = 'black';
- context.fill();
- }
- context.fillText(label.textContent, x+5, y);
- // Draw the Focus Ring
- var drawFocusManually = false;
- if (document.activeElement == element || document.activeElementFocus == element && document.activeElement == context.canvas) {
- try {
- drawFocusManually = !context.drawFocusRing(element);
- } catch(e) {
- drawFocusManually = true;
- }
- }
- if(drawFocusManually) {
- context.beginPath();
- context.rect(x-7, y-7, 12 + metrics.width+2, 14);
- context.strokeStyle = 'silver';
- context.stroke();
- }
- context.restore();
- }
- function drawBase() { /* ... */ }
- function drawAs() { /* ... */ }
- function drawBs() { /* ... */ }
- function redraw() {
- var canvas = document.getElementsByTagName('canvas')[0];
- var context = canvas.getContext('2d');
- var showA = document.getElementById('showA');
- var showB = document.getElementById('showB');
- context.clearRect(0, 0, canvas.width, canvas.height);
- var busy = Boolean(canvas.getAttribute('aria-busy') == 'true');
- if(busy) canvas.removeAttribute('aria-busy');
- if(busy && context.setPathForElement) {
- drawCheckbox(context, showA, 20, 40, true);
- context.setPathForElement(showA);
- drawCheckbox(context, showB, 20, 60, true);
- context.setPathForElement(showB);
- busy = false;
- }
- if(busy && context.beginElement) context.beginElement(showA);
- drawCheckbox(context, showA, 20, 40);
- if(busy && context.beginElement) context.beginElement(showB);
- drawCheckbox(context, showB, 20, 60);
- if(busy && context.beginElement) context.endElement();
- drawBase();
- if (showA.checked) {
- drawAs();
- }
- if (showB.checked) {
- drawBs();
- }
- }
- function processMouseCoords(event,element) {
- var offsetLeft = 0, offsetTop = 0;
- while(element) {
- offsetLeft += element.offsetLeft >> 0;
- offsetTop += element.offsetTop >> 0;
- element = element.parentNode;
- }
- offsetLeft -= document.documentElement.scrollLeft;
- offsetTop -= document.documentElement.scrollTop;
- return { x: event.clientX - offsetLeft, y: event.clientY - offsetTop }
- }
- function processClick(event){
- var canvas = document.getElementById('example');
- var context = canvas.getContext('2d');
- var coords = processMouseCoords(event,canvas);
- var showA = document.getElementById('showA');
- var showB = document.getElementById('showB');
- var useRedraw = false;
- if(event.target.type == 'checkbox') {
- redraw();
- return;
- }
- drawCheckbox(context, showA, 20, 40, true);
- if (context.isPointInPath(coords.x, coords.y)) {
- showA.checked = !(showA.checked);
- showA.focus();
- document.activeElementFocus = showA;
- useRedraw = true;
- }
- drawCheckbox(context, showB, 20, 60, true);
- if (context.isPointInPath(coords.x, coords.y)) {
- showB.checked = !(showB.checked);
- document.activeElementFocus = showB;
- showB.focus();
- useRedraw = true;
- }
- if(!useRedraw &&
- (document.activeElementFocus != document.activeElement)) {
- document.activeElementFocus = document.activeElement;
- redraw();
- }
- if(useRedraw) redraw();
- }
- // Add the event listeners
- document.getElementById('showA').addEventListener('focus', redraw, true);
- document.getElementById('showB').addEventListener('focus', redraw, true);
- document.getElementById('showA').addEventListener('blur', redraw, true);
- document.getElementById('showB').addEventListener('blur', redraw, true);
- document.getElementById('example').addEventListener('change', redraw, true);
- document.getElementById('showA').onclick = function() { this.checked = !(this.checked); };
- document.getElementById('showB').onclick = function() { this.checked = !(this.checked); };
- if(!(CanvasRenderingContext2D.prototype.beginElement ||
- CanvasRenderingContext2D.prototype.setPathForElement))
- document.getElementById('example').addEventListener('click', processClick, false);
- redraw();
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement