GIPHY app source code

gistfile1.js

 with( ZendeskApps.AppScope.create() ) {

  var source = (function() {
  return {
    defaultState: "loading",
    events: {
      "app.activated": function() {
        this.key = this._parameter("key") || this.resources.KEY;
        this.tag = this._parameter("tag") || this.resources.TAG;
        this.rating = (this._parameter("rating") || this.resources.RATING).toLowerCase();

        if (!_.contains(this.resources.MPAA, this.rating)) {
          this.rating = this.resources.RATING;
        }

        this.store("search", '');
        this.ajax("getAccountSettings");
      },

      "click .giphy:not('.clicked')": function(event) {
        var $this = this.$(event.currentTarget);
        var $image = this.$("img", $this);
        var comment = this.comment();
        var format;

        if (comment.text()) {
          format = "%@\n![%@](%@)";
        }
        else {
          format = "%@![%@](%@)";
        }

        var altText = this.store("search").replace(/\[|\]/g, '');
        var text = helpers.fmt(format, comment.text(), altText, $image.attr("src"));
        var html = this.I18n.t("image.clicked");

        this.comment().text(text);
        this.$("strong", $this).html(html);
        $this.addClass("clicked");
      },

      "submit": function(event) {
        var name;
        var text = this.$("input[type='search']").val();
        var spinner = this.renderTemplate("loading");

        this.$(".error, .giphy").replaceWith(spinner);

        if (text) {
          this.store("search", text);
        }
        else {
          this.store("search", '');
          text = '#' + this.tag;
        }

        if (text.indexOf('#') === 0) {
          name = "getRandomGIF";
          text = text.substring(1);
        }
        else {
          name = "getTranslateGIF";
        }

        this.ajax(name, text);

        return false;
      }
    },
    requests: {
      getAccountSettings: function() {
        return {
          success: function(json) {
            if (json.settings.active_features.markdown) {
              this.ajax("getRandomGIF", this.tag);
            }
            else {
              var admin = (this.currentUser().role() == "admin");

              this.switchTo("403", {
                admin: admin
              });
            }
          },
          url: this.resources.URI_ACCOUNT_SETTINGS
        };
      },

      getGIF: function(id) {
        return {
          data: {
            api_key: this.key
          },
          dataType: "json",
          error: this._error,
          success: function(json) {
            var image = json.data.images.fixed_height;
            var search = this.store("search");

            this.switchTo("image", {
              height: image.height,
              source: image.url,
              width: image.width
            });
            this.$("input[type='search']").val(search);
          },
          url: helpers.fmt(this.resources.URL, id)
        };
      },

      getRandomGIF: function(tag) {
        return {
          data: {
            api_key: this.key,
            rating: this.rating,
            tag: tag
          },
          dataType: "json",
          error: this._error,
          success: function(json) {
            this.ajax("getGIF", json.data.id);
          },
          url: helpers.fmt(this.resources.URL, "random")
        };
      },

      getTranslateGIF: function(term) {
        return {
          data: {
            api_key: this.key,
            rating: this.rating,
            s: term
          },
          dataType: "json",
          error: this._error,
          success: function(json) {
            this.ajax("getGIF", json.data.id);
          },
          url: helpers.fmt(this.resources.URL, "translate")
        };
      }
    },

    resources: {
      KEY: "iEVMAJcGNV81q",
      MPAA: ['g', "pg", "pg-13", 'r'],
      RATING: "pg",
      TAG: "reaction",
      URI_ACCOUNT_SETTINGS: "/api/v2/account/settings.json",
      URL: "http://api.giphy.com/v1/gifs/%@",
    },

    _error: function() {
        var error = this.renderTemplate("404", {
          search: this.store("search")
        });

        this.$(".spinner").replaceWith(error);
    },

    _parameter: function(name) {
      var retVal = this.setting(name);

      if (retVal) {
        retVal = retVal.replace(/\\n/g, '');  // Fix for '\n' being set on blank parameters.
      }

      return retVal;
    }
  };
}());
;

  var app = ZendeskApps.defineApp(source)
    .reopenClass({
      location: "ticket_sidebar",
      noTemplate: false
    })
    .reopen({
      assetUrlPrefix: "/api/v2/apps/36711/assets/",
      appClassName: "app-36711",
      author: {
        name: "Zendesk Labs",
        email: "[email protected]"
      },
      translations: {"app":{"parameters":{"rating":{"label":"Rating","helpText":"The highest MPAA rating level for content that Giphy should show: G, PG, PG-13, or R"}}},"error_403":{"anchor":"Zendesk Markdown Feature","description_admin":"Click here to activate","description_agent":"Contact your Admin to have it activated.","title":"To use Giphy <strong>Agent comments processed by Markdown</strong> should be activated."},"error_404":"No GIFs found for <strong>{{search}}</strong>","footer":{"image":"Powered by Giphy"},"image":{"click":"Click to add","clicked":"Successfully added","example":"Some ideas: thumbs up, omg, #mindblown","preview":"Click Preview to see your GIF live","search":"Search for GIFs","submit":"Submit"}},
      templates: {"layout":"<style>\n.app-36711 header .logo {\n  background-image: url(\"/api/v2/apps/36711/assets/logo-small.png\"); }\n.app-36711 footer {\n  border-left: 0 !important;\n  text-align: center; }\n  .app-36711 footer img {\n    height: 30px; }\n.app-36711 form {\n  margin-bottom: 6px; }\n  .app-36711 form + .spinner {\n    min-height: 232px; }\n  .app-36711 form input[type=\"image\"] {\n    background-color: #EEE;\n    border: 1px solid #DDD;\n    border-radius: 3px;\n    margin-left: 3px;\n    padding: 1px 4px;\n    width: 21px; }\n  .app-36711 form input[type=\"search\"] {\n    width: 269px;\n    height: 13px;\n    border: 1px solid #DDD;\n    border-radius: 2px;\n    box-shadow: inset 0 0 0 0 #DDD;\n    padding: 5px; }\n  .app-36711 form p {\n    color: #666;\n    font-size: 12px;\n    margin-left: 2px; }\n.app-36711 header {\n  border: none; }\n.app-36711 .error {\n  background-color: #EEE;\n  text-align: center; }\n  .app-36711 .error._403 {\n    padding: 50px 0; }\n    .app-36711 .error._403 p + p {\n      margin-top: 12px; }\n  .app-36711 .error._404 {\n    min-height: 211px; }\n    .app-36711 .error._404 p {\n      line-height: 211px; }\n.app-36711 .giphy {\n  display: block;\n  line-height: 0;\n  padding: 12px;\n  position: relative;\n  text-align: center; }\n  .app-36711 .giphy:hover > div, .app-36711 .giphy.clicked > div {\n    cursor: default;\n    opacity: 0.6; }\n  .app-36711 .giphy.clicked > div > p {\n    display: block; }\n  .app-36711 .giphy div {\n    background-color: #000;\n    border-radius: 4px;\n    color: #FFF;\n    display: block;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s;\n    width: 100%; }\n    .app-36711 .giphy div p {\n      display: none;\n      font-size: 12px;\n      font-weight: bold;\n      margin-top: 10px; }\n    .app-36711 .giphy div strong {\n      display: block;\n      font-size: 14px;\n      margin-top: 112px; }\n  .app-36711 .giphy img {\n    background: #EEE;\n    border: 1px solid #DDD;\n    line-height: 0;\n    max-width: 287px;\n    padding: 3px; }\n.app-36711 .spinner {\n  margin: 0;\n  min-height: 287px; }\n</style>\n<header>\n  <span class=\"logo\"/>\n  <h3>{{setting \"name\"}}</h3>\n</header>\n<section data-main/>\n<footer>\n  <a href=\"http://giphy.com/\" rel=\"nofollow\" target=\"_blank\">\n    <img alt=\"{{t \"footer.image\"}}\" src=\"{{assetURL \"powered-by-giphy.gif\"}}\" />\n  </a>\n</footer>","anchor":"<a href=\"{{href}}\">{{text}}</a>","404":"<div class=\"error _404\">\n  <p>{{{t \"error_404\" search=search}}}</p>\n</div>","image":"<form>\n  <input placeholder=\"{{t \"image.search\"}}\" type=\"search\" />\n  <input alt=\"{{t \"image.submit\"}}\" src=\"{{assetURL \"refresh.png\"}}\" type=\"image\" />\n  <p>{{t \"image.example\"}}</p>\n</form>\n<a class=\"giphy\">\n  <div>\n    <strong>{{t \"image.click\"}}</strong>\n    <p>{{t \"image.preview\"}}</p>\n  </div>\n  <img alt=\"{{ticket.type}}\" height=\"{{height}}\" src=\"{{source}}\" width=\"{{width}}\" />\n</a>","loading":"{{spinner \"dotted\"}}","403":"<div class=\"error _403\">\n  <p>{{{t \"error_403.title\"}}}</p>\n  {{#if admin}}\n  <p><a href=\"#/admin/tickets\">{{t \"error_403.description_admin\"}}</a></p>\n  {{else}}\n  {{t \"error_403.description_agent\"}}\n  {{/if}}\n</div>"},
      frameworkVersion: "1.0"
    });

  ZendeskApps["Giphy"] = app;
}