mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
Demo project cleanup
Removed all obsolete stuff from the ng2 demo project
This commit is contained in:
Denys Vuika
@@ -1,115 +1,46 @@
|
|||||||
<side-menu #elementsMenu title="Elements">
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||||||
<form-design-toolbar></form-design-toolbar>
|
<div class="container-fluid">
|
||||||
</side-menu>
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||||
<side-menu #actionMenu title="Actions">
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<div class="p-10">
|
<span class="icon-bar"></span>
|
||||||
<file-upload accept="{{accept}}" dropaction="inside" droppable="{{droppable}}" target="{{target}}" multi="false" >Choose File</file-upload>
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
<button type="button" class="btn btn-success btn-block">
|
|
||||||
Upload <i class="fa fa-plus"></i>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="btn btn-default btn-block">
|
|
||||||
Folder <i class="fa fa-plus"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</side-menu>
|
|
||||||
|
|
||||||
<side-menu #propertiesMenu title="Properties" direction="right">
|
|
||||||
<a href="#">Property 1</a>
|
|
||||||
<a href="#">Property 2</a>
|
|
||||||
<a href="#">Property 3</a>
|
|
||||||
<a href="#">Property 4</a>
|
|
||||||
<a href="#">Property 5</a>
|
|
||||||
<a href="#">Property 6</a>
|
|
||||||
</side-menu>
|
|
||||||
|
|
||||||
<app-navbar>
|
|
||||||
<div class="navbar-header">
|
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
|
||||||
<span class="sr-only">Toggle navigation</span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
</button>
|
|
||||||
<a class="navbar-brand navbar-alfresco-logo" [routerLink]="['Home']">
|
|
||||||
<img src="app/img/blank.gif">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li [class.active]="actionMenu.isOpen">
|
|
||||||
<a href="#" (click)="toggleMenu(actionMenu, $event)" class="image-button">
|
|
||||||
<i class="fa fa-tasks fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li [class.active]="isActive(['Home'])">
|
|
||||||
<a [routerLink]="['Home']">Home <span class="sr-only">(current)</span></a>
|
|
||||||
</li>
|
|
||||||
<!--
|
|
||||||
<li [class.active]="isActive(['Child1', {id: 1}])">
|
|
||||||
<a [routerLink]="['Child1', {id: 1}]">Child 1</a>
|
|
||||||
</li>
|
|
||||||
<li [class.active]="isActive(['Child2'])">
|
|
||||||
<a [routerLink]="['Child2']">Child 2</a>
|
|
||||||
</li>
|
|
||||||
-->
|
|
||||||
<li [class.active]="isActive(['Page1'])">
|
|
||||||
<a [routerLink]="['Page1']">Native</a>
|
|
||||||
</li>
|
|
||||||
<li [class.active]="isActive(['Page2'])">
|
|
||||||
<a [routerLink]="['Page2']">WebComponents</a>
|
|
||||||
</li>
|
|
||||||
<li [class.active]="isActive(['Forms'])">
|
|
||||||
<a [routerLink]="['Forms']">Forms</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<form class="navbar-form navbar-left" role="search">
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="text" class="form-control" style="width: 600px;" placeholder="Search files and folders">
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-default">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</button>
|
</button>
|
||||||
</form>
|
<a class="navbar-brand navbar-alfresco-logo" [routerLink]="['Home']">
|
||||||
|
<img src="app/img/blank.gif">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li [class.active]="isActive(['Home'])">
|
||||||
|
<a [routerLink]="['Home']">Home <span class="sr-only">(current)</span></a>
|
||||||
|
</li>
|
||||||
|
<li [class.active]="isActive(['Page1'])">
|
||||||
|
<a [routerLink]="['Page1']">Page 1</a>
|
||||||
|
</li>
|
||||||
|
<li [class.active]="isActive(['Page2'])">
|
||||||
|
<a [routerLink]="['Page2']">Page 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<!--<div>
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<img classname="nav-logo" src="https://angular.io/resources/images/logos/standard/logo-nav@2x.png" height="50" style="float: left;">
|
<li class="dropdown">
|
||||||
</div>-->
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="glyphicon glyphicon-menu-hamburger"></span>
|
||||||
<ul class="nav navbar-nav navbar-right">
|
</a>
|
||||||
<li class="dropdown">
|
<ul class="dropdown-menu">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
<li><a href="#">Action</a></li>
|
||||||
<span class="glyphicon glyphicon-menu-hamburger"></span>
|
<li><a href="#">Another action</a></li>
|
||||||
</a>
|
<li><a href="#">Something else here</a></li>
|
||||||
<ul class="dropdown-menu">
|
<li role="separator" class="divider"></li>
|
||||||
<li><a href="#">Action</a></li>
|
<li><a *ngIf="!isLoggedIn()" [routerLink]="['Login']">Login</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a *ngIf="isLoggedIn()" href="#" (click)="onLogout($event)">Logout</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
</ul>
|
||||||
<li role="separator" class="divider"></li>
|
</li>
|
||||||
<li><a *ngIf="!isLoggedIn()" [routerLink]="['Login']">Login</a></li>
|
</ul>
|
||||||
<li><a *ngIf="isLoggedIn()" href="#" (click)="onLogout($event)">Logout</a></li>
|
</div>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul *ngIf="isActive(['Forms'])" class="nav navbar-nav navbar-right">
|
|
||||||
<li [class.active]="elementsMenu.isOpen">
|
|
||||||
<a href="#" (click)="toggleMenu(elementsMenu, $event)" class="image-button">
|
|
||||||
<i class="fa fa-cubes fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li [class.active]="propertiesMenu.isOpen">
|
|
||||||
<a href="#" (click)="toggleMenu(propertiesMenu, $event)" class="image-button">
|
|
||||||
<i class="fa fa-edit fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</app-navbar>
|
</nav>
|
||||||
<!--<router-outlet></router-outlet>-->
|
<!--<router-outlet></router-outlet>-->
|
||||||
<auth-router-outlet></auth-router-outlet>
|
<auth-router-outlet></auth-router-outlet>
|
||||||
|
|
||||||
<!-- Caches -->
|
|
||||||
<div id="drag-images-cache"></div>
|
|
||||||
|
|||||||
@@ -1,52 +1,30 @@
|
|||||||
import {Component} from 'angular2/core';
|
import {Component} from 'angular2/core';
|
||||||
import {FormService} from './services/form-service';
|
|
||||||
import {Router, RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
|
import {Router, RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
|
||||||
import {Login} from "./components/login";
|
import {Login} from "./components/login";
|
||||||
import {Authentication} from "./services/authentication";
|
import {Authentication} from "./services/authentication";
|
||||||
import {AuthRouterOutlet} from "./components/AuthRouterOutlet";
|
import {AuthRouterOutlet} from "./components/AuthRouterOutlet";
|
||||||
import {SideMenu} from "./components/core/SideMenu";
|
|
||||||
import {AppNavBar} from "./components/core/navbar.component";
|
|
||||||
import {FormDesignToolbar} from "./components/form-design-toolbar.component";
|
|
||||||
import {SingleComponent} from "./single.component";
|
|
||||||
import {HomeView} from "./components/home.view";
|
import {HomeView} from "./components/home.view";
|
||||||
import {FormsView} from "./components/forms.view";
|
|
||||||
import {Page1View} from "./components/page1.view";
|
import {Page1View} from "./components/page1.view";
|
||||||
import {Page2View} from "./components/page2.view";
|
import {Page2View} from "./components/page2.view";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
templateUrl: 'app/app.component.html',
|
templateUrl: 'app/app.component.html',
|
||||||
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, SideMenu, AppNavBar, FormDesignToolbar],
|
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet]
|
||||||
providers: [FormService]
|
|
||||||
})
|
})
|
||||||
@RouteConfig([
|
@RouteConfig([
|
||||||
{path: '/', name: 'Home', component: SingleComponent, useAsDefault: true},
|
{path: '/', name: 'Home', component: HomeView, useAsDefault: true},
|
||||||
{path: '/login', name: 'Login', component: Login},
|
{path: '/login', name: 'Login', component: Login},
|
||||||
{path: '/forms', name: 'Forms', component: FormsView},
|
|
||||||
{path: '/page1', name: 'Page1', component: Page1View},
|
{path: '/page1', name: 'Page1', component: Page1View},
|
||||||
{path: '/page2', name: 'Page2', component: Page2View}
|
{path: '/page2', name: 'Page2', component: Page2View}
|
||||||
])
|
])
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
|
|
||||||
target: string = 'http://192.168.99.100:8080/alfresco/service/api/upload';
|
|
||||||
multi: string = 'true';
|
|
||||||
accept: string ='image/*';
|
|
||||||
droppable: boolean = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
public auth: Authentication,
|
public auth: Authentication,
|
||||||
public router: Router
|
public router: Router
|
||||||
){}
|
){}
|
||||||
|
|
||||||
toggleMenu(menu: SideMenu, $event) {
|
|
||||||
if (menu) {
|
|
||||||
menu.toggle();
|
|
||||||
}
|
|
||||||
if ($event) {
|
|
||||||
$event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isActive(instruction: any[]): boolean {
|
isActive(instruction: any[]): boolean {
|
||||||
return this.router.isRouteActive(this.router.generate(instruction));
|
return this.router.isRouteActive(this.router.generate(instruction));
|
||||||
}
|
}
|
||||||
@@ -62,12 +40,4 @@ export class AppComponent {
|
|||||||
() => this.router.navigate(['Login'])
|
() => this.router.navigate(['Login'])
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
hideMenu(menu: SideMenu) {
|
|
||||||
if (menu && menu.isOpen) {
|
|
||||||
menu.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
import {Component, Input, ElementRef} from "angular2/core";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'side-menu',
|
|
||||||
host: {
|
|
||||||
'(click)': 'onClick($event)',
|
|
||||||
//'(document:click)': 'onOutsideClick($event)'
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-{{direction}} inline-menu"
|
|
||||||
[ngClass]="{ 'cbp-spmenu-open': isOpen }">
|
|
||||||
<h3>
|
|
||||||
{{title}}
|
|
||||||
<a href="#" class="menu-close pull-right" (click)="close()">
|
|
||||||
<i class="glyphicon glyphicon-remove"></i>
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<ng-content></ng-content>
|
|
||||||
</nav>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class SideMenu {
|
|
||||||
@Input() title: string = '';
|
|
||||||
@Input() direction: string = 'left';
|
|
||||||
isOpen: boolean = false;
|
|
||||||
|
|
||||||
constructor(private el: ElementRef) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle() {
|
|
||||||
this.isOpen = !this.isOpen;
|
|
||||||
}
|
|
||||||
|
|
||||||
open() {
|
|
||||||
this.isOpen = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.isOpen = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import {Component} from "angular2/core";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-navbar',
|
|
||||||
template: `
|
|
||||||
<nav class="navbar navbar-default navbar-fixed-top">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<ng-content></ng-content>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
`,
|
|
||||||
styles: [
|
|
||||||
`
|
|
||||||
:host .image-button {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
padding-top: 12px;
|
|
||||||
max-height: 50px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class AppNavBar {
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import {Component, Input} from 'angular2/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'tabs',
|
|
||||||
template: `
|
|
||||||
<ul class="nav nav-tabs">
|
|
||||||
<li *ngFor="#tab of tabs" (click)="selectTab(tab, $event)" [class.active]="tab.active">
|
|
||||||
<a href="#">{{tab.title}}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ng-content></ng-content>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class Tabs {
|
|
||||||
tabs: Tab[] = [];
|
|
||||||
|
|
||||||
selectTab(tab:Tab, $event) {
|
|
||||||
this.tabs.forEach(tab => {
|
|
||||||
tab.active = false;
|
|
||||||
});
|
|
||||||
tab.active = true;
|
|
||||||
if ($event) {
|
|
||||||
$event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addTab(tab:Tab) {
|
|
||||||
if (this.tabs.length === 0) {
|
|
||||||
tab.active = true;
|
|
||||||
}
|
|
||||||
this.tabs.push(tab);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'tab',
|
|
||||||
template: `
|
|
||||||
<div [hidden]="!active">
|
|
||||||
<ng-content></ng-content>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class Tab {
|
|
||||||
@Input('tabTitle') title;
|
|
||||||
active: Boolean;
|
|
||||||
|
|
||||||
constructor(tabs: Tabs) {
|
|
||||||
tabs.addTab(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
import {Component, ElementRef, OnInit} from "angular2/core";
|
|
||||||
|
|
||||||
declare var dropZone: any;
|
|
||||||
declare var widgets: any;
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'form-design-surface',
|
|
||||||
template: '<div></div>'
|
|
||||||
})
|
|
||||||
export class FormDesignSurface implements OnInit {
|
|
||||||
|
|
||||||
private _selectedWidget: Element;
|
|
||||||
|
|
||||||
constructor(public elementRef: ElementRef) {
|
|
||||||
//el.nativeElement.style.backgroundColor = 'yellow';
|
|
||||||
}
|
|
||||||
|
|
||||||
get selectedWidget(): Element {
|
|
||||||
return this._selectedWidget;
|
|
||||||
}
|
|
||||||
|
|
||||||
set selectedWidget(val: Element) {
|
|
||||||
if (this.selectedWidget && this.selectedWidget != val) {
|
|
||||||
this._selectedWidget.classList.remove('selected');
|
|
||||||
}
|
|
||||||
this._selectedWidget = val;
|
|
||||||
if (this._selectedWidget) {
|
|
||||||
this._selectedWidget.classList.add('selected');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
// Create root container
|
|
||||||
var container = widgets.container.create();
|
|
||||||
container.dataset.widgetType = 'container';
|
|
||||||
this.setupWidget(container);
|
|
||||||
this.elementRef.nativeElement.appendChild(container);
|
|
||||||
}
|
|
||||||
|
|
||||||
private setupWidget(widget: HTMLElement) {
|
|
||||||
// initialize all drop placeholders
|
|
||||||
var dropPlaceholders = widget.querySelectorAll('.drop-zone');
|
|
||||||
for (var i = 0; i < dropPlaceholders.length; i++) {
|
|
||||||
var placeholder = dropPlaceholders[i];
|
|
||||||
var z = new dropZone({
|
|
||||||
element: placeholder,
|
|
||||||
onDrop: this.onWidgetDrop.bind(this)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// initialize clicks
|
|
||||||
if (widget.dataset['widgetId']) {
|
|
||||||
widget.addEventListener('mouseup', this.onWidgetMouseUp.bind(this), false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// wire child element clicks
|
|
||||||
var nested = widget.querySelectorAll('[data-widget-id]');
|
|
||||||
for (var x = 0; x < nested.length; x++) {
|
|
||||||
nested[x].addEventListener('mouseup', this.onWidgetMouseUp.bind(this), false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private onWidgetMouseUp(e) {
|
|
||||||
var wid = e.currentTarget.dataset.widgetId;
|
|
||||||
if (wid) {
|
|
||||||
console.log('Selected Widget Id: ' + wid);
|
|
||||||
this.selectedWidget = e.currentTarget;
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private onWidgetDrop(dz, opts) {
|
|
||||||
var widgetType = opts.widgetType;
|
|
||||||
if (widgetType) {
|
|
||||||
var component = widgets[widgetType];
|
|
||||||
if (component) {
|
|
||||||
var widget = component.create();
|
|
||||||
if (widget) {
|
|
||||||
widget.dataset.widgetType = widgetType;
|
|
||||||
this.setupWidget(widget);
|
|
||||||
|
|
||||||
// insert widget before drop zone
|
|
||||||
var container = dz.parentElement;
|
|
||||||
container.insertBefore(widget, dz);
|
|
||||||
// create new drop zone
|
|
||||||
var zone = new dropZone({
|
|
||||||
onDrop: this.onWidgetDrop.bind(this),
|
|
||||||
minHeight: '5px'
|
|
||||||
});
|
|
||||||
// insert new drop zone before widget
|
|
||||||
container.insertBefore(zone.element, widget);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import {Component, OnInit} from "angular2/core";
|
|
||||||
import {FormService} from "../services/form-service";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'form-design-toolbar',
|
|
||||||
providers: [FormService],
|
|
||||||
//encapsulation: ViewEncapsulation.Native,
|
|
||||||
styles: [`
|
|
||||||
.category-header {
|
|
||||||
color: #555;
|
|
||||||
padding: 11px;
|
|
||||||
margin: 0;
|
|
||||||
background: #e7e7e7;
|
|
||||||
cursor: default;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.toolbar-item {
|
|
||||||
cursor: move;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
color: #777;
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: 300;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
border-bottom: 1px solid #e7e7e7;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.toolbar-item:hover {
|
|
||||||
color: #555;
|
|
||||||
background: #f8f8f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.toolbar-item:active, a.toolbar-item.active {
|
|
||||||
color: #fff;
|
|
||||||
border-color: #428bca;
|
|
||||||
background-color: #428bca;
|
|
||||||
}
|
|
||||||
`],
|
|
||||||
template: `
|
|
||||||
<template ngFor #category [ngForOf]="categories">
|
|
||||||
<h3 class="category-header">{{category.name}}</h3>
|
|
||||||
<a *ngFor="#widget of category.widgets" class="toolbar-item" attr.data-widget-type="{{widget.type}}" draggable="true"
|
|
||||||
(dragstart)="onElementDragStart($event)" (dragend)="onElementDragEnd($event)">
|
|
||||||
<i class="{{widget.iconClass || 'fa fa-puzzle-piece'}}"></i> {{widget.name}}
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class FormDesignToolbar implements OnInit {
|
|
||||||
|
|
||||||
categories: any[];
|
|
||||||
private dragCache;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private _formService: FormService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.categories = this._formService.getWidgetCategories();
|
|
||||||
// Stores drag ghost elements
|
|
||||||
this.dragCache = document.getElementById('drag-images-cache');
|
|
||||||
}
|
|
||||||
|
|
||||||
onElementDragStart(e) {
|
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
|
||||||
|
|
||||||
var widgetType = e.target.dataset.widgetType;
|
|
||||||
|
|
||||||
var payload = { "widgetType": widgetType };
|
|
||||||
e.dataTransfer.setData('text', JSON.stringify(payload));
|
|
||||||
|
|
||||||
//var dragImage = getDragImage(widgetType);
|
|
||||||
var dragImage = this._formService.getDragImage(widgetType);
|
|
||||||
this.dragCache.appendChild(dragImage);
|
|
||||||
//e.dataTransfer.setDragImage(dragImage, dragImage.offsetWidth / 2, 0);
|
|
||||||
e.dataTransfer.setDragImage(dragImage, 0, 0);
|
|
||||||
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
onElementDragEnd(e) {
|
|
||||||
if (this.dragCache) {
|
|
||||||
this.dragCache.innerHTML = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import {Component} from 'angular2/core';
|
|
||||||
import {FormDesignSurface} from "./form-design-surface.component";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'forms-view',
|
|
||||||
template: `
|
|
||||||
<div class="container" style="width:970px;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<!-- Design surface -->
|
|
||||||
<form-design-surface></form-design-surface>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
directives: [FormDesignSurface]
|
|
||||||
})
|
|
||||||
export class FormsView {
|
|
||||||
/*
|
|
||||||
@ViewChild(FormDesignSurface)
|
|
||||||
private _surface: FormDesignSurface;
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
@@ -1,17 +1,35 @@
|
|||||||
import {Component} from 'angular2/core';
|
import {Component} from 'angular2/core';
|
||||||
|
import {DocumentList} from "./document-list.component";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'home-view',
|
selector: 'home-view',
|
||||||
template: `
|
template: `
|
||||||
<div class="container">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-2">
|
||||||
<h1>Home View</h1>
|
<ul class="list-unstyled">
|
||||||
|
<li><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></li>
|
||||||
|
<li><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></li>
|
||||||
|
<li><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></li>
|
||||||
|
<li><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-10">
|
||||||
|
<alfresco-document-list #list
|
||||||
|
[thumbnails]="thumbnails"
|
||||||
|
[breadcrumb]="breadcrumb"
|
||||||
|
[navigate]="navigation"
|
||||||
|
[downloads]="downloads">
|
||||||
|
</alfresco-document-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
directives: []
|
directives: [DocumentList]
|
||||||
})
|
})
|
||||||
export class HomeView {
|
export class HomeView {
|
||||||
|
thumbnails: boolean = true;
|
||||||
|
breadcrumb: boolean = false;
|
||||||
|
navigation: boolean = true;
|
||||||
|
downloads: boolean = true;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,11 @@ import {Authentication} from "../services/authentication";
|
|||||||
selector: 'login',
|
selector: 'login',
|
||||||
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
|
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
|
||||||
template: `
|
template: `
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4 col-md-offset-4">
|
||||||
|
<small>Use test:test credentials to log in</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4 col-md-offset-4">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
|
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
|
||||||
|
|||||||
@@ -1,30 +1,14 @@
|
|||||||
import {Component} from "angular2/core";
|
import {Component} from "angular2/core";
|
||||||
import {DocumentList} from "./document-list.component";
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'page1-view',
|
selector: 'page1-view',
|
||||||
template: `
|
template: `
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></div>
|
<h2>Page 1</h2>
|
||||||
<div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></div>
|
|
||||||
<div><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></div>
|
|
||||||
<div><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<alfresco-document-list #list
|
|
||||||
[thumbnails]="thumbnails"
|
|
||||||
[breadcrumb]="breadcrumb"
|
|
||||||
[navigate]="navigation"
|
|
||||||
[downloads]="downloads">
|
|
||||||
</alfresco-document-list>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
directives: [DocumentList]
|
directives: []
|
||||||
})
|
})
|
||||||
export class Page1View {
|
export class Page1View {
|
||||||
thumbnails: boolean = true;
|
|
||||||
breadcrumb: boolean = false;
|
|
||||||
navigation: boolean = true;
|
|
||||||
downloads: boolean = true;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,34 +4,11 @@ import {Component} from "angular2/core";
|
|||||||
template: `
|
template: `
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<input [(ngModel)]="username">
|
<h2>Page 2</h2>
|
||||||
<span>Username: {{username}}</span>
|
|
||||||
<hello-world [text]="username">
|
|
||||||
<button>{{'interpolation: ' + username}}</button>
|
|
||||||
</hello-world>
|
|
||||||
<hello-world text="test user"></hello-world>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<p>
|
|
||||||
List below is a web component bound to array of items coming from angular.<br>
|
|
||||||
Add/remove buttons control angular array and web component reacts on changes.
|
|
||||||
</p>
|
|
||||||
<simple-list [items]="items" class="list-unstyled"></simple-list>
|
|
||||||
<button (click)="addItem()">add item</button>
|
|
||||||
<button (click)="removeItem()">remove item</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class Page2View {
|
export class Page2View {
|
||||||
username: string = 'Unicorn';
|
|
||||||
items = ['one', 'two', 'three'];
|
|
||||||
|
|
||||||
addItem() {
|
|
||||||
this.items.push(new Date());
|
|
||||||
}
|
|
||||||
|
|
||||||
removeItem() {
|
|
||||||
this.items.pop();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,116 +0,0 @@
|
|||||||
/* Generated by less 2.2.0 */
|
|
||||||
.drag-image {
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
.drop-zone {
|
|
||||||
border-radius: 4px;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.drop-zone.over {
|
|
||||||
outline: 1px dashed #ddd;
|
|
||||||
}
|
|
||||||
.widget-button {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.widget-button[contenteditable="true"] {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
.widget-input:read-only {
|
|
||||||
background-color: #ffffff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.widget-row {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 5px 0;
|
|
||||||
padding: 25px 14px 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.widget-row:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Row";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
.widget-row.selected {
|
|
||||||
border-color: green;
|
|
||||||
transition: border-color 0.5s;
|
|
||||||
}
|
|
||||||
.widget-row.selected:before {
|
|
||||||
background-color: green;
|
|
||||||
border-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.widget-col {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 15px 0;
|
|
||||||
padding: 39px 19px 24px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.widget-col:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Column";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
.widget-col.selected {
|
|
||||||
border-color: green;
|
|
||||||
transition: border-color 0.5s;
|
|
||||||
}
|
|
||||||
.widget-col.selected:before {
|
|
||||||
background-color: green;
|
|
||||||
border-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.widget-container {
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 30px 15px 15px;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
.widget-container:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Container";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
.widget-container.selected {
|
|
||||||
border-color: green;
|
|
||||||
transition: border-color 0.5s;
|
|
||||||
}
|
|
||||||
.widget-container.selected:before {
|
|
||||||
background-color: green;
|
|
||||||
border-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
/* General styles for all menus */
|
|
||||||
|
|
||||||
.cbp-spmenu {
|
|
||||||
background-color: #fff;
|
|
||||||
position: fixed;
|
|
||||||
border-color: #e7e7e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu > h3 {
|
|
||||||
color: #555;
|
|
||||||
font-size: 1.9em;
|
|
||||||
padding: 11px;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 300;
|
|
||||||
background: #e7e7e7;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu > a {
|
|
||||||
display: block;
|
|
||||||
color: #777;
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: 300;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu > a:hover {
|
|
||||||
color: #555;
|
|
||||||
background: #f8f8f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu > a:active,
|
|
||||||
.cbp-spmenu > a.active {
|
|
||||||
color: #fff;
|
|
||||||
border-color: #428bca;
|
|
||||||
background-color: #428bca;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orientation-dependent styles for the content of the menu */
|
|
||||||
|
|
||||||
.cbp-spmenu-vertical {
|
|
||||||
width: 240px;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
/*z-index: 1000;*/
|
|
||||||
z-index: 1040; /* default TBS navbar index is 1030 */
|
|
||||||
overflow-y: auto; /* vertical scrollbar */
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-vertical > a {
|
|
||||||
border-bottom: 1px solid #e7e7e7;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-horizontal {
|
|
||||||
width: 100%;
|
|
||||||
height: 150px;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-horizontal > h3 {
|
|
||||||
height: 100%;
|
|
||||||
width: 20%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-horizontal > a {
|
|
||||||
float: left;
|
|
||||||
width: 20%;
|
|
||||||
padding: 0.8em;
|
|
||||||
border-left: 1px solid #258ecd;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vertical menu that slides from the left or right */
|
|
||||||
|
|
||||||
.cbp-spmenu-left {
|
|
||||||
left: -240px;
|
|
||||||
border-right: 1px solid #e7e7e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-right {
|
|
||||||
right: -240px;
|
|
||||||
border-left: 1px solid #e7e7e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-left.cbp-spmenu-open {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-right.cbp-spmenu-open {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal menu that slides from the top or bottom */
|
|
||||||
|
|
||||||
.cbp-spmenu-top {
|
|
||||||
top: -150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-bottom {
|
|
||||||
bottom: -150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-top.cbp-spmenu-open {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-bottom.cbp-spmenu-open {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Push classes applied to the body */
|
|
||||||
|
|
||||||
.cbp-spmenu-push {
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: relative;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-push-toright {
|
|
||||||
left: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-push-toleft {
|
|
||||||
left: -240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transitions */
|
|
||||||
|
|
||||||
.cbp-spmenu,
|
|
||||||
.cbp-spmenu-push {
|
|
||||||
-webkit-transition: all 0.3s ease;
|
|
||||||
-moz-transition: all 0.3s ease;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Example media queries */
|
|
||||||
|
|
||||||
@media screen and (max-width: 55.1875em){
|
|
||||||
|
|
||||||
.cbp-spmenu-horizontal {
|
|
||||||
font-size: 75%;
|
|
||||||
height: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-top {
|
|
||||||
top: -110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-bottom {
|
|
||||||
bottom: -110px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 26.375em){
|
|
||||||
|
|
||||||
.cbp-spmenu-vertical {
|
|
||||||
font-size: 90%;
|
|
||||||
width: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-left,
|
|
||||||
.cbp-spmenu-push-toleft {
|
|
||||||
left: -190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-right {
|
|
||||||
right: -190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cbp-spmenu-push-toright {
|
|
||||||
left: 190px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra stuff */
|
|
||||||
|
|
||||||
/* move scrollbar for right menu to the right */
|
|
||||||
|
|
||||||
.cbp-spmenu-right { direction: rtl; }
|
|
||||||
.cbp-spmenu-right > * { direction: ltr; }
|
|
||||||
|
|
||||||
/* misc */
|
|
||||||
|
|
||||||
a.menu-close {
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show menu inside main content rather than page */
|
|
||||||
.inline-menu {
|
|
||||||
padding-bottom: 50px;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-menu > h3 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,148 +0,0 @@
|
|||||||
/* Layout */
|
|
||||||
|
|
||||||
.drag-image {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone {
|
|
||||||
border-radius: 4px;
|
|
||||||
/*height: 20px;*/
|
|
||||||
visibility: visible /*!Important*/;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone.over {
|
|
||||||
/*height: 100px;*/
|
|
||||||
outline: 1px dashed #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.toolbar {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 1em;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.toolbar li {
|
|
||||||
background: #F7F7F7;
|
|
||||||
border: 1px solid #D9D9D9;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 1em 1em 0;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Widgets */
|
|
||||||
|
|
||||||
/*.widget {}*/
|
|
||||||
|
|
||||||
.widget.widget-button {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-button[contentEditable="true"] {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.widget.widget-input {}*/
|
|
||||||
|
|
||||||
.widget.widget-input:read-only {
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.widget.widget-input.drag:before {
|
|
||||||
content: "Input";
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.widget.widget-input:before {
|
|
||||||
content: "Input";
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-row {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 5px 0;
|
|
||||||
padding: 25px 14px 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-row:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Row";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
line-height: 2;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-col {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 15px 0;
|
|
||||||
padding: 39px 19px 24px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-col:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Column";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-container {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 30px 15px 15px;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-container:before {
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: 4px 0 4px 0;
|
|
||||||
color: #9DA0A4;
|
|
||||||
content: "Container";
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
left: -1px;
|
|
||||||
padding: 3px 7px;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-row.selected,
|
|
||||||
.widget.widget-container.selected,
|
|
||||||
.widget.widget-col.selected {
|
|
||||||
border-color: green;
|
|
||||||
transition: border-color .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget.widget-row.selected:before,
|
|
||||||
.widget.widget-container.selected:before,
|
|
||||||
.widget.widget-col.selected:before {
|
|
||||||
border-color: green;
|
|
||||||
background-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
function dropZone(opts) {
|
|
||||||
var options = opts || {},
|
|
||||||
element = opts.element || document.createElement('div'),
|
|
||||||
minHeight = opts.minHeight || '20px',
|
|
||||||
maxHeight = opts.maxHeight || '100px';
|
|
||||||
|
|
||||||
element.className = 'drop-zone';
|
|
||||||
element.style.height = minHeight;
|
|
||||||
element.textAlign = 'center';
|
|
||||||
|
|
||||||
// Event listener for when the dragged element enters the drop zone.
|
|
||||||
element.addEventListener('dragenter', function (e) {
|
|
||||||
this.classList.add('over');
|
|
||||||
this.style.height = maxHeight;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event listener for when the dragged element is over the drop zone.
|
|
||||||
element.addEventListener('dragover', function (e) {
|
|
||||||
if (e.preventDefault) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
e.dataTransfer.dropEffect = 'move';
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event listener for when the dragged element leaves the drop zone.
|
|
||||||
element.addEventListener('dragleave', function (e) {
|
|
||||||
this.classList.remove('over');
|
|
||||||
this.style.height = minHeight;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event listener for when the dragged element dropped in the drop zone.
|
|
||||||
element.addEventListener('drop', function (e) {
|
|
||||||
if (e.preventDefault) e.preventDefault();
|
|
||||||
if (e.stopPropagation) e.stopPropagation();
|
|
||||||
|
|
||||||
this.classList.remove('over');
|
|
||||||
this.style.height = minHeight;
|
|
||||||
|
|
||||||
if (typeof opts.onDrop === 'function') {
|
|
||||||
var dropData = e.dataTransfer.getData('text');
|
|
||||||
var payload = {};
|
|
||||||
if (dropData) {
|
|
||||||
try {
|
|
||||||
payload = JSON.parse(dropData);
|
|
||||||
} catch (err) {
|
|
||||||
payload = {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.onDrop(this, payload);
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
"element": element
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
import {Injectable} from 'angular2/core';
|
|
||||||
|
|
||||||
// TODO: move to some namespace
|
|
||||||
declare var widgets: any;
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class FormService {
|
|
||||||
getWidgetCategories() {
|
|
||||||
var result = [];
|
|
||||||
var categories = {};
|
|
||||||
var keys = Object.keys(widgets);
|
|
||||||
keys.forEach(function (key) {
|
|
||||||
var w = widgets[key];
|
|
||||||
var categoryName = w.category || 'Misc';
|
|
||||||
var category = categories[categoryName];
|
|
||||||
if (!category) {
|
|
||||||
category = {
|
|
||||||
name: categoryName,
|
|
||||||
widgets: []
|
|
||||||
};
|
|
||||||
categories[categoryName] = category;
|
|
||||||
//result.push(category);
|
|
||||||
}
|
|
||||||
category.widgets.push({
|
|
||||||
type: key,
|
|
||||||
name: w.name,
|
|
||||||
iconClass: w.iconClass
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(categories).sort().forEach(function (key) {
|
|
||||||
result.push(categories[key]);
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
getDragImage(widgetType: string): Element {
|
|
||||||
var w = widgets[widgetType];
|
|
||||||
// try getting exported drag image
|
|
||||||
if (w && typeof w.getDragImage === 'function') {
|
|
||||||
var img = w.getDragImage();
|
|
||||||
if (img) {
|
|
||||||
return img;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// create default drag image
|
|
||||||
var dragImage = document.createElement('button');
|
|
||||||
dragImage.className = 'btn btn-default drag-image';
|
|
||||||
dragImage.textContent = w.name;
|
|
||||||
dragImage.style.minWidth = '100px';
|
|
||||||
return dragImage;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import {Component} from 'angular2/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'my-app',
|
|
||||||
templateUrl: 'app/template/single.component.html'
|
|
||||||
})
|
|
||||||
|
|
||||||
export class SingleComponent {
|
|
||||||
target: string = 'http://192.168.99.100:8080/alfresco/service/api/upload';
|
|
||||||
multi: string = 'true';
|
|
||||||
accept: string ='image/*';
|
|
||||||
droppable: boolean = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<div>
|
|
||||||
<div>
|
|
||||||
<file-upload accept="{{accept}}" droppable="{{droppable}}" target="{{target}}" multi="false" ></file-upload>
|
|
||||||
</div>
|
|
||||||
<div >
|
|
||||||
<alfresco-file-list></alfresco-file-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
<!-- Defines element markup -->
|
|
||||||
<template>
|
|
||||||
<p>Hello <strong></strong> :)</p>
|
|
||||||
<content></content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function (window, document, undefined) {
|
|
||||||
// Refers to the "importer", which is index.html
|
|
||||||
var thatDoc = document;
|
|
||||||
|
|
||||||
// Refers to the "importee", which is src/hello-world.html
|
|
||||||
var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
|
|
||||||
|
|
||||||
// Gets content from <template>
|
|
||||||
var template = thisDoc.querySelector('template').content;
|
|
||||||
|
|
||||||
// Creates an object based in the HTML Element prototype
|
|
||||||
var _text = '_text';
|
|
||||||
var MyElementProto = Object.create(HTMLElement.prototype, {
|
|
||||||
text: {
|
|
||||||
get: function() { return _text; },
|
|
||||||
set: function(newValue) {
|
|
||||||
_text = newValue;
|
|
||||||
this.setText(newValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fires when an instance of the element is created
|
|
||||||
MyElementProto.createdCallback = function() {
|
|
||||||
// Creates the shadow root
|
|
||||||
var shadowRoot = this.createShadowRoot();
|
|
||||||
// Adds a template clone into shadow root
|
|
||||||
var clone = thatDoc.importNode(template, true);
|
|
||||||
shadowRoot.appendChild(clone);
|
|
||||||
// Caches <strong> DOM query
|
|
||||||
this.strong = shadowRoot.querySelector('strong');
|
|
||||||
|
|
||||||
// Checks if the "text" attribute has been overwritten
|
|
||||||
/*
|
|
||||||
if (this.hasAttribute('text')) {
|
|
||||||
var text = this.getAttribute('text');
|
|
||||||
this.setText(text);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.setText(this.text);
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
};
|
|
||||||
|
|
||||||
// Fires when an attribute was added, removed, or updated
|
|
||||||
MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
|
|
||||||
if (attr === 'text') {
|
|
||||||
this.setText(newVal);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
MyElementProto.setText = function(val) {
|
|
||||||
_text = val;
|
|
||||||
this.strong.textContent = val;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Registers <hello-world> in the main document
|
|
||||||
window.MyElement = thatDoc.registerElement('hello-world', {
|
|
||||||
prototype: MyElementProto
|
|
||||||
});
|
|
||||||
})(window, document);
|
|
||||||
</script>
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
<script src="/bower_components/underscore/underscore-min.js"></script>
|
|
||||||
<script src="/bower_components/underscore-observable-arrays/underscore-observe.js"></script>
|
|
||||||
|
|
||||||
<!-- Defines element markup -->
|
|
||||||
<template>
|
|
||||||
<ul id="list"></ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function (window, document, undefined) {
|
|
||||||
// Refers to the "importer", which is index.html
|
|
||||||
var thatDoc = document;
|
|
||||||
|
|
||||||
// Refers to the "importee", which is src/hello-world.html
|
|
||||||
var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
|
|
||||||
|
|
||||||
// Gets content from <template>
|
|
||||||
var template = thisDoc.querySelector('template').content;
|
|
||||||
|
|
||||||
var _items;
|
|
||||||
|
|
||||||
// Creates an object based in the HTML Element prototype
|
|
||||||
var element = Object.create(HTMLElement.prototype, {
|
|
||||||
items: {
|
|
||||||
get: function() { return _items; },
|
|
||||||
set: function(newValue) {
|
|
||||||
_items = newValue || [];
|
|
||||||
|
|
||||||
/*
|
|
||||||
var self = this;
|
|
||||||
_items.push = function () {
|
|
||||||
Array.prototype.push.apply(this, arguments);
|
|
||||||
self._render();
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
// TODO: unobserve for old _items value if needed
|
|
||||||
_.observe(_items, function(new_array, old_array) {
|
|
||||||
_items = new_array || [];
|
|
||||||
self._render();
|
|
||||||
});
|
|
||||||
|
|
||||||
this._render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fires when an instance of the element is created
|
|
||||||
element.createdCallback = function() {
|
|
||||||
// Creates the shadow root
|
|
||||||
var shadowRoot = this.createShadowRoot();
|
|
||||||
// Adds a template clone into shadow root
|
|
||||||
var clone = thatDoc.importNode(template, true);
|
|
||||||
shadowRoot.appendChild(clone);
|
|
||||||
|
|
||||||
this.list = shadowRoot.getElementById('list');
|
|
||||||
// Caches <strong> DOM query
|
|
||||||
//this.strong = shadowRoot.querySelector('strong');
|
|
||||||
|
|
||||||
this._render()
|
|
||||||
};
|
|
||||||
|
|
||||||
// Fires when an attribute was added, removed, or updated
|
|
||||||
element.attributeChangedCallback = function(attr, oldVal, newVal) {
|
|
||||||
// if (attr === 'text') {
|
|
||||||
// this.setText(newVal);
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
element._render = function() {
|
|
||||||
this.list.innerHTML = '';
|
|
||||||
if (_items && _items.length > 0) {
|
|
||||||
for (var i = 0; i < _items.length; i++) {
|
|
||||||
var item = document.createElement('li');
|
|
||||||
item.textContent = _items[i];
|
|
||||||
this.list.appendChild(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Registers <hello-world> in the main document
|
|
||||||
window.SimpleList = thatDoc.registerElement('simple-list', {
|
|
||||||
prototype: element
|
|
||||||
});
|
|
||||||
})(window, document);
|
|
||||||
</script>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
var widgets = (function (widgets) {
|
|
||||||
widgets.COMPONENT = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'COMPONENT NAME',
|
|
||||||
iconClass: 'fa fa-puzzle-piece'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('button');
|
|
||||||
widget.textContent = 'Button';
|
|
||||||
widget.classList.add('btn', 'btn-default', 'widget', 'widget-button');
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {});
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
var widgetUtils = (function (utils) {
|
|
||||||
utils.col = function(className) {
|
|
||||||
var col = document.createElement('div');
|
|
||||||
col.dataset.widgetId = utils.uid();
|
|
||||||
col.classList.add(className, 'widget', 'widget-col');
|
|
||||||
|
|
||||||
var dropPlaceholder = document.createElement('div');
|
|
||||||
dropPlaceholder.className = 'drop-zone';
|
|
||||||
col.appendChild(dropPlaceholder);
|
|
||||||
|
|
||||||
return col;
|
|
||||||
};
|
|
||||||
|
|
||||||
utils.getRandomColor = function () {
|
|
||||||
var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
|
|
||||||
return color;
|
|
||||||
};
|
|
||||||
|
|
||||||
utils.uid = (function(){
|
|
||||||
var id = 0;
|
|
||||||
return function(){
|
|
||||||
if (arguments[0] === 0) {
|
|
||||||
id = 0;
|
|
||||||
}
|
|
||||||
return id++;
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
return utils;
|
|
||||||
})(widgetUtils || {});
|
|
||||||
@@ -1,95 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.button = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'Button',
|
|
||||||
iconClass: 'fa fa-square',
|
|
||||||
category: 'Components'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('button');
|
|
||||||
widget.textContent = 'Button';
|
|
||||||
widget.classList.add('btn', 'btn-default', 'widget', 'widget-button');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
|
|
||||||
widget.addEventListener('dblclick', function (e) {
|
|
||||||
if (this.contentEditable !== 'true') {
|
|
||||||
this.dataset.originalValue = this.textContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.contentEditable = true;
|
|
||||||
selectElementContents(this);
|
|
||||||
});
|
|
||||||
|
|
||||||
widget.addEventListener('blur', function (e) {
|
|
||||||
if (!this.textContent) {
|
|
||||||
this.textContent = 'Button';
|
|
||||||
}
|
|
||||||
this.contentEditable = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
widget.addEventListener('input', function (e) {
|
|
||||||
// when button has no text - place the stub and autoselect it
|
|
||||||
if (!this.textContent) {
|
|
||||||
this.textContent = 'Button';
|
|
||||||
selectElementContents(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
widget.addEventListener('keydown', function (e) {
|
|
||||||
// special handling of 'spacebar' key
|
|
||||||
if (e.keyCode == 32) {
|
|
||||||
insertHtmlAtCursor(' ');
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 'Enter' key
|
|
||||||
if (e.keyCode == 13) {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
this.blur();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 'Esc' key
|
|
||||||
if (e.keyCode == 27) {
|
|
||||||
var originalValue = this.dataset.originalValue || 'Button';
|
|
||||||
this.textContent = originalValue;
|
|
||||||
delete this.dataset.originalValue;
|
|
||||||
this.blur();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: move to shared library
|
|
||||||
function selectElementContents(el) {
|
|
||||||
var range = document.createRange();
|
|
||||||
range.selectNodeContents(el);
|
|
||||||
var sel = window.getSelection();
|
|
||||||
sel.removeAllRanges();
|
|
||||||
sel.addRange(range);
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: move to shared library
|
|
||||||
function insertHtmlAtCursor(html) {
|
|
||||||
var range, node;
|
|
||||||
if (window.getSelection && window.getSelection().getRangeAt) {
|
|
||||||
range = window.getSelection().getRangeAt(0);
|
|
||||||
node = range.createContextualFragment(html);
|
|
||||||
range.insertNode(node);
|
|
||||||
window.getSelection().collapseToEnd();
|
|
||||||
window.getSelection().modify('move', 'forward', 'character');
|
|
||||||
} else if (document.selection && document.selection.createRange) {
|
|
||||||
document.selection.createRange().pasteHTML(html);
|
|
||||||
document.selection.collapseToEnd();
|
|
||||||
document.selection.modify('move', 'forward', 'character');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.col12 = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'column 12',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.appendChild(utils.col('col-md-12'));
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.col2x6x4 = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'column 2:6:4',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.appendChild(utils.col('col-md-2'));
|
|
||||||
widget.appendChild(utils.col('col-md-6'));
|
|
||||||
widget.appendChild(utils.col('col-md-4'));
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.col4x4x4 = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'column 4:4:4',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.appendChild(utils.col('col-md-4'));
|
|
||||||
widget.appendChild(utils.col('col-md-4'));
|
|
||||||
widget.appendChild(utils.col('col-md-4'));
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.col6x6 = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'column 6:6',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.appendChild(utils.col('col-md-6'));
|
|
||||||
widget.appendChild(utils.col('col-md-6'));
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.col8x4 = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'column 8:4',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.appendChild(utils.col('col-md-8'));
|
|
||||||
widget.appendChild(utils.col('col-md-4'));
|
|
||||||
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.container = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'container',
|
|
||||||
iconClass: 'fa fa-puzzle-piece'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.className = 'container widget widget-container';
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
//widget.style.borderColor = utils.getRandomColor();
|
|
||||||
|
|
||||||
var dropPlaceholder = document.createElement('div');
|
|
||||||
dropPlaceholder.className = 'drop-zone';
|
|
||||||
widget.appendChild(dropPlaceholder);
|
|
||||||
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.input = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'Input',
|
|
||||||
iconClass: 'fa fa-file-text-o',
|
|
||||||
category: 'Components',
|
|
||||||
getDragImage: getDragImage
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('input');
|
|
||||||
widget.type = 'text';
|
|
||||||
widget.readOnly = true;
|
|
||||||
widget.classList.add('form-control', 'widget', 'widget-input');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*function getDragImage() {
|
|
||||||
var container = document.createElement('div');
|
|
||||||
container.style.width = '200px';
|
|
||||||
|
|
||||||
var label = document.createElement('label');
|
|
||||||
label.textContent = "Input";
|
|
||||||
label.style.display = 'block';
|
|
||||||
label.style.margin = '0';
|
|
||||||
label.style.fontSize = '12px';
|
|
||||||
container.appendChild(label);
|
|
||||||
|
|
||||||
var element = document.createElement('input');
|
|
||||||
element.className = 'form-control';
|
|
||||||
element.style.display = 'block';
|
|
||||||
container.appendChild(element);
|
|
||||||
|
|
||||||
return container;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
function getDragImage() {
|
|
||||||
var element = document.createElement('input');
|
|
||||||
element.style.width = '200px';
|
|
||||||
element.className = 'form-control';
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: move to shared library
|
|
||||||
function moveCaretToEnd(el) {
|
|
||||||
if (typeof el.selectionStart == "number") {
|
|
||||||
el.selectionStart = el.selectionEnd = el.value.length;
|
|
||||||
} else if (typeof el.createTextRange != "undefined") {
|
|
||||||
el.focus();
|
|
||||||
var range = el.createTextRange();
|
|
||||||
range.collapse(false);
|
|
||||||
range.select();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: move to shared library
|
|
||||||
function setCursorPosition (element, pos) {
|
|
||||||
if (element.setSelectionRange) {
|
|
||||||
element.setSelectionRange(pos, pos);
|
|
||||||
} else if (element.createTextRange) {
|
|
||||||
var range = element.createTextRange();
|
|
||||||
range.collapse(true);
|
|
||||||
range.moveEnd('character', pos);
|
|
||||||
range.moveStart('character', pos);
|
|
||||||
range.select();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
var widgets = (function (widgets, utils) {
|
|
||||||
widgets.row = {
|
|
||||||
create: createComponent,
|
|
||||||
name: 'row',
|
|
||||||
iconClass: 'fa fa-puzzle-piece',
|
|
||||||
category: 'Grid system'
|
|
||||||
};
|
|
||||||
|
|
||||||
function createComponent() {
|
|
||||||
var widget = document.createElement('div');
|
|
||||||
widget.classList.add('row', 'widget', 'widget-row');
|
|
||||||
widget.dataset.widgetId = utils.uid();
|
|
||||||
widget.appendChild(utils.col('col-md-12'));
|
|
||||||
return widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
return widgets;
|
|
||||||
})(widgets || {}, widgetUtils);
|
|
||||||
@@ -31,8 +31,6 @@
|
|||||||
"paper-toolbar": "~1.1.4",
|
"paper-toolbar": "~1.1.4",
|
||||||
"iron-signals": "~1.0.3",
|
"iron-signals": "~1.0.3",
|
||||||
"paper-item": "~1.1.4",
|
"paper-item": "~1.1.4",
|
||||||
"paper-dropdown-menu": "~1.1.3",
|
"paper-dropdown-menu": "~1.1.3"
|
||||||
"underscore": "^1.8.3",
|
|
||||||
"underscore-observable-arrays": "*"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,21 +5,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||||
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||||
<link href="app/css/menu.css" rel="stylesheet">
|
|
||||||
<link href="app/css/widgets.css" rel="stylesheet">
|
|
||||||
<link href="app/css/app.css" rel="stylesheet">
|
<link href="app/css/app.css" rel="stylesheet">
|
||||||
<link href="app/css/designer.css" rel="stylesheet">
|
|
||||||
<!-- Custom theme -->
|
<!-- Custom theme -->
|
||||||
<link rel="stylesheet" href="app/css/theme/navbar.css">
|
<link rel="stylesheet" href="app/css/theme/navbar.css">
|
||||||
|
|
||||||
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<!--ALFRESCO CUSTOM WEBCOMPONENTS-->
|
|
||||||
<link rel="import" href="webcomponents/file-upload/file-upload.html">
|
|
||||||
<link rel="import" href="webcomponents/alfresco-file-list/src/alfresco-file-list.html">
|
|
||||||
<link rel="import" href="app/web-components/helloworld/helloworld.html">
|
|
||||||
<link rel="import" href="app/web-components/simple-list/simple-list.html">
|
|
||||||
|
|
||||||
<!-- 1. Load libraries -->
|
<!-- 1. Load libraries -->
|
||||||
<!-- IE required polyfills, in this exact order -->
|
<!-- IE required polyfills, in this exact order -->
|
||||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||||
@@ -34,17 +23,6 @@
|
|||||||
|
|
||||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<script src="app/js/dropZone.js"></script>
|
|
||||||
<script src="app/widgets/widgetUtils.js"></script>
|
|
||||||
<script src="app/widgets/widgets-container.js"></script>
|
|
||||||
<script src="app/widgets/widgets-button.js"></script>
|
|
||||||
<script src="app/widgets/widgets-input.js"></script>
|
|
||||||
<script src="app/widgets/widgets-row.js"></script>
|
|
||||||
<script src="app/widgets/widgets-col-12.js"></script>
|
|
||||||
<script src="app/widgets/widgets-col-6x6.js"></script>
|
|
||||||
<script src="app/widgets/widgets-col-8x4.js"></script>
|
|
||||||
<script src="app/widgets/widgets-col-4x4x4.js"></script>
|
|
||||||
<script src="app/widgets/widgets-col-2x6x4.js"></script>
|
|
||||||
|
|
||||||
<!-- 2. Configure SystemJS -->
|
<!-- 2. Configure SystemJS -->
|
||||||
<script>
|
<script>
|
||||||
@@ -61,10 +39,8 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<!-- 3. Display the application -->
|
<!-- 3. Display the application -->
|
||||||
<body class="cbp-spmenu-push">
|
<body>
|
||||||
<template is="dom-bind" id="alfresco-app">
|
|
||||||
<iron-signals on-iron-signal-uploaded="uploadedSignal"></iron-signals>
|
|
||||||
</template>
|
|
||||||
<my-app>Loading...</my-app>
|
<my-app>Loading...</my-app>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user