Remove jQuery event usage from examples

cornerstonejs · Oct 26, 2017 · 673f9c2 · 673f9c2
1 parent 99e5527
commit 673f9c2
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 27 deletions.
diff --git a/example/WebGL/index.html b/example/WebGL/index.html
@@ -90,7 +90,9 @@ <h4>Canvas</h4>
         var elementWebGL = document.getElementById('dicomImageWebGL');
 
         // setup handlers before we display the image
-        function onImageRendered(e, eventData) {
+        function onImageRendered(e) {
+            var eventData = e.detail;
+
             // set the canvas context to the image coordinate system
             cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);
 
@@ -99,8 +101,8 @@ <h4>Canvas</h4>
             $(eventData.element).siblings('.bottomright').text("Zoom:" + eventData.viewport.scale.toFixed(2));
 
         }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
-        $(elementWebGL).on("CornerstoneImageRendered", onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
+        elementWebGL.addEventListener('cornerstoneimagerendered', onImageRendered);
 
         var imageId = 'example://1';
 

diff --git a/example/colorImage/index.html b/example/colorImage/index.html
@@ -135,10 +135,11 @@ <h1>
         var element = document.getElementById('dicomImage');
         cornerstone.enable(element);
 
-        function onImageRendered(e, eventData) {
+        function onImageRendered(e) {
+            var eventData = e.detail;
             $('#topright').text("Render Time:" + eventData.renderTimeInMs + " ms");
         }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
 
         // load image and display it
         var imageId = "colorImageLoader://1";

diff --git a/example/eventhandling/index.html b/example/eventhandling/index.html
@@ -74,7 +74,9 @@ <h1>
         cornerstone.enable(element);
 
         // setup handlers before we display the image
-        function onImageRendered(e, eventData) {
+        function onImageRendered(e) {
+            var eventData = e.detail;
+
             // set the canvas context to the image coordinate system
             cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);
 
@@ -103,11 +105,10 @@ <h1>
             $('#bottomright').text("Zoom:" + eventData.viewport.scale.toFixed(2));
 
         }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
 
-        $(cornerstone.events).bind('CornerstoneImageLoaded', function(event, eventData)
-        {
-            // Note - we would
+        cornerstone.events.addEventListener('cornerstoneimageloaded', function(e) {
+            var eventData = e.detail;
             $('#imageLoaded').text('Last ImageId Loaded:' + eventData.image.imageId);
         });
 

diff --git a/example/imageCache/index.html b/example/imageCache/index.html
@@ -176,10 +176,11 @@ <h1>
         var element = document.getElementById('dicomImage');
         cornerstone.enable(element);
 
-        function onImageRendered(e, eventData) {
+        function onImageRendered(e) {
+            var eventData = e.detail;
             $('#topright').text("Render Time:" + eventData.renderTimeInMs + " ms");
         }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
 
         // load image and display it
         var imageId = "colorImageLoader://1";

diff --git a/example/layers/index.html b/example/layers/index.html
@@ -191,7 +191,8 @@ <h1>
 
         // This event will be called every time a layer is added through cornerstone.addLayer
         // The layer is added to the dropdown to make it possible to select and interact with it
-        $(element).on('CornerstoneLayerAdded', function(e, eventData) {
+        element.addEventListener('cornerstonelayeradded', function(e) {
+            var eventData = e.detail;
             var layer = cornerstone.getLayer(eventData.element, eventData.layerId);
             var $layers = $('#layers');
             var $layerOption = $('<option></option>')
@@ -208,7 +209,8 @@ <h1>
 
         // This event will be called every time cornerstone.setActiveLayer is called
         // We need to load the layer properties and update the selected layer in the dropdown
-        $(element).on('CornerstoneActiveLayerChanged', function(e, eventData) {
+        element.addEventListener('cornerstoneactivelayerchanged', function(e) {
+            var eventData = e.detail;
             var layer = cornerstone.getActiveLayer(element);
             var colormap = layer.options.colormap || '';
             var opacity = layer.options.opacity == null ? 1 : layer.options.opacity;

diff --git a/example/nonSquarePixels/index.html b/example/nonSquarePixels/index.html
@@ -128,7 +128,9 @@ <h1>
         var imageId = "myImageLoader://1";
         cornerstone.loadImage(imageId).then(function(image) {
 
-            $(element).on("CornerstoneImageRendered", function(e, eventData) {
+            element.addEventListener("cornerstoneimagerendered", function(e) {
+                var eventData = e.detail;
+
                 // reset to identity matrix
                 eventData.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
 

diff --git a/example/resize/index.html b/example/resize/index.html
@@ -69,15 +69,13 @@ <h1>
         // Add event handler to the ww/wc apply button
         $('#x256').click(function (e) {
             $('#dicomImage').width(256).height(256);
-            var fitToWindowVal = $('#fitToWindow').is(":checked");
-            var fitToWindow = fitToWindowVal;
+            var fitToWindow = $('#fitToWindow').is(":checked");
             cornerstone.resize(element, fitToWindow);
         });
 
         $('#x512').click(function (e) {
             $('#dicomImage').width(512).height(512);
-            var fitToWindowVal = $('#fitToWindow').is(":checked");
-            var fitToWindow = fitToWindowVal;
+            var fitToWindow = $('#fitToWindow').is(":checked");
             cornerstone.resize(element, fitToWindow);
         });
     });

diff --git a/example/scrollzoompanwl/index.html b/example/scrollzoompanwl/index.html
@@ -98,14 +98,10 @@ <h1>
         var element = $('#dicomImage').get(0);
         cornerstone.enable(element);
 
-        // set event handlers
-        function onImageRendered(e, eventData) {
-            $('#topright').text("Render Time:" + eventData.renderTimeInMs + " ms");
-        }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
-
         // setup handlers before we display the image
-        function onImageRendered(e, eventData) {
+        function onImageRendered(e) {
+            var eventData = e.detail;
+
             // set the canvas context to the image coordinate system
             cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);
 
@@ -127,7 +123,7 @@ <h1>
             $('#bottomright').text("Zoom:" + eventData.viewport.scale.toFixed(2));
 
         }
-        $(element).on("CornerstoneImageRendered", onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
 
         // load and display the image
         var imagePromise = updateTheImage(0);