add first webhook

client/galaxy/scripts/mvc/tool/tool-webhooks.js

@@ -8,13 +8,13 @@ define([], function() {
         urlRoot:  galaxyRoot + 'api/webhooks/toolview',
         defaults: {
             name: '',
-            path: ''
+            styles: '',
+            script: ''
         }
     });
 
     var WebhookView = Backbone.View.extend({
         el: '#webhook-toolview',
-        webhookTemplate: _.template('<p>name: <%= name %><br>path: <%= path %></p>'),
 
         initialize: function() {
             var me = this;
@@ -27,9 +27,10 @@ define([], function() {
         },
 
         render: function() {
-            var webhookContent = this.model.toJSON();
-            if (webhookContent.css_styles) $('<style/>').text(webhookContent.css_styles).appendTo('head');
-            this.$el.html(this.webhookTemplate(webhookContent));
+            var webhook = this.model.toJSON();
+            this.$el.html('<div id="' + webhook.name + '"></div>');
+            if (webhook.styles) $('<style/>', {type: 'text/css'}).text(webhook.styles).appendTo('head');
+            if (webhook.script) $('<script/>', {type: 'text/javascript'}).text(webhook.script).appendTo('head');
             return this;
         }
     });

config/plugins/webhooks/plugin2/config/plugin2.yml → config/plugins/webhooks/xkcd/config/xkcd.yml

@@ -1,2 +1,2 @@
-name: Plugin 2
+name: xkcd
 type: toolview

config/plugins/webhooks/xkcd/static/script.js

@@ -0,0 +1,55 @@
+$(document).ready(function() {
+
+    var XkcdAppView = Backbone.View.extend({
+        el: '#xkcd',
+
+        appTemplate: _.template(
+            '<div id="xkcd-header">' +
+                '<div id="xkcd-name">xkcd</div>' +
+                '<button id="xkcd-random">Random</button>' +
+            '</div>' +
+            '<div id="xkcd-img"></div>'
+        ),
+
+        imgTemplate: _.template('<img src="<%= img %>" alt="<%= alt %>" title="<%= title %>">'),
+
+        events: {
+            'click #xkcd-random': 'getRandomXkcd'
+        },
+
+        initialize: function() {
+            var me = this;
+
+            this.render();
+
+            // Get id of the last xkcd
+            $.getJSON('http://dynamic.xkcd.com/api-0/jsonp/comic?callback=?', function(data) {
+                me.latestXkcdId = data.num;
+                me.getRandomXkcd();
+            });
+        },
+
+        render: function() {
+            this.$el.html(this.appTemplate());
+            this.xkcdImg = this.$('#xkcd-img');
+            return this;
+        },
+
+        getRandomXkcd: function() {
+            var me = this,
+                randomId = Math.floor(Math.random() * this.latestXkcdId) + 1;
+
+            $.getJSON('http://dynamic.xkcd.com/api-0/jsonp/comic/' + randomId + '?callback=?', function(data) {
+                me.xkcd = {img: data.img, alt: data.alt, title: data.title};
+                me.renderImg();
+            });
+        },
+
+        renderImg: function() {
+            this.xkcdImg.html(this.imgTemplate({img: this.xkcd.img, alt: this.xkcd.alt, title: this.xkcd.title}));
+        }
+    });
+
+    var XkcdApp = new XkcdAppView;
+
+});

config/plugins/webhooks/xkcd/static/styles.css

@@ -0,0 +1,51 @@
+#xkcd {
+    border: 1px solid #96a8c8;
+    text-align: center;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+#xkcd-header {
+    background: #96a8c8;
+    border-bottom: 1px solid #96a8c8;
+    padding: 15px 0;
+}
+
+#xkcd-name {
+    color: #fff;
+    padding-bottom: 10px;
+}
+
+#xkcd-header button {
+    color: #fff;
+    font-size: 14px;
+    background-color: #859abf;
+    border: none;
+    border-radius: 7px;
+    box-shadow: 0 5px #647eae;
+    padding: 5px 10px;
+}
+
+#xkcd-header button:focus {
+    outline: 0;
+}
+
+#xkcd-header button:hover {
+    background-color: #758cb6;
+}
+
+#xkcd-header button:active {
+    background-color: #758cb6;
+    box-shadow: 0 0 #647eae;
+    transform: translateY(5px);
+}
+
+#xkcd-img {
+    background: #fff;
+}
+
+#xkcd-img img {
+    padding: 10px;
+    max-width: 100%;
+    margin-bottom: -4px;
+}

lib/galaxy/webhooks/__init__.py

@@ -45,15 +45,25 @@ def load_webhook_from_config(self, config_dir, config_file):
 
                 path = os.path.normpath(os.path.join(config_dir, '..'))
 
+                # Read styles into a string, assuming all styles are in a
+                # single file
                 try:
-                    with open(os.path.join(path, 'static/style.css'), 'r') as f:
-                        css_styles = f.read().replace('\n', '')
+                    with open(os.path.join(path, 'static/styles.css'), 'r') as f:
+                        styles = f.read().replace('\n', '')
                 except IOError:
-                    css_styles = ''
+                    styles = ''
+
+                # Read script into a string, assuming everything is in a
+                # single file
+                try:
+                    with open(os.path.join(path, 'static/script.js'), 'r') as f:
+                        script = f.read()
+                except IOError:
+                    script = ''
 
                 config.update({
-                    'path': path,
-                    'css_styles': css_styles
+                    'styles': styles,
+                    'script': script
                 })
                 self.webhooks[config['type']].append(config)
         except Exception as e: