text: define(["exports", "../../../../@polymer/polymer/polymer-element.js", "../../../../@polymer/iron-ajax/iron-ajax.js", "../../../../@polymer/iron-scroll-threshold/iron-scroll-threshold.js", "../../../../@polymer/polymer/lib/elements/dom-repeat.js", "../elmsln-base-deps.js", "../../../elmsln-loading/elmsln-loading.js", "../../../materializecss-styles/materializecss-styles.js"], function (_exports, _polymerElement, _ironAjax, _ironScrollThreshold, _domRepeat, _elmslnBaseDeps, _elmslnLoading, _materializecssStyles) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.LrnappGalleryGrid = void 0;
  
    var _templateObject_bf2fdc20af6311ebbe560fe9c4727db1;
  
    function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
  
    function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  
    var LrnappGalleryGrid = /*#__PURE__*/function (_PolymerElement) {
      babelHelpers.inherits(LrnappGalleryGrid, _PolymerElement);
  
      var _super = _createSuper(LrnappGalleryGrid);
  
      function LrnappGalleryGrid() {
        babelHelpers.classCallCheck(this, LrnappGalleryGrid);
        return _super.apply(this, arguments);
      }
  
      babelHelpers.createClass(LrnappGalleryGrid, [{
        key: "connectedCallback",
        value: function connectedCallback() {
          babelHelpers.get(babelHelpers.getPrototypeOf(LrnappGalleryGrid.prototype), "connectedCallback", this).call(this);
          this.addEventListener("click", this._triggerDialog.bind(this));
        }
      }, {
        key: "disconnectedCallback",
        value: function disconnectedCallback() {
          this.removeEventListener("click", this._triggerDialog.bind(this));
          babelHelpers.get(babelHelpers.getPrototypeOf(LrnappGalleryGrid.prototype), "disconnectedCallback", this).call(this);
        }
      }, {
        key: "_triggerDialog",
        value:
        /**
         * When someone clicks if there is a url, then we need to
         * remote load whatever is in that url.
         */
        function _triggerDialog(e) {
          // make sure we found an image as we're going through here
          if (e.target.nextElementSibling.nodeName == "IMG") {
            this.activeImage = e.target.nextElementSibling.src;
            this.activeTitle = e.target.parentElement.title;
            this.activeAuthor = e.target.parentElement.author;
            this.activeComments = e.target.parentElement.comments;
            this.activeUrl = e.target.parentElement.openUrl;
            this.shadowRoot.querySelector("#dialog").toggle();
          }
        }
      }, {
        key: "_loadMoreData",
        value: function _loadMoreData(e) {
          this.shadowRoot.querySelector("#ajax").generateRequest();
          this.shadowRoot.querySelector("#threshold").clearTriggers();
        }
        /**
         * Simple way to convert from object to array.
         */
  
      }, {
        key: "_toArray",
        value: function _toArray(obj) {
          if (obj == null) {
            return [];
          }
  
          return Object.keys(obj).map(function (key) {
            return obj[key];
          });
        }
      }], [{
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_bf2fdc20af6311ebbe560fe9c4727db1 || (_templateObject_bf2fdc20af6311ebbe560fe9c4727db1 = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"materializecss-styles\">\n        :host {\n          display: block;\n        }\n        button {\n          padding: 0;\n          margin: 0;\n          min-width: 1rem;\n        }\n        #details {\n          opacity: 0.5;\n          position: absolute;\n          bottom: 0;\n          right: 0;\n          margin: 0 1rem 0 0;\n          background-color: white;\n          padding: 0.5em;\n        }\n        #details:hover {\n          opacity: 1;\n        }\n        #details span {\n          font-size: 0.6em;\n          font-weight: normal;\n        }\n        #details .comment-on-work {\n          font-size: 0.8em;\n          background-color: white;\n        }\n      </style>\n      <iron-ajax\n        id=\"ajax\"\n        url=\"[[sourcePath]]\"\n        params=\"\"\n        handle-as=\"json\"\n        last-response=\"{{submissions}}\"\n      ></iron-ajax>\n      <iron-scroll-threshold on-lower-threshold=\"_loadMoreData\" id=\"threshold\">\n        <iron-list grid items=\"[[_toArray(submissions.data)]]\" as=\"item\">\n          <template\n            is=\"dom-repeat\"\n            items=\"[[_toArray(item.images)]]\"\n            as=\"image\"\n          >\n            <button>\n              <img\n                open-url=\"{{item.url}}\"\n                title=\"{{item.title}}\"\n                alt=\"{{item.title}}\"\n                src=\"{{image.src}}\"\n                author=\"{{item.author}}\"\n                comments=\"{{item.comments}}\"\n                height=\"{{image.height}}\"\n                width=\"{{image.width}}\"\n              />\n            </button>\n          </template>\n        </iron-list>\n      </iron-scroll-threshold>\n      <paper-dialog id=\"dialog\">\n        <div\n          style=\"height:50vh;width:100%;overflow:scroll;\"\n          id=\"dialogResponse\"\n        >\n          <img loading=\"lazy\" src$=\"[[activeImage]]\" />\n          <div id=\"details\">\n            <div class=\"title\">\n              <span>Title:</span> <span>{{{activeTitle}}}</span>\n            </div>\n            <div class=\"author\">\n              <span>Author:</span> <span>{{activeAuthor}}</span>\n            </div>\n            <div class=\"comments\">\n              <span>Comments:</span> <span>{{activeComments}}</span>\n            </div>\n            <div class=\"comment-on-work\">\n              <a href$=\"[[activeUrl]]\">\n                <button raised>Comment on this work</button>\n              </a>\n            </div>\n          </div>\n        </div>\n      </paper-dialog>\n    "])));
        }
      }, {
        key: "tag",
        get: function get() {
          return "lrnapp-gallery-grid";
        }
      }, {
        key: "properties",
        get: function get() {
          return {
            elmslnCourse: {
              type: String
            },
            elmslnSection: {
              type: String
            },
            basePath: {
              type: String
            },
            csrfToken: {
              type: String
            },
            endPoint: {
              type: String
            },
            sourcePath: {
              type: String,
              notify: true
            },
            submissions: {
              type: Array,
              notify: true
            },
            activeImage: {
              type: String,
              reflectToAttribute: true,
              notify: true
            },
            activeTitle: {
              type: String,
              reflectToAttribute: true,
              notify: true
            },
            activeAuthor: {
              type: String,
              reflectToAttribute: true,
              notify: true
            },
            activeComments: {
              type: String,
              reflectToAttribute: true,
              notify: true
            },
            activeUrl: {
              type: String,
              reflectToAttribute: true,
              notify: true
            }
          };
        }
      }]);
      return LrnappGalleryGrid;
    }(_polymerElement.PolymerElement);
  
    _exports.LrnappGalleryGrid = LrnappGalleryGrid;
    window.customElements.define(LrnappGalleryGrid.tag, LrnappGalleryGrid);
  });