app-draggable-portlets-template/bundles/app-draggable-portlets-template.umd.min.js

An easy implementation of draggable portlets for Angular, where you can load all portlets by a data json file.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("@angular/common/http"),require("rxjs/operators"),require("jquery"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("app-draggable-portlets-template",["exports","@angular/core","rxjs","@angular/common/http","rxjs/operators","jquery","@angular/platform-browser"],t):t((e=e||self)["app-draggable-portlets-template"]={},e.ng.core,e.rxjs,e.ng.common.http,e.rxjs.operators,e.jqueryProxy__default,e.ng.platformBrowser)}(this,(function(e,t,o,r,n,i,a){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function p(e,t,o,r){var n,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var p=e.length-1;p>=0;p--)(n=e[p])&&(a=(i<3?n(a):i>3?n(t,o,a):n(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a}function l(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}var s=function(){function e(){}return e.ɵprov=t["defineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=p([t.Injectable({providedIn:"root"}),l("design:paramtypes",[])],e)}(),c=function(){function e(){this.title="bind-json-array-to-draggable-portlets",this.configFile="/assets/json/data.json"}return e.prototype.ngOnInit=function(){},e=p([t.Component({selector:"app-draggable-portlets-template",template:'\n    <app-load-portlets configFile="/assets/json/data.json"></app-load-portlets>\n  '}),l("design:paramtypes",[])],e)}(),u=function(){function e(){}return p([t.Input(),l("design:type",o.Observable)],e.prototype,"portlet",void 0),e=p([t.Component({selector:"app-portlet",template:' <div *ngIf="portlet" class="portlet">\r\n  <div class="portlet-header">{{ portlet.header }}</div>\r\n  <div class="portlet-content">\r\n    {{ portlet.content }}\r\n    \x3c!--iframe src="https://www.youtube.com/embed/QH2-TGUlwu4?autoplay=1" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>\r\n    --\x3e\r\n  </div>\r\n</div>',encapsulation:t.ViewEncapsulation.None,styles:["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}),l("design:paramtypes",[])],e)}(),d=function(){function e(){}return p([t.Input(),l("design:type",o.Observable)],e.prototype,"data",void 0),e=p([t.Component({selector:"app-portlets-group",template:'<div *ngFor="let column of (data | async)?.columns" class="column">\r\n  <div *ngFor="let portlet of column.portlets">\r\n    <app-portlet [portlet]="portlet"></app-portlet>\r\n  </div>\r\n</div>',encapsulation:t.ViewEncapsulation.None,styles:["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}),l("design:paramtypes",[])],e)}(),m=function(){function e(e){this.http=e}return e.prototype.getScreen=function(e){return this.http.get(e).pipe(n.catchError(this.handleError("getScreen",[])))},e.prototype.handleError=function(e,t){return void 0===e&&(e="operation"),function(e){return console.error(e),o.of(t)}},e.ctorParameters=function(){return[{type:r.HttpClient}]},e.ɵprov=t["defineInjectable"]({factory:function(){return new e(t["inject"](r.HttpClient))},token:e,providedIn:"root"}),e=p([t.Injectable({providedIn:"root"}),l("design:paramtypes",[r.HttpClient])],e)}();require("jquery-ui"),require("jquery-ui/ui/widgets/sortable");var g=i,f=function(){function e(e){this.service=e}return e.prototype.ngOnInit=function(){var e=this;console.log(this.configFile),this.configFile&&(this.loadFile(this.configFile),setTimeout((function(){e.loadJQuery()}),300))},e.prototype.loadJQuery=function(){this.data.subscribe((function(e){var t=e.columnsCount;t<=0&&(t=1);var o=1/t*100;g(".column").width(o+"%")})),g(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"),g(".portlet-toggle").on("click",(function(){var e=g(this);e.toggleClass("ui-icon-minusthick ui-icon-plusthick"),e.closest(".portlet").find(".portlet-content").toggle()})),g(".column").sortable({connectWith:".column",handle:".portlet-header",cancel:".portlet-toggle",placeholder:"portlet-placeholder ui-corner-all"})},e.prototype.loadFile=function(e){this.data=this.service.getScreen(e),this.data.subscribe((function(e){return console.log(e)}))},e.ctorParameters=function(){return[{type:m}]},p([t.Input(),l("design:type",String)],e.prototype,"configFile",void 0),e=p([t.Component({selector:"app-load-portlets",template:'\x3c!--<div>\n  <ul>\n      <li>Load the file for change the portlets options <input type="file" (change)="onChange($event)"/></li>\n      <li>Example json file <a href="./assets/json/data.json" target="_blank">download here</a></li>\n  </ul>\n</div>\n\n<h3>Portlets</h3>--\x3e\n<app-portlets-group [(data)]="data"></app-portlets-group>',providers:[m],encapsulation:t.ViewEncapsulation.None,styles:["@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);body{font-family:Arial,Helvetica,sans-serif;min-width:320px}table{font-size:1em}.ui-draggable,.ui-droppable{background-position:top}.column{width:33%;float:left;padding-bottom:100px}.portlet{margin:0 1em 1em 0;padding:.3em}.portlet-header{padding:.2em .3em;margin-bottom:.5em;position:relative}.portlet-toggle{position:absolute;top:50%;right:0;margin-top:-8px}.portlet-content{padding:.4em}.portlet-placeholder{border:1px dotted #000;margin:0 1em 1em 0;height:50px}"]}),l("design:paramtypes",[m])],e)}(),h=function(){function e(){}return e=p([t.NgModule({declarations:[c,u,d,f],imports:[a.BrowserModule,r.HttpClientModule],providers:[m],exports:[c,u,d,f]})],e)}(),b=function(){},y=function(){},v=function(){};e.AppDraggablePortletsTemplateComponent=c,e.AppDraggablePortletsTemplateModule=h,e.AppDraggablePortletsTemplateService=s,e.Column=b,e.Data=y,e.LoadPortletsComponent=f,e.Portlet=v,e.PortletComponent=u,e.PortletsGroupComponent=d,e.ReturnJsonArrayService=m,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=app-draggable-portlets-template.umd.min.js.map