Skip to content

Commit 59c6929

Browse files
author
paced
committed
Finished both functions.
0 parents  commit 59c6929

9 files changed

+396
-0
lines changed

LICENSE

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
The MIT License (MIT)
2+
Copyright (c) 2016 Thomas Wang
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5+
6+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7+
8+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
imageview
2+
---------------------------
3+
4+
Welcome to your new Widget.
5+
6+
Running `npm publish` will get you onto the NPM repository. It will also automatically compile your code
7+
8+
Have fun writing ES6 modules!
9+
10+
License
11+
-------
12+
13+
The MIT License (MIT)
14+
15+
Copyright (c) 2016 Thomas Wang
16+
17+
Permission is hereby granted, free of charge, to any person obtaining a copy of
18+
this software and associated documentation files (the "Software"), to deal in
19+
the Software without restriction, including without limitation the rights to
20+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
21+
the Software, and to permit persons to whom the Software is furnished to do so,
22+
subject to the following conditions:
23+
24+
The above copyright notice and this permission notice shall be included in all
25+
copies or substantial portions of the Software.
26+
27+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
28+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
29+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
30+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
31+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
32+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

gulpfile.babel.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import gulp from 'gulp';
2+
3+
import babel from 'gulp-babel';
4+
import browserify from 'gulp-browserify';
5+
import browserSyncController from 'browser-sync';
6+
import concat from 'gulp-concat';
7+
import less from 'gulp-less';
8+
9+
const browserSync = browserSyncController.create();
10+
11+
const files = {
12+
html: './src/**/*.html',
13+
less: './src/less/**/*.less',
14+
rawJS: './src/**/*.js',
15+
};
16+
17+
gulp.task('transpile', () =>
18+
gulp.src(files.rawJS)
19+
.pipe(babel())
20+
.pipe(gulp.dest('./build'))
21+
);
22+
23+
gulp.task('browserify', ['transpile'], () =>
24+
gulp.src('./build/index.js')
25+
.pipe(browserify())
26+
.pipe(gulp.dest('./dist'))
27+
.pipe(browserSync.stream())
28+
);
29+
30+
gulp.task('html', () =>
31+
gulp.src(files.html)
32+
.pipe(gulp.dest('./dist'))
33+
.pipe(browserSync.stream())
34+
);
35+
36+
gulp.task('less', () =>
37+
gulp.src(files.less)
38+
.pipe(less())
39+
.pipe(concat('widget.css'))
40+
.pipe(gulp.dest('./dist'))
41+
.pipe(browserSync.stream())
42+
);
43+
44+
gulp.task('uikit-css', () =>
45+
gulp.src('./node_modules/uikit/dist/css/*.css')
46+
.pipe(gulp.dest('./dist'))
47+
);
48+
49+
gulp.task('uikit-css-advanced', () =>
50+
gulp.src('./node_modules/uikit/dist/css/components/*.almost-flat.min.css')
51+
.pipe(concat('advanced.css'))
52+
.pipe(gulp.dest('./dist'))
53+
);
54+
55+
gulp.task('uikit-fonts', () =>
56+
gulp.src('./node_modules/uikit/dist/fonts/**/*')
57+
.pipe(gulp.dest('./dist/fonts'))
58+
);
59+
60+
gulp.task('uikit-jquery', () =>
61+
gulp.src('./node_modules/jquery/dist/jquery.js')
62+
.pipe(gulp.dest('./dist'))
63+
);
64+
65+
gulp.task('uikit-js', () =>
66+
gulp.src('./node_modules/uikit/dist/js/uikit.js')
67+
.pipe(gulp.dest('./dist'))
68+
);
69+
70+
gulp.task('uikit', ['uikit-css', 'uikit-css-advanced', 'uikit-fonts', 'uikit-jquery', 'uikit-js']);
71+
72+
gulp.task('build', ['uikit', 'html', 'browserify', 'less']);
73+
74+
gulp.task('watch', ['build'], () => {
75+
gulp.watch(files.rawJS, ['browserify']);
76+
gulp.watch(files.html, ['html']);
77+
gulp.watch(files.less, ['less']);
78+
});
79+
80+
// Browser Sync
81+
gulp.task('browser-sync', ['watch'], () => {
82+
browserSync.init({
83+
server: {
84+
baseDir: './dist',
85+
},
86+
});
87+
});
88+
89+
gulp.task('start', ['browser-sync']);

