Add #on method

riversun · riversun · commit bf72fcd43869 · 2018-12-26T03:01:04.000+09:00
diff --git a/dist/jsframe-1.4.0.min.js b/dist/jsframe-1.4.0.min.js
diff --git a/public/examples/ex00/preset_yosemite.html b/public/examples/ex00/preset_yosemite.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!--
+      JSFrame Examples
+      Copyright 2007-2019 Tom Misawa, riversun.org@gmail.com
+     -->
+    <title>JsFrame.js example</title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="A javascript popup/floating window library.">
+
+</head>
+<body style="background: url('http://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg') 50% no-repeat fixed; background-size: cover;">
+
+<div style="color:#666666">
+    <a href="https://github.com/riversun/JSFrame.js">JSFrame.js</a> Example:preset style 'yosemite'
+</div>
+<script src="../../jsframe.js"></script>
+
+<script>
+    function start() {
+
+        const jsFrame = new JSFrame();
+
+        const frames = [];
+        for (let i = 0; i < 3; i++) {
+            const yosemiteStyle = jsFrame.createPresetStyle('yosemite');
+            const frame = jsFrame.createFrame(20 + 320 * i, 40, 300, 200, yosemiteStyle).setTitle(`Window${i}`)
+            const innerHTML = `<div id="my_element" style="padding:10px;font-size:12px;color:darkgray;">Contents of window${i}</div>`;
+            frame.setHTML(innerHTML);
+            frame.setMinFrameSize(160, 100);
+            frame.getFrameView().style.backgroundColor = "rgba(255,255,255,0.9)";
+
+            frame.on('minimizeButton', 'click', (frm) => {
+                console.log(frm)
+                const size = frm.getSize();
+                frm.setSize(size.width - 20, size.height - 20);
+            });
+
+            frame.on('zoomButton', 'click', (frm) => {
+                console.log(frm)
+                const size = frm.getSize();
+                frm.setSize(size.width + 20, size.height + 20);
+            });
+
+
+            frame.show();
+            frames.push(frame);
+
+        }
+
+        frames[0].requestFocus();
+    }
+
+    start();
+</script>
+
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,20 @@
 </head>
 <body>
 <h1>Example of jsFrame.js</h1>
-<a href="examples/ex00/index.html">Example 00</a><br>
+
+
+
+
+
+<a href="examples/ex00/index.html">Simple</a><br>
+<a href="examples/ex00/iframe.html">Use Iframe</a><br>
+<a href="examples/ex00/modal.html">Modal Window</a><br>
+<a href="examples/ex00/modify_content.html">Modify content</a><br>
+<a href="examples/ex00/multi_window.html">Show multi-window</a><br>
+<a href="examples/ex00/preset_style.html">Use preset style</a><br>
+<a href="examples/ex00/preset_yosemite.html">Use preset style 'yosemite'</a><br>
+
+
 <a href="examples/ex01/index.html">Example 01</a><br>
 <a href="examples/ex02/index.html">Example 02</a> <br>
 <a href="examples/ex03/index.html">Example 03</a> <br>
diff --git a/src/JSFrame.js b/src/JSFrame.js
@@ -1070,6 +1070,17 @@ CFrame.prototype.getFrameComponentElement = function (id) {
     }
 };
 
+CFrame.prototype.on = function (id, eventType, callbackFunc) {
+    var me = this;
+    var component = me.getFrameComponentElement(id);
+    if (component) {
+        component.addEventListener(eventType, e => {
+            callbackFunc(me);
+        });
+    }
+
+}
+
 CFrame.prototype.removeFrameComponentById = function (frameComponentId) {
     var me = this;
 
@@ -1368,6 +1379,11 @@ CFrame.prototype.getHeight = function () {
     return parseInt(me.htmlElement.style.height, 10);
 };
 
+CFrame.prototype.getSize = function () {
+    var me = this;
+    return {width: me.getWidth(), height: me.getHeight()};
+};
+
 CFrame.prototype.setSize = function (width, height) {
     var me = this;
 
@@ -1749,7 +1765,7 @@ CFrame.prototype.showModal = function () {
     var me = this;
 
 
-    var appearance =new CFrameAppearance();
+    var appearance = new CFrameAppearance();
     appearance.showTitleBar = false;
     appearance.showCloseButton = false;
     appearance.frameBorderRadius = '0px';
