From: gustavo <gu.martinm@gmail.com>
Date: Fri, 29 Apr 2016 00:23:15 +0000 (+0200)
Subject: STOMP client, text area improvements
X-Git-Url: https://git.gumartinm.name/?a=commitdiff_plain;h=33f80a575f7743080d5d6fe51aba7161b6899a32;p=JavaScriptForFun

STOMP client, text area improvements
---

diff --git a/angularjs/stomp/src/stomp/app/app.module.js b/angularjs/stomp/src/stomp/app/app.module.js
index d89cc71..7059d83 100644
--- a/angularjs/stomp/src/stomp/app/app.module.js
+++ b/angularjs/stomp/src/stomp/app/app.module.js
@@ -18,6 +18,7 @@
   angular.module('app', [
     /* Shared modules */
     'app.core',
+    'app.widgets',
 
     /* Feature areas */
     'app.example'
diff --git a/angularjs/stomp/src/stomp/app/example/example.controller.js b/angularjs/stomp/src/stomp/app/example/example.controller.js
index 4f7cb99..9d3fc0e 100644
--- a/angularjs/stomp/src/stomp/app/example/example.controller.js
+++ b/angularjs/stomp/src/stomp/app/example/example.controller.js
@@ -9,28 +9,41 @@
    * @ngdoc controller
    * @name app.example.controller:ExampleController
    *
-   * @requires $rootScope
-   * @requires $scope
+   * @requires $location
    *
    * <p>
    * <br>
-   * {@link https://docs.angularjs.org/api/ng/service/$rootScope $rootScope}
-   * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
+   * {@link https://docs.angularjs.org/api/ng/service/$location $location}
    * </p>
    *
    * @description
    * ExampleController controller.
    */
   /* @ngInject */
-  function ExampleController() {
+  function ExampleController($location) {
     var vm = this;
-
     var client;
     var subscription;
 
-    // vm.serverDestination = {};
-    // vm.payload = {};
-    // vm.headers = {};
+    vm.url = $location.protocol() + '://' + $location.host() + '/spring-stomp-server/portfolio';
+    vm.clientDestination = '/topic/greeting';
+    vm.serverDestination = '/app/greeting';
+    vm.connectHeaders = JSON.stringify({
+      login: 'mylogin',
+      passcode: 'mypasscode',
+      //  User defined headers
+      'client-id': 'gumartin-id'
+    }, null, 4);
+    //  User defined headers
+    vm.sendHeaders = JSON.stringify({
+      priority: 9
+    }, null, 4);
+    //  User defined headers
+    vm.subscribeHeaders = JSON.stringify({
+      id: 123456
+    }, null, 4);
+
+
 
     vm.connect = function () {
       // use SockJS implementation instead of the browser's native implementation
@@ -46,11 +59,11 @@
       client = Stomp.over(ws);
       client.heartbeat.outgoing = 20000; // client will send heartbeats every 20000ms
       client.heartbeat.incoming = 0;     // client does not want to receive heartbeats from the server
-      client.connect(vm.connectHeaders, connectCallback, errorCallback);
+      client.connect(JSON.parse(vm.connectHeaders), connectCallback, errorCallback);
     };
 
     vm.subscribe = function () {
-      subscription = client.subscribe(vm.clientDestination, subscribeCallback);
+      subscription = client.subscribe(vm.clientDestination, subscribeCallback, JSON.parse(vm.subscribeHeaders));
     };
 
     vm.unsubscribe = function () {
@@ -58,7 +71,7 @@
     };
 
     vm.send = function () {
-      client.send(vm.serverDestination, vm.headers, vm.payload);
+      client.send(vm.serverDestination, JSON.parse(vm.sendHeaders), vm.payload);
     };
 
     vm.disconnect = function() {
@@ -78,7 +91,7 @@
     function subscribeCallback(message) {
       // called when the client receives a STOMP message from the server
       if (message.body) {
-        alert('got message with body ' + message.body)
+        alert('got message with body ' + message.body);
       } else {
         alert('got empty message');
       }
diff --git a/angularjs/stomp/src/stomp/app/example/example.html b/angularjs/stomp/src/stomp/app/example/example.html
index 752c43e..283e7db 100644
--- a/angularjs/stomp/src/stomp/app/example/example.html
+++ b/angularjs/stomp/src/stomp/app/example/example.html
@@ -12,7 +12,8 @@
     <br>
     <label>
       Headers:<br>
-      <textarea ng-model="vm.connectHeaders" placeholder="headers">
+      <textarea style="width: 200%; border: none" auto-height
+                ng-model="vm.connectHeaders" placeholder="headers">
         {"login":"superadmin","passcode":"12345678"}
       </textarea>
     </label>
@@ -35,7 +36,15 @@
     <label>
       Queue:<br>
       <input value="/rpc/" ng-model="vm.clientDestination" placeholder="Client-Destination">
-    </label><br>
+    </label>
+    <br>
+    <label>
+      Headers:<br>
+      <textarea style="width: 200%; border: none" auto-height
+                ng-model="vm.subscribeHeaders" placeholder="headers">
+        {"rid": 1234}
+      </textarea>
+    </label>
   </div>
 
   <hr>
@@ -59,14 +68,16 @@
     <br>
     <label>
       Body / Payload:<br>
-      <textarea ng-model="vm.payload" size="50" placeholder="payload">
+      <textarea style="width: 200%; border: none" auto-height
+                ng-model="vm.payload" placeholder="payload">
         {"key":"value"}
       </textarea>
     </label>
     <br>
     <label>
       Headers:<br>
-      <textarea ng-model="vm.headers" size="50" placeholder="headers">
+      <textarea style="width: 200%; border: none" auto-height
+                ng-model="vm.sendHeaders" size="50" placeholder="headers">
         {"rid": 1234}
       </textarea>
     </label>
diff --git a/angularjs/stomp/src/stomp/app/widgets/auto-height.directive.js b/angularjs/stomp/src/stomp/app/widgets/auto-height.directive.js
new file mode 100644
index 0000000..89bf98d
--- /dev/null
+++ b/angularjs/stomp/src/stomp/app/widgets/auto-height.directive.js
@@ -0,0 +1,41 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.widgets')
+    .directive('autoHeight', autoHeight);
+
+  /**
+   * @ngdoc directive
+   * @name app.widgets.directive:autoHeight
+   * @restrict EA
+   *
+   *
+   * @description
+   * Controller child directive example.
+   *
+   * @element auto-height-directive
+   *
+   * @example
+   <example name="auto-height" module="app.widgets">
+   <file name="index.html">
+   <textarea auto-height> </textarea>
+   </file>
+   </example>
+   */
+  function autoHeight() {
+    return {
+      restrict: 'EA',
+      link: linkFunc,
+      scope: {}
+    };
+
+    function linkFunc(scope, el, attr, ctrl) {
+      var height = (el[0].scrollHeight < 30) ? 80 : el[0].scrollHeight;
+
+      height = height + 80;
+      el[0].style.height = height + 'px';
+    }
+  }
+
+})();
diff --git a/angularjs/stomp/src/stomp/app/widgets/widgets.module.js b/angularjs/stomp/src/stomp/app/widgets/widgets.module.js
new file mode 100644
index 0000000..de39fec
--- /dev/null
+++ b/angularjs/stomp/src/stomp/app/widgets/widgets.module.js
@@ -0,0 +1,18 @@
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc overview
+   * @name app.widgets
+   *
+   * @description
+   * # app.widgets
+   *
+   * ## Module widgets.
+   * Module for implementing widget directives.
+   */
+  angular.module('app.widgets', [
+    'app.core'
+  ]);
+
+})();
diff --git a/angularjs/stomp/src/stomp/index.html b/angularjs/stomp/src/stomp/index.html
index 20c4fff..3b89ad8 100644
--- a/angularjs/stomp/src/stomp/index.html
+++ b/angularjs/stomp/src/stomp/index.html
@@ -55,6 +55,8 @@
     <!-- Custom JavaScript -->
     <!-- build:js(.) js/app.min.js -->
     <!-- inject:js -->
+    <script src="/src/stomp/app/widgets/widgets.module.js"></script>
+    <script src="/src/stomp/app/widgets/auto-height.directive.js"></script>
     <script src="/src/stomp/app/example/example.module.js"></script>
     <script src="/src/stomp/app/example/example.route.js"></script>
     <script src="/src/stomp/app/example/example.controller.js"></script>