npm-debug.log

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ '/home/paced/.nvm/versions/node/v6.3.1/bin/node',
3+
1 verbose cli '/home/paced/.nvm/versions/node/v6.3.1/bin/npm',
4+
1 verbose cli 'start' ]
5+
2 info using [email protected]
6+
3 info using [email protected]
7+
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
8+
5 info lifecycle [email protected]~prestart: [email protected]
9+
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
10+
7 info lifecycle [email protected]~start: [email protected]
11+
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
12+
9 verbose lifecycle [email protected]~start: PATH: /home/paced/.nvm/versions/node/v6.3.1/lib/node_modules/npm/bin/node-gyp-bin:/data/Documents/Unihack2016/imageview/node_modules/.bin:/home/paced/.nvm/versions/node/v6.3.1/bin:/home/paced/.nvm/versions/node/v6.3.1/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl
13+
10 verbose lifecycle [email protected]~start: CWD: /data/Documents/Unihack2016/imageview
14+
11 silly lifecycle [email protected]~start: Args: [ '-c', 'gulp start' ]
15+
12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null
16+
13 info lifecycle [email protected]~start: Failed to exec start script
17+
14 verbose stack Error: [email protected] start: `gulp start`
18+
14 verbose stack Exit status 1
19+
14 verbose stack at EventEmitter.<anonymous> (/home/paced/.nvm/versions/node/v6.3.1/lib/node_modules/npm/lib/utils/lifecycle.js:242:16)
20+
14 verbose stack at emitTwo (events.js:106:13)
21+
14 verbose stack at EventEmitter.emit (events.js:191:7)
22+
14 verbose stack at ChildProcess.<anonymous> (/home/paced/.nvm/versions/node/v6.3.1/lib/node_modules/npm/lib/utils/spawn.js:40:14)
23+
14 verbose stack at emitTwo (events.js:106:13)
24+
14 verbose stack at ChildProcess.emit (events.js:191:7)
25+
14 verbose stack at maybeClose (internal/child_process.js:852:16)
26+
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
27+
15 verbose pkgid [email protected]
28+
16 verbose cwd /data/Documents/Unihack2016/imageview
29+
17 error Linux 4.6.4-1-ARCH
30+
18 error argv "/home/paced/.nvm/versions/node/v6.3.1/bin/node" "/home/paced/.nvm/versions/node/v6.3.1/bin/npm" "start"
31+
19 error node v6.3.1
32+
20 error npm v3.10.3
33+
21 error code ELIFECYCLE
34+
22 error [email protected] start: `gulp start`
35+
22 error Exit status 1
36+
23 error Failed at the [email protected] start script 'gulp start'.
37+
23 error Make sure you have the latest version of node.js and npm installed.
38+
23 error If you do, this is most likely a problem with the dashr-widget-imageview package,
39+
23 error not with npm itself.
40+
23 error Tell the author that this fails on your system:
41+
23 error gulp start
42+
23 error You can get information on how to open an issue for this project with:
43+
23 error npm bugs dashr-widget-imageview
44+
23 error Or if that isn't available, you can get their info via:
45+
23 error npm owner ls dashr-widget-imageview
46+
23 error There is likely additional logging output above.
47+
24 verbose exit [ 1, true ]

package.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "dashr-widget-imageview",
3+
"productName": "imageview",
4+
"version": "0.0.1",
5+
"description": "View images uploaded or sourced from the internet.",
6+
"main": "build/components/CoreWidget.js",
7+
"scripts": {
8+
"build": "gulp build",
9+
"lint": "eslint src",
10+
"prepublish": "npm run build",
11+
"start": "gulp start",
12+
"test": "npm run lint",
13+
"watch": "gulp watch"
14+
},
15+
"keywords": [],
16+
"author": "Thomas Wang",
17+
"license": "MIT",
18+
"devDependencies": {
19+
"babel-eslint": "^6.1.2",
20+
"babel-plugin-transform-class-properties": "^6.11.5",
21+
"babel-preset-es2015": "^6.9.0",
22+
"babel-preset-react": "^6.11.1",
23+
"browser-sync": "^2.13.0",
24+
"eslint": "^2.11.1",
25+
"eslint-config-airbnb": "^9.0.1",
26+
"eslint-plugin-import": "^1.8.1",
27+
"eslint-plugin-jsx-a11y": "^1.2.0",
28+
"eslint-plugin-react": "^5.0.1",
29+
"gulp": "^3.9.1",
30+
"gulp-babel": "^6.1.2",
31+
"gulp-browserify": "^0.5.1",
32+
"gulp-concat": "^2.6.0",
33+
"gulp-less": "^3.1.0"
34+
},
35+
"dependencies": {
36+
"jquery": "^2.1.4",
37+
"react": "^15.2.1",
38+
"react-dom": "^15.2.1",
39+
"uikit": "^2.26.4"
40+
},
41+
"babel": {
42+
"presets": [
43+
"es2015",
44+
"react"
45+
],
46+
"plugins": [
47+
"transform-class-properties"
48+
]
49+
}
50+
}

