Archives/thebookofshaders
2
0
Fork 0
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders synced 2024-11-09 19:10:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

glslGallery module

Browse Source
This commit is contained in:
Patricio Gonzalez Vivo 2016-04-12 11:02:11 -04:00
parent a6fec2ea54
commit 3a7614706f
21 changed files with 0 additions and 4797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/glslGallery/.gitignore vendored
View File

@ -1,3 +0,0 @@
.DS_Store
._.DS_Store
node_modules

53
src/glslGallery/.jscsrc
View File

@ -1,53 +0,0 @@
{
"esnext": true,
"excludeFiles": [
"node_modules/**",
"src/**/*.min.js",
"src/js/vendor/**"
],
"disallowMultipleSpaces": true,
"disallowEmptyBlocks": true,
"disallowImplicitTypeConversion": ["numeric", "boolean", "binary", "string"],
"disallowMixedSpacesAndTabs": true,
"disallowMultipleLineBreaks": true,
"disallowNamedUnassignedFunctions": true,
"disallowNewlineBeforeBlockStatements": true,
"disallowPaddingNewlinesInBlocks": true,
"disallowQuotedKeysInObjects": true,
"disallowSpaceAfterObjectKeys": false,
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
"disallowSpacesInCallExpression": true,
"disallowSpacesInsideParentheses": true,
"disallowTrailingWhitespace": true,
"disallowYodaConditions": true,
"requireBlocksOnNewline": true,
"requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
"requireCapitalizedConstructors": true,
"requireCommaBeforeLineBreak": true,
"requireCurlyBraces": [
"if",
"else",
"for",
"while",
"do",
"try",
"catch"
],
"requireKeywordsOnNewLine": ["else"],
"requireLineBreakAfterVariableAssignment": true,
"requireLineFeedAtFileEnd": true,
"requirePaddingNewLinesBeforeExport": true,
"requireParenthesesAroundIIFE": true,
"requireSemicolons": true,
"requireSpaceAfterBinaryOperators": true,
"requireSpaceBeforeBinaryOperators": true,
"requireSpaceBeforeBlockStatements": true,
"requireSpaceBetweenArguments": true,
"requireSpacesInConditionalExpression": true,
"requireSpacesInForStatement": true,
"requireSpacesInsideObjectBrackets": "allButNested",
"validateIndentation": 4,
"validateLineBreaks": "LF",
"validateQuoteMarks": { "mark": "'", "escape": true }
}

2
src/glslGallery/.jshintignore
View File

@ -1,2 +0,0 @@
src/**/*.min.js
src/js/vendor/

36
src/glslGallery/.jshintrc
View File

@ -1,36 +0,0 @@
{
"node": true,
"browser": true,
"freeze": true,
"boss": true,
"curly": true,
"devel": true,
"esnext": true,
"eqnull": true,
"eqeqeq": true,
"expr": true,
"notypeof": true,
"noarg": true,
"funcscope": true,
"globalstrict": false,
"loopfunc": true,
"noempty": true,
"nonstandard": true,
"onecase": true,
"sub": true,
"regexdash": true,
"trailing": true,
"undef": true,
"unused": "vars",
"globals": {
"L": true,
"Modernizr": true,
"describe": true,
"it": true,
"sinon": true,
"_": true,
"before": true,
"beforeEach": true,
"afterEach": true
}
}

20
src/glslGallery/LICENSE
View File

