diff --git a/demos/avatar.jpg b/demos/avatar.jpg new file mode 100644 index 0000000..2504451 Binary files /dev/null and b/demos/avatar.jpg differ diff --git a/demos/countUp.html b/demos/countUp.html new file mode 100644 index 0000000..d3205e8 --- /dev/null +++ b/demos/countUp.html @@ -0,0 +1,20 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/demos/image-picker.html b/demos/image-picker.html index f30d7d9..4fb5ccb 100644 --- a/demos/image-picker.html +++ b/demos/image-picker.html @@ -5,13 +5,14 @@ Image Picker + diff --git a/demos/test.html b/demos/test.html new file mode 100644 index 0000000..2010a1f --- /dev/null +++ b/demos/test.html @@ -0,0 +1,32 @@ + + + + + Document + + +
+ + + \ No newline at end of file diff --git a/lib/countUp/index.js b/lib/countUp/index.js new file mode 100644 index 0000000..c62a58f --- /dev/null +++ b/lib/countUp/index.js @@ -0,0 +1,246 @@ +/* + + countUp.js + by @inorganik + +*/ + +// target = id of html element or var of previously selected html element where counting occurs +// startVal = the value you want to begin at +// endVal = the value you want to arrive at +// decimals = number of decimal places, default 0 +// duration = duration of animation in seconds, default 2 +// options = optional object of options (see below) + +var CountUp = function(target, startVal, endVal, decimals, duration, options) { + + // make sure requestAnimationFrame and cancelAnimationFrame are defined + // polyfill for browsers without native support + // by Opera engineer Erik Möller + var lastTime = 0; + var vendors = ['webkit', 'moz', 'ms', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; + } + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } + + var self = this; + self.version = function () { return '1.8.5'; }; + + function formatNumber(num) { + num = num.toFixed(self.decimals); + num += ''; + var x, x1, x2, rgx; + x = num.split('.'); + x1 = x[0]; + x2 = x.length > 1 ? self.options.decimal + x[1] : ''; + rgx = /(\d+)(\d{3})/; + if (self.options.useGrouping) { + while (rgx.test(x1)) { + x1 = x1.replace(rgx, '$1' + self.options.separator + '$2'); + } + } + return self.options.prefix + x1 + x2 + self.options.suffix; + } + // Robert Penner's easeOutExpo + function easeOutExpo(t, b, c, d) { + return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; + } + function ensureNumber(n) { + return (typeof n === 'number' && !isNaN(n)); + } + + // default options + self.options = { + useEasing: true, // toggle easing + useGrouping: true, // 1,000,000 vs 1000000 + separator: ',', // character to use as a separator + decimal: '.', // character to use as a decimal + easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo + formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above + prefix: '', // optional text before the result + suffix: '' // optional text after the result + }; + + // extend default options with passed options object + if (options && typeof options === 'object') { + for (var key in self.options) { + if (options.hasOwnProperty(key) && options[key] !== null) { + self.options[key] = options[key]; + } + } + } + + if (self.options.separator === '') self.options.useGrouping = false; + + self.initialize = function() { + if (self.initialized) return true; + self.d = (typeof target === 'string') ? document.getElementById(target) : target; + if (!self.d) { + console.error('[CountUp] target is null or undefined', self.d); + return false; + } + self.startVal = Number(startVal); + self.endVal = Number(endVal); + // error checks + if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) { + self.decimals = Math.max(0, decimals || 0); + self.dec = Math.pow(10, self.decimals); + self.duration = Number(duration) * 1000 || 2000; + self.countDown = (self.startVal > self.endVal); + self.frameVal = self.startVal; + self.initialized = true; + return true; + } + else { + console.error('[CountUp] startVal or endVal is not a number', self.startVal, self.endVal); + return false; + } + }; + + // Print value to target + self.printValue = function(value) { + var result = self.options.formattingFn(value); + + if (self.d.tagName === 'INPUT') { + this.d.value = result; + } + else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') { + this.d.textContent = result; + } + else { + this.d.innerHTML = result; + } + }; + + self.count = function(timestamp) { + + if (!self.startTime) { self.startTime = timestamp; } + + self.timestamp = timestamp; + var progress = timestamp - self.startTime; + self.remaining = self.duration - progress; + + // to ease or not to ease + if (self.options.useEasing) { + if (self.countDown) { + self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration); + } else { + self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration); + } + } else { + if (self.countDown) { + self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration)); + } else { + self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration); + } + } + + // don't go past endVal since progress can exceed duration in the last frame + if (self.countDown) { + self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal; + } else { + self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal; + } + + // decimal + self.frameVal = Math.round(self.frameVal*self.dec)/self.dec; + + // format and print value + self.printValue(self.frameVal); + + // whether to continue + if (progress < self.duration) { + self.rAF = requestAnimationFrame(self.count); + } else { + if (self.callback) self.callback(); + } + }; + // start your animation + self.start = function(callback) { + if (!self.initialize()) return; + self.callback = callback; + self.rAF = requestAnimationFrame(self.count); + }; + // toggles pause/resume animation + self.pauseResume = function() { + if (!self.paused) { + self.paused = true; + cancelAnimationFrame(self.rAF); + } else { + self.paused = false; + delete self.startTime; + self.duration = self.remaining; + self.startVal = self.frameVal; + requestAnimationFrame(self.count); + } + }; + // reset to startVal so animation can be run again + self.reset = function() { + self.paused = false; + delete self.startTime; + self.initialized = false; + if (self.initialize()) { + cancelAnimationFrame(self.rAF); + self.printValue(self.startVal); + } + }; + // pass a new endVal and start animation + self.update = function (newEndVal) { + if (!self.initialize()) return; + newEndVal = Number(newEndVal); + if (!ensureNumber(newEndVal)) { + console.error('[CountUp] update() - new endVal is not a number', newEndVal); + return; + } + if (newEndVal === self.frameVal) return; + cancelAnimationFrame(self.rAF); + self.paused = false; + delete self.startTime; + self.startVal = self.frameVal; + self.endVal = newEndVal; + self.countDown = (self.startVal > self.endVal); + self.rAF = requestAnimationFrame(self.count); + }; + + // format startVal on initialization + if (self.initialize()) self.printValue(self.startVal); +}; +window.requestAnimFrame = +(function(callback){ + return window.requestAnimationFrame + ||window.webkitRequestAnimationFrame + ||window.mozRequestAnimationFrame + ||window.oRequestAnimationFrame + ||window.msRequestAnimationFrame + ||function(callback){window.setTimeout(callback,1000/60);};})(); +function drawCharactor(x,y,bgcolor,strokescolor) +{ + ctx.fillStyle ="#"+ bgcolor; +ctx.fillRect(x, y,25,25); +ctx.fill(); +ctx.strokeStyle="#"+ strokescolor; +ctx.strokeRect(x, y,25,25);} +var animate =function(){x +=1, y +=1; +//动态定义图形坐标位置 +ctx.clearRect(0,0, canvaswidth, canvasheight); +//清除画布中的所有图形,以便再次绘制图形 +drawCharactor(x,y,'dd4814','999999'); +//绘制图形 +requestAnimationFrame(animate);} \ No newline at end of file diff --git a/lib/image-picker/index.js b/lib/image-picker/index.js index a166c86..2fd0991 100644 --- a/lib/image-picker/index.js +++ b/lib/image-picker/index.js @@ -1,5 +1,5 @@ { - let FormData = window.FormData + class ImagePicker { constructor(options) { let defaultOptions = { @@ -29,7 +29,8 @@ } initHtml() { let { element } = this.options - let fileInput = (this.domRefs.fileInput = dom.create('')) + let fileInput = + (this.domRefs.fileInput = dom.create('')) dom.append(element, fileInput) } willUpload(formData) { @@ -69,9 +70,12 @@ let { element, upload, parseResponse } = this.options http(upload.method, upload.url, formData).then( responseBody => { + let path = parseResponse(responseBody) + this.didUpload(formData) this.willDownload(path) + // this.didDownload(path) prefetch(path).then( () => { this.didDownload(path) @@ -109,6 +113,7 @@ function http(method, url, data) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() + data.forEach((value,key)=>{console.log(value,key);}) xhr.open(method, url) xhr.onload = () => resolve(xhr.responseText, xhr) xhr.onerror = () => reject(xhr)