https://www.wilbursmithbooks.com/modules/apostrophe-oembed/js/always.js

1// The browser-side `apos.oembed` singleton. Provides the
2// `apos.oembed.query` and `apos.oembed.queryAndPlay` methods.
3
4apos.define('apostrophe-oembed', {
5  construct: function(self, options) {
6    self.options = options;
7
8    // Populate the specified div with the oembed result for the specified URL.
9    // Adds the apos-oembed-busy class to $el during the interim.
10    //
11    // options.url must be set to the URL for the oembed query.
12    //
13    // If options.type is set, the type property of the oembed response must match,
14    // or it is treated as invalid.
15    //
16    // On success the title and thumbnail URL oembed result properties are made
17    // available as the `title` and `thumbnail` jQuery data properties of
18    // $el.
19    //
20    // The callback is optional and is invoked when the video has been
21    // displayed and sized. It receives (null, $el, result).
22
23    self.queryAndPlay = function($el, options, callback) {
24      $el.removeClass('apos-oembed-invalid');
25      $el.addClass('apos-oembed-busy');
26      if (!options.url) {
27        return fail('undefined');
28      }
29      return self.query(options, function(err, result) {
30        if (err || (options.type && (result.type !== options.type))) {
31          return fail(err || 'inappropriate');
32        }
33        $el.removeClass('apos-oembed-busy');
34        return self.play($el, result, callback);
35      });
36      function fail(err) {
37        $el.removeClass('apos-oembed-busy');
38        $el.addClass('apos-oembed-invalid');
39        $el.data('title', undefined);
40        $el.data('thumbnail', undefined);
41        if (err !== 'undefined') {
42          $el.html('Ⓧ');
43        } else {
44          $el.html('');
45        }
46        return callback && callback(err);
47      }
48    };
49
50    // apos.oembed.query: a convenience wrapper for making oembed requests
51    // through Apostrophe's built-in proxy. options.url must be set to the
52    // URL for the oembed query.
53
54    self.query = function(options, callback) {
55      // A situation where we actually do want a cacheable GET request
56      return $.getJSON(self.options.action + '/query', options, function(html) {
57        return callback(null, html);
58      }).fail(function(jqXHR) {
59        return callback(jqXHR.status || 'error');
60      });
61    };
62
63    // apos.oembed.play accepts a jQuery div and an oembed response
64    // from apos.oembed.query. The div is repopulated with the oembed result.
65    // The callback is optional and is invoked when the video has been
66    // displayed and sized. It receives (null, $el, result).
67    //
68    // On success the title and thumbnail URL oembed result properties are made
69    // available as the `title` and `thumbnail` jQuery data properties of
70    // $el.
71    //
72    // Normally `apos.oembed.queryAndPlay` is the most convenient approach.
73
74    self.play = function($el, result, callback) {
75      var $e = $(result.html);
76      $el.html('');
77      $e.removeAttr('width');
78      $e.removeAttr('height');
79      $el.append($e);
80      $el.data('title', result.title);
81      $el.data('thumbnail', result.thumbnail_url);
82      // wait for CSS width to be known
83      $(function() {
84        // If oembed results include width and height we can get the
85        // video aspect ratio right
86        if (result.width && result.height) {
87          $e.height((result.height / result.width) * $e.width());
88        } else {
89          // No, so assume the oembed HTML code is responsive.
90        }
91        apos.emit('oembedReady', $el);
92        return callback && callback(null, $el, result);
93      });
94
95    };
96
97    apos.oembed = self;
98
99  }
100});