mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#68 split template and css in different files
This commit is contained in:
Eugenio Romano
parent
72c148d3f5
commit
08af799ece
@ -5,8 +5,10 @@
|
|||||||
<title>Angular 2 Viewer - Demo</title>
|
<title>Angular 2 Viewer - Demo</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
<!-- 1. Load libraries -->
|
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||||
<!-- IE required polyfills, in this exact order -->
|
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
|
|
||||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||||
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
|
||||||
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||||
@ -19,7 +21,7 @@
|
|||||||
|
|
||||||
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
|
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
|
||||||
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
|
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
|
PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
|
||||||
</script>
|
</script>
|
||||||
@ -50,8 +52,6 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="the-canvas" style="border:1px solid black;"/>
|
<ng2-alfresco-viewer><div class="mdl-spinner mdl-js-spinner is-active"></div></ng2-alfresco-viewer>
|
||||||
<ng2-alfresco-viewer>Loading...</ng2-alfresco-viewer>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Binary file not shown.
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"viewer",
|
"viewer",
|
||||||
"pdf",
|
"pdf",
|
||||||
"alfresco-component"
|
"alfresco-component"
|
||||||
],
|
],
|
||||||
"name": "ng2-alfresco-viewer",
|
"name": "ng2-alfresco-viewer",
|
||||||
"description": "Alfresco documents viewer",
|
"description": "Alfresco documents viewer",
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
@ -43,8 +43,7 @@
|
|||||||
"reflect-metadata": "0.1.2",
|
"reflect-metadata": "0.1.2",
|
||||||
"rxjs": "5.0.0-beta.2",
|
"rxjs": "5.0.0-beta.2",
|
||||||
"zone.js": "^0.6.12",
|
"zone.js": "^0.6.12",
|
||||||
"ng2-translate": "^1.11.2",
|
"ng2-translate": "^1.11.2"
|
||||||
"alfresco-core-rest-api": "https://github.com/Alfresco/dev-platform-js-api"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"angular2": "2.0.0-beta.15"
|
"angular2": "2.0.0-beta.15"
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
.button-container {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
background: #3E3E3E;
|
||||||
|
}
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<div class="toolbar-container">
|
||||||
|
|
||||||
|
<!-- Start Layout -->
|
||||||
|
<div class="mdl-layout mdl-js-layout">
|
||||||
|
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||||
|
<div class="mdl-layout__header-row">
|
||||||
|
|
||||||
|
<!-- File Title -->
|
||||||
|
<span class="mdl-layout-title">{{nameFile}}</span>
|
||||||
|
<div class="mdl-layout-spacer"></div>
|
||||||
|
|
||||||
|
<!-- Start Navigation -->
|
||||||
|
<nav class="mdl-navigation">
|
||||||
|
<div class="button-container">
|
||||||
|
<button
|
||||||
|
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||||
|
<i id="tt2" class="icon material-icons">print</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-container">
|
||||||
|
<button
|
||||||
|
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||||
|
<i id="tt3" class="icon material-icons">cloud_upload</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-container">
|
||||||
|
<button
|
||||||
|
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||||
|
<i id="tt4" class="icon material-icons">share</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
||||||
|
mdl-textfield--floating-label mdl-textfield--align-right">
|
||||||
|
<label class="mdl-button mdl-js-button mdl-button--icon"
|
||||||
|
for="waterfall-exp">
|
||||||
|
<i class="material-icons">search</i>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="mdl-textfield__expandable-holder">
|
||||||
|
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- End Navigation -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
|
<span class="mdl-layout-title">Thumbnail</span>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
<div class="page-content">
|
||||||
|
|
||||||
|
<div class="mdl-grid">
|
||||||
|
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
|
||||||
|
<div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
|
||||||
|
|
||||||
|
<!-- Start Pdf Canvas -->
|
||||||
|
<div id="canvas-container">
|
||||||
|
<canvas id="the-canvas" style="border:1px solid black;"></canvas>
|
||||||
|
</div>
|
||||||
|
<!-- End Pdf Canvas -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="mdl-mini-footer">
|
||||||
|
<div class="mdl-mini-footer--left-section">
|
||||||
|
<ul class="mdl-mini-footer--link-list">
|
||||||
|
<li><a href="#">Footer link 1</a></li>
|
||||||
|
<li><a href="#">Footer link 2</a></li>
|
||||||
|
<li><a href="#">Footer link 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- End Layout -->
|
||||||
|
|
||||||
|
</div>
|
||||||
@ -15,48 +15,51 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component } from 'angular2/core';
|
import { Component, Input } from 'angular2/core';
|
||||||
|
import { RouteParams } from 'angular2/router';
|
||||||
|
|
||||||
declare let PDFJS: any;
|
declare let PDFJS: any;
|
||||||
|
declare let __moduleName:string;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
moduleId: __moduleName,
|
||||||
selector: 'ng2-alfresco-viewer',
|
selector: 'ng2-alfresco-viewer',
|
||||||
styles: [
|
templateUrl: './ng2-alfresco-viewer.component.html',
|
||||||
`
|
styleUrls: ['./ng2-alfresco-viewer.component.css']
|
||||||
:host h1 {
|
|
||||||
font-size:22px
|
|
||||||
}
|
|
||||||
`
|
|
||||||
],
|
|
||||||
template: `<H1>ng2-alfresco-viewer</H1>`
|
|
||||||
})
|
})
|
||||||
export class Ng2AlfrescoViewerComponent {
|
export class Ng2AlfrescoViewerComponent {
|
||||||
|
|
||||||
|
nameFile:String;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
this.nameFile = 'localTestFile.pdf';
|
||||||
|
|
||||||
PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
|
PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
|
||||||
//
|
//
|
||||||
// Fetch the first page
|
// Fetch the first page
|
||||||
//
|
//
|
||||||
pdf.getPage(1).then(function getPageHelloWorld(page) {
|
pdf.getPage(1).then(function (page) {
|
||||||
let scale = 1.5;
|
let scale = 1.5;
|
||||||
let viewport = page.getViewport(scale);
|
let viewport = page.getViewport(scale);
|
||||||
|
|
||||||
//
|
//
|
||||||
// Prepare canvas using PDF page dimensions
|
// Prepare canvas using PDF page dimensions
|
||||||
//
|
//
|
||||||
let canvas: any = document.getElementById('the-canvas');
|
let canvas:any = document.getElementById('the-canvas');
|
||||||
let context = canvas.getContext('2d');
|
if (canvas) {
|
||||||
canvas.height = viewport.height;
|
let context = canvas.getContext('2d');
|
||||||
canvas.width = viewport.width;
|
canvas.height = viewport.height;
|
||||||
|
canvas.width = viewport.width;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render PDF page into canvas context
|
// Render PDF page into canvas context
|
||||||
//
|
//
|
||||||
let renderContext = {
|
let renderContext = {
|
||||||
canvasContext: context,
|
canvasContext: context,
|
||||||
viewport: viewport
|
viewport: viewport
|
||||||
};
|
};
|
||||||
page.render(renderContext);
|
page.render(renderContext);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
console.log('../contructor');
|
console.log('../contructor');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user