@ -1,20 +0,0 @@
The MIT License (MIT)
Copyright (c) 2016 Patricio Gonzalez Vivo ( http://www.patriciogonzalezvivo.com )
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

61
src/glslGallery/README.md
View File

@ -1,61 +0,0 @@
[GlslGallery](https://github.com/patriciogonzalezvivo/glslGallery) is JavaScript tool part of [The Book of Shaders](http://thebookofshaders.com) ecosystem that lets you curate your own gallery of shaders created with [The Book of Shader's editor (glslEditor)](http://editor.thebookofshaders.com).
![](http://patriciogonzalezvivo.com/images/glslGallery/01.gif)
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4BQMKQJDQ9XH6)
## How to use it?
First add [GlslGallery](https://github.com/patriciogonzalezvivo/glslGallery) javascript and CSS files. For example:
```html
<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/patriciogonzalezvivo/glslGallery/gh-pages/build/glslGallery.css">
<script type="text/javascript" src="https://cdn.rawgit.com/patriciogonzalezvivo/glslGallery/gh-pages/build/glslGallery.js"></script>
```
You can also install it through npm:
```bash
npm install glslGallery
```
Then when you create a new shader on [The Book of Shader's editor ](http://editor.thebookofshaders.com)
[(glslEditor)](https://github.com/patriciogonzalezvivo/glslEditor) you can export two URLs one to the editor and other one to a player. Both use the same log number (ex. `160404125055`).
![](http://patriciogonzalezvivo.com/images/glslGallery/00.gif)
Use those log numbers to curate your own gallery of shaders by adding them to the ```data``` attribute of a ```<div>``` member of the ```class``` name ```glslGallery``` and you are ready to go.
```html
<div class="glslGallery" data="160401213245,160313193711,160313030533,160313025607,160313020334,160308160958,160308014412,160307213819,160306213426,160304203554,160304202332,160302022724,160219112614,160302003807,160302102102,160302101618"></div>
```
There are some properties you can pass to ```glslGallery``` through the ```data-properties``` attribute to customize your gallery.
|propertie | values | default value |
|----------|--------|---------------|
|```clickRun```| ```player``` or ```editor``` | ```player``` |
|```showAuthor```| ```true``` or ```false``` | ```true``` |
|```showTitle```| ```true``` or ```false``` | ```true``` |
|```hoverPreview```| ```true``` or ```false``` | ```true``` |
|```openframe```| ```true``` or ```false``` | ```true``` |
For example you can do:
```html
<div class="glslGallery" data="10/ikeda-00,10/ikeda-03,10/ikeda-04,160401213245,160313193711,160313030533,160313025607,160313020334,160308160958,160308014412" data-properties="clickRun:editor,showAuthor:false,hoverPreview:false"></div>
```
## How to style it?
Then you can style it by overwriting the following css classes:
```
.glslGallery
.glslGallery_item
.glslGallery_thumb
.glslGallery_canvas
.glslGallery_credits
.glslGallery_label
.glslGallery_title
.glslGallery_author
```

2
src/glslGallery/build/glslGallery.css
View File

@ -1,2 +0,0 @@
@charset 'utf-8';.glslGallery{-moz-column-width:15em;-webkit-column-width:15em}.glslGallery_item{position:relative;display:inline-block;width:250px}.glslGallery_thumb{max-width:250px}.glslGallery_credits{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.5);padding:5px;padding-top:2px;padding-bottom:2px;margin:0;z-index:104}.glslGallery_label{color:white;font-family:Helvetica,Arial,sans-serif;text-decoration:none;line-height:0.0;z-index:104}.glslGallery_title{font-size:14px;font-weight:600}.glslGallery_author{font-size:10px;font-style:italic;font-weight:100}.glslGallery_canvas{position:absolute;top:0;left:0;z-index:103;opacity:0;transition:opacity .5s ease-in;max-width:250px;display:inline-block}.glslGallery_canvas:hover{opacity:1}.glslGallery_openFrameIcon{box-sizing:border-box;position:absolute;float:right;right:10px;bottom:10px;padding:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:105;font-size:20px;color:black;background-color:rgba(255,255,255,.5);cursor:pointer;font-family:Helvetica,Geneva,sans-serif;font-size:17px}.glslGallery_openFrameIcon:hover{color:#85ccc4}
/*# sourceMappingURL=glslGallery.css.map */

1
src/glslGallery/build/glslGallery.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["glslGallery.css","_item.css","_credits.css","_canvas.css","_openFrameIcon.css"],"names":[],"mappings":"AAAA,iBAAiB,AAyBjB,aACI,uBAAwB,AACxB,yBAA2B,CAC9B,AC5BD,kBACI,kBAAmB,AACnB,qBAAsB,AACtB,WAAa,CAChB,AAED,mBACI,eAAiB,CACpB,ACRD,qBACI,kBAAmB,AACnB,WAAY,AACZ,SAAU,AACV,0BAA2B,AAC3B,YAAa,AACb,gBAAiB,AACjB,mBAAoB,AACpB,SAAY,AACZ,WAA0B,CAC7B,AAED,mBACI,YAAa,AACb,uCAA0C,AAC1C,qBAAsB,AACtB,gBAAiB,AACjB,WAA0B,CAC7B,AAED,mBACI,eAAgB,AAChB,eAAiB,CACpB,AAED,oBACI,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACpB,AC7BD,oBACI,kBAAmB,AACnB,MAAS,AACT,OAAU,AACV,YAAyB,AACzB,UAAU,AACV,+BAAgC,AAChC,gBAAiB,AACjB,oBAAsB,CACzB,AAED,0BACI,SAAU,CACb,ACbD,2BACI,sBAAuB,AACvB,kBAAmB,AACnB,YAAa,AACb,WAAY,AACZ,YAAa,AACb,YAAa,AACb,yBAAkB,AAAlB,sBAAkB,AAAlB,qBAAkB,AAAlB,iBAAkB,AAClB,YAAgC,AAEhC,eAAgB,AAChB,YAAa,AACb,sCAAwC,AACxC,eAAgB,AAEhB,wCAAyC,AAEzC,cAAgB,CAEnB,AAED,iCACI,aAAiC,CACpC","file":"glslGallery.css","sourcesContent":["@charset 'utf-8';\n\n/* VARIABLES */\n\n:root {\n --editor-font-family: 'Source Code Pro', monospace;\n --ui-base-color: #36383c;\n --ui-component-color: #2e3033;\n --ui-element-color: #3a3c40;\n --ui-active-color: #26282c;\n --ui-highlight-color: #85CCC4;\n --ui-component-text-color: #eefafa;\n --ui-link-text-color: #e1eeee;\n --ui-subtext-color: #c0c6c6;\n --ui-border-color: #999ca0;\n --modal-shadow: 0 0 0 5px rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.25);\n\n --z-gallery: 100;\n --z-item: 101;\n --z-thumb: 102;\n --z-canvas: 103;\n --z-credits: 104;\n --z-openFrameIcon: 105;\n}\n\n.glslGallery {\n -moz-column-width: 15em;\n -webkit-column-width: 15em;\n}\n\n@import '_item';\n@import '_credits';\n@import '_canvas';\n@import '_openFrameIcon';\n",".glslGallery_item {\n position: relative;\n display: inline-block;\n width: 250px;\n}\n\n.glslGallery_thumb {\n max-width: 250px;\n}",".glslGallery_credits {\n position: absolute; \n bottom: 5px; \n left: 5px; \n background: rgba(0,0,0,.5);\n padding: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n margin: 0px;\n z-index: var(--z-credits);\n}\n\n.glslGallery_label {\n color: white;\n font-family: Helvetica, Arial, sans-serif;\n text-decoration: none; \n line-height: 0.0;\n z-index: var(--z-credits);\n}\n\n.glslGallery_title {\n font-size: 14px;\n font-weight: 600;\n}\n\n.glslGallery_author {\n font-size: 10px; \n font-style: italic;\n font-weight: 100;\n}",".glslGallery_canvas {\n position: absolute;\n top: 0px;\n left: 0px;\n z-index: var(--z-canvas);\n opacity:0;\n transition:opacity 0.5s ease-in;\n max-width: 250px;\n display: inline-block;\n}\n\n.glslGallery_canvas:hover {\n opacity:1;\n}",".glslGallery_openFrameIcon {\n box-sizing: border-box;\n position: absolute;\n float: right;\n right: 10px;\n bottom: 10px;\n padding: 5px;\n user-select: none;\n z-index: var(--z-openFrameIcon);\n\n font-size: 20px;\n color: black;\n background-color: rgba(255,255,255,0.5);\n cursor: pointer;\n\n font-family: Helvetica,Geneva,sans-serif;\n /*font-weight: 100;*/\n font-size: 17px;\n\n}\n\n.glslGallery_openFrameIcon:hover {\n color: var(--ui-highlight-color);\n}"],"sourceRoot":"/source/"}

3980
src/glslGallery/build/glslGallery.js
View File

File diff suppressed because one or more lines are too long

BIN
src/glslGallery/favicon.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 B

91
src/glslGallery/gulpfile.js
View File

@ -1,91 +0,0 @@
'use strict';
var gulp = require('gulp');
// var gutil = require('gulp-util');
var derequire = require('gulp-derequire');
var livereload = require('gulp-livereload');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var paths = {
styles: 'src/css/**/*.css',
scripts: 'src/js/**/*.js'
};
// Build stylesheets
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssimport = require('postcss-import');
var nested = require('postcss-nested');
var customProperties = require('postcss-custom-properties');
var colorHexAlpha = require('postcss-color-hex-alpha');
var csswring = require('csswring');
var reporter = require('postcss-reporter');
var plugins = [
cssimport,
nested,
customProperties(),
colorHexAlpha(),
autoprefixer({ browsers: ['last 2 versions', 'IE >= 11'] }),
// preserveHacks is true because NOT preserving them doesn't mean
// delete the hack, it means turn it into real CSS. Which is not
// what we want!
csswring({ removeAllComments: true, preserveHacks: true }),
reporter()
];
return gulp.src('./src/css/glslGallery.css')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build'))
.pipe(livereload());
});
// Build Javascripts
gulp.task('js', function () {
var browserify = require('browserify');
var shim = require('browserify-shim');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
// var uglify = require('gulp-uglify');
var bundle = browserify({
entries: 'src/js/glslGallery.js',
standalone: 'glslGallery',
debug: true,
transform: [
babelify.configure({ optional: ['runtime'] }),
shim
]
});
return bundle.bundle()
.pipe(plumber())
.pipe(source('glslGallery.js'))
.pipe(derequire())
.pipe(buffer())
// .pipe(sourcemaps.init({ loadMaps: true }))
// Add transformation tasks to the pipeline here.
// .pipe(uglify())
// .on('error', gutil.log)
// .pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build'));
});
// Rerun the task when a file changes
gulp.task('watch', function () {
livereload.listen();
gulp.watch(paths.styles, ['css']);
gulp.watch(paths.scripts, ['js']);
});
// Build files, do not watch
gulp.task('build', ['css', 'js']);
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['css', 'js', 'watch']);

22
src/glslGallery/index.html
View File

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GLSL Gallery</title>
<link href="/favicon.gif" rel="shortcut icon"/>
<!-- GLSL Gallery -->
<link type="text/css" rel="stylesheet" href="build/glslGallery.css">
<script type="text/javascript" src="build/glslGallery.js"></script>
<style>
body {
height: 100%;
margin: 0;
/*background: #272822;*/
}
</style>
</head>
<body>
<div class="glslGallery" data="10/ikeda-00,10/ikeda-03,10/ikeda-04,160401213245,160313193711,160313030533,160313025607,160313020334,160308160958,160308014412,160307213819,160306213426,160304203554,160304202332,160302022724,160219112614,160302003807,160302102102,160302101618"></div>
</body>
</html>

61
src/glslGallery/package.json
View File

@ -1,61 +0,0 @@
{
"name": "glslGallery",
"version": "0.0.4",
"description": "Simple Shader gallery from glslEditors",
"main": "build/glslGallery.js",
"scripts": {
"postinstall": "ln -nsf ../src/js node_modules/app",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "jshint *.js src/ || true; jscs *.js src/ || true"
},
"repository": {
"type": "git",
"url": "git+https://github.com/patriciogonzalezvivo/glslGallery.git"
},
"keywords": [
"glsl",
"shader",
"gallery",
"fragment"
],
"author": "Patricio Gonzalez Vivo",
"license": "MIT",
"bugs": {
"url": "https://github.com/patriciogonzalezvivo/glslGallery/issues"
},
"homepage": "https://github.com/patriciogonzalezvivo/glslGallery#readme",
"devDependencies": {
"autoprefixer": "^6.0.3",
"babelify": "^6.4.0",
"browserify": "^11.2.0",
"browserify-shim": "^3.8.11",
"csswring": "^4.0.0",
"gulp": "^3.9.0",
"gulp-derequire": "^2.1.0",
"gulp-livereload": "^3.8.1",
"gulp-plumber": "^1.0.1",
"gulp-postcss": "^6.0.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.7",
"jscs": "^2.4.0",
"jshint": "^2.8.0",
"modernizr": "^3.1.0",
"postcss-color-hex-alpha": "^2.0.0",
"postcss-custom-properties": "^5.0.0",
"postcss-import": "^7.1.0",
"postcss-nested": "^1.0.0",
"postcss-reporter": "^1.3.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"babel": "^5.8.29",
"babel-runtime": "5.8.29",
"glslCanvas": "0.0.9",
"xhr": "^2.2.0"
},
"browserify-shim": {
"GlslCanvas": "global:GlslCanvas"
}
}

14
src/glslGallery/src/css/_canvas.css
View File

@ -1,14 +0,0 @@
.glslGallery_canvas {
position: absolute;
top: 0px;
left: 0px;
z-index: var(--z-canvas);
opacity:0;
transition:opacity 0.5s ease-in;
max-width: 250px;
display: inline-block;
}
.glslGallery_canvas:hover {
opacity:1;
}

30
src/glslGallery/src/css/_credits.css
View File

@ -1,30 +0,0 @@
.glslGallery_credits {
position: absolute;
bottom: 5px;
left: 5px;
background: rgba(0,0,0,.5);
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
z-index: var(--z-credits);
}
.glslGallery_label {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
line-height: 0.0;
z-index: var(--z-credits);
}
.glslGallery_title {
font-size: 14px;
font-weight: 600;
}
.glslGallery_author {
font-size: 10px;
font-style: italic;
font-weight: 100;
}

9
src/glslGallery/src/css/_item.css
View File

@ -1,9 +0,0 @@
.glslGallery_item {
position: relative;
display: inline-block;
width: 250px;
}
.glslGallery_thumb {
max-width: 250px;
}

24
src/glslGallery/src/css/_openFrameIcon.css
View File

@ -1,24 +0,0 @@
.glslGallery_openFrameIcon {
box-sizing: border-box;
position: absolute;
float: right;
right: 10px;
bottom: 10px;
padding: 5px;
user-select: none;
z-index: var(--z-openFrameIcon);
font-size: 20px;
color: black;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
font-family: Helvetica,Geneva,sans-serif;
/*font-weight: 100;*/
font-size: 17px;
}
.glslGallery_openFrameIcon:hover {
color: var(--ui-highlight-color);
}

34
src/glslGallery/src/css/glslGallery.css
View File

@ -1,34 +0,0 @@
@charset 'utf-8';
/* VARIABLES */
:root {
--editor-font-family: 'Source Code Pro', monospace;
--ui-base-color: #36383c;
--ui-component-color: #2e3033;
--ui-element-color: #3a3c40;
--ui-active-color: #26282c;
--ui-highlight-color: #85CCC4;
--ui-component-text-color: #eefafa;
--ui-link-text-color: #e1eeee;
--ui-subtext-color: #c0c6c6;
--ui-border-color: #999ca0;
--modal-shadow: 0 0 0 5px rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.25);
--z-gallery: 100;
--z-item: 101;
--z-thumb: 102;
--z-canvas: 103;
--z-credits: 104;
--z-openFrameIcon: 105;
}
.glslGallery {
-moz-column-width: 15em;
-webkit-column-width: 15em;
}
@import '_item';
@import '_credits';
@import '_canvas';
@import '_openFrameIcon';

68
src/glslGallery/src/js/addons/openFrameIcon.js
View File

@ -1,68 +0,0 @@
export default class OpenFrameIcon {
constructor (parent) {
this.parent = parent;
this.el = document.createElement('div');
this.el.setAttribute('class', 'glslGallery_openFrameIcon');
this.el.innerHTML = '[o]';
this.el.addEventListener('click', () => {
createOpenFrameArtwork(this.parent, () => {
console.log(event);
});
}, true);
this.parent.el.appendChild(this.el);
}
}
export function createOpenFrameArtwork(item, callback) {
let id = item.id;
let title = item.title || 'unknow';
let author = item.author || 'unknow';
let xhr = new XMLHttpRequest();
callback = callback || () => {};
// anywhere in the API that user {id} is needed, the alias 'current' can be used for the logged-in user
xhr.open('POST', 'http://openframe.io/api/users/current/owned_artwork', false);
// set content type to JSON...
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
// This is essential in order to include auth cookies:
xhr.withCredentials = true;
xhr.onload = (event) => {
if (event.currentTarget.status === 404) {
window.open('http://openframe.io/login-popup', 'login', 'width=500,height=600');
let successListener = function(e) {
if (e.data === 'success') {
createOpenFrameArtwork(item, callback);
}
window.removeEventListener('message', successListener);
};
window.addEventListener('message', successListener, false);
}
else if (event.currentTarget.status === 200) {
callback(true);
}
else {
callback(false);
}
};
xhr.onerror = (event) => {
console.log(event.currentTarget.status);
};
let url = '';
if (id.match(/\d\d\/.*/)) {
url = 'http://thebookofshaders.com/' + id;
}
else {
url = 'http://thebookofshaders.com/log/' + id;
}
xhr.send(JSON.stringify({
title: title,
author_name: author,
is_public: false,
format: 'openframe-glslviewer',
url: url + '.frag',
thumb_url: url + '.png'
}));
}

178
src/glslGallery/src/js/core/GalleryItem.js
View File

@ -1,178 +0,0 @@
import xhr from 'xhr';
import GlslCanvas from 'glslCanvas';
import OpenFrameIcon from '../addons/openFrameIcon';
export default class GalleryItem {
constructor (id, main, options) {
this.id = id;
this.main = main;
this.options = options;
// Construct Item
this.el = document.createElement('div');
this.el.setAttribute('class', 'glslGallery_item');
this.link = document.createElement('a');
this.link.setAttribute('target', '_blank');
this.img = document.createElement('img');
this.img.setAttribute('class', 'glslGallery_thumb');
this.credits = document.createElement('div');
this.credits.setAttribute('class', 'glslGallery_credits');
this.credits.style.visibility = 'hidden';
if (this.id.match(/\d\d\/.*/)) {
this.link.setAttribute('href', 'http://thebookofshaders.com/edit.html#' + this.id + '.frag');
this.img.src = 'http://thebookofshaders.com/' + this.id + '.png';
}
else {
this.link.setAttribute('href', 'http://' + this.options.clickRun + '.thebookofshaders.com/?log=' + this.id);
this.img.src = 'http://thebookofshaders.com/log/' + this.id + '.png';
}
this.link.appendChild(this.img);
this.el.appendChild(this.link);
this.el.appendChild(this.credits);
this.main.container.appendChild(this.el);
// Add events
if (this.options.hoverPreview) {
this.el.addEventListener('mouseenter', () => {
onEnter(this);
});
this.el.addEventListener('mouseleave', () => {
onLeave(this);
});
}
if (this.options.openFrameIcon) {
this.openFrameIcon = new OpenFrameIcon(this);
}
this.init();
}
init () {
if (!this.source || this.source === '') {
var url = '';
if (this.id.match(/\d\d\/.*/)) {
url = 'http://thebookofshaders.com/' + this.id + '.frag';
}
else {
url = 'http://thebookofshaders.com/log/' + this.id + '.frag';
}
let item = this;
xhr.get(url, (error, res, body) => {
if (error) {
console.error('Error downloading ', error);
return;
}
item.setCode(body);
});
}
}
load (code) {
this.setCode(code);
window.glslGallery_canvas.load(code);
window.glslGallery_canvas.canvas.style.height = this.img.offsetHeight + 'px';
this.link.appendChild(window.glslGallery_canvas.canvas);
}
setCode (code) {
this.source = code;
if (!this.author && this.options.showAuthor) {
this.author = this.getAuthor();
if (this.author !== 'unknown') {
let authorEl = document.createElement('p');
authorEl.setAttribute('class', 'glslGallery_label glslGallery_author');
authorEl.innerHTML = this.author;
this.credits.appendChild(authorEl);
this.credits.style.visibility = 'visible';
}
}
if (!this.title && this.options.showTitle) {
this.title = this.getTitle();
if (this.title !== 'unknown') {
let titleEl = document.createElement('p');
titleEl.setAttribute('class', 'glslGallery_label glslGallery_title');
titleEl.innerHTML = this.title;
this.credits.appendChild(titleEl);
this.credits.style.visibility = 'visible';
}
}
}
getCode () {
return this.source;
}
getTitle() {
var result = this.source.match(/\/\/\s*[T|t]itle\s*:\s*([\w|\s|\@|\(|\)|\-|\_]*)/i);
if (result && !(result[1] === ' ' || result[1] === '')) {
return result[1].replace(/(\r\n|\n|\r)/gm, '');
}
else {
return 'unknown';
}
}
getAuthor() {
var result = this.source.match(/\/\/\s*[A|a]uthor\s*[\:]?\s*([\w|\s|\@|\(|\)|\-|\_]*)/i);
if (result && !(result[1] === ' ' || result[1] === '')) {
return result[1].replace(/(\r\n|\n|\r)/gm, '');
}
else {
return 'unknown';
}
}
}
function initCanvas() {
if (!window.glslGallery_canvas) {
var canvas = document.createElement('canvas');
canvas.setAttribute('class', 'glslGallery_canvas');
canvas.style.width = '250px';
canvas.style.height = '250px';
canvas.width = '250px';
canvas.height = '250px';
window.glslGallery_canvas = new GlslCanvas(canvas);
}
}
function onEnter (item) {
initCanvas();
if (item.getCode()) {
item.load(item.getCode());
}
else {
var url = '';
if (item.id.match(/\d\d\/.*/)) {
url = 'http://thebookofshaders.com/' + item.id + '.frag';
}
else {
url = 'http://thebookofshaders.com/log/' + item.id + '.frag';
}
xhr.get(url, (error, res, body) => {
if (error) {
console.error('Error downloading ', error);
return;
}
item.load(body);
});
}
}
function onLeave (item) {
initCanvas();
if (item.el.getElementsByClassName('glslGallery_canvas') > 0) {
// Remove glslCanvas instance from item
item.el.removeChild(window.glslGallery_canvas.canvas);
}
}

108
src/glslGallery/src/js/glslGallery.js
View File

@ -1,108 +0,0 @@
/*
The MIT License (MIT)
Copyright (c) 2016 Patricio Gonzalez Vivo ( http://www.patriciogonzalezvivo.com )
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.
*/
import GalleryItem from 'app/core/GalleryItem';
export default class GlslGallery {
constructor (selector, options) {
if (typeof selector === 'object' && selector.nodeType && selector.nodeType === 1) {
this.container = selector;
}
else if (typeof selector === 'string') {
this.container = document.querySelector(selector);
}
else {
console.log('Error, type ' + typeof selector + ' of ' + selector + ' is unknown');
return;
}
this.options = options || {};
if (!this.options.showAuthor) {
this.options.showAuthor = true;
}
if (!this.options.showTitle) {
this.options.showTitle = true;
}
if (!this.options.hoverPreview) {
this.options.hoverPreview = true;
}
if (!this.options.openFrameIcon) {
this.options.openFrameIcon = true;
}
if (!this.options.clickRun) {
this.options.clickRun = 'player';
}
this.items = [];
if (selector.hasAttribute('data-properties')) {
let prop = selector.getAttribute('data-properties').split(',');
for (let i in prop) {
let values = prop[i].split(':');
if (values.length === 1) {
this.options[values[0]] = true;
}
else if (values.length === 2) {
this.options[values[0]] = (values[1] === 'true' || values[1] === 'false') ? (values[1] === 'true') : values[1];
}
}
}
if (selector.hasAttribute('data')) {
let data = selector.getAttribute('data').split(',');
for (let i in data) {
this.items.push(new GalleryItem(data[i], this, this.options));
}
}
return this;
}
version() {
return '0.0.1';
}
}
function glslGalleryLoadAll() {
if (!window.GlslGallery) {
window.GlslGallery = GlslGallery;
}
var list = document.getElementsByClassName('glslGallery');
if (list.length > 0) {
window.glslGalleries = [];
for (var i = 0; i < list.length; i++) {
var gallery = new GlslGallery(list[i]);
window.glslGalleries.push(gallery);
}
}
}
window.onload = function () {
glslGalleryLoadAll();
};