Skip to content

Commit

Permalink
modify demo image
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackmiaool
blackmiaool committed Oct 3, 2016
1 parent d456422 commit 5253a44
Show file tree
Hide file tree
Showing 12 changed files with 108 additions and 34 deletions.
Binary file added demo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion dist/jquery.imgexplode.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 26 additions & 13 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,37 @@ const uglify = require('gulp-uglify');
const rename = require("gulp-rename");
const livereload = require('gulp-livereload');
const less = require('gulp-less');
function get_babel_params() {
return {
presets: ['es2015'],
}
}
const pkg = require('./package.json');
const banner = require('gulp-banner');


var comment = '/*\n' +
' * <%= pkg.name %> <%= pkg.version %>\n' +
' * <%= pkg.description %>\n' +
' * <%= pkg.homepage %>\n' +
' *\n' +
' * Copyright 2015, <%= pkg.author %>\n' +
' * Released under the <%= pkg.license %> license.\n' +
'*/\n\n';
gulp.task('js', function () {
let babel_pipe = babel(get_babel_params());
let babel_pipe = babel({
presets: ['es2015'],
minified: true,
});
babel_pipe.on('error', function (e) {
gutil.log(e);
babel_pipe.end();
});

return gulp.src(['jquery.imgexplode.js'])
.pipe(babel_pipe)
.pipe(uglify())
.pipe(rename(function (path) {
path.basename += ".min";
}))
.pipe(uglify())
.pipe(banner(comment, {
pkg
}))
.pipe(gulp.dest('dist'))
.pipe(livereload())
});
Expand All @@ -41,7 +54,9 @@ gulp.task('playground-less', function () {
.pipe(livereload())
});
gulp.task('playground-js', function () {
let babel_pipe = babel(get_babel_params());
let babel_pipe = babel({
presets: ['es2015'],
});
babel_pipe.on('error', function (e) {
gutil.log(e);
babel_pipe.end();
Expand All @@ -53,10 +68,10 @@ gulp.task('playground-js', function () {
.pipe(livereload())
});
gulp.task('playground', function () {
return gulp.start(["js","playground-js","playground-less"]);
return gulp.start(["js", "playground-js", "playground-less"]);
});
gulp.task('default', function () {
return gulp.start(["js",'playground'])
return gulp.start(["js", 'playground'])
});
gulp.task('reload', function () {
gulp.src("")
Expand All @@ -67,6 +82,4 @@ gulp.watch('./*.js', ['js']);
gulp.watch('index.html', ['reload']);
gulp.watch('playground/js/*', ['playground-js']);
gulp.watch('playground/less/*', ['playground-less']);
gulp.watch('playground/*.html', ['reload']);


gulp.watch('playground.html', ['reload']);
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<body style="margin:0;text-align:center;">
<a target="_blank" href="https://github.com/blackmiaool/jquery-image-explode" style="position: absolute;top: 0;left: 0;width: 138px;height: 138px;display: block;background: transparent url(./fork.png) 0 0 no-repeat;text-indent: -9000px;z-index: 3;"></a>
<img src="try-jquery.jpg" style="display:inline-block;margin-top:300px;margin-bottom:10px;width:277px;" />
<img src="./demo.jpg" style="display:inline-block;margin-top:300px;margin-bottom:10px;width:277px;" />
<button style="position:fixed;right:0;top:0;width:100px;height:50px;" onclick="explode()">Explode</button>
<script src="lib/jquery-3.1.0.js"></script>
<!-- <script src="dist/jquery.imgexplode.min.js"></script>-->
Expand Down
4 changes: 4 additions & 0 deletions jquery.imgexplode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,10 @@
generate(w - rowSum);
}
}
rags.sort(function(rag1,rag2){

return Math.random()>0.5?1:-1;
})

return rags;
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
"eslint": "^3.6.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-banner": "^0.1.3",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"less": "^2.7.1"
}
}

24 changes: 16 additions & 8 deletions playground/playground.html → playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no">
<title>爆炸测试</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="../lib/jquery-3.1.0.js"></script>
<script src="../jquery.imgexplode.js"></script>
<link rel="stylesheet" href="./playground/css/bootstrap.min.css">
<link rel="stylesheet" href="./playground/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./playground/css/style.css">
<script src="lib/jquery-3.1.0.js"></script>
<script src="jquery.imgexplode.js"></script>
<!-- <script src="dist/jquery.imgexplode.min.js"></script>-->
<script src="../lib/angular.min.js"></script>
<script src="dist/playground.js"></script>
<script src="lib/angular.min.js"></script>
<script src="playground/dist/playground.js"></script>
</head>

<body style="margin:0;text-align:center;" ng-app="app" ng-controller="RootController">
Expand All @@ -26,7 +26,7 @@
<div class="preview-wrap">
<div class="preview" ng-click="explode()">

<img ng-src="{{settings.imageUrl.value}}" />
<img ng-style="{width:settings.imageWidth.value}" ng-src="{{settings.imageUrl.value}}" />
</div>
</div>

Expand Down Expand Up @@ -71,6 +71,14 @@
</div>
</main>
</div>
<div class="Demo">
<header><span class="name" ng-bind="demo.name"></span>(<span class="descr" ng-bind="demo.title"></span>)</header>
<main>
<div class="input-wrap">
<textarea class="form-control" ng-model="demo.value" type="text"></textarea>
</div>
</main>
</div>
</div>
<div class="code"></div>
</div>
Expand Down
1 change: 1 addition & 0 deletions playground/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ img {
}
#wrap > .left .mode .share {
text-align: left;
margin-bottom: 10px;
}
#wrap > .left .mode textarea {
word-break: break-all;
Expand Down
29 changes: 24 additions & 5 deletions playground/dist/playground.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use strict";

var baseAddr = "http://blackmiaool.com/jquery-image-explode/playground/playground.html";
var baseAddr = "http://blackmiaool.com/jquery-image-explode/playground.html";
var ng = angular.module("app", []);

function extend(dest, src) {
Expand All @@ -20,8 +20,14 @@ var settings = {
imageUrl: {
type: "string",
title: "You can use base64 image",
value: "../try-jquery.jpg",
initValue: "../try-jquery.jpg"
value: "./demo.jpg",
initValue: "./demo.jpg"
},
imageWidth: {
type: "number",
title: "The the width(px) of image above",
value: 0,
initValue: 300
}

};
Expand All @@ -34,6 +40,11 @@ var effectUrl = {
title: "Share the effect",
value: location.href
};
var demo = {
name: "demo",
type: "textarea",
title: "Copy to use"
};
var params = [{
name: "minWidth",
type: "number",
Expand Down Expand Up @@ -160,7 +171,13 @@ function explode() {
$("img").explode(finalParams);
}, 600);
}

function generateDemo() {
var paramsThis = {};
params.forEach(function (v) {
paramsThis[v.name] = v.value;
});
demo.value = "$(\"#target\").explode(" + JSON.stringify(paramsThis) + ");";
}
function generateEffectUrl() {
var result = {
settings: {},
Expand All @@ -185,6 +202,7 @@ ng.controller("RootController", ["$scope", "$rootScope", "$timeout", function (s
return;
}
generateEffectUrl();
generateDemo();
if (timeout) {
clearTimeout(timeout);
}
Expand All @@ -210,6 +228,7 @@ ng.controller("RootController", ["$scope", "$rootScope", "$timeout", function (s
explode: explode,
params: params,
settings: settings,
effectUrl: effectUrl
effectUrl: effectUrl,
demo: demo
});
}]);
29 changes: 24 additions & 5 deletions playground/js/playground.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const baseAddr=`http://blackmiaool.com/jquery-image-explode/playground/playground.html`;
const baseAddr=`http://blackmiaool.com/jquery-image-explode/playground.html`;
var ng = angular.module("app", []);

function extend(dest, src) {
Expand All @@ -18,8 +18,14 @@ const settings = {
imageUrl: {
type: "string",
title: "You can use base64 image",
value: "../try-jquery.jpg",
initValue: "../try-jquery.jpg",
value: "./demo.jpg",
initValue: "./demo.jpg",
},
imageWidth: {
type: "number",
title: "The the width(px) of image above",
value: 0,
initValue: 300,
},

};
Expand All @@ -32,6 +38,11 @@ const effectUrl = {
title: "Share the effect",
value: location.href,
}
const demo = {
name: "demo",
type: "textarea",
title: "Copy to use",
}
const params = [
{
name: "minWidth",
Expand Down Expand Up @@ -173,7 +184,13 @@ function explode() {
$("img").explode(finalParams);
}, 600);
}

function generateDemo() {
const paramsThis={};
params.forEach(function(v){
paramsThis[v.name]=v.value;
});
demo.value=`$("#target").explode(${JSON.stringify(paramsThis)});`;
}
function generateEffectUrl() {
let result = {
settings: {},
Expand All @@ -198,6 +215,7 @@ ng.controller("RootController", ["$scope", "$rootScope", "$timeout", function (s
return;
}
generateEffectUrl();
generateDemo();
if (timeout) {
clearTimeout(timeout);
}
Expand All @@ -224,6 +242,7 @@ ng.controller("RootController", ["$scope", "$rootScope", "$timeout", function (s
explode,
params,
settings,
effectUrl
effectUrl,
demo
});
}]);
1 change: 1 addition & 0 deletions playground/less/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
.mode {
.share {
text-align: left;
margin-bottom: 10px;
}
textarea {
word-break: break-all;
Expand Down
Binary file removed try-jquery.jpg
View file
Binary file not shown.

0 comments on commit 5253a44

Please sign in to comment.