Skip to content

Commit

Permalink
Add webpack with demo
Browse files Browse the repository at this point in the history
  • Loading branch information
quantuminformation committed Dec 21, 2016
1 parent 4aefaeb commit 663db84
Show file tree
Hide file tree
Showing 12 changed files with 150 additions and 76 deletions.
16 changes: 12 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@

A lovely little vanilla TypeScript popup.

## Why

I made this popup was for my own consumption, but you are free to use it too!

## Features

* It will close on submit events bubbling up from children
* It will close on ESC press key
* It will close on clicking on the close x button anchor
* It will close on ESC press key, clicking on the close x button anchor or submit events from children
* Adds a modal background that fades in with CSS3 transitions
* Popup itself slides in with CSS3 transitions

## Demo

[Basic usage](https://quantuminformation.github.io/solar-popup/demo/systemjs)
[Basic usage](https://quantumjs.github.io/solar-popup/demo/)

## Roadmap

Configuration options for the popup sliding in and the modal backgrounds color settings
56 changes: 56 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../build/solar-popup.css">
<script src="../build/solar-popup.js"></script>
</head>
<body>
<button onclick="showSimplePopup()">Click me to trigger the popup programmatically</button>
<button onclick="showBigPopup()">Click me for a larger example with a form</button><br><br>

<div style="background-color: #57ff22; height: 200px;">Some other content</div>
<div style="background-color: red; height: 200px;">Some other content</div>
<div style="background-color: #e1ffe9; height: 200px;">Some other content</div>

</body>
<script type="text/javascript">

function showSimplePopup() {
var child = document.createElement('DIV')
child.innerHTML =
`<p>This is some content that can be supplied to the popup</p>
<p>Also press the [ESC] key to close]</p>
<button type="submit">Clicking a submit button will also close it</button>
`
var popup = new SolarPopup(child)
popup.show(child)
}

function showBigPopup() {
var child = document.createElement('DIV')
child.innerHTML =
`<form>
<h3>Some amazing form</h3>
<p>The submit won't fire until all the fields are valid</p>
<div class="form-group">
<input type="number" required placeholder="Project budget">
<input type="range" required placeholder="Project range">
<input type="date" required placeholder="Project date">
<input type="reset">
</div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"
class="btn btn-success" style="margin-top: 10px"></div>
</div>
</form>
`
var popup = new SolarPopup(child)
popup.show(child)
}
showBigPopup()

</script>
</html>
37 changes: 0 additions & 37 deletions demo/systemjs/index.html

This file was deleted.

18 changes: 9 additions & 9 deletions deploy.sh
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
#!/usr/bin/env bash
git checkout master
npm run build-prod

exists=`git show-ref refs/heads/gh-pages`
if ! [ -n "$exists" ]; then
echo 'branch exists!'
git checkout -b "gh-pages"
else
git checkout "gh-pages"
if [ -n "$exists" ]; then
git branch -D gh-pages
fi
git branch -D gh-pages

git merge master
git add dist/* -f
git commit -a -m 'build files'
git push origin gh-pages
git checkout --orphan gh-pages
git add build/* -f
git commit -m "build files"
git push -f origin gh-pages
git checkout master
23 changes: 16 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
{
"name": "solar-popup",
"version": "0.1.0",
"version": "0.2.4",
"description": "",
"main": "build/index.js",
"files": [
"demo/index.html",
"build/solar-popup.js",
"build/solar-popup.css"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run pcss & npm run watch",
"build": "npm run pcss && webpack",
"build-prod": "npm run pcss && webpack -p",
"deploy": "npm run build && sh deploy.sh ",
"pcss": "postcss -w src/index.pcss -o build/solar-popup.css -c old.config.json src/index.pcss ",
"watch": "tsc --watch "
"pcss": "postcss -o build/solar-popup.css -c postcss.config.json src/index.pcss ",
"watch-pcss": "postcss -w src/index.pcss -o build/solar-popup.css -c postcss.config.json src/index.pcss ",
"watch": "webpack --watch --watch-poll & npm run watch-pcss"
},
"repository": {
"type": "git",
Expand All @@ -23,12 +29,15 @@
"homepage": "https://github.com/quantumjs/solar-popup#readme",
"devDependencies": {
"autoprefixer": "^6.5.4",
"html-webpack-plugin": "^2.24.1",
"postcss-calc": "^5.3.1",
"postcss-cli": "^2.6.0",
"postcss-css-variables": "^0.6.0",
"postcss-nested": "^1.0.0",
"postcss-smart-import": "^0.6.0",
"systemjs": "^0.19.41",
"typescript": "^2.1.4"
"ts-loader": "^1.0.0",
"typescript": "^2.1.4",
"webpack": "^2.1.0-beta.25",
"webpack-build-notifier": "^0.1.13"
}
}
7 changes: 0 additions & 7 deletions postcss.config.js

This file was deleted.

File renamed without changes.
3 changes: 3 additions & 0 deletions publish.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#!/usr/bin/env bash
webpack -p
npm publish
8 changes: 3 additions & 5 deletions src/SolarPopup.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@
z-index: 1000;
padding: 10px;
position: fixed;
opacity: 0.8;
opacity: 0.9;
width: var(--popup-width);

top:20%;
box-sizing: border-box;
color: var(--color);
transition: all 300ms ease;
background-color: var(--background);
border: 1px solid var(--border);
border-radius: 4px;
border-radius: 5px;
left: calc(50% - (var(--popup-width) / 2));


&[data-is-initialising="true"] {
/*todo cater for bigger screens*/
left: calc(var(--popup-width) * -1) !important;
Expand All @@ -31,7 +30,6 @@
/*todo cater for bigger screens*/
left: 100%;
}

}

.solar-popup a {
Expand Down
11 changes: 8 additions & 3 deletions src/SolarPopup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@ import {IComponent} from "./IComponent";
import {constants} from "./constants";

/**
* Show a popup form with a google form to be filled in.
* A Popup that can take any content
*
* Features
* Closes in response to [ESC] keypress, submit events.
* Adds modal background that fades in with CSS3 transitions
* Popup itself slides in with CSS3 transitions
*
* @constructor
*/

export class SolarPopup implements IComponent {
declare var module
module.exports = class SolarPopup implements IComponent {
destroyBoundWithThis = this.destroy.bind(this)
modalBackground = new ModalBackground()
private hostElement: HTMLElement
Expand Down
6 changes: 2 additions & 4 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
{
"compilerOptions": {
"module": "system",
"target": "es5",
"outFile":"./build/solar-popup.js",
"sourceRoot": "./src/SolarPopup.ts",
"rootDir": "./src/",
"inlineSources": true,
"inlineSourceMap": true
},
"exclude": [
"node_modules"
]
}


41 changes: 41 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require("webpack-build-notifier");


const PATHS = {
src: path.join(__dirname, './src'),
build: path.join(__dirname, './build')
};

module.exports = {

entry: {
"solar-popup": PATHS.src + '/SolarPopup.ts'
},
output: {
path: PATHS.build,
filename: '[name].js',
library: 'SolarPopup',
libraryTarget: 'umd',
umdNamedDefine:true
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['.ts', '.js']
},
plugins: [
new WebpackBuildNotifierPlugin({
title: "My Project Webpack Build"
})
]
};

0 comments on commit 663db84

Please sign in to comment.