making embedly thumbnail width and height configurable

client/views/admin/settings.html

@@ -1,9 +1,9 @@
 <template name="settings">
   <div class="grid-small grid-module dialog settings">
     {{#if this.hasSettings}}
-      {{> quickForm collection="Settings" id="updateSettingsForm" type="update" doc=this.settings label-class="control-label" input-col-class="controls" template="settings"}}
+      {{> quickForm collection="Settings" id="updateSettingsForm" type="update" doc=this.settings label-class="control-label" input-col-class="controls" template="telescope"}}
     {{else}}
-      {{> quickForm collection="Settings" id="updateSettingsForm" type="insert" template="settings" label-class="control-label" input-col-class="controls"}}
+      {{> quickForm collection="Settings" id="updateSettingsForm" type="insert" template="telescope" label-class="control-label" input-col-class="controls"}}
     {{/if}}
   </div>
 </template>

client/views/forms/quickFormTelescope.html

@@ -2,7 +2,9 @@
   {{#autoForm qfAutoFormContext}}
 
     <div class='no-fieldset'>
-      {{> afQuickFields fields=fieldsWithNoFieldset omitFields=../atts.omitFields template="telescope" input-col-class=inputClass label-class=labelClass}}
+      {{#each fieldsWithNoFieldset}}
+        {{> afQuickField name=this template="telescope" input-col-class=inputClass label-class=labelClass}}
+      {{/each}}
     </div>
     
     {{#each afFieldsets}}

client/views/forms/quickFormTelescope.js

@@ -25,10 +25,15 @@ var canEditField = function (field) {
 
 Template[getTemplate('quickForm_telescope')].helpers({
   fieldsWithNoFieldset: function () {
-    // get names of fields who don't have an autoform attribute or don't have a group
+    // get names of fields who don't have an autoform attribute or don't have a group, but are not omitted
     var fields = _.pluck(_.filter(getSchema(), function (field, key) {
-      // filter out fields with "$" in their name
-      return (field.name.indexOf('$') === -1) && (!field.autoform || !field.autoform.group); // TODO: find cleaner solution
+      if (field.name.indexOf('$') !== -1) // filter out fields with "$" in their name
+        return false
+      if (field.autoform && field.autoform.omit) // filter out fields with omit = true
+        return false
+      if (field.autoform && field.autoform.group) // filter out fields with a group
+        return false
+      return true // return remaining fields
     }), 'name');
     return fields;
   },  

packages/telescope-module-embedly/lib/client/autoform-postthumbnail.html

@@ -1,4 +1,7 @@
 <template name="afPostThumbnail">
-  <img src="{{this.value}}" class="post-thumbnail-preview" />
+  <div class="post-thumbnail-container">
+    <img src="{{this.value}}" class="post-thumbnail-preview" style="{{style}}"/>
+    <div class="post-thumbnail-loading">Loading…</div>
+  </div>
   <input type="hidden" value="{{this.value}}" {{this.atts}}/>
 </template>

packages/telescope-module-embedly/lib/client/autoform-postthumbnail.js

@@ -8,6 +8,11 @@ Template.afPostThumbnail.helpers({
     // Add bootstrap class
     atts = AutoForm.Utility.addClass(atts, "form-control");
     return atts;
+  },
+  style: function () {
+    var thumbnailWidth = getSetting('thumbnailWidth', 200);
+    var thumbnailHeight = getSetting('thumbnailHeight', 125);
+    return "width: "+thumbnailWidth+"px; height: "+thumbnailHeight+"px;"
   }
 });
 
@@ -20,16 +25,21 @@ Template.afPostThumbnail.rendered = function () {
   var $urlField = $('[name="url"]');
   var $titleField = $('[name="title"]');
   var $bodyField = $('[name="body"]');
+  var $thumbnailContainer = $('.post-thumbnail-container');
+
 
   $urlField.change(function (e) {
     var url = $urlField.val();
     if (!!url) {
+      $thumbnailContainer.addClass('loading');
+      console.log('getting embedly data for '+url);
       Meteor.call('getEmbedlyData', url, function (error, data) {
         if (data) {
           $img.attr('src', data.thumbnailUrl);
           $thumbnailUrlField.val(data.thumbnailUrl);
           $titleField.val(data.title);
           $bodyField.val(data.description);
+          $thumbnailContainer.removeClass('loading');
         }
       });
     }

packages/telescope-module-embedly/lib/embedly.js

@@ -41,4 +41,28 @@ var embedlyKeyProperty = {
     }
   }
 }
-addToSettingsSchema.push(embedlyKeyProperty);
+addToSettingsSchema.push(embedlyKeyProperty);
+
+var thumbnailWidthProperty = {
+  propertyName: 'thumbnailWidth',
+  propertySchema: {
+    type: Number,
+    optional: true,
+    autoform: {
+      group: 'embedly'
+    }
+  }
+}
+addToSettingsSchema.push(thumbnailWidthProperty);
+
+var thumbnailHeightProperty = {
+  propertyName: 'thumbnailHeight',
+  propertySchema: {
+    type: Number,
+    optional: true,
+    autoform: {
+      group: 'embedly'
+    }
+  }
+}
+addToSettingsSchema.push(thumbnailHeightProperty);

packages/telescope-module-embedly/lib/server/get_embedly_data.js

@@ -2,7 +2,9 @@ getEmbedlyData = function (url) {
   var data = {}
   var extractBase = 'http://api.embed.ly/1/extract';
   var embedlyKey = getSetting('embedlyKey');
-
+  var thumbnailWidth = getSetting('thumbnailWidth', 200);
+  var thumbnailHeight = getSetting('thumbnailHeight', 125);
+  
   try {
     
     if(!embedlyKey)
@@ -12,8 +14,8 @@ getEmbedlyData = function (url) {
       params: {
         key: embedlyKey,
         url: url,
-        image_width: 200,
-        image_height: 150,
+        image_width: thumbnailWidth,
+        image_height: thumbnailHeight,
         image_method: 'crop'
       }
     });