Skip to content

Commit

Permalink
Merge pull request #10 from Starcounter/update/polymer1.9
Browse files Browse the repository at this point in the history 
Update to hybrid element
  • Loading branch information
Mihai authored Aug 14, 2017
2 parents 01b87dd + 09b0743 commit 3e810a9
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 105 deletions.
3 changes: 0 additions & 3 deletions .bowerrc
View file

This file was deleted.

2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ Name | Parameters | Description
<input type="hidden" name="CustomerParameter" value="CustomValue" slot="parameters" />
</starcounter-upload>
```
## Notes
- `starcounter-upload` is a [hybrid element](https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements).

## License

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
"tests"
],
"dependencies": {
"polymer": "^1.5.0"
"polymer": "polymer#1.9 - 2"
}
}
177 changes: 97 additions & 80 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,95 +23,112 @@
</style>
</head>
<body>
<template is="dom-bind">
<fieldset>
<legend>Uploaded files</legend>
<template is="dom-if" if="{{model.files.length}}">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{model.files}}">
<tr>
<td>{{item.file.name}}</td>
<td>{{item.file.type}}</td>
<td>{{item.sizeString}}</td>
<td>
<span>{{item.progress}}</span>%
</td>
<td>{{item.error}}</td>
</tr>
</template>
</tbody>
</table>
</template>
<template is="dom-if" if="{{!model.files.length}}">
<p>No files uploaded so far</p>
</template>
</fieldset>
<hr />
<div class="starcounter-upload-tasks">
<h4>The <code>starcounter-upload.tasks</code> collection</h4>
<template is="dom-if" if="{{tasks.length}}">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{tasks}}">
<tr>
<td>{{item.file.name}}</td>
<td>{{item.file.type}}</td>
<td>{{item.sizeString}}</td>
<td>
<span>{{item.progress}}</span>%
</td>
<td>{{item.error}}</td>
</tr>
</template>
</tbody>
</table>
</template>
<template is="dom-if" if="{{!tasks.length}}">
<p>No files in queue</p>
</template>
</div>
<hr />
<p>
<starcounter-upload upload-url="/starcounter-upload" session-id="mock-session" tasks="{{tasks}}" on-statechange="onUploadingStateChange" multiple="true" auto-upload="true">
<button type="button" class="btn btn-sm btn-default" on-click="selectFile">Select files to upload</button>
<span class="btn btn-sm btn-link">Click <code>Ctrl + V</code> to paste image from clipboard</span>
</starcounter-upload>
</p>
<p>
<small>
<b>Note:</b> this example mocks <code>WebSocket</code> connection.
</small>
</p>
</template>
<dom-bind>
<template is="dom-bind">
<fieldset>
<legend>Uploaded files</legend>
<dom-if>
<template is="dom-if" if="{{model.files.length}}">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{model.files}}">
<tr>
<td>{{item.file.name}}</td>
<td>{{item.file.type}}</td>
<td>{{item.sizeString}}</td>
<td>
<span>{{item.progress}}</span>%
</td>
<td>{{item.error}}</td>
</tr>
</template>
</tbody>
</table>
</template>
</dom-if>
<dom-if>
<template is="dom-if" if="{{!model.files.length}}">
<p>No files uploaded so far</p>
</template>
</dom-if>
</fieldset>
<hr />
<div class="starcounter-upload-tasks">
<h4>The <code>starcounter-upload.tasks</code> collection</h4>
<dom-if>
<template is="dom-if" if="{{tasks.length}}">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{tasks}}">
<tr>
<td>{{item.file.name}}</td>
<td>{{item.file.type}}</td>
<td>{{item.sizeString}}</td>
<td>
<span>{{item.progress}}</span>%
</td>
<td>{{item.error}}</td>
</tr>
</template>
</tbody>
</table>
</template>
</dom-if>
<dom-if>
<template is="dom-if" if="{{!tasks.length}}">
<p>No files in queue</p>
</template>
</dom-if>
</div>
<hr />
<p>
<starcounter-upload upload-url="/starcounter-upload" session-id="mock-session" tasks="{{tasks}}" on-statechange="onUploadingStateChange" multiple="true" auto-upload="true">
<button type="button" class="btn btn-sm btn-default" on-click="selectFile">Select files to upload</button>
<span class="btn btn-sm btn-link">Click <code>Ctrl + V</code> to paste image from clipboard</span>
</starcounter-upload>
</p>
<p>
<small>
<b>Note:</b> this example mocks <code>WebSocket</code> connection.
</small>
</p>
</template>
</dom-bind>
<script>
(function () {
var script = document._currentScript || document.currentScript;
var template = script.previousElementSibling;
var parentNode = template.parentNode;
if (!Polymer.Element) {
// Polymer v 1.0
template = template.firstElementChild;
parentNode = parentNode.parentNode;
}

var model = {
files: []
};

template.selectFile = function () {
template.parentNode.querySelector("starcounter-upload").selectFile();
parentNode.querySelector("starcounter-upload").selectFile();
};

template.onUploadingStateChange = function (e) {
Expand Down
48 changes: 27 additions & 21 deletions starcounter-upload.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@
<link rel="import" href="../polymer/polymer.html">

<dom-module id="starcounter-upload">
<style>
:host {
display: inline-block;
}

:host input[type=file] {
display: none;
}
<template>
<style>
:host {
display: inline-block;
}

:host button {
display: block;
margin: 10px 0 10px 0;
}
</style>
:host input[type=file] {
display: none;
}

<template>
<template is="dom-if" if="{{isSubmitVisible(autoUpload, tasks.length)}}">
<button type="button" class="btn btn-sm btn-default" on-click="submitAllFiles">Submit</button>
</template>
<content id="parameters" select="[slot=parameters]"></content>
<content></content>
:host button {
display: block;
margin: 10px 0 10px 0;
}
</style>
<dom-if>
<template is="dom-if" if="{{isSubmitVisible(autoUpload, tasks.length)}}">
<button type="button" class="btn btn-sm btn-default" on-click="submitAllFiles">Submit</button>
</template>
</dom-if>
<slot id="parameters" name="parameters"></slot>
<slot></slot>
<input type="file" accept="{{fileFilter}}" id="fileElement" on-change="filesSelectedChanged" file-select="filesSelectedClick" multiple$="{{multiple}}" />
</template>
<script>
Expand Down Expand Up @@ -244,9 +246,13 @@
if (file.type) {
url += ("&filetype=" + file.type);
}

var nodes = this.$.parameters.getDistributedNodes();

var nodes = null;
if(!Polymer.Element) {
//Polymer version 1
nodes = this.$.parameters.getDistributedNodes();
} else {
nodes = this.$.parameters.assignedNodes({flatten: true})
}
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var p = "&" + node.name + "=" + encodeURIComponent(node.value);
Expand Down

0 comments on commit 3e810a9

Please sign in to comment.