src/components/CoreWidget.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/** Do not rename this file **/
2+
import React from 'react';
3+
4+
const defaultImage = false; // hacky, remove instantly fucker
5+
6+
export default class weatherWidget extends React.Component {
7+
static propTypes = {
8+
width: React.PropTypes.number,
9+
height: React.PropTypes.number,
10+
settings: React.PropTypes.object.isRequired,
11+
};
12+
13+
static id = "imageshow";
14+
static widgetName = "Image Show";
15+
static sizes = [
16+
[2, 2],
17+
]
18+
19+
imgError() {
20+
/* Super ghetto dank janky dirty grimy disgusting hacky code. */
21+
this.props.settings.set("image", "https://api.icons8.com/download/7360cb827f64f1c4795b9e1f61d87ec9a4810f15/Color/PNG/256/Very_Basic/cancel-256.png");
22+
return true;
23+
}
24+
25+
editImage() {
26+
this.props.settings.set("image", "");
27+
}
28+
29+
handleClick() {
30+
/* File is a binary. */
31+
// this.props.settings.set("image", "test"); // will fail, replace soon
32+
33+
/* URL overrides file upload, do that first if it's possible. */
34+
const urlField = document.getElementById("urlField").value;
35+
36+
if (urlField != "") {
37+
this.props.settings.set("image", urlField);
38+
} else {
39+
var fileField = document.querySelector('input[type=file]').files[0];
40+
41+
if (fileField != "") {
42+
var reader = new FileReader();
43+
var fileName = reader.readAsDataURL(fileField);
44+
45+
reader.addEventListener("load", () => {
46+
var file64 = reader.result;
47+
this.props.settings.set("image", file64);
48+
}, false);
49+
}
50+
51+
}
52+
}
53+
54+
render() {
55+
/* The image we need to show depending on file. */
56+
const imageShow = this.props.settings.get("image", false);
57+
58+
return (
59+
<div className = "uk-container uk-margin-large-top">
60+
61+
{ imageShow?
62+
<a onClick={this.editImage.bind(this)}>
63+
<img src={imageShow}
64+
onError={this.imgError.bind(this)}
65+
style={{ position: "absolute", top: 0, left: 0, width: 400,
66+
height: 400, zIndex: 2, backgroundColor: "white" }}
67+
draggable="false"/></a>: null }
68+
69+
<div id="upload-drop"
70+
className="uk-placeholder uk-margin-large-top
71+
uk-text-center" style={{ zIndex: 1}}>
72+
<a className="uk-form-file">Please select a file
73+
<input id="upload-select" type="file" /></a>.
74+
</div>
75+
76+
<p className="uk-text-center uk-margin uk-text-small">
77+
or (noting that URL overrides file)
78+
</p>
79+
<div className="uk-text-center uk-form">
80+
<input type="text" placeholder="Paste a valid URL here"
81+
className="uk-form-width-large uk-text-center"
82+
id="urlField" />
83+
<button className="uk-button uk-margin-large-top"
84+
onClick={this.handleClick.bind(this)}>
85+
Get image
86+
</button>
87+
</div>
88+
</div>
89+
);
90+
}
91+
}

src/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Widget</title>
6+
<link href="uikit.almost-flat.css" rel="stylesheet" type="text/css" />
7+
<link href="widget.css" rel="stylesheet" type="text/css" />
8+
<link href="advanced.css" rel="stylesheet" type="text/css" />
9+
</head>
10+
<body>
11+
<div id="container" class="imageview" style="width: 400px; height: 400px; border: 1px solid #000"></div>
12+
<script src="jquery.js"></script>
13+
<script src="uikit.js"></script>
14+
<script src="index.js"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)