template, prompt working (needs fixes)
Esse commit está contido em:
David Ascher
@@ -0,0 +1,59 @@
|
||||
# Compiled source #
|
||||
###################
|
||||
*.com
|
||||
*.class
|
||||
*.dll
|
||||
*.exe
|
||||
*.o
|
||||
*.so
|
||||
|
||||
# Packages #
|
||||
############
|
||||
# it's better to unpack these files and commit the raw source
|
||||
# git has its own built in compression methods
|
||||
*.7z
|
||||
*.dmg
|
||||
*.gz
|
||||
*.iso
|
||||
*.jar
|
||||
*.rar
|
||||
*.tar
|
||||
*.zip
|
||||
|
||||
# Logs and databases #
|
||||
######################
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
|
||||
# OS generated files #
|
||||
######################
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Node-specific stuff #
|
||||
#######################
|
||||
|
||||
lib-cov
|
||||
lcov.info
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
build
|
||||
.grunt
|
||||
|
||||
node_modules
|
||||
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
// use as: grunt serve to serve the component for the designer
|
||||
// TBD: bring back linting, jshint, etc.
|
||||
|
||||
module.exports = function(grunt) {
|
||||
var path = require('path');
|
||||
// Project configuration.
|
||||
var defaultName = path.basename(process.cwd());
|
||||
if (defaultName.indexOf('component-') == 0) {
|
||||
defaultName = defaultName.slice('component-'.length, defaultName.length);
|
||||
}
|
||||
grunt.initConfig({
|
||||
prompt: {
|
||||
target: {
|
||||
options: {
|
||||
questions: [
|
||||
{
|
||||
config: 'template.component.options.data.name', // arbitray name or config for any other grunt task
|
||||
type: 'input', // list, checkbox, confirm, input, password
|
||||
message: 'Component name',
|
||||
default: defaultName, // default value if nothing is entered
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
template: {
|
||||
'component': {
|
||||
'files': {
|
||||
'component.html': ['template/component.html'],
|
||||
'component.css': ['template/component.css'],
|
||||
'locale/en-US.json': ['template/locale/en-US.json'],
|
||||
}
|
||||
}
|
||||
},
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
csslint: {
|
||||
lax: {
|
||||
options: {
|
||||
"adjoining-classes": false,
|
||||
"box-model": false,
|
||||
"box-sizing": false,
|
||||
"bulletproof-font-face": false,
|
||||
"compatible-vendor-prefixes": false,
|
||||
"ids": false,
|
||||
"important": false,
|
||||
"outline-none": false,
|
||||
"overqualified-elements": false,
|
||||
"qualified-headings": false,
|
||||
"regex-selectors": false,
|
||||
"star-property-hack": false,
|
||||
"underscore-property-hack": false,
|
||||
"universal-selector": false,
|
||||
"unique-headings": false,
|
||||
"unqualified-attributes": false,
|
||||
"vendor-prefix": false,
|
||||
"zero-units": false,
|
||||
"fallback-colors": false
|
||||
},
|
||||
src: [
|
||||
"**/*.css",
|
||||
'!node_modules/**'
|
||||
]
|
||||
},
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
"-W054": true, // The Function constructor is a form of eval
|
||||
"-W069": true // thing["property"] is better written in dot notation
|
||||
},
|
||||
files: [
|
||||
"Gruntfile.js",
|
||||
"**/*.js",
|
||||
'!node_modules/**'
|
||||
]
|
||||
},
|
||||
inlinelint: {
|
||||
html: ['**/*.html',
|
||||
'!node_modules/**'
|
||||
]
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: 9001,
|
||||
base: __dirname,
|
||||
keepalive: true,
|
||||
open: 9001,
|
||||
middleware: function(connect, options) {
|
||||
var middlewares = [];
|
||||
if (!Array.isArray(options.base)) {
|
||||
options.base = [options.base];
|
||||
}
|
||||
var directory = options.directory || options.base[options.base.length - 1];
|
||||
middlewares.push(function(req, res, next) {
|
||||
// we need to setup CORS headers so that the designer can load the component
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
|
||||
next();
|
||||
});
|
||||
options.base.forEach(function(base) {
|
||||
// Serve static files.
|
||||
middlewares.push(connect.static(base));
|
||||
});
|
||||
return middlewares;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks( "grunt-contrib-csslint" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-jshint" );
|
||||
grunt.loadNpmTasks('grunt-lint-inline');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-prompt');
|
||||
grunt.loadNpmTasks('grunt-template');
|
||||
|
||||
grunt.registerTask('customize', ['prompt','template']);
|
||||
grunt.registerTask('serve', 'start web server to use in designer', function() {
|
||||
grunt.event.once('connect.server.listening', function(host, port) {
|
||||
var specRunnerUrl = 'http://' + host + ':' + 9001;
|
||||
grunt.log.writeln('Tell the designer to load: ' + specRunnerUrl + "/component.html");
|
||||
});
|
||||
|
||||
grunt.task.run('connect:server');
|
||||
});
|
||||
grunt.registerTask('default', 'help message', function() {
|
||||
grunt.log.writeln('\'grunt serve\' to display the test runner page');
|
||||
});
|
||||
grunt.registerTask('default', ['customize']);
|
||||
// grunt.registerTask( "default", [ "csslint", "jshint", "inlinelint"]);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "start-here",
|
||||
"version": "0.1.0",
|
||||
"description": "Forkable component for Mozilla Appmaker",
|
||||
"main": "none",
|
||||
"scripts": {
|
||||
"test": "grunt"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:mozilla-appmaker/start-here"
|
||||
},
|
||||
"keywords": [
|
||||
"appmaker",
|
||||
"webcomponents",
|
||||
"ceci"
|
||||
],
|
||||
"author": "David Ascher",
|
||||
"license": "MPL-v2",
|
||||
"bugs": {
|
||||
"url": "https://github.com/mozilla-appmaker/start-here/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-contrib-jshint": "~0.8.0",
|
||||
"grunt": "~0.4.2",
|
||||
"grunt-contrib-csslint": "~0.2.0",
|
||||
"grunt-lint-inline": "~0.4.0",
|
||||
"grunt-contrib-connect": "~0.6.0",
|
||||
"grunt-prompt": "~0.1.2",
|
||||
"grunt-template": "~0.2.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
# Compiled source #
|
||||
###################
|
||||
*.com
|
||||
*.class
|
||||
*.dll
|
||||
*.exe
|
||||
*.o
|
||||
*.so
|
||||
|
||||
# Packages #
|
||||
############
|
||||
# it's better to unpack these files and commit the raw source
|
||||
# git has its own built in compression methods
|
||||
*.7z
|
||||
*.dmg
|
||||
*.gz
|
||||
*.iso
|
||||
*.jar
|
||||
*.rar
|
||||
*.tar
|
||||
*.zip
|
||||
|
||||
# Logs and databases #
|
||||
######################
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
|
||||
# OS generated files #
|
||||
######################
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Node-specific stuff #
|
||||
#######################
|
||||
|
||||
lib-cov
|
||||
lcov.info
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
build
|
||||
.grunt
|
||||
|
||||
node_modules
|
||||
|
||||
Arquivo executável
+6
@@ -0,0 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.10"
|
||||
before_script:
|
||||
- export DISPLAY=:99.0
|
||||
- sh -e /etc/init.d/xvfb start
|
||||
@@ -0,0 +1,34 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
:host button {
|
||||
font-family: "FiraSans", sans-serif;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border-top: 1px solid rgba(255,255,255,.3);
|
||||
border-bottom: 2px solid rgba(0,0,0,.2);
|
||||
background-color: #4DB227;
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-radius: 0.2rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
line-height: 3.8rem;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
<polymer-element name="ceci-<%= name %>" attributes="textcolor buttoncolor buttonactivecolor label value" extends="ceci-element"
|
||||
label="Click Me" textcolor="#ffffff" buttoncolor="#4DB227" buttonactivecolor="#358915">
|
||||
<template>
|
||||
<link rel="stylesheet" href="component.css"></link>
|
||||
<button id="<%= name %>" on-click="{{click}}"></button>
|
||||
<shadow></shadow>
|
||||
<script type="text/json" id="ceci-definition">
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"tags": ["<%= name %>", "click", "tap"],
|
||||
"thumbnail": "./thumbnail.png",
|
||||
"broadcasts": {
|
||||
"click": {
|
||||
"label": "Click",
|
||||
"description": "Occurs when <%= name %> is clicked.",
|
||||
"default": true
|
||||
}
|
||||
},
|
||||
"listeners": {
|
||||
"click": {
|
||||
"description": "Causes a fake click event to occur.",
|
||||
"label": "Click"
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"label": {
|
||||
"label": "Label",
|
||||
"description": "Text shown on the button.",
|
||||
"editable": "text",
|
||||
"listener": true
|
||||
},
|
||||
"value": {
|
||||
"label": "Value",
|
||||
"description": "Value sent by the button.",
|
||||
"editable": "text",
|
||||
"listener": true,
|
||||
"defaultListener": true
|
||||
},
|
||||
"textcolor": {
|
||||
"label": "Text Color",
|
||||
"description": "Color of the text on the button's label.",
|
||||
"editable": "color",
|
||||
"listener": true
|
||||
},
|
||||
"buttoncolor": {
|
||||
"label": "Button Color",
|
||||
"description": "Background color of the button.",
|
||||
"editable": "color",
|
||||
"listener": true
|
||||
},
|
||||
"buttonactivecolor": {
|
||||
"label": "Button Active Color",
|
||||
"description": "Background color of the button while it is being clicked or tapped.",
|
||||
"editable": "color",
|
||||
"listener": true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
<script>
|
||||
Polymer('ceci-<%= name %>', {
|
||||
ready: function () {
|
||||
this.super();
|
||||
|
||||
var that = this;
|
||||
this.$.<%= js_safe_name %>.addEventListener('mousedown', function (e) {
|
||||
var valueBefore = that.buttoncolor;
|
||||
if (that.buttonactivecolor) {
|
||||
that.$.<%= js_safe_name %>.style.backgroundColor = that.buttonactivecolor;
|
||||
window.addEventListener('mouseup', function (e) {
|
||||
that.$.<%= js_safe_name %>.style.backgroundColor = valueBefore;
|
||||
}, false);
|
||||
}
|
||||
}, false);
|
||||
},
|
||||
click: function () {
|
||||
this.broadcast('click', this.getAttribute('value'));
|
||||
},
|
||||
labelChanged: function (oldValue, newValue) {
|
||||
this.$.<%= js_safe_name %>.innerHTML = newValue;
|
||||
},
|
||||
textcolorChanged: function (oldValue, newValue) {
|
||||
this.$.<%= js_safe_name %>.style.color = newValue;
|
||||
},
|
||||
buttoncolorChanged: function (oldValue, newValue) {
|
||||
this.$.<%= js_safe_name %>.style.backgroundColor = newValue;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"ceci-<%= name %>": "<%= name %>",
|
||||
"ceci-<%= name %>/attributes/label": "Click Me",
|
||||
"ceci-<%= name %>/attributes/label/label": "Label",
|
||||
"ceci-<%= name %>/attributes/label/description": "Text shown on the button.",
|
||||
"ceci-<%= name %>/attributes/value/label": "Value",
|
||||
"ceci-<%= name %>/attributes/value/description": "Value sent by the button.",
|
||||
"ceci-<%= name %>/attributes/textcolor/label": "Text Color",
|
||||
"ceci-<%= name %>/attributes/textcolor/description": "Color of the text on the button's label.",
|
||||
"ceci-<%= name %>/attributes/buttoncolor/label": "<%= name %> Color",
|
||||
"ceci-<%= name %>/attributes/buttoncolor/description": "Background color of the button.",
|
||||
"ceci-<%= name %>/attributes/buttonactivecolor/label": "Button Active Color",
|
||||
"ceci-<%= name %>/attributes/buttonactivecolor/description": "Background color of the button while it is being clicked or tapped."
|
||||
}
|
||||
Arquivo binário não exibido.
|
Depois Largura: | Altura: | Tamanho: 13 KiB |
Referência em uma Nova Issue
Bloquear um usuário