Fancy tooltips

Cleaner dependency loading

Author: aclavio

src/app/models/scripts-lib.xqy

@@ -47,8 +47,8 @@ declare function m:find-scripts($db-name) as json:array
           map:put($obj, "category", fn:string($script/@category)),
           map:put($obj, "path", fn:string($script/scripts:path/text())),
           map:put($obj, "description", fn:string($script/scripts:description/text())),
-          map:put($obj, "content-db", fn:string($script/scripts:content-db/text())),
-          map:put($obj, "modules-db", fn:string($script/scripts:modules-db/text()))
+          map:put($obj, "contentDb", fn:string($script/scripts:content-db/text())),
+          map:put($obj, "modulesDb", fn:string($script/scripts:modules-db/text()))
         )
         order by $script/@name
         return $obj

src/app/views/main.xqy

@@ -33,7 +33,7 @@ xdmp:set-response-encoding("UTF-8"),
     </div>
 
     <!-- Load our JS here -->
-    <script src="/js/lib/jquery-1.7.1.min.js"></script>
+    <script src="/js/lib/jquery-1.11.2.min.js"></script>
     <script src="/js/lib/handlebars-v1.3.0.js"></script>
     <script src="/js/lib/ember-1.8.1.js"></script>
     <script src="/js/lib/bootstrap.min.js"></script>

src/public/favicon.ico

@@ -1,5 +1,5 @@
-// definition of application routes
-define(['ember'], function(Ember) {
+// setup the ember application
+define(['ember', 'templates'], function(Ember) {
   var EmberApp = Ember.Application.extend({rootElement: '#content'});
 
   return EmberApp.create({

src/public/js/app.js

@@ -11,19 +11,22 @@ requirejs.config({
     ember: {
       deps: ['handlebars', 'jquery'],
       exports: 'Ember'
+    },
+    bootstrap: {
+      deps: ['jquery']
     }
   },
   noGlobal: true,
   paths:{
-    //app:"workspace_app/app",
     ember: 'lib/ember-1.8.1',
     jquery: 'lib/jquery-1.11.2.min',
     handlebars: 'lib/handlebars-v1.3.0',
+    bootstrap: 'lib/bootstrap.min',
     text: 'lib/text'
   }
 });
 
-require(['ember', 'app', 'routes', 'controllers', 'views', 'templates'], function(Ember, App) {
+require(['ember', 'app', 'routes', 'controllers', 'views'], function(Ember, App) {
 
   // Override didInsertElement() to trigger event to run
   // DOM-ready dependent code, like jQuery plugins

src/public/js/config.js

@@ -1,9 +1,11 @@
 define(['ember',
   'text!templates/application.hbs',
-  'text!templates/index.hbs'
+  'text!templates/index.hbs',
+  'text!templates/script-row-table.hbs'
   ], function(Ember,
     applicationTemplate,
-    indexTemplate
+    indexTemplate,
+    scriptRowTableTemptlate
   ){
 
   /*
@@ -29,7 +31,7 @@ define(['ember',
   }
   */
 
-  Ember.TEMPLATES['application'] = Ember.Handlebars.compile(applicationTemplate);
-  Ember.TEMPLATES['index'] = Ember.Handlebars.compile(indexTemplate);
-
+  Ember.TEMPLATES['application']      = Ember.Handlebars.compile(applicationTemplate);
+  Ember.TEMPLATES['index']            = Ember.Handlebars.compile(indexTemplate);
+  Ember.TEMPLATES['script-row-table'] = Ember.Handlebars.compile(scriptRowTableTemptlate);
 });

src/public/js/templates.js

@@ -2,28 +2,22 @@
   <table id="scriptTable" class="table table-bordered table-hover">
     <tr>
       <th>Name</th>
+      <th>Category</th>
       <th>Description</th>
       <th>Path</th>
       <th></th>
     </tr>
     {{#if loading}}
       <tr>
-        <td class="col-wide" colspan="4">loading...</td>
+        <td class="col-wide" colspan="5">loading...</td>
       </tr>
     {{else}}
       {{#each script in scripts}}
-        <tr>
-          <td>{{script.name}}</td>
-          <td>{{script.description}}</td>
-          <td>{{script.path}}</td>
-          <td class="run-col">
-            <button type="submit" class="btn btn-success btn-sm" data-toggle="tooltip" title="run script" {{action 'executeScript' script}}>Run</button>
-          </td>
-        </tr>
+        {{render 'scriptTableRow' script}}
       {{/each}}
       {{#unless scripts}}
         <tr>
-          <td class="col-wide" colspan="4">No scripts found in selected database.</td>
+          <td class="col-wide" colspan="5">No scripts found in selected database.</td>
         </tr>
       {{/unless}}
     {{/if}}

src/public/js/templates/index.hbs

@@ -0,0 +1,7 @@
+<td>{{name}}</td>
+<td>{{category}}</td>
+<td>{{description}}</td>
+<td>{{path}}</td>
+<td class="run-col">
+  <button type="submit" class="btn btn-success btn-sm" data-toggle="tooltip" {{action 'executeScript' script}}>Run</button>
+</td>

src/public/js/templates/script-row-table.hbs

@@ -1,11 +1,34 @@
 // definition of application views
-require(['ember', 'app', 'jquery'], function(Ember, App, $) {
+require(['ember', 'app', 'jquery', 'bootstrap'], function(Ember, App, $) {
 
   App.IndexView = Ember.View.extend({
+    templateName: 'index',
     afterRenderEvent: function() {
       // active bootstrap tooltips
-      $('[data-toggle="tooltip"]').tooltip()
+      console.log('afterRenderEvent!!!!');
+      $('[data-toggle="tooltip"]').tooltip();
     }
   });
 
+  App.ScriptTableRowView = Ember.View.extend({
+    templateName: 'script-row-table',
+    tagName: 'tr',
+    afterRenderEvent: function() {
+      // active bootstrap tooltips
+      var element = this.get('element');
+      var script = this.get('controller.model');
+      $(element).find('[data-toggle="tooltip"]').tooltip({
+        title: script.get('name') + '<br/>' + script.get('contentDb') + '<br/>' + script.get('modulesDb'),
+        html: true
+      });
+    },
+    willDestroyElement: function() {
+      this._super();
+      // tear down tooltips
+      var element = this.get('element');
+      $(element).find('[data-toggle="tooltip"]').tooltip('destroy');
+    }
+
+  });
+
 });