From 84dcfc9628fdf675f76d17411b83eb6b7c785c96 Mon Sep 17 00:00:00 2001 From: Feng Weifeng Date: Wed, 7 May 2014 21:04:09 +0800 Subject: [PATCH 01/34] add ps www online support --- .gitignore | 1 + Gruntfile.js | 107 +++++++++++++++++++++++++------ src/css/Calendar.less | 3 +- src/css/CalendarExtension.less | 2 +- src/css/City.less | 5 +- src/css/Dialog.less | 5 +- src/css/Filter.less | 3 +- src/css/FloatTip.less | 5 +- src/css/Lunar.less | 3 +- src/css/Pager.less | 3 +- src/css/PicUploader.less | 5 +- src/css/Rating.less | 4 +- src/css/ScrollBar.less | 5 +- src/css/Select.less | 3 +- src/css/Slider.less | 3 +- src/css/Tabs.less | 3 +- src/css/Tip.less | 3 +- src/css/config.less | 1 + test/templates/OnlineRunner.tmpl | 62 ++++++++++++++++++ 19 files changed, 187 insertions(+), 39 deletions(-) create mode 100644 src/css/config.less create mode 100644 test/templates/OnlineRunner.tmpl diff --git a/.gitignore b/.gitignore index 03a2720..46cdc12 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ node_modules .grunt .DS_Store +.swp dep asset doc/api diff --git a/Gruntfile.js b/Gruntfile.js index 4c31604..3659f8a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,6 +1,6 @@ module.exports = function (grunt) { - var build_prefix = grunt.option('prefix') || 'ecomui'; + var buildPrefix = grunt.option('prefix') || 'ui'; var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ @@ -16,7 +16,10 @@ module.exports = function (grunt) { clean: { before: ['asset', 'bin'], after: ['src/moye'], - afterdoc: ['example/css'] + afterdoc: ['example/css'], + //真实上线后。lib已经和Control合并，并且paths已经配置lib->Control，所以 + //编译完成后，直接删除lib.js + 'after-online': ['asset/online/ui/lib.js'] }, jshint: { @@ -33,6 +36,18 @@ module.exports = function (grunt) { dest: 'asset/css', ext: '.css' }] + }, + online: { + options: { + compress: true + }, + files: [{ + expand: true, + cwd: 'src/css', + src: '*.less', + dest: 'asset/online/ui', + ext: '.css' + }] } }, @@ -70,7 +85,7 @@ module.exports = function (grunt) { expand: true, cwd: '<%=meta.src.main%>/ui', src: '**', - dest: '<%=meta.src.main%>/moye/' + build_prefix, + dest: '<%=meta.src.main%>/moye/' + buildPrefix, flatten: false, filter: 'isFile', }, @@ -108,12 +123,25 @@ module.exports = function (grunt) { generateSourceMaps: false, optimize: 'uglify2'/*, modules: [ - {name: build_prefix + '/Calendar'}, - {name: build_prefix + '/City'} + {name: 'Calendar'}, + {name: 'City'} ]*/ } }, + online: { + options: { + baseUrl: '<%=meta.src.main%>/moye', + dir: 'asset/online/', + skipDirOptimize: false, + preserveLicenseComments: false, + generateSourceMaps: false, + optimize: 'uglify2', + modules: [ + {name: buildPrefix + '/Control'}, + ] + } + } }, connect: { @@ -144,10 +172,21 @@ module.exports = function (grunt) { } } }, + online: { + src: './asset/online/ui/*.js', + options: { + outfile: 'SpecRunner.html', + keepRunner: true, + specs: 'test/spec/*Spec.js', + vendor: [], + host: 'http://localhost:<%= connect.test.options.port %>', + template: 'test/templates/OnlineRunner.tmpl' + } + }, istanbul: { src: './<%=meta.src.main%>/*/*.js', options: { - specs: ['test/spec/*Spec.js'], + specs: '<%= jasmine.requirejs.options.specs %>', vendor: [], outfile: 'SpecRunner.html', keepRunner: true, @@ -170,23 +209,22 @@ module.exports = function (grunt) { } }, - karma: { - options: { - configFile: 'test/config.js', - reporters: 'dots', - singleRun: true - }, - dev: { - browsers: ['PhantomJS'] - } - }, - 'gh-pages': { options: { base: './', message: 'Auto-generated commit by grunt' }, src: ['doc/api/*', 'example/**', 'src/*/*'] + }, + + 'join-css-js': { + online: { + files: [{ + expand: true, + cwd: 'asset/online/ui', + src: '*.js' + }] + } } }); @@ -202,12 +240,43 @@ module.exports = function (grunt) { } ); + //合并组件的js、css文件，这样模板开发者就不用再关心css的引入问题 + grunt.registerMultiTask('join-css-js', 'join ui css and js', function(){ + this.files.forEach(function(file){ + var files = file.src.filter(function(filePath) { + var cssPath = filePath.replace(/\.js$/, '.css'); + if (!grunt.file.exists(filePath) || !grunt.file.exists(cssPath)) { + return false; + } else { + return true; + } + }).map(function(filePath) { + var cssPath = filePath.replace(/\.js$/, '.css'); + var js = grunt.file.read(filePath), + css = grunt.file.read(cssPath); + var content = "A.insertCss(" + JSON.stringify(css) + ");"; + content += js; + grunt.file.write(filePath, content); + grunt.file.delete(cssPath); + grunt.log.writeln(filePath + ' join css and js completed.'); + return filePath; + }); + }); + debugger; + }); + + + grunt.registerTask('base', ['clean:before', 'jshint', 'lesslint', 'less:compile', 'csslint']); + grunt.registerTask('base-online', ['clean:before', 'jshint', 'lesslint', 'csslint']); - grunt.registerTask('base', ['clean:before', 'jshint', 'lesslint', 'less', 'csslint']); grunt.registerTask('build', ['base', 'copy:build', 'requirejs:build', 'clean:after']); grunt.registerTask('test', ['base', 'connect', 'jasmine:requirejs']); grunt.registerTask('cover', ['base', 'connect', 'jasmine:istanbul']); grunt.registerTask('default', ['base']); - grunt.registerTask('page', ['less', 'copy:doc', 'jsdoc', 'gh-pages', 'clean:afterdoc']); + grunt.registerTask('example', ['less', 'copy:doc']); + grunt.registerTask('page', ['example', 'jsdoc', 'gh-pages', 'clean:afterdoc']); + grunt.registerTask('build-online', ['base-online', 'copy:build', 'requirejs:online', 'less:online', + 'join-css-js:online', 'clean:after', 'clean:after-online']); + grunt.registerTask('test-online', ['build-online', 'connect', 'jasmine:online']); } diff --git a/src/css/Calendar.less b/src/css/Calendar.less index db148e9..844ee64 100644 --- a/src/css/Calendar.less +++ b/src/css/Calendar.less @@ -1,4 +1,5 @@ -@cal-prefix: ecl-ui-cal; +@import "./config.less"; +@cal-prefix: e(%('%s-cal', @ui-prefix)); .@{cal-prefix} h3, .@{cal-prefix}-pre, diff --git a/src/css/CalendarExtension.less b/src/css/CalendarExtension.less index 18cd647..746500a 100644 --- a/src/css/CalendarExtension.less +++ b/src/css/CalendarExtension.less @@ -51,4 +51,4 @@ .menu-month-options a:hover { background-color: #41537B; color: white; -} \ No newline at end of file +} diff --git a/src/css/City.less b/src/css/City.less index 3e46678..24cc59b 100644 --- a/src/css/City.less +++ b/src/css/City.less @@ -1,4 +1,5 @@ -@city-prefix: ecl-ui-city; +@import "./config.less"; +@city-prefix: e(%('%s-city', @ui-prefix)); .@{city-prefix} { width: 360px; @@ -57,4 +58,4 @@ text-align: center; text-decoration: none; } -} \ No newline at end of file +} diff --git a/src/css/Dialog.less b/src/css/Dialog.less index be13026..2aa2f29 100644 --- a/src/css/Dialog.less +++ b/src/css/Dialog.less @@ -1,4 +1,5 @@ -@dialog-prefix: ecl-ui-dialog; +@import "./config.less"; +@dialog-prefix: e(%('%s-dialog', @ui-prefix)); .@{dialog-prefix} { position:absolute; @@ -63,4 +64,4 @@ font-size: 13px; vertical-align: middle; } -} \ No newline at end of file +} diff --git a/src/css/Filter.less b/src/css/Filter.less index ccab5dc..47ef3ce 100644 --- a/src/css/Filter.less +++ b/src/css/Filter.less @@ -1,4 +1,5 @@ -@filter-prefix: ecl-ui-filter; +@import "./config.less"; +@filter-prefix: e(%('%s-filter', @ui-prefix)); .@{filter-prefix} { diff --git a/src/css/FloatTip.less b/src/css/FloatTip.less index 91ba11f..fa3ac68 100644 --- a/src/css/FloatTip.less +++ b/src/css/FloatTip.less @@ -1,4 +1,5 @@ -@floattip-prefix: ecl-ui-floattip; +@import "./config.less"; +@floattip-prefix: e(%('%s-floattip', @ui-prefix)); .@{floattip-prefix}{ position: fixed; @@ -20,4 +21,4 @@ color: #D83828; font-size: 11pt; } -} \ No newline at end of file +} diff --git a/src/css/Lunar.less b/src/css/Lunar.less index c018010..91e27c5 100644 --- a/src/css/Lunar.less +++ b/src/css/Lunar.less @@ -1,4 +1,5 @@ -@lunar-prefix: ecl-ui-lunar; +@import "./config.less"; +@lunar-prefix: e(%('%s-lunar', @ui-prefix)); .@{lunar-prefix}-pre, .@{lunar-prefix}-next { diff --git a/src/css/Pager.less b/src/css/Pager.less index 3255b22..f0fda11 100644 --- a/src/css/Pager.less +++ b/src/css/Pager.less @@ -1,4 +1,5 @@ -@pager-prefix: ecl-ui-pager; +@import "./config.less"; +@pager-prefix: e(%('%s-pager', @ui-prefix)); .@{pager-prefix} { display: inline-block; diff --git a/src/css/PicUploader.less b/src/css/PicUploader.less index 8870e81..dd95216 100644 --- a/src/css/PicUploader.less +++ b/src/css/PicUploader.less @@ -1,4 +1,5 @@ -@picuploader-prefix: ecl-ui-picuploader; +@import "./config.less"; +@picuploader-prefix: e(%('%s-picuploader', @ui-prefix)); .@{picuploader-prefix}- { &picker { @@ -116,4 +117,4 @@ .@{picuploader-prefix}-close { display: none; } -} \ No newline at end of file +} diff --git a/src/css/Rating.less b/src/css/Rating.less index 1cce36a..88b8ad8 100644 --- a/src/css/Rating.less +++ b/src/css/Rating.less @@ -1,4 +1,6 @@ -@rating-prefix: ecl-ui-rating; +@import "./config.less"; +@rating-prefix: e(%('%s-rating', @ui-prefix)); + .@{rating-prefix} {} .@{rating-prefix}-stars { diff --git a/src/css/ScrollBar.less b/src/css/ScrollBar.less index 4d6df3a..fd8f448 100644 --- a/src/css/ScrollBar.less +++ b/src/css/ScrollBar.less @@ -1,4 +1,5 @@ -@scrollbar-prefix: ecl-ui-scrollbar; +@import "./config.less"; +@scrollbar-prefix: e(%('%s-scrollbar', @ui-prefix)); @scrollbar-width: 500px; @scrollbar-height: 300px; @@ -95,4 +96,4 @@ height: @scrollbar-thumb-size; } -} \ No newline at end of file +} diff --git a/src/css/Select.less b/src/css/Select.less index ea5550f..a2fdb08 100644 --- a/src/css/Select.less +++ b/src/css/Select.less @@ -1,4 +1,5 @@ -@sel-prefix: ecl-ui-sel; +@import "./config.less"; +@sel-prefix: e(%('%s-sel', @ui-prefix)); // 选单目标容器 .@{sel-prefix}-target { diff --git a/src/css/Slider.less b/src/css/Slider.less index 2846a06..b7f6a0d 100644 --- a/src/css/Slider.less +++ b/src/css/Slider.less @@ -1,4 +1,5 @@ -@slider-prefix: ecl-ui-slider; +@import "./config.less"; +@slider-prefix: e(%('%s-slider', @ui-prefix)); @slider-width: 423px; //slider宽度 @slider-height: 638px; //slider高度 diff --git a/src/css/Tabs.less b/src/css/Tabs.less index ad8817d..eda8d6e 100644 --- a/src/css/Tabs.less +++ b/src/css/Tabs.less @@ -1,4 +1,5 @@ -@pager-prefix: ecl-ui-tabs; +@import "./config.less"; +@pager-prefix: e(%('%s-tabs', @ui-prefix)); .@{pager-prefix}-labels { list-style: none; diff --git a/src/css/Tip.less b/src/css/Tip.less index 191f191..58db64f 100644 --- a/src/css/Tip.less +++ b/src/css/Tip.less @@ -1,4 +1,5 @@ -@tip-prefix: ecl-ui-tip; +@import "./config.less"; +@tip-prefix: e(%('%s-tip', @ui-prefix)); @tip-border-color: #c1d5ea; @tip-border-width: 8px; @tip-background-color: #e2eefa; diff --git a/src/css/config.less b/src/css/config.less new file mode 100644 index 0000000..2c1a48b --- /dev/null +++ b/src/css/config.less @@ -0,0 +1 @@ +@ui-prefix: ecl-ui; diff --git a/test/templates/OnlineRunner.tmpl b/test/templates/OnlineRunner.tmpl new file mode 100644 index 0000000..e01fa67 --- /dev/null +++ b/test/templates/OnlineRunner.tmpl @@ -0,0 +1,62 @@ + + + + + Jasmine Spec Runner +<% css.forEach(function(style){ %> + + + + + +<% }) %> +<% with (scripts) { %> + <% [].concat(polyfills, jasmine, vendor, helpers, reporters, start).forEach(function(script){ %> + + <% }) %> + +<% }; %> + + + + + From 42219553d07a9a4d303047a1bbb56879aabf7f91 Mon Sep 17 00:00:00 2001 From: Feng Weifeng Date: Thu, 8 May 2014 13:45:52 +0800 Subject: [PATCH 02/34] =?UTF-8?q?=E5=B0=86prefix=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E5=B8=B8=E9=87=8F=E6=94=B9=E6=88=90Grunt=E7=94=9F=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- Gruntfile.js | 83 +++++++++++++++++++++++++--------- example/Calendar.html | 2 +- example/CalendarExtension.html | 2 +- example/City.html | 2 +- example/Dialog.html | 2 +- example/Filter.html | 2 +- example/FloatTip.html | 2 +- example/Lazy.html | 2 +- example/Lunar.html | 2 +- example/Pager.html | 2 +- example/PicUploader.html | 2 +- example/Rating.html | 2 +- example/ScrollBar.html | 2 +- example/Select.html | 2 +- example/Slider.html | 2 +- example/Tabs.html | 2 +- example/Tip.html | 2 +- example/log.html | 2 +- src/css/config.less | 2 +- src/ui/Calendar.js | 3 +- src/ui/City.js | 3 +- src/ui/Control.js | 9 ++++ src/ui/Dialog.js | 5 +- src/ui/DialogFactory.js | 5 +- src/ui/Filter.js | 3 +- src/ui/FloatTip.js | 5 +- src/ui/Lunar.js | 3 +- src/ui/Pager.js | 3 +- src/ui/PicUploader.js | 5 +- src/ui/Popup.js | 3 +- src/ui/Rating.js | 5 +- src/ui/ScrollBar.js | 5 +- src/ui/Select.js | 3 +- src/ui/Slider.js | 5 +- src/ui/Tabs.js | 3 +- src/ui/Tip.js | 3 +- test/spec/CalendarSpec.js | 6 ++- test/spec/CitySpec.js | 10 ++-- test/spec/DialogFactorySpec.js | 16 +++++-- test/spec/DialogSpec.js | 8 ++-- test/spec/FilterSpec.js | 11 +++-- test/spec/FloatTipSpec.js | 2 +- test/spec/LazyImgSpec.js | 2 +- test/spec/LazySpec.js | 2 +- test/spec/LunarSpec.js | 12 +++-- test/spec/PagerSpec.js | 10 ++-- test/spec/PicUploaderSpec.js | 8 ++-- test/spec/RatingSpec.js | 23 ++++++---- test/spec/ScrollBarSpec.js | 26 ++++++----- test/spec/SelectSpec.js | 21 +++++---- test/spec/SliderAnimSpec.js | 3 +- test/spec/SliderSpec.js | 40 ++++++++-------- test/spec/TabsSpec.js | 16 ++++--- test/spec/TipSpec.js | 3 +- test/spec/libSpec.js | 3 +- 56 files changed, 263 insertions(+), 151 deletions(-) diff --git a/.gitignore b/.gitignore index 46cdc12..be25a54 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ node_modules .grunt .DS_Store -.swp +**/*.swp dep asset doc/api diff --git a/Gruntfile.js b/Gruntfile.js index 3659f8a..eac46b0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,6 +1,5 @@ module.exports = function (grunt) { - var buildPrefix = grunt.option('prefix') || 'ui'; var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ @@ -10,28 +9,35 @@ module.exports = function (grunt) { src: { main: 'src', test: 'test/spec' - } + }, + cssPrefix: 'ecl-ui', + buildPrefix: 'ui', + version: pkg.version }, clean: { before: ['asset', 'bin'], - after: ['src/moye'], + after: ['src/moye', 'asset/moye/css'], afterdoc: ['example/css'], //真实上线后。lib已经和Control合并，并且paths已经配置lib->Control，所以 //编译完成后，直接删除lib.js - 'after-online': ['asset/online/ui/lib.js'] + 'after-online': [ + 'asset/online/ui/lib.js', + 'asset/online/ui/config.js', + 'asset/online/css' + ] }, jshint: { options: grunt.file.readJSON('.jshintrc'), - files: ['<%=meta.src.main%>/ui/*.js', '<%=meta.src.test%>/*.js'] + files: ['<%=meta.src.main%>/moye/*.js', '<%=meta.src.test%>/*.js'] }, less: { compile: { files: [{ expand: true, - cwd: 'src/css', + cwd: 'src/moye/css', src: '*.less', dest: 'asset/css', ext: '.css' @@ -43,7 +49,7 @@ module.exports = function (grunt) { }, files: [{ expand: true, - cwd: 'src/css', + cwd: 'src/moye/css', src: '*.less', dest: 'asset/online/ui', ext: '.css' @@ -59,11 +65,11 @@ module.exports = function (grunt) { }, lesslint: { - src: ['src/**/*.less'] + src: ['src/moye/**/*.less'] }, jsdoc : { - files: ['src/**/*.js'], + files: ['src/moye/*/*.js'], options: { configure: '.jsdocrc', destination: 'doc/api' @@ -81,11 +87,19 @@ module.exports = function (grunt) { }, copy: { - build: { + js: { expand: true, cwd: '<%=meta.src.main%>/ui', src: '**', - dest: '<%=meta.src.main%>/moye/' + buildPrefix, + dest: '<%=meta.src.main%>/moye/ui', + flatten: false, + filter: 'isFile', + }, + css: { + expand: true, + cwd: '<%=meta.src.main%>/css', + src: '**', + dest: '<%=meta.src.main%>/moye/css', flatten: false, filter: 'isFile', }, @@ -138,7 +152,7 @@ module.exports = function (grunt) { generateSourceMaps: false, optimize: 'uglify2', modules: [ - {name: buildPrefix + '/Control'}, + {name: '<%= meta.buildPrefix%>/Control'}, ] } } @@ -166,7 +180,7 @@ module.exports = function (grunt) { template: require('grunt-template-jasmine-requirejs'), templateOptions: { requireConfig: { - baseUrl: './<%=meta.src.main%>/', + baseUrl: './<%=meta.src.main%>/moye', urlArgs: '?' + (+new Date).toString(36) } } @@ -184,7 +198,7 @@ module.exports = function (grunt) { } }, istanbul: { - src: './<%=meta.src.main%>/*/*.js', + src: './<%=meta.src.main%>/moye/ui/*.js', options: { specs: '<%= jasmine.requirejs.options.specs %>', vendor: [], @@ -200,7 +214,7 @@ module.exports = function (grunt) { template: require('grunt-template-jasmine-requirejs'), templateOptions: { requireConfig: { - baseUrl: '.grunt/grunt-contrib-jasmine/<%= meta.src.main %>/', + baseUrl: '.grunt/grunt-contrib-jasmine/<%= meta.src.main %>/moye', urlArgs: '?' + (+new Date).toString(36) } } @@ -225,6 +239,19 @@ module.exports = function (grunt) { src: '*.js' }] } + }, + + 'tmpl': { + build: { + files:[ + { + expand: true, + src: '**/config.*', + cwd: '<%=meta.src.main%>/moye/', + filter: 'isFile', + } + ] + } } }); @@ -258,7 +285,7 @@ module.exports = function (grunt) { content += js; grunt.file.write(filePath, content); grunt.file.delete(cssPath); - grunt.log.writeln(filePath + ' join css and js completed.'); + grunt.log.writeln('join-css-js: ' + filePath); return filePath; }); }); @@ -266,17 +293,31 @@ module.exports = function (grunt) { }); - grunt.registerTask('base', ['clean:before', 'jshint', 'lesslint', 'less:compile', 'csslint']); - grunt.registerTask('base-online', ['clean:before', 'jshint', 'lesslint', 'csslint']); + //将文件作为模板处理，变量变量使用meta信息，用于替换一些常量 + grunt.registerMultiTask('tmpl', 'process file as a template using meta data', function(){ + this.files.forEach(function(file){ + file.src.forEach(function(filePath){ + var meta = grunt.config('meta'); + var tpl = grunt.file.read(filePath), + content = grunt.util._.template(tpl, meta); + grunt.file.write(filePath, content); + grunt.log.writeln('tmpl: ' + filePath); + }); + }); + }); + + + grunt.registerTask('base', ['clean:before', 'copy:js', 'copy:css', 'tmpl', 'jshint', 'lesslint', 'less:compile', 'csslint']); + grunt.registerTask('base-online', ['clean:before','copy:js', 'copy:css', 'tmpl', 'jshint', 'lesslint', 'csslint']); - grunt.registerTask('build', ['base', 'copy:build', 'requirejs:build', 'clean:after']); + grunt.registerTask('build', ['base', 'requirejs:build', 'clean:after']); grunt.registerTask('test', ['base', 'connect', 'jasmine:requirejs']); grunt.registerTask('cover', ['base', 'connect', 'jasmine:istanbul']); grunt.registerTask('default', ['base']); - grunt.registerTask('example', ['less', 'copy:doc']); + grunt.registerTask('example', ['copy', 'tmpl', 'less', 'copy:doc']); grunt.registerTask('page', ['example', 'jsdoc', 'gh-pages', 'clean:afterdoc']); - grunt.registerTask('build-online', ['base-online', 'copy:build', 'requirejs:online', 'less:online', + grunt.registerTask('build-online', ['base-online', 'requirejs:online', 'less:online', 'join-css-js:online', 'clean:after', 'clean:after-online']); grunt.registerTask('test-online', ['build-online', 'connect', 'jasmine:online']); } diff --git a/example/Calendar.html b/example/Calendar.html index 2f97101..c5e3344 100644 --- a/example/Calendar.html +++ b/example/Calendar.html @@ -25,7 +25,7 @@ (function () { require.config({ - baseUrl: '../src/ui' + baseUrl: '../src/moye/ui' }); require(['lib', 'Calendar'], function (lib, Calendar) { diff --git a/example/CalendarExtension.html b/example/CalendarExtension.html index b992c6b..2eeb4a4 100644 --- a/example/CalendarExtension.html +++ b/example/CalendarExtension.html @@ -25,7 +25,7 @@ (function () { require.config({ - baseUrl: '../src/ui' + baseUrl: '../src/moye/ui' }); require(['lib', 'CalendarExtension'], function (lib, CalendarExtension) { diff --git a/example/City.html b/example/City.html index 4af7a4a..28f12f8 100644 --- a/example/City.html +++ b/example/City.html @@ -22,7 +22,7 @@ (function () { require.config({ - baseUrl: '../src/ui' + baseUrl: '../src/moye/ui' }); require(['lib', 'City'], function (lib, City) { diff --git a/example/Dialog.html b/example/Dialog.html index c51029f..8fdc517 100644 --- a/example/Dialog.html +++ b/example/Dialog.html @@ -53,7 +53,7 @@ + + + + +
+ +
+ + + → + +
+
+
+ + + + + From 024d11a12ea9caba185a546e33c2f74dcf70cd84 Mon Sep 17 00:00:00 2001 From: logosu Date: Wed, 18 Jun 2014 17:37:59 +0800 Subject: [PATCH 11/34] modify Unit.js --- example/Unit.html | 47 +++--- src/ui/Unit.js | 355 +++++++++++++++++++++++++++++++++++++++--- test/spec/UnitSpec.js | 11 +- 3 files changed, 363 insertions(+), 50 deletions(-) diff --git a/example/Unit.html b/example/Unit.html index d703add..040c9fb 100644 --- a/example/Unit.html +++ b/example/Unit.html @@ -59,9 +59,9 @@ $unitCatagory.bind('change', function(){ catagory = $unitCatagory.val(); - initSelect(Unit.getData(catagory)); - calc = Unit.calc; - doCalc(); + calc = Unit.calc; + initSelect(catagory); + doCalc(); }); $from.bind('input propertychange', function(){ @@ -73,7 +73,7 @@ doCalc(); }); - initSelect(Unit.getData(catagory)); + initSelect(catagory); calc = Unit.calc; $from.val(1); doCalc(); @@ -90,20 +90,6 @@ $from.data('lastSearchNumber', number); var rs = calc(catagory, number, unitFrom, unitTo); var num = rs.num; -/* - var str = num + ''; - var arr = str.split(''); - if(str.indexOf('.') < 0 && str.indexOf('e') < 0){ - arr.reverse(); - str = arr.join(''); - str = str.replace(/(\d{3})/g, '$1 '); - arr = str.split(''); - arr.reverse(); - str = arr.join(''); - } - var html = str + $unitTo.find('option:selected').text(); - $('.d2').empty().append(html); -*/ var html = rs.num + $unitTo.find('option:selected').text(); $('.d2').empty().append(html); }else{ @@ -119,22 +105,31 @@ } } - function initSelect(conf){ + function initSelect(catagory){ var temp, uFirst, uSecond, optionStr = ''; + + var data = Unit.getData(catagory); unit = []; - for(var o in conf){ - if(conf.hasOwnProperty(o)){ - var str = conf[o]; - temp = str.split('_'); - uFirst = temp[1]; - uSecond = temp[2] ? temp[2] : ''; + + $.each(data.group, function(i, g){ + if(g.name){ + optionStr += ''; + } + $.each(g.list, function(j, l){ + temp = l.split('_'); + uFirst = temp[0]; + uSecond = temp[1] ? temp[1] : ''; unit.push({ 'uFirst': uFirst, 'uSecond': uSecond }); optionStr += ''; + }); + if(g.name){ + optionStr += ''; } - } + + }); $unitFrom.empty().append(optionStr); $unitTo.empty().append(''+optionStr); } diff --git a/src/ui/Unit.js b/src/ui/Unit.js index e55511c..de90635 100644 --- a/src/ui/Unit.js +++ b/src/ui/Unit.js @@ -3,7 +3,7 @@ * Copyright 2014 Baidu Inc. All rights reserved. * @author subei * @date 2014-05-22 - * + * * 做特殊处理的逻辑(搜special): * 1.time小时转换成分 */ @@ -20,7 +20,7 @@ define(function (require) { EXPONENTIAL_NUM = 4; //算法公式，将所有单位都转换为基本单位（如长度都转换成米）(init)，再转换成需要的单位(calc) - Unit.conf = { + var conf = { 'angle':{ calc: { '圆周':'(x*771.604938)/(Math.pow(10,9))_圆周', @@ -41,7 +41,28 @@ define(function (require) { '秒':'(x*1)_秒', '弧度':'(x*206264.806247)_秒', '豪弧度':'(x*206.264806)_秒' - } + }, + iu: '角度(°)', + group:[ + { + name: '角度制', + list: [ + '圆周', + '直角', + '百分度_(gon)', + '度_(°)', + '分_( ′)', + '秒_(")' + ] + }, + { + name: '弧度制', + list: [ + '弧度_(rad)', + '豪弧度_(mrad)' + ] + } + ] }, 'area': { calc: { @@ -81,7 +102,42 @@ define(function (require) { '亩':'(x*(1/0.0015))/1_平方米', '平方尺':'(x*(1/9))/1_平方米', '平方寸':'(x*(0.01/9))/1_平方米' - } + }, + iu: '平方米(㎡)', + group:[ + { + name: '公制', + list: [ + '平方千米_(km²)', + '公顷_(ha)', + '公亩_(are)', + '平方米_(㎡)', + '平方分米_(dm²)', + '平方厘米_(cm²)', + '平方毫米_(mm²)' + ] + }, + { + name: '英制', + list: [ + '英亩_(acre)', + '平方英里_(sq.mi)', + '平方码_(sq.yd)', + '平方英尺_(sq.ft)', + '平方英寸_(sq.in)', + '平方竿_(sq.rd)' + ] + }, + { + name: '市制', + list: [ + '顷', + '亩', + '平方尺', + '平方寸' + ] + } + ] }, 'byte': { calc: { @@ -103,7 +159,23 @@ define(function (require) { '太字节':'(x*Math.pow(2,40))_字节', '拍字节':'(x*Math.pow(2,50))_字节', '艾字节':'(x*Math.pow(2,60))_字节' - } + }, + iu: '字节(b)', + group:[ + { + name: '', + list: [ + '比特_(bit)', + '字节_(b)', + '千字节_(kb)', + '兆字节_(mb)', + '千兆字节_(gb)', + '太字节_(tb)', + '拍字节_(pb)', + '艾字节_(eb)' + ] + } + ] }, 'density': { calc: { @@ -121,7 +193,21 @@ define(function (require) { '克/立方厘米':'(x*1000)_千克/立方米', '克/立方分米':'(x*1)_千克/立方米', '克/立方米':'(x*1)/1000_千克/立方米' - } + }, + iu:'千克/立方米(kg/m³)', + group:[ + { + name: '', + list: [ + '千克/立方厘米_(kg/cm³)', + '千克/立方分米_(kg/dm³)', + '千克/立方米_(kg/m³)', + '克/立方厘米_(g/cm³)', + '克/立方分米_(g/dm³)', + '克/立方米_(g/m³)' + ] + } + ] }, 'length': { calc: { @@ -167,8 +253,46 @@ define(function (require) { '分':'(x*(0.01/3))/1_米', '厘':'(x*(0.001/3))/1_米', '毫':'(x*(0.0001/3))/1_米' - } - }, + }, + iu: '米(m)', + group:[ + { + name: '公制', + list: [ + '千米_(km)', + '米_(m)', + '分米_(dm)', + '厘米_(cm)', + '毫米_(mm)', + '微米_(um)' + ] + }, + { + name: '英制', + list: [ + '英寸_(in)', + '英尺_(ft)', + '码_(yd)', + '英里_(mi)', + '海里_(nmi)', + '英寻_(fm)', + '弗隆_(fg)' + ] + }, + { + name: '市制', + list: [ + '里', + '丈', + '尺', + '寸', + '分', + '厘', + '毫' + ] + } + ] + }, 'power': { calc: { '瓦':'(x*1)/1_瓦_(W)', @@ -197,7 +321,26 @@ define(function (require) { '英尺·磅/秒':'(x*(745.699872/550))/1_瓦', '焦耳/秒':'(x*1)/1_瓦', '牛顿·米/秒':'(x*1)/1_瓦' - } + }, + iu: '瓦(W)', + group: [ + { + name: '', + list: [ + '瓦_(W)', + '千瓦_(kW)', + '英制马力', + '米制马力', + '马力', + '公斤·米/秒_(kg·m/s)', + '千卡/秒_(kcal/s)', + '英热单位/秒_(Btu/s)', + '英尺·磅/秒_(ft·lb/s)', + '焦耳/秒_(J/s)', + '牛顿·米/秒_(N·m/s)' + ] + } + ] }, 'pressure': { calc: { @@ -229,7 +372,28 @@ define(function (require) { '毫米水柱':'(x*(1/0.101972))/1_帕斯卡', '公斤力/平方厘米':'(x*98066.5)/1_帕斯卡', '公斤力/平方米':'(x*9.80665)/1_帕斯卡' - } + }, + iu: '帕斯卡(Pa)', + group: [ + { + name: '', + list: [ + '帕斯卡_(Pa)', + '千帕_(kpa)', + '百帕_(mpa)', + '标准大气压_(atm)', + '毫米汞柱_(mmHg)', + '英寸汞柱_(in Hg)', + '巴_(bar)', + '毫巴_(mbar)', + '磅力/平方英尺_(psi)', + '磅力/平方英寸_(psf)', + '毫米水柱', + '公斤力/平方厘米_(kgf/cm²)', + '公斤力/平方米_(kgf/㎡)' + ] + } + ] }, 'speed': { calc: { @@ -249,7 +413,22 @@ define(function (require) { '马赫':'(x*340.300000)_米/秒', '英里/时':'(x*447.040000)/1000_米/秒', '英寸/秒':'(x*25.400000)/1000_米/秒' - } + }, + iu: '米/秒(m/s)', + group: [ + { + name: '', + list: [ + '米/秒_(m/s)', + '千米/秒_(km/s)', + '千米/时_(km/h)', + '光速_(c)', + '马赫_(mach)', + '英里/时_(mile/h)', + '英寸/秒_(in/s)' + ] + } + ] }, 'strength': { calc: { @@ -269,7 +448,22 @@ define(function (require) { '公吨力':'(x*9806.650000)_牛', '磅力':'(x*4.448222)_牛', '千磅力':'(x*4448.221615)_牛' - } + }, + iu: '牛(N)', + group: [ + { + name: '', + list: [ + '牛_(N)', + '千牛_(kN)', + '千克力_(kgf)', + '克力', + '公吨力', + '磅力_(lbf)', + '千磅力_(kip)' + ] + } + ] }, 'temperature': { calc: { @@ -285,7 +479,20 @@ define(function (require) { '开氏度':'(x-273.15)+273.15_开氏度', '兰氏度':'(x/1.8-273.15)+273.15_开氏度', '列氏度':'(x*1.25)+273.15_开氏度' - } + }, + iu: '开氏度(K)', + group: [ + { + name: '', + list: [ + '摄氏度_(℃)', + '华氏度_(℉)', + '开氏度_(K)', + '兰氏度_(°R)', + '列氏度_(°Re)' + ] + } + ] }, 'time': { calc: { @@ -306,6 +513,21 @@ define(function (require) { '秒':'(x*1)_秒', '毫秒':'(x*1)/1000_秒' }, + iu: '秒(s)', + group:[ + { + name: '', + list: [ + '年_(yr)', + '周_(week)', + '天_(d)', + '时_(h)', + '分_(min)', + '秒_(s)', + '毫秒_(ms)' + ] + } + ], special: { '时-分': '(x*60)_分_(min)' } @@ -344,7 +566,35 @@ define(function (require) { '亩英尺':'(x*(43560*1728*0.016387064/1000))/1_立方米', '英制加仑':'(x*0.00454609188)/1_立方米', '美制加仑':'(x*(231*0.016387064/1000))/1_立方米' - } + }, + iu: '立方米(m³)', + group: [ + { + name: '公制', + list: [ + '立方米_(m³)', + '立方分米_(dm³)', + '立方厘米_(cm³)', + '立方毫米_(mm³)', + '升_(l)', + '分升_(dl)', + '毫升_(ml)', + '厘升_(cl)', + '公石_(hl)' + ] + }, + { + name: '英制', + list: [ + '立方英尺_(cu ft)', + '立方英寸_(cu in)', + '立方码_(cu yd)', + '亩英尺', + '英制加仑_(uk gal)', + '美制加仑_(us gal)' + ] + } + ] }, 'weight': { calc: { @@ -388,7 +638,44 @@ define(function (require) { '斤':'(x*0.5)/1_千克', '两':'(x*0.05)/1_千克', '钱':'(x*0.005)/1_千克' - } + }, + iu: '千克(kg)', + group:[ + { + name: '公制', + list: [ + '千克_(kg)', + '克_(g)', + '毫克_(mg)', + '吨_(t)', + '公担_(q)' + ] + }, + { + name: '英制', + list: [ + '磅_(lb)', + '盎司_(oz)', + '克拉_(ct)', + '格令_(gr)', + '长吨_(lt)', + '短吨_(st)', + '英担', + '美担', + '英石_(st)', + '打兰_(dr)' + ] + }, + { + name: '市制', + list: [ + '担', + '斤', + '两', + '钱' + ] + } + ] }, 'work': { calc: { @@ -413,7 +700,24 @@ define(function (require) { '大卡':'(x*4185.851820846)/1_焦耳', '英热单位':'(x*1055.05585262)/1_焦耳', '英尺·磅':'(x*1.3557483731)/1_焦耳' - } + }, + iu: '焦耳(J)', + group:[ + { + name: '焦耳(J)', + list: [ + '焦耳_(J)', + '公斤·米_(kg·m)', + '米制马力·时_(hp·h)', + '英制马力·时_(UKHp·h)', + '千瓦·时_(kW·h)', + '卡_(cal)', + '千卡_(kcal)', + '英热单位_(btu)', + '英尺·磅_(ft·lb)' + ] + } + ] } }; @@ -431,19 +735,19 @@ define(function (require) { * @uFrom String, not null, 原单位 * @uTo String, not null, 目标单位 * @keepOrigin Boolean, null，是否返回原始结果值，默认false，返回格式化后的结果值 - * + * * return String, 计算结果值 */ Unit.calc = function(uType, x, uFrom, uTo, keepOrigin){ - var unit = Unit.conf[uType], - conv = Unit.explain(x ,unit.init[uFrom]), + var unit = conf[uType], + init = Unit.explain(x ,unit.init[uFrom]), special = unit.special && unit.special[uFrom + '-' + uTo] || null, num, unitFirst, unitSecond; //如果某个单位有特殊处理 if(special){ rs = Unit.explain(x, special); }else{ - rs = Unit.explain( (new Function('return ' + conv[0]))() , unit.calc[uTo]); + rs = Unit.explain( (new Function('return ' + init[0]))() , unit.calc[uTo]); } num = (new Function('return ' + rs[0]))(); unitFirst = rs[1]; @@ -456,7 +760,7 @@ define(function (require) { }; Unit.format = function(num){ - //格式策略，整体不超过14位 + //格式策略，整体不超过14位 var strNum = num + '', isFloat = false, arr, intPart, decPart; @@ -518,8 +822,15 @@ define(function (require) { } return { + getLength: function(uType){ + var len = 0; + $.each(conf[uType].group, function(i, g){ + len += g.list.length; + }); + return len; + }, getData: function(uType){ - return Unit.conf[uType].calc; + return conf[uType]; }, calc: function(uType, x, uFrom, uTo){ return Unit.calc(uType, x, uFrom, uTo); diff --git a/test/spec/UnitSpec.js b/test/spec/UnitSpec.js index 581d0a8..9fd5830 100644 --- a/test/spec/UnitSpec.js +++ b/test/spec/UnitSpec.js @@ -24,9 +24,16 @@ define(function (require) { rs = Unit.calcOrigin('length', 111111111111111111111111, '千米', '海里'); expect(rs.num).toBe(5.999520038396928e+22); + //获取某一公式的单位数量 + rs = Unit.getLength('length'); + expect(rs).toBe(20); + //获取公式 - rs = Unit.getData('length'); - expect(rs).toBeDefined(); + rs = Unit.getData('length'); + expect(rs.calc).toBeDefined(); + expect(rs.init).toBeDefined(); + expect(rs.group).toBeDefined(); + expect(rs.iu).toBeDefined(); }); From 78d95aa382d932f7d79c755c4af1a52453bbceb6 Mon Sep 17 00:00:00 2001 From: logosu Date: Wed, 18 Jun 2014 18:51:27 +0800 Subject: [PATCH 12/34] modify syntax in Unit.js --- src/ui/Unit.js | 180 ++++++++++++++++++++++++++----------------------- 1 file changed, 95 insertions(+), 85 deletions(-) diff --git a/src/ui/Unit.js b/src/ui/Unit.js index de90635..7de07dd 100644 --- a/src/ui/Unit.js +++ b/src/ui/Unit.js @@ -9,19 +9,14 @@ */ define(function (require) { - - var Unit = {}; - - //最长限制 - var MAX_NUM = 14, - //小数位数 - DECIMAL_NUM = 7, - //科学计数法小数点后位数 - EXPONENTIAL_NUM = 4; + + var MAX_NUM = 14, //格式化后的最长限制 + DECIMAL_NUM = 7, //四舍五入时小数点后位数 + EXPONENTIAL_NUM = 4; //科学计数法小数点后位数 //算法公式，将所有单位都转换为基本单位（如长度都转换成米）(init)，再转换成需要的单位(calc) var conf = { - 'angle':{ + 'angle': { calc: { '圆周':'(x*771.604938)/(Math.pow(10,9))_圆周', '直角':'(x*3.086420)/(Math.pow(10,6))_直角', @@ -722,125 +717,140 @@ define(function (require) { }; /* - *公式转换函数，内部使用 - */ - Unit.explain = function(x, formula){ - return formula.replace('x', x).split('_'); - }; - - /* - *计算入口 - * @uType String, not null, 度量衡类型(如length, time) - * @x Number, not null, 输入的值 - * @uFrom String, not null, 原单位 - * @uTo String, not null, 目标单位 - * @keepOrigin Boolean, null，是否返回原始结果值，默认false，返回格式化后的结果值 + * 计算 + * @uType String, not null, 单位类型(如length, time) + * @num Number, not null, 输入值 + * @uFrom String, not null, 原单位 + * @uTo String, not null, 目标单位 + * @keepOrigin Boolean, null， 保持原始结果(不进行格式化)，默认false * - * return String, 计算结果值 + * return Object, 计算结果 */ - Unit.calc = function(uType, x, uFrom, uTo, keepOrigin){ - var unit = conf[uType], - init = Unit.explain(x ,unit.init[uFrom]), - special = unit.special && unit.special[uFrom + '-' + uTo] || null, + function calc( uType, num, uFrom, uTo, keepOrigin ) { + var unit = conf[ uType ], + init = explain( num ,unit.init[ uFrom ] ), + special = unit.special && unit.special[ uFrom + '-' + uTo ] || null, num, unitFirst, unitSecond; - //如果某个单位有特殊处理 - if(special){ - rs = Unit.explain(x, special); - }else{ - rs = Unit.explain( (new Function('return ' + init[0]))() , unit.calc[uTo]); + + //对某一类的某一单位做特殊算法处理 + if ( special ) { + rs = explain( num, special ); + } else { + rs = explain( ( new Function( 'return ' + init[ 0 ] ) )() , unit.calc[ uTo ] ); } - num = (new Function('return ' + rs[0]))(); - unitFirst = rs[1]; - unitSecond = rs[2] || ''; + //计算出最终结果(eval转换后的公式) + num = ( new Function( 'return ' + rs[ 0 ] ) )(); + //中文单位 + unitFirst = rs[ 1 ]; + //英文单位，有的可能没有 + unitSecond = rs[ 2 ] || ''; + return { - num: keepOrigin ? num : Unit.format(num), + num: keepOrigin ? num : format( num ), unitFirst: unitFirst, unitSecond: unitSecond ? unitSecond : '' }; }; - Unit.format = function(num){ + /* + * 对结果进行格式化(内部使用) + */ + function format( num ) { //格式策略，整体不超过14位 var strNum = num + '', isFloat = false, arr, intPart, decPart; //只有包括.且整数位小于14位才认为是浮点数（便于以后格式化） - if(strNum.indexOf('.') > -1){ - var match = strNum.match(/\.\d+e[+-](\d+)$/); - if(match && match[1]){ - isFloat = match[1]*1 < (MAX_NUM - 1) ? true : false; - }else{ + if ( strNum.indexOf( '.' ) > -1 ) { + var match = strNum.match( /\.\d+e[+-](\d+)$/ ); + if ( match && match[ 1 ] ) { + isFloat = match[ 1 ] * 1 < ( MAX_NUM - 1 ) ? true : false; + } else { isFloat = true; } } //小数处理逻辑 - if(isFloat){ + if ( isFloat ) { //-1 ~ 1之间的小数 - if(num > -1 && num < 1 && num != 0){ + if ( num > -1 && num < 1 && num != 0 ) { //小数位开始有5个及以上0，转换为科学计数法，计数小数保留四位 - if(Math.abs(num) < 0.00001){ - num = Unit.exponential(num, EXPONENTIAL_NUM); - }else{ + if ( Math.abs( num ) < 0.00001 ) { + num = exponential( num, EXPONENTIAL_NUM ); + } else { //保留7位小数 - num = num.toFixed(DECIMAL_NUM)*1; + num = num.toFixed( DECIMAL_NUM ) * 1; } - }else{ - arr = strNum.split('.'); - intPart = arr[0]; - decPart = arr[1]; + } else { + arr = strNum.split( '.' ); + intPart = arr[ 0 ]; + decPart = arr[ 1 ]; //整体超长 - if(strNum.length > MAX_NUM){ + if ( strNum.length > MAX_NUM ) { //整数部分超长 - if(intPart.length >= MAX_NUM){ - num = Unit.exponential(num, EXPONENTIAL_NUM); - }else{ - if(intPart.length < DECIMAL_NUM - 1){ - num = num.toFixed(DECIMAL_NUM)*1; - }else{ - num = num.toFixed(MAX_NUM - intPart.length - 1)*1; + if( intPart.length >= MAX_NUM ) { + num = exponential( num, EXPONENTIAL_NUM ); + } else { + if ( intPart.length < DECIMAL_NUM - 1 ) { + num = num.toFixed( DECIMAL_NUM ) * 1; + } else { + num = num.toFixed( MAX_NUM - intPart.length - 1 ) * 1; } } - }else{ - if(decPart.length > DECIMAL_NUM){ - num = num.toFixed(DECIMAL_NUM)*1; + } else { + if ( decPart.length > DECIMAL_NUM ) { + num = num.toFixed( DECIMAL_NUM ) * 1; } } } - }else{ - if(strNum.length > MAX_NUM){ - num = Unit.exponential(num, EXPONENTIAL_NUM); + } else { + if ( strNum.length > MAX_NUM ){ + num = exponential( num, EXPONENTIAL_NUM ); } } return num + ''; }; - //科学计数法（保留小数n位)，如果计数小数位均为0，去掉 - Unit.exponential = function(num, n){ - var num2 = num.toExponential(n); - num = (num2 + '').match(new RegExp("\.0{" + n + "}e")) ? num.toExponential(0) : num2; - return num; + /* + * 转换公式的快捷函数(内部使用) + */ + function explain( num, formula ) { + return formula.replace( 'x', num ).split( '_' ); + }; + + /* + * 科学计数法快捷函数(内部使用) + */ + function exponential( num, n ) { + //保留科学计数法小数后n位 + var numExp = num.toExponential( n ); + //如果计数小数位均为0，去掉 + return ( numExp + '' ).match( new RegExp( "\.0{" + n + "}e" ) ) ? num.toExponential( 0 ) : numExp; } return { - getLength: function(uType){ + //获取某一类的所有单位数量 + getLength: function( uType ) { var len = 0; - $.each(conf[uType].group, function(i, g){ + for( var i = 0, g; g = conf[ uType ].group[i]; i++ ) { len += g.list.length; - }); + }; return len; }, - getData: function(uType){ - return conf[uType]; + //返回某一类的所有配置项 + getData: function( uType ) { + return conf[ uType ]; }, - calc: function(uType, x, uFrom, uTo){ - return Unit.calc(uType, x, uFrom, uTo); + //计算，返回格式化后的结果 + calc: function( uType, x, uFrom, uTo ) { + return calc( uType, x, uFrom, uTo ); }, - calcOrigin: function(uType, x, uFrom, uTo){ - return Unit.calc(uType, x, uFrom, uTo, true); + //计算，返回原始结果 + calcOrigin: function( uType, x, uFrom, uTo ) { + return calc( uType, x, uFrom, uTo, true ); }, - format: function(num){ - return Unit.format(num); - }, - a:Unit + //格式化 + format: function( num ) { + return format( num ); + } }; }); From cda0a65ccd25fec54f595a9798fef8b3de46458f Mon Sep 17 00:00:00 2001 From: logosu Date: Tue, 15 Jul 2014 12:45:36 +0800 Subject: [PATCH 13/34] Unit.js bugfix by subei --- src/ui/Unit.js | 125 +++++++++++++++++++++++++------------------------ 1 file changed, 65 insertions(+), 60 deletions(-) diff --git a/src/ui/Unit.js b/src/ui/Unit.js index 7de07dd..dc1b425 100644 --- a/src/ui/Unit.js +++ b/src/ui/Unit.js @@ -18,24 +18,24 @@ define(function (require) { var conf = { 'angle': { calc: { - '圆周':'(x*771.604938)/(Math.pow(10,9))_圆周', - '直角':'(x*3.086420)/(Math.pow(10,6))_直角', - '百分度':'(x*308.641975)/(Math.pow(10,6))_百分度_(gon)', - '度':'(x*2.777778)/1000_度_(°)', - '分':'(x*16.666667)/1000_分_( ′)', - '秒':'(x*1)_秒_(")', - '弧度':'(x*4.848137)/(Math.pow(10,6))_弧度_(rad)', - '豪弧度':'(x*4.848137)/1000_豪弧度_(mrad)' + '圆周': '(x*2.777778)/1000_圆周', + '直角': '(x*11.111111)/1000_直角', + '百分度': '(x*1.111111)_百分度_(gon)', + '度': '(x*1)_度_(°)', + '分': '(x*60)_分_( ′)', + '秒': '(x*3600)_秒_(")', + '弧度': '(x*17.453293)/1000_弧度_(rad)', + '毫弧度': '(x*17.453293)_毫弧度_(mrad)' }, init: { - '圆周':'(x*1296000)_秒', - '直角':'(x*324000)_秒', - '百分度':'(x*3240)_秒', - '度':'(x*3600)_秒', - '分':'(x*60)_秒', - '秒':'(x*1)_秒', - '弧度':'(x*206264.806247)_秒', - '豪弧度':'(x*206.264806)_秒' + '圆周':'(x*360)_度', + '直角':'(x*90)_度', + '百分度':'(x*900)/1000_度', + '度':'(x*1)_度', + '分':'(x*16.666667)/1000_度', + '秒':'(x*2.777778)/1000_度', + '弧度':'(x*57.295780)_度', + '毫弧度':'(x*57.295780)/1000_度' }, iu: '角度(°)', group:[ @@ -54,7 +54,7 @@ define(function (require) { name: '弧度制', list: [ '弧度_(rad)', - '豪弧度_(mrad)' + '毫弧度_(mrad)' ] } ] @@ -68,12 +68,12 @@ define(function (require) { '平方分米':'(x*1)/0.01_平方分米_(dm²)', '平方厘米':'(x*1)/0.0001_平方厘米_(cm²)', '平方毫米':'(x*1)/0.000001_平方毫米_(mm²)', - '英亩':'(x*1)/(0.3048^2*16.5^2*160)_英亩_(acre)', - '平方英里':'(x*1)/(0.3048*3*1760)^2_平方英里_(sq.mi)', - '平方码':'(x*1)/(0.3048^2*9)_平方码_(sq.yd)', - '平方英尺':'(x*1)/(0.3048^2)_平方英尺_(sq.ft)', - '平方英寸':'(x*1)/(0.3048^2/144)_平方英寸_(sq.in)', - '平方竿':'(x*1)/(0.3048^2*16.5^2)_平方竿_(sq.rd)', + '英亩':'(x*1)/(Math.pow(0.3048,2)*Math.pow(16.5,2)*160)_英亩_(acre)', + '平方英里':'(x*1)/Math.pow((0.3048*3*1760),2)_平方英里_(sq.mi)', + '平方码':'(x*1)/(Math.pow(0.3048,2)*9)_平方码_(sq.yd)', + '平方英尺':'(x*1)/Math.pow(0.3048,2)_平方英尺_(sq.ft)', + '平方英寸':'(x*1)/(Math.pow(0.3048,2)/144)_平方英寸_(sq.in)', + '平方竿':'(x*1)/(Math.pow(0.3048,2)*Math.pow(16.5,2))_平方竿_(sq.rd)', '顷':'(x*1)/(100/0.0015)_顷', '亩':'(x*1)/(1/0.0015)_亩', '平方尺':'(x*1)/(1/9)_平方尺', @@ -87,12 +87,12 @@ define(function (require) { '平方分米':'(x*0.01)/1_平方米', '平方厘米':'(x*0.0001)/1_平方米', '平方毫米':'(x*0.000001)/1_平方米', - '英亩':'(x*(0.3048^2*16.5^2*160))/1_平方米', - '平方英里':'(x*(0.3048*3*1760)^2)/1_平方米', - '平方码':'(x*(0.3048^2*9))/1_平方米', - '平方英尺':'(x*(0.3048^2))/1_平方米', - '平方英寸':'(x*(0.3048^2/144))/1_平方米', - '平方竿':'(x*(0.3048^2*16.5^2))/1_平方米', + '英亩':'(x*(Math.pow(0.3048,2)*Math.pow(16.5,2)*160))/1_平方米', + '平方英里':'(x*Math.pow((0.3048*3*1760),2))/1_平方米', + '平方码':'(x*(Math.pow(0.3048,2)*9))/1_平方米', + '平方英尺':'(x*(Math.pow(0.3048,2)))/1_平方米', + '平方英寸':'(x*(Math.pow(0.3048,2)/144))/1_平方米', + '平方竿':'(x*(Math.pow(0.3048,2)*Math.pow(16.5,2)))/1_平方米', '顷':'(x*(100/0.0015))/1_平方米', '亩':'(x*(1/0.0015))/1_平方米', '平方尺':'(x*(1/9))/1_平方米', @@ -206,26 +206,26 @@ define(function (require) { }, 'length': { calc: { - '千米':'(x*1)/1000_千米_(km)', - '米':'(x*1)/1_米_(m)', - '分米':'(x*1)/0.1_分米_(dm)', - '厘米':'(x*1)/0.01_厘米_(cm)', - '毫米':'(x*1)/0.001_毫米_(mm)', - '微米':'(x*1)/0.000001_微米_(um)', - '英寸':'(x*1)/(0.3048/12)_英寸_(in)', - '英尺':'(x*1)/0.3048_英尺_(ft)', - '码':'(x*1)/(0.3048*3)_码_(yd)', - '英里':'(x*1)/(0.3048*3*1760)_英里_(mi)', - '海里':'(x*1)/1852_海里_(nmi)', - '英寻':'(x*1)/1.8288_英寻_(fm)', - '弗隆':'(x*1)/201.168_弗隆_(fg)', - '里':'(x*1)/500_里', - '丈':'(x*1)/(10/3)_丈', - '尺':'(x*1)/(1/3)_尺', - '寸':'(x*1)/(0.1/3)_寸', - '分':'(x*1)/(0.01/3)_分', - '厘':'(x*1)/(0.001/3)_厘', - '毫':'(x*1)/(0.0001/3)_毫' + '千米': '(x*1)/1000_千米_(km)', + '米': '(x*1)/1_米_(m)', + '分米': '(x*1)/0.1_分米_(dm)', + '厘米': '(x*1)/0.01_厘米_(cm)', + '毫米': '(x*1)/0.001_毫米_(mm)', + '微米': '(x*1)/0.000001_微米_(um)', + '英寸': '(x*1)/(0.3048/12)_英寸_(in)', + '英尺': '(x*1)/0.3048_英尺_(ft)', + '码': '(x*1)/(0.3048*3)_码_(yd)', + '英里': '(x*1)/(0.3048*3*1760)_英里_(mi)', + '海里': '(x*1)/1852_海里_(nmi)', + '英寻': '(x*1)/1.8288_英寻_(fm)', + '弗隆': '(x*1)/201.168_弗隆_(fg)', + '里': '(x*1)/500_里', + '丈': '(x*1)/(10/3)_丈', + '尺': '(x*1)/(1/3)_尺', + '寸': '(x*1)/(0.1/3)_寸', + '分': '(x*1)/(0.01/3)_分', + '厘': '(x*1)/(0.001/3)_厘', + '毫': '(x*1)/(0.0001/3)_毫' }, init: { '千米':'(x*1000)/1_米', @@ -294,7 +294,6 @@ define(function (require) { '千瓦':'(x*1)/1000_千瓦_(kW)', '英制马力':'(x*1)/745.699872_英制马力', '米制马力':'(x*1)/(9.80665*75)_米制马力', - '马力':'(x*1)/(9.80665*75)_马力', '公斤·米/秒':'(x*1)/9.80665_公斤·米/秒_(kg·m/s)', '千卡/秒':'(x*1)/4184.1004_千卡/秒_(kcal/s)', '英热单位/秒':'(x*1)/1055.05585_英热单位/秒_(Btu/s)', @@ -304,12 +303,9 @@ define(function (require) { }, init: { '瓦':'(x*1)/1_瓦', - '瓦特':'(x*1)/1_瓦', '千瓦':'(x*1000)/1_瓦', - '千瓦特':'(x*1000)/1_瓦', '英制马力':'(x*745.699872)/1_瓦', '米制马力':'(x*(9.80665*75))/1_瓦', - '马力':'(x*(9.80665*75))/1_瓦', '公斤·米/秒':'(x*9.80665)/1_瓦', '千卡/秒':'(x*4184.1004)/1_瓦', '英热单位/秒':'(x*1055.05585)/1_瓦', @@ -326,7 +322,6 @@ define(function (require) { '千瓦_(kW)', '英制马力', '米制马力', - '马力', '公斤·米/秒_(kg·m/s)', '千卡/秒_(kcal/s)', '英热单位/秒_(Btu/s)', @@ -692,7 +687,6 @@ define(function (require) { '千瓦·时':'(x*3600000)/1_焦耳', '卡':'(x*4.185851820846)/1_焦耳', '千卡':'(x*4185.851820846)/1_焦耳', - '大卡':'(x*4185.851820846)/1_焦耳', '英热单位':'(x*1055.05585262)/1_焦耳', '英尺·磅':'(x*1.3557483731)/1_焦耳' }, @@ -727,11 +721,22 @@ define(function (require) { * return Object, 计算结果 */ function calc( uType, num, uFrom, uTo, keepOrigin ) { - var unit = conf[ uType ], - init = explain( num ,unit.init[ uFrom ] ), - special = unit.special && unit.special[ uFrom + '-' + uTo ] || null, - num, unitFirst, unitSecond; - + var rs, unit = conf[ uType ], + unitFirst, unitSecond; + if( uFrom === uTo ) { + rs = explain( num, unit.calc[ uFrom ] ); + //中文单位 + unitFirst = rs[ 1 ]; + //英文单位，有的可能没有 + unitSecond = rs[ 2 ] || ''; + return { + num: keepOrigin ? num : format( num ), + unitFirst: unitFirst, + unitSecond: unitSecond ? unitSecond : '' + }; + } + var init = explain( num ,unit.init[ uFrom ] ), + special = unit.special && unit.special[ uFrom + '-' + uTo ] || null; //对某一类的某一单位做特殊算法处理 if ( special ) { rs = explain( num, special ); From 9a9a2e7f30075db11092e60734015c6c625bec23 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 29 Aug 2014 13:19:59 +0800 Subject: [PATCH 14/34] new file: example/imaZoom.html new file: src/css/ImgZoom.less new file: src/ui/ImgZoom.js new file: test/spec/ImgZoomSpec.js modified: test/templates/OnlineRunner.tmpl --- example/imaZoom.html | 222 +++++++++++++++++++++++++++ src/css/ImgZoom.less | 76 ++++++++++ src/ui/ImgZoom.js | 314 +++++++++++++++++++++++++++++++++++++++ test/spec/ImgZoomSpec.js | 138 +++++++++++++++++ 4 files changed, 750 insertions(+) create mode 100644 example/imaZoom.html create mode 100644 src/css/ImgZoom.less create mode 100644 src/ui/ImgZoom.js create mode 100644 test/spec/ImgZoomSpec.js diff --git a/example/imaZoom.html b/example/imaZoom.html new file mode 100644 index 0000000..c80863c --- /dev/null +++ b/example/imaZoom.html @@ -0,0 +1,222 @@ +重庆长安金牛星车价与配置_百度搜索

  • 百度和中消协提示：如您在百度含信誉标识的搜索结果中因假冒官网、资质或钓鱼诈骗蒙受经济损失，可获百度先行保障。（登录百度账号保护您的权益）

推广链接
金牛星 报价,图片,参数,评测..
新浪汽车2011金牛星报价,参数配置,高清图片,试驾信息,性能评测
auto.sina.com.cn
各种长安金牛星配件
专业各种长安金牛星配件,原装拆车件,长安金牛星配件,质量保证13437163799
www.zhongyiqcpj.com
推广链接
长安金牛星报价-搜狐汽车重庆4S店,放心购车,钜惠价格!auto.sohu.com
搜狐汽车重庆4S店提供更准确的长安金牛星报价全新报价,车源信息,优惠活动.
长安金牛星汽车货车可上京牌,最高可享1800元大礼包－金牛星售价host.35.com
来店客户送300元代金卷2000元装饰大礼包联系人张经理:13391961483

重庆长安金牛星优惠0.1万元 现车在售_金牛星_重庆车市-网上车市

2013年6月17日 -  【网上车市重庆站讯】近日,编辑从重庆地区长安经销商处获悉,2013年06月17日-2013年06月30日,2011款长安金牛星车型有少量现车在售,购车可优惠0.1...
news.cheshi.com/201306... 2013-06-17 
 - 百度快照

重庆金牛星经销商大全_4S店-网上车市

网上车市重庆金牛星4S店提供重庆长安金牛星4S店综合信息,包括重庆金牛星4S店店面地址,联系电话,报价信息等详细内容.
seller.cheshi.com/chon... 2014-07-11 
 - 百度快照

重庆金牛星经销商报价|长安金牛星重庆4s店-网上车市

长安 长安商用车- 金牛星 全部 |2013款 |2011款 综述 报价 降价 图片 参数配置 评测/行情 点评 油耗 车贷 经销商 二手车 更多 ...
product.cheshi.com/bse... 2012-03-08 
 - 百度快照 - 评价

【长安金牛星】长安金牛星报价_长安金牛星价格_参数_图片_商车网

金牛星 金牛星(长安金牛星)所属企业:重庆长安汽车股份有限公司综述 车型 文章 论坛 经销商 售后服务站金牛星(长安金牛星) 金牛星品牌简介 ...
www.cn357.com/brand635_1 2014-07-18 
 - 百度快照

【图文】长安金牛星车型最高可补贴车价10%_新闻中心_易车网

2012年8月6日 - 长安金牛星车型最高可补贴车价10% 【 易车网柳州讯 】近日易车网编辑从柳州长安商用万友4S店处了解到,广西万
news.bitauto.com/guoch... 2012-08-06 
 - 百度快照

长安金牛星医疗救护车价格|厂家|配置|图片 - 冷藏车|疫苗运输车|...

长安金牛星医疗救护车:长安金牛星医疗救护车是采用长安金牛星面包车SC6418B4底盘改装而成,配以JL474QE汽油发动机,1.3排量高性能,功率为67.5KW(92 马力)百公里...
www.hbjnhw.com/New-2..... 2012-11-16 
 - 百度快照

【长安金牛星车型介绍】_最新报价_外观_内饰_图片_搜狐汽车

搜狐汽车为你提供长安金牛星相关的报价、参数、评测、图片、配置、资讯、油耗、满意度等最全面的信息,以及长安金牛星论坛交互信息;想知道长安金牛星怎么样?就上搜狐...
db.auto.sohu.com/model... 2012-06-10 
 - 百度快照

长安金牛星 - 东莞汽车城网 东莞专业购车网(www.goicar.com)

长安金牛星 月供按揭净车价:3.99万元 包牌价:4.65万元 车型资料 订购此车...重庆长安汽车股份有限公司具有随时更改型号、规格、配置、车身颜色的权利,恕不另行...
www.goicar.com/agency4... 2012-06-01 
 - 百度快照

【图】金牛星价格_金牛星多少钱_长安汽车_汽车之家

金牛星 车系频道 | 图片 | 配置 | 论坛 | 二手车 | 口碑 长安商用 金牛星 级别:微面 车身结构:客车 发动机:1.2L 1.3L 变速箱:手动 指导价:4.59...
car.autohome.com.cn/pr... 2012-10-30 
 - 百度快照

【金牛星 2011款】长安商用_金牛星 2011款报价_金牛星 2011款论坛...

抢先实拍长安新一代高级微客——金牛星11-17 2011款金牛星车款 全部在售|... 金牛星参数配置 金牛星图片 金牛星车型详解 金牛星报价 金牛星二手车 金牛星...
car.bitauto.com/jinniu... 2014-01-21 
 - 百度快照
推广链接
长安金牛星报价-搜狐汽车重庆4S店,放心购车,钜惠价格!auto.sohu.com
搜狐汽车重庆4S店提供更准确的长安金牛星报价全新报价,车源信息,优惠活动.
长安金牛星汽车货车可上京牌,最高可享1800元大礼包－金牛星售价host.35.com
来店客户送300元代金卷2000元装饰大礼包联系人张经理:13391961483

12345678910下一页>百度为您找到相关结果约34,000,000个

+ + diff --git a/src/css/ImgZoom.less b/src/css/ImgZoom.less new file mode 100644 index 0000000..3392bae --- /dev/null +++ b/src/css/ImgZoom.less @@ -0,0 +1,76 @@ +@import "./config.less"; +@imgZoom-prefix: e(%('%s-imgZoom', @ui-prefix)); + +.@{imgZoom-prefix} { + display:none; +} + +.@{imgZoom-prefix}-mask { + top:0; + left:0; + position: absolute; + opacity: 0.7; + filter:~"alpha(opacity=70)"; + background-color: #000; + z-index: 60000; + + iframe { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + z-index:-1; + filter:~"progid:DXImageTransform.Microsoft.Alpha(opacity:0)"; + } + + div { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + z-index:-1; + } +} + +.@{imgZoom-prefix}-container { + text-align:center; + position:absolute; + z-index:60001; + + .c-loading { + position:absolute; + } +} + +.@{imgZoom-prefix}-close { + display:none; + width:40px; + height:40px; + position:absolute; + right:-40px; + top:0; + text-decoration:none; + + &:hover { + background:#000; + opacity: 0.5; + filter:~"alpha(opacity=50)"; + } + + span { + display:block; + width:20px; + height:20px; + margin:10px 0 0 10px; + background:url(http://www.baidu.com/cache/aladdin/ui/barrage/img/btn.png) no-repeat -9px -11px; + opacity: 0.6; + filter:~"alpha(opacity=60)"; + } +} + +.@{imgZoom-prefix}-link { + display:block; + line-height:0; +} \ No newline at end of file diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js new file mode 100644 index 0000000..ecf707f --- /dev/null +++ b/src/ui/ImgZoom.js @@ -0,0 +1,314 @@ +/** + * Moye (PS UI) + * Copyright 2014 Baidu Inc. All rights reserved. + * @author wuyou,guoyong03 + * @date 2014-08-19 + + * @file 预览图放大组件 + */ + +define(function (require,exports,module) { + + var lib = require('./lib'); + var config = require('./config'); + var Control = require('./Control'); + + /** + * 被放大图片class + * + * @type {string} + */ + var CurrentImgClass; + + /** + * 预览图放大组件 + * + * @constructor + * @extends module:Control + * @requires Control + * @exports ImgZoom + */ + var ImgZoom = Control.extend(/** @lends module:Tabs.prototype */{ + + /** + * 控件类型标识 + * + * @type {string} + * @private + */ + type: 'ImgZoom', + + /** + * 控件配置项 + * + * @name module:ImgZoom#options + * @type {Object} + * @property {(string | HTMLElement)} options.main 控件渲染容器 + * @property {string} options.prefix 控件class前缀，同时将作为main的class之一 + * @private + */ + options: { + // 控件渲染主容器 + main: '', + + // 控件class前缀，同时将作为main的class之一 + prefix: config.prefix + '-imgZoom', + + // 放大图片的最小宽度 + MinWidth:121, + + // 放大图片的最小高度 + MinHeight:90, + + // 放大图片的最大宽度 + MaxWidth:538, + + // 放大图片的最大高度 + MaxHeight:404, + }, + + /** + * 控件初始化 + * + * @param {Object} options 控件配置项 + * @see module:ImgZoom#options + * @private + */ + init: function (options){ + this.options.MinWidth = options.MinWidth; + this.options.MinHeight = options.MinHeight; + this.options.MaxWidth = options.MaxWidth; + this.options.MaxHeight = options.MaxHeight; + }, + + + /** + * 渲染控件，绑定事件 + * + * @param {Array} $img 图片对象数组 + * @private + */ + render: function ($imgs) { + var options = this.options; + var _this = this; + $imgs.each(function (i) { + + // 如果图片不可点，或图片没有data-zoomImg属性，return + if(!$(this).attr("data-zoomImg") ||!$(this).parent().attr('href')){ + return + } + + // rsv_imgZoom：0，点小图放大，fm:beha + $(this).parent().attr("data-click","{'fm':'beha','rsv_imgZoom':'0'}") + + $(this).bind({ + click: function (event) { + var $img = $(this), + $a = $img.parent(), + $container = $img.parents(".result,.result-op"), + imgClass = [options.prefix,'img',i].join('-'), + imgPosition = $img.offset(); + + if (!$container.length) {return}; + + var data = { + src: $img.attr('data-zoomImg'), + href: $a.attr('href'), + top: imgPosition.top, + left: imgPosition.left, + width: $img.width(), + height: $img.height(), + imgClass: imgClass, + + // 点击参数,仅大搜索环境有效 + click: "'mu':'" + ($container.attr("mu") || $a.attr('href')) + "','p1':'" + $container.attr("id") + "','rsv_srcid':'" + $container.attr("srcid") + "'", + + // rsv_imgZoom：0，点小图放大，fm:beha + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + // rsv_imgZoom：2，close点击关闭，fm:beha + // rsv_imgZoom：3，点击其他部位关闭，fm:beha + click_fm: ($container.hasClass("result-op")?"alop":"as"), + click_rsv_imgZoom: '1' + }; + + //修正放大图最小高宽 + options.MinWidth = $img.width(); + options.MinHeight = $img.height(); + + // 修改原图鼠标样式为默认 + $img.css({cursor:'pointer'}).addClass(imgClass); + + CurrentImgClass = imgClass; + + _this.createMask(data); + _this.createImgZoomContainer(data); + + event.preventDefault(); + event.stopPropagation(); + return false; + } + + // 恢复原图鼠标样式为放大镜 + }).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/big.cur),auto'}); + }); + }, + + /** + * 创建遮罩层 + * + * @param {object} data 原图属性参数 + * @private + */ + createMask: function (data) { + var _this = this; + var options = this.options; + var $body = $(document.body); + var $mask = $('
 
').bind({click: function () {_this.closeImgZoom();}}); + $body.append($mask); + }, + + /** + * 删除遮罩层 + * + * @private + */ + removeMask: function () { + var options = this.options; + $('.' + options.prefix + '-mask').remove(); + }, + + /** + * 关闭放大效果 + * + * @param {string} img 原图class属性 + * @private + */ + closeImgZoom: function (img) { + img = img || CurrentImgClass; + $('.' + img).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/big.cur),auto'}); + this.close(); + CurrentImgClass = null; + }, + + /** + * 创建放大图片容器 + * + * @param {object} data 原图属性参数 + * @private + */ + createImgZoomContainer: function (data) { + var _this = this; + var options = this.options + var imgClass = data.imgClass || CurrentImgClass; + + // 放大图片容器 + var $container = $('
'); + + // 关闭按钮 + var $close = $('').bind({click: function () {_this.closeImgZoom(imgClass);}}); + + // loading + var $loading = $(''); + + $(document.body).append($container.append($close).append($loading)); + + // 放大图片本身 + var $imgZoom=$('').bind({ + load:function () { + $loading.hide(); + _this.rePositionImgZoom(data); + $imgZoom.show(); + $close.css({display:'block'}); + }, + error:function () { + _this.closeImgZoom(data.imgClass); + } + }); + + $container.append($('').bind({click: function () {_this.closeImgZoom(data.imgClass);}}).append($imgZoom)); + }, + + /** + * 删除放大图片容器 + * + * @private + */ + removeImgZoomContainer: function () { + var options = this.options; + $('.' + options.prefix + '-container').remove(); + }, + + /** + * 约束图片大小，重新定位图片 + * + * @param {object} data 原图属性参数 + * @private + */ + rePositionImgZoom: function (data) { + var options = this.options; + var MiddleSreen= $(window).height()/2; + + // 放大的图片 + var $imgZoom = $('.' + options.prefix); + var imgZoomHeight = $imgZoom.height(); + var imgZoomWidth = $imgZoom.width(); + + // 放大图片容器 + var $imgZoomContainer = $('.' + options.prefix + '-container'); + + // 原图距屏幕上边距 + var imgTop = data.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); + + // 根据最大宽度和最大高度，约束图片放大效果，等比缩放 + if(imgZoomWidth/imgZoomHeight > options.MaxWidth/options.MaxHeight) { + if($imgZoom.width() >= options.MaxWidth) { + $imgZoom.css("width",options.MaxWidth); + } + } + else{ + if($imgZoom.height() >= options.MaxHeight) { + $imgZoom.css("height",options.MaxHeight); + } + } + + // 当原图小于展现大小，放大时按展现大小展现 + if($imgZoom.height() < options.MinHeight || $imgZoom.width() < options.MinWidth ) { + $imgZoom.css("height",options.MinHeight); + $imgZoom.css("width",options.MinWidth); + } + + // 当原图在屏幕中线以下 + if(imgTop >= MiddleSreen) { + $imgZoomContainer.css("top",data.top + data.height - $imgZoom.height()); + } + + // 当原图在屏幕中线范围 + else if(imgTop < MiddleSreen && imgTop+data.height > MiddleSreen) { + $imgZoomContainer.css("top",data.top - ($imgZoom.height() - data.height)/2); + } + }, + + /** + * 关闭放大整体效果 + * + * @private + */ + close: function () { + this.removeImgZoomContainer(); + this.removeMask(); + }, + + /** + * 销毁 + * + * @private + */ + dispose:function () { + this.close(); + CurrentImgClass=null; + } + }); + + module.exports = ImgZoom; + +}); diff --git a/test/spec/ImgZoomSpec.js b/test/spec/ImgZoomSpec.js new file mode 100644 index 0000000..fcc5a8e --- /dev/null +++ b/test/spec/ImgZoomSpec.js @@ -0,0 +1,138 @@ +define(function (require) { + + var config = require('ui/config'); + + var lib = require('ui/lib'); + + var iz, $imgs; + + var href = 'http://www.baidu.com/'; + + var zoomImgs = [ + 'http://t12.baidu.com/it/u=3212677892,2248381863&fm=32', + 'http://t11.baidu.com/it/u=1230530443,2758239786&fm=32', + 'http://t12.baidu.com/it/u=1315258025,3740341982&fm=32', + 'http://t10.baidu.com/it/u=2837462175,2127340680&fm=32', + 'http://t10.baidu.com/it/u=1062234012,3466388488&fm=32', + 'http://t11.baidu.com/it/u=350827582,246717697&fm=32', + 'http://t12.baidu.com/it/u=2100165218,745113816&fm=32', + 'http://t10.baidu.com/it/u=2261371008,3030880374&fm=32', + 'http://t10.baidu.com/it/u=2118454176,1431207690&fm=32' + ]; + + function preStr(str) { + return '.' + config.prefix + (str || ''); + } + + + beforeEach(function () { + var str = ''; + + $(zoomImgs).each(function (i) { + str += '' + + '
' + + ' ' + + ' ' + + '
'; + + }); + + document.body.insertAdjacentHTML('beforeEnd', str); + $imgs = $('img'); + + require(['ui/ImgZoom'], function (ImgZoom) { + iz = new ImgZoom(); + }); + }); + + + afterEach(function () { + iz.dispose(); + }); + + + describe('控件基本', function () { + it('控件类型', function () { + expect(iz.type).toBe('ImgZoom'); + + }); + + it('init', function () { + iz.init({MaxWidth: 540, MaxHeight: 400}); + expect(iz.options.MaxWidth).toEqual(540); + expect(iz.options.MaxHeight).toEqual(400); + + }); + + it('render', function () { + iz.render($imgs); + var bodyHeight = $(document.body).height(); + $imgs.on('click', function () { + var $mask = $(preStr('-mask')); + var $cont = $(preStr('-container')); + var $close = $(preStr('-close')); + var $link = $(preStr('-link')); + + expect($cont).toContain($close); + expect($cont).toContain($link); + expect($mask.height()).toEqual(bodyHeight); + + }); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + + }); + + it('closeClick', function () { + iz.render($imgs); + $(preStr('-close')).on('click', function () { + var $mask = $(preStr('-mask')); + var $cont = $(preStr('-container')); + var $close = $(preStr('-close')); + var $link = $(preStr('-link')); + + expect(iz.close).toHaveBeenCalled(); + expect(lib.q(preStr())[0]).toBeUndefined(); + expect($mask).toBeUndefined(); + expect($cont).toBeUndefined(); + expect($close).toBeUndefined(); + expect($link).toBeUndefined(); + + }); + + }); + + it('close', function () { + iz.render($imgs); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + iz.close(); + + expect(lib.q(preStr())[0]).toBeUndefined(); + expect(lib.q(preStr('-mask'))[0]).toBeUndefined(); + expect(lib.q(preStr('-container'))[0]).toBeUndefined(); + expect(lib.q(preStr('-close'))[0]).toBeUndefined(); + expect(lib.q(preStr('-link'))[0]).toBeUndefined(); + }); + + it('dispose', function () { + iz.render($imgs); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + iz.close(); + iz.dispose(); + + expect(lib.q(preStr())[0]).toBeUndefined(); + expect(lib.q(preStr('-mask'))[0]).toBeUndefined(); + expect(lib.q(preStr('-container'))[0]).toBeUndefined(); + expect(lib.q(preStr('-close'))[0]).toBeUndefined(); + expect(lib.q(preStr('-link'))[0]).toBeUndefined(); + }); + }); + +}); From 2094efae68fc2f6c6f79032ae35fca21298c6ede Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 1 Sep 2014 14:17:03 +0800 Subject: [PATCH 15/34] modified: Gruntfile.js modified: package.json --- Gruntfile.js | 17 ++++++++++++++--- package.json | 2 +- test/templates/OnlineRunner.tmpl | 3 ++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index de51032..88f7cfd 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,7 +10,7 @@ module.exports = function (grunt) { main: 'src', test: 'test/spec' }, - cssPrefix: 'ecl-ui', + cssPrefix: 'seui', buildPrefix: 'ui', version: pkg.version }, @@ -156,7 +156,17 @@ module.exports = function (grunt) { {name: '<%= meta.buildPrefix%>/Control'}, ] } - } + }, + karma: { + options: { + configFile: 'test/config.js', + reporters: 'dots', + singleRun: true + }, + dev: { + browsers: ['Chrome', 'Firefox'] + } + } }, connect: { @@ -222,6 +232,7 @@ module.exports = function (grunt) { } } } + }, 'gh-pages': { @@ -309,7 +320,7 @@ module.exports = function (grunt) { grunt.registerTask('base', ['clean:before', 'copy:js', 'copy:css', 'tmpl', 'jshint', 'lesslint', 'less:compile', 'csslint']); - grunt.registerTask('base-online', ['clean:before','copy:js', 'copy:css', 'tmpl', 'jshint', 'lesslint', 'csslint']); + grunt.registerTask('base-online', ['clean:before','copy:js', 'copy:css', 'tmpl', 'jshint','lesslint', 'csslint']); grunt.registerTask('build', ['base', 'requirejs:build', 'clean:after']); grunt.registerTask('test', ['base', 'connect', 'jasmine:requirejs']); diff --git a/package.json b/package.json index b01dfcd..b67ff2f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.6.8", + "version": "0.6.9", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/test/templates/OnlineRunner.tmpl b/test/templates/OnlineRunner.tmpl index a393c96..67a5fe4 100644 --- a/test/templates/OnlineRunner.tmpl +++ b/test/templates/OnlineRunner.tmpl @@ -5,6 +5,7 @@ Jasmine Spec Runner <% css.forEach(function(style){ %> +<% }) %> -<% }) %> + <% with (scripts) { %> <% [].concat(polyfills, jasmine, vendor, helpers, reporters, start).forEach(function(script){ %> From 17cf2a6e1ba3ef70bcc73e5282b65d29b6656b17 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 2 Sep 2014 17:53:24 +0800 Subject: [PATCH 16/34] modified: src/css/ImgZoom.less --- src/css/ImgZoom.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/css/ImgZoom.less b/src/css/ImgZoom.less index 3392bae..eceb961 100644 --- a/src/css/ImgZoom.less +++ b/src/css/ImgZoom.less @@ -12,7 +12,7 @@ opacity: 0.7; filter:~"alpha(opacity=70)"; background-color: #000; - z-index: 60000; + z-index: 298; iframe { position:absolute; @@ -37,7 +37,8 @@ .@{imgZoom-prefix}-container { text-align:center; position:absolute; - z-index:60001; + background:#fff; + z-index:299; .c-loading { position:absolute; From be49391453ab23c1100856b6c67651037dc2e69d Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 2 Sep 2014 17:55:57 +0800 Subject: [PATCH 17/34] modified: package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b67ff2f..1d4a1bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.6.9", + "version": "0.7.0", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", From 846e2c75c132b0ca21dfa44b61f4c2a6eb1e57a6 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 2 Sep 2014 21:07:04 +0800 Subject: [PATCH 18/34] modified: src/css/ImgZoom.less modified: src/ui/ImgZoom.js --- src/css/ImgZoom.less | 1 + src/ui/ImgZoom.js | 25 +++++++++++++++++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/css/ImgZoom.less b/src/css/ImgZoom.less index eceb961..1f8e36a 100644 --- a/src/css/ImgZoom.less +++ b/src/css/ImgZoom.less @@ -65,6 +65,7 @@ width:20px; height:20px; margin:10px 0 0 10px; + *margin-left:0; background:url(http://www.baidu.com/cache/aladdin/ui/barrage/img/btn.png) no-repeat -9px -11px; opacity: 0.6; filter:~"alpha(opacity=60)"; diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js index ecf707f..e1a15c1 100644 --- a/src/ui/ImgZoom.js +++ b/src/ui/ImgZoom.js @@ -114,8 +114,12 @@ define(function (require,exports,module) { var data = { src: $img.attr('data-zoomImg'), href: $a.attr('href'), - top: imgPosition.top, - left: imgPosition.left, + top: lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.top + document.body.scrollTop -2 + : imgPosition.top, + left: lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.left -3 + : imgPosition.left, width: $img.width(), height: $img.height(), imgClass: imgClass, @@ -163,7 +167,18 @@ define(function (require,exports,module) { var _this = this; var options = this.options; var $body = $(document.body); - var $mask = $('
 
').bind({click: function () {_this.closeImgZoom();}}); + var $mask = $('' + + '
' + + '' + + '
 
' + ).bind({click: function () {_this.closeImgZoom();}}); $body.append($mask); }, @@ -246,7 +261,9 @@ define(function (require,exports,module) { */ rePositionImgZoom: function (data) { var options = this.options; - var MiddleSreen= $(window).height()/2; + var MiddleSreen = (lib.browser.ie && lib.browser.ie <= 6 + ? document.body.offsetHeight/2 + : $(window).height()/2); // 放大的图片 var $imgZoom = $('.' + options.prefix); From e8fa620c16265bcae124505b96b6a3660207cc8a Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 2 Sep 2014 21:08:27 +0800 Subject: [PATCH 19/34] modified: package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d4a1bd..b5f8f89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.0", + "version": "0.7.1", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", From 0b62f7290215246fd4a6153014e5a94160466472 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 3 Sep 2014 17:58:46 +0800 Subject: [PATCH 20/34] modified: package.json modified: src/ui/ImgZoom.js --- package.json | 2 +- src/ui/ImgZoom.js | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b5f8f89..49237e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.1", + "version": "0.7.2", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js index e1a15c1..7ae745b 100644 --- a/src/ui/ImgZoom.js +++ b/src/ui/ImgZoom.js @@ -169,17 +169,18 @@ define(function (require,exports,module) { var $body = $(document.body); var $mask = $('' + '
' + '' + '
 
' ).bind({click: function () {_this.closeImgZoom();}}); $body.append($mask); + + $(window).on("resize",function () { + $mask.css("width",$body.width()); + }); }, /** From b11a0236d162b3b3fb910b901b6e3ed489bfe389 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 5 Sep 2014 15:48:01 +0800 Subject: [PATCH 21/34] modified: package.json modified: src/ui/ImgZoom.js --- package.json | 2 +- src/ui/ImgZoom.js | 73 ++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 67 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 49237e8..3650fc7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.2", + "version": "0.7.3", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js index 7ae745b..636b2a8 100644 --- a/src/ui/ImgZoom.js +++ b/src/ui/ImgZoom.js @@ -262,9 +262,13 @@ define(function (require,exports,module) { */ rePositionImgZoom: function (data) { var options = this.options; - var MiddleSreen = (lib.browser.ie && lib.browser.ie <= 6 - ? document.body.offsetHeight/2 - : $(window).height()/2); + var SreenHeight = (lib.browser.ie && lib.browser.ie <= 6 + ? document.body.offsetHeight + : $(window).height()); + var MiddleSreen = SreenHeight/2; + + //放大方式，1向下，2向上，3居中 + var zoomStyle = 1; // 放大的图片 var $imgZoom = $('.' + options.prefix); @@ -277,6 +281,9 @@ define(function (require,exports,module) { // 原图距屏幕上边距 var imgTop = data.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); + var topLeft = imgTop - 63; + var bottomLeft = SreenHeight - imgTop - data.height; + // 根据最大宽度和最大高度，约束图片放大效果，等比缩放 if(imgZoomWidth/imgZoomHeight > options.MaxWidth/options.MaxHeight) { if($imgZoom.width() >= options.MaxWidth) { @@ -295,15 +302,67 @@ define(function (require,exports,module) { $imgZoom.css("width",options.MinWidth); } - // 当原图在屏幕中线以下 - if(imgTop >= MiddleSreen) { - $imgZoomContainer.css("top",data.top + data.height - $imgZoom.height()); + var zoomImgHeight = $imgZoom.height() - data.height; + + // 当原图在屏幕中线以下,且顶部高度大于大图高度，从原图底部向上展开放大 + if(imgTop >= MiddleSreen && topLeft >= zoomImgHeight) { + zoomStyle = 2; + } + + // 当原图在屏幕中线以下,但顶部高度小于大图高度 + else if(imgTop >= MiddleSreen && topLeft < zoomImgHeight) { + + //如果底部高度大于大图高度，向下展开 + if(bottomLeft >= zoomImgHeight) { + zoomStyle = 1; + } + + //如果底部高度小于大图高度，居中展开 + else{ + zoomStyle = 3; + } } // 当原图在屏幕中线范围 else if(imgTop < MiddleSreen && imgTop+data.height > MiddleSreen) { - $imgZoomContainer.css("top",data.top - ($imgZoom.height() - data.height)/2); + + //如果顶部高度大于大图高度1/2，居中展开 + if(topLeft >= zoomImgHeight/2) { + zoomStyle = 3; + } + + //如果顶部高度小于大图高度1/2，向下展开 + else{ + zoomStyle = 1; + } + } + + // 当原图在屏幕中线以上 + else{ + + //如果底部高度大于大图高度，向下展开 + if(bottomLeft >= zoomImgHeight) { + zoomStyle = 1; + } + + //如果底部高度小于大图高度，居中展开 + else{ + zoomStyle = 3; + } + } + + switch(zoomStyle) { + case 1:$imgZoomContainer.css("top",data.top); + break; + + case 2:$imgZoomContainer.css("top",data.top + data.height - $imgZoom.height()); + break; + + case 3:$imgZoomContainer.css("top",data.top - ($imgZoom.height() - data.height)/2); + break; + } + }, /** From 9ddf8d6347bf7707feee156d10afdb3161f69296 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 10:52:01 +0800 Subject: [PATCH 22/34] modified: package.json modified: src/ui/ImgZoom.js src/css/ImgZoomHover.less src/moye/ src/ui/ImgZoomHover.js test/spec/ImgZoomSpecHover.js --- package.json | 2 +- src/ui/ImgZoom.js | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 3650fc7..156142b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.3", + "version": "0.7.4", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js index 636b2a8..af0eef9 100644 --- a/src/ui/ImgZoom.js +++ b/src/ui/ImgZoom.js @@ -64,7 +64,8 @@ define(function (require,exports,module) { MaxWidth:538, // 放大图片的最大高度 - MaxHeight:404, + MaxHeight:404 + }, /** @@ -75,10 +76,10 @@ define(function (require,exports,module) { * @private */ init: function (options){ - this.options.MinWidth = options.MinWidth; - this.options.MinHeight = options.MinHeight; - this.options.MaxWidth = options.MaxWidth; - this.options.MaxHeight = options.MaxHeight; + this.options.MinWidth = options.MinWidth || this.options.MinWidth; + this.options.MinHeight = options.MinHeight || this.options.MinHeight; + this.options.MaxWidth = options.MaxWidth || this.options.MaxWidth; + this.options.MaxHeight = options.MaxHeight || this.options.MaxHeight; }, @@ -153,7 +154,7 @@ define(function (require,exports,module) { } // 恢复原图鼠标样式为放大镜 - }).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/big.cur),auto'}); + }).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/cur_zin.cur),auto'}); }); }, From 82417aac7714f30b155f46bd3729bab8fd6ccd8f Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 10:53:11 +0800 Subject: [PATCH 23/34] new file: src/css/ImgZoomHover.less new file: src/ui/ImgZoomHover.js new file: test/spec/ImgZoomSpecHover.js --- src/css/ImgZoomHover.less | 25 +++ src/ui/ImgZoomHover.js | 348 ++++++++++++++++++++++++++++++++++ test/spec/ImgZoomSpecHover.js | 138 ++++++++++++++ 3 files changed, 511 insertions(+) create mode 100644 src/css/ImgZoomHover.less create mode 100644 src/ui/ImgZoomHover.js create mode 100644 test/spec/ImgZoomSpecHover.js diff --git a/src/css/ImgZoomHover.less b/src/css/ImgZoomHover.less new file mode 100644 index 0000000..7de0071 --- /dev/null +++ b/src/css/ImgZoomHover.less @@ -0,0 +1,25 @@ +@import "./config.less"; +@imgZoomHover-prefix: e(%('%s-imgZoomHover', @ui-prefix)); + +.@{imgZoomHover-prefix} { + display:none; +} + +.@{imgZoomHover-prefix}-container { + text-align:center; + position:absolute; + background:rgb(255,255,255); + background:rgba(255,255,255,0.9); + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; + padding:10px; + z-index:299; + + .c-loading { + position:absolute; + } +} + +.@{imgZoomHover-prefix}-link { + display:block; + line-height:0; +} \ No newline at end of file diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js new file mode 100644 index 0000000..dcf3298 --- /dev/null +++ b/src/ui/ImgZoomHover.js @@ -0,0 +1,348 @@ +/** + * Moye (PS UI) + * Copyright 2014 Baidu Inc. All rights reserved. + * @author guoyong03 + * @date 2014-09-12 + + * @file 预览图放大组件 + */ + +define(function (require,exports,module) { + + var lib = require('./lib'); + var config = require('./config'); + var Control = require('./Control'); + + /** + * 被放大图片class + * + * @type {string} + */ + var CurrentImgClass; + + /** + * 计时器 + * + * @type {string} + */ + var Timer; + + + /** + * 预览图放大组件 + * + * @constructor + * @extends module:Control + * @requires Control + * @exports ImgZoomHover + */ + var ImgZoomHover = Control.extend(/** @lends module:Tabs.prototype */{ + + /** + * 控件类型标识 + * + * @type {string} + * @private + */ + type: 'ImgZoomHover', + + /** + * 控件配置项 + * + * @name module:ImgZoom#options + * @type {Object} + * @property {(string | HTMLElement)} options.main 控件渲染容器 + * @property {string} options.prefix 控件class前缀，同时将作为main的class之一 + * @private + */ + options: { + // 控件渲染主容器 + main: '', + + // 控件class前缀，同时将作为main的class之一 + prefix: config.prefix + '-imgZoomHover', + + // 放大图片的最小宽度 + MinWidth:121, + + // 放大图片的最小高度 + MinHeight:90, + + // 放大图片的最大宽度 + MaxWidth:400, + + // 放大图片的最大高度 + MaxHeight:300 + + }, + + /** + * 控件初始化 + * + * @param {Object} options 控件配置项 + * @see module:ImgZoomHover#options + * @private + */ + init: function (options){ + this.options.MinWidth = options.MinWidth || this.options.MinWidth; + this.options.MinHeight = options.MinHeight || this.options.MinHeight; + this.options.MaxWidth = options.MaxWidth || this.options.MaxWidth; + this.options.MaxHeight = options.MaxHeight || this.options.MaxHeight; + }, + + + /** + * 渲染控件，绑定事件 + * + * @param {Array} $img 图片对象数组 + * @private + */ + render: function ($imgs) { + var options = this.options; + var _this = this; + $imgs.each(function (i) { + + // 如果图片不可点，或图片没有data-zoomImg属性，return + if(!$(this).attr("data-zoomImg") ||!$(this).parent().attr('href')){ + return + } + + // rsv_imgZoom：0，小图点击跳转，fm:as/alop + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + // rsv_imgZoom：2，mousein显示大图，fm:beha + // rsv_imgZoom：3，mouseout关闭大图，fm:beha + $(this).parent().attr("data-click","{'rsv_imgZoom':'0'}") + + var $img = $(this), + $a = $img.parent(), + $container = $img.parents(".result,.result-op"), + imgClass = [options.prefix,'img',i].join('-'); + + if (!$container.length) {return}; + + var data = { + src: $img.attr('data-zoomImg'), + href: $a.attr('href'), + imgClass: imgClass, + + // 点击参数,仅大搜索环境有效 + click: '"mu":"' + ($container.attr("mu") || $a.attr('href')) + '","p1":"' + $container.attr("id") + '","rsv_srcid":"' + $container.attr("srcid") + '"', + + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + click_fm: ($container.hasClass("result-op")?"alop":"as"), + click_rsv_imgZoom: '1' + }; + + $(this).bind({ + mouseover: function (event) { + imgPosition = $img.offset(); + data.top = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.top + document.body.scrollTop -2 + : imgPosition.top; + data.left = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.left -3 + : imgPosition.left; + data.width = $img.width(); + data.height = $img.height(); + + //修正放大图最小高宽 + options.MinWidth = $img.width(); + options.MinHeight = $img.height(); + + clearTimeout(Timer); + $img.addClass(imgClass); + + if(CurrentImgClass){ + _this.closeImgZoom(CurrentImgClass); + } + CurrentImgClass = imgClass; + + _this.createImgZoomContainer(data); + + }, + mouseout: function(event){ + if(CurrentImgClass != null) { + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},500); + + //发统计 rsv_imgZoom：3，mouseout关闭大图，fm:beha + if(window.c){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"3"}')); + } + } + + } + + + }); + }); + }, + + + /** + * 关闭放大效果 + * + * @param {string} img 原图class属性 + * @private + */ + closeImgZoom: function (img) { + img = img || CurrentImgClass; + this.close(); + CurrentImgClass = null; + }, + + /** + * 创建放大图片容器 + * + * @param {object} data 原图属性参数 + * @private + */ + createImgZoomContainer: function (data) { + var _this = this; + var options = this.options + var imgClass = data.imgClass || CurrentImgClass; + + // 放大图片容器 + var $container = $('
'); + + // loading + var $loading = $(''); + + $(document.body).append($container.append($loading)); + + // 放大图片本身 + var $imgZoom=$('').bind({ + load:function () { + $loading.hide(); + _this.rePositionImgZoom(data); + $imgZoom.animate({opacity:'show'},500); + + //发统计 rsv_imgZoom：2，mousein显示大图，fm:beha + if(window.c){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"2"}')) + } + }, + mouseover:function(){ + clearTimeout(Timer); + }, + mouseout:function(){ + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},500); + }, + error:function () { + _this.closeImgZoom(data.imgClass); + } + }); + + $container.append($('').bind({click: function () {_this.closeImgZoom(data.imgClass);}}).append($imgZoom)); + + + }, + + /** + * 删除放大图片容器 + * + * @private + */ + removeImgZoomContainer: function () { + var options = this.options; + $('.' + options.prefix + '-container').remove(); + }, + + /** + * 约束图片大小，重新定位图片 + * + * @param {object} data 原图属性参数 + * @private + */ + rePositionImgZoom: function (data) { + var options = this.options; + var SreenHeight = (lib.browser.ie && lib.browser.ie <= 6 + ? document.body.offsetHeight + : $(window).height()); + + //放大方式，1向下，2向上，3居中 + var zoomStyle = 3; + + // 放大的图片 + var $imgZoom = $('.' + options.prefix); + var imgZoomHeight = $imgZoom.height(); + var imgZoomWidth = $imgZoom.width(); + + // 放大图片容器 + var $imgZoomContainer = $('.' + options.prefix + '-container'); + + // 原图距屏幕上边距 + var imgTop = data.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); + + var topLeft = imgTop - 63; + var bottomLeft = SreenHeight - imgTop - data.height; + + // 根据最大宽度和最大高度，约束图片放大效果，等比缩放 + if(imgZoomWidth/imgZoomHeight > options.MaxWidth/options.MaxHeight) { + if($imgZoom.width() >= options.MaxWidth) { + $imgZoom.css("width",options.MaxWidth); + } + } + else{ + if($imgZoom.height() >= options.MaxHeight) { + $imgZoom.css("height",options.MaxHeight); + } + } + + // 当原图小于展现大小，放大时按展现大小展现 + if($imgZoom.height() < options.MinHeight || $imgZoom.width() < options.MinWidth ) { + $imgZoom.css("height",options.MinHeight); + $imgZoom.css("width",options.MinWidth); + } + + var zoomImgHeight = $imgZoom.height() - data.height; + + + + if(topLeft < zoomImgHeight/2){ + zoomStyle = 1; + } + else if(bottomLeft < zoomImgHeight/2) { + zoomStyle = 2; + }; + + + switch(zoomStyle) { + case 1:$imgZoomContainer.css("top",data.top -10); + break; + + case 2:$imgZoomContainer.css("top",data.top - zoomImgHeight + bottomLeft - 10); + break; + + case 3:$imgZoomContainer.css("top",data.top - zoomImgHeight/2 -10); + break; + } + + }, + + /** + * 关闭放大整体效果 + * + * @private + */ + close: function () { + this.removeImgZoomContainer(); + }, + + /** + * 销毁 + * + * @private + */ + dispose:function () { + this.close(); + CurrentImgClass = null; + clearTimeout(Timer); + Timer = null; + } + }); + + module.exports = ImgZoomHover; + +}); diff --git a/test/spec/ImgZoomSpecHover.js b/test/spec/ImgZoomSpecHover.js new file mode 100644 index 0000000..9d6af61 --- /dev/null +++ b/test/spec/ImgZoomSpecHover.js @@ -0,0 +1,138 @@ +define(function (require) { + + var config = require('ui/config'); + + var lib = require('ui/lib'); + + var iz, $imgs; + + var href = 'http://www.baidu.com/'; + + var zoomImgs = [ + 'http://t12.baidu.com/it/u=3212677892,2248381863&fm=32', + 'http://t11.baidu.com/it/u=1230530443,2758239786&fm=32', + 'http://t12.baidu.com/it/u=1315258025,3740341982&fm=32', + 'http://t10.baidu.com/it/u=2837462175,2127340680&fm=32', + 'http://t10.baidu.com/it/u=1062234012,3466388488&fm=32', + 'http://t11.baidu.com/it/u=350827582,246717697&fm=32', + 'http://t12.baidu.com/it/u=2100165218,745113816&fm=32', + 'http://t10.baidu.com/it/u=2261371008,3030880374&fm=32', + 'http://t10.baidu.com/it/u=2118454176,1431207690&fm=32' + ]; + + function preStr(str) { + return '.' + config.prefix + (str || ''); + } + + + beforeEach(function () { + var str = ''; + + $(zoomImgs).each(function (i) { + str += '' + + '
' + + ' ' + + ' ' + + '
'; + + }); + + document.body.insertAdjacentHTML('beforeEnd', str); + $imgs = $('img'); + + require(['ui/ImgZoomHover'], function (ImgZoomHover) { + iz = new ImgZoom(); + }); + }); + + + afterEach(function () { + iz.dispose(); + }); + + + describe('控件基本', function () { + it('控件类型', function () { + expect(iz.type).toBe('ImgZoomHover'); + + }); + + it('init', function () { + iz.init({MaxWidth: 540, MaxHeight: 400}); + expect(iz.options.MaxWidth).toEqual(540); + expect(iz.options.MaxHeight).toEqual(400); + + }); + + it('render', function () { + iz.render($imgs); + var bodyHeight = $(document.body).height(); + $imgs.on('click', function () { + var $mask = $(preStr('-mask')); + var $cont = $(preStr('-container')); + var $close = $(preStr('-close')); + var $link = $(preStr('-link')); + + expect($cont).toContain($close); + expect($cont).toContain($link); + expect($mask.height()).toEqual(bodyHeight); + + }); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + + }); + + it('closeClick', function () { + iz.render($imgs); + $(preStr('-close')).on('click', function () { + var $mask = $(preStr('-mask')); + var $cont = $(preStr('-container')); + var $close = $(preStr('-close')); + var $link = $(preStr('-link')); + + expect(iz.close).toHaveBeenCalled(); + expect(lib.q(preStr())[0]).toBeUndefined(); + expect($mask).toBeUndefined(); + expect($cont).toBeUndefined(); + expect($close).toBeUndefined(); + expect($link).toBeUndefined(); + + }); + + }); + + it('close', function () { + iz.render($imgs); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + iz.close(); + + expect(lib.q(preStr())[0]).toBeUndefined(); + expect(lib.q(preStr('-mask'))[0]).toBeUndefined(); + expect(lib.q(preStr('-container'))[0]).toBeUndefined(); + expect(lib.q(preStr('-close'))[0]).toBeUndefined(); + expect(lib.q(preStr('-link'))[0]).toBeUndefined(); + }); + + it('dispose', function () { + iz.render($imgs); + $imgs.each(function () { + lib.fire(this, 'click'); + }); + iz.close(); + iz.dispose(); + + expect(lib.q(preStr())[0]).toBeUndefined(); + expect(lib.q(preStr('-mask'))[0]).toBeUndefined(); + expect(lib.q(preStr('-container'))[0]).toBeUndefined(); + expect(lib.q(preStr('-close'))[0]).toBeUndefined(); + expect(lib.q(preStr('-link'))[0]).toBeUndefined(); + }); + }); + +}); From bb3ef2f10851b46534a9a6f86d8a6c89f553f358 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 11:07:59 +0800 Subject: [PATCH 24/34] modified: src/ui/ImgZoom.js --- src/ui/ImgZoom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/ImgZoom.js b/src/ui/ImgZoom.js index af0eef9..c7484e3 100644 --- a/src/ui/ImgZoom.js +++ b/src/ui/ImgZoom.js @@ -202,7 +202,7 @@ define(function (require,exports,module) { */ closeImgZoom: function (img) { img = img || CurrentImgClass; - $('.' + img).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/big.cur),auto'}); + $('.' + img).css({cursor:'url(http://www.baidu.com/aladdin/img/ImgZoom/cur_zin.cur),auto'}); this.close(); CurrentImgClass = null; }, From 8dfb40ba87fdd64a2c7e21c8afcd9974af777084 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 11:28:15 +0800 Subject: [PATCH 25/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index dcf3298..004b213 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -142,7 +142,7 @@ define(function (require,exports,module) { data.left = lib.browser.ie && lib.browser.ie <=6 ? imgPosition.left -3 : imgPosition.left; - data.width = $img.width(); + data.width = $a.width(); // 存在图片超宽，被隐藏的情况，取a的宽度更准确 data.height = $img.height(); //修正放大图最小高宽 From cd5ed7e8750b61e55ae35cd31ae44a15d44d6eff Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 14:38:17 +0800 Subject: [PATCH 26/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index 004b213..dcf3298 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -142,7 +142,7 @@ define(function (require,exports,module) { data.left = lib.browser.ie && lib.browser.ie <=6 ? imgPosition.left -3 : imgPosition.left; - data.width = $a.width(); // 存在图片超宽，被隐藏的情况，取a的宽度更准确 + data.width = $img.width(); data.height = $img.height(); //修正放大图最小高宽 From 9a1aa660c871aadfba8993e8f5553846296adb92 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 14:39:10 +0800 Subject: [PATCH 27/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index dcf3298..a11d7b6 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -163,7 +163,7 @@ define(function (require,exports,module) { mouseout: function(event){ if(CurrentImgClass != null) { Timer = setTimeout(function(){ - _this.closeImgZoom(CurrentImgClass)},500); + _this.closeImgZoom(CurrentImgClass)},250); //发统计 rsv_imgZoom：3，mouseout关闭大图，fm:beha if(window.c){ @@ -227,7 +227,7 @@ define(function (require,exports,module) { }, mouseout:function(){ Timer = setTimeout(function(){ - _this.closeImgZoom(CurrentImgClass)},500); + _this.closeImgZoom(CurrentImgClass)},250); }, error:function () { _this.closeImgZoom(data.imgClass); From 6d2750bcd08d919d634a88f0692d2b84751075ee Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 16:11:16 +0800 Subject: [PATCH 28/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index a11d7b6..7848ca3 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -111,7 +111,9 @@ define(function (require,exports,module) { // rsv_imgZoom：1，大图点击跳转，fm:as/alop // rsv_imgZoom：2，mousein显示大图，fm:beha // rsv_imgZoom：3，mouseout关闭大图，fm:beha - $(this).parent().attr("data-click","{'rsv_imgZoom':'0'}") + $(this).parent().attr("data-click","{'rsv_imgZoom':'0'}"); + + $(this).parent().css("display","block"); var $img = $(this), $a = $img.parent(), From e38f179c647d6b4ce120eb9807f22d78922dbbcc Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 16 Sep 2014 17:30:42 +0800 Subject: [PATCH 29/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index 7848ca3..e1b50c3 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -107,20 +107,20 @@ define(function (require,exports,module) { return } - // rsv_imgZoom：0，小图点击跳转，fm:as/alop - // rsv_imgZoom：1，大图点击跳转，fm:as/alop - // rsv_imgZoom：2，mousein显示大图，fm:beha - // rsv_imgZoom：3，mouseout关闭大图，fm:beha - $(this).parent().attr("data-click","{'rsv_imgZoom':'0'}"); - - $(this).parent().css("display","block"); - var $img = $(this), $a = $img.parent(), $container = $img.parents(".result,.result-op"), imgClass = [options.prefix,'img',i].join('-'); if (!$container.length) {return}; + + // rsv_imgZoom：0，小图点击跳转，fm:as/alop + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + // rsv_imgZoom：2，mousein显示大图，fm:beha + // rsv_imgZoom：3，mouseout关闭大图，fm:beha + $a.attr("data-click","{'rsv_imgZoom':'0'}"); + + $a.css("display","block"); var data = { src: $img.attr('data-zoomImg'), @@ -144,7 +144,7 @@ define(function (require,exports,module) { data.left = lib.browser.ie && lib.browser.ie <=6 ? imgPosition.left -3 : imgPosition.left; - data.width = $img.width(); + data.width = $a.width(); data.height = $img.height(); //修正放大图最小高宽 From d7af0d7269d6862257a1402968f0ef9462d82c85 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 17 Sep 2014 16:57:25 +0800 Subject: [PATCH 30/34] modified: package.json modified: src/css/ImgZoomHover.less modified: src/ui/ImgZoomHover.js --- package.json | 2 +- src/css/ImgZoomHover.less | 10 ++++++++++ src/ui/ImgZoomHover.js | 8 +++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 156142b..1c41540 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.4", + "version": "0.7.5", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/css/ImgZoomHover.less b/src/css/ImgZoomHover.less index 7de0071..1621250 100644 --- a/src/css/ImgZoomHover.less +++ b/src/css/ImgZoomHover.less @@ -22,4 +22,14 @@ .@{imgZoomHover-prefix}-link { display:block; line-height:0; +} + +.@{imgZoomHover-prefix}-zoom { + width:16px; + height:16px; + position:absolute; + right:5px; + bottom:5px; + background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.png); + _background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.gif); } \ No newline at end of file diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index e1b50c3..0460ee9 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -120,7 +120,9 @@ define(function (require,exports,module) { // rsv_imgZoom：3，mouseout关闭大图，fm:beha $a.attr("data-click","{'rsv_imgZoom':'0'}"); - $a.css("display","block"); + $a.css({"display":"block","position":"relative"}); + + $a.append(''); var data = { src: $img.attr('data-zoomImg'), @@ -217,7 +219,7 @@ define(function (require,exports,module) { load:function () { $loading.hide(); _this.rePositionImgZoom(data); - $imgZoom.animate({opacity:'show'},500); + $imgZoom.animate({opacity:'show'},250); //发统计 rsv_imgZoom：2，mousein显示大图，fm:beha if(window.c){ @@ -314,7 +316,7 @@ define(function (require,exports,module) { case 1:$imgZoomContainer.css("top",data.top -10); break; - case 2:$imgZoomContainer.css("top",data.top - zoomImgHeight + bottomLeft - 10); + case 2:$imgZoomContainer.css("top",data.top - zoomImgHeight - 10); break; case 3:$imgZoomContainer.css("top",data.top - zoomImgHeight/2 -10); From 1c344e0d37d11787d299470ef2e5c82011e4fced Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 18 Sep 2014 11:41:59 +0800 Subject: [PATCH 31/34] modified: src/css/ImgZoomHover.less --- src/css/ImgZoomHover.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/ImgZoomHover.less b/src/css/ImgZoomHover.less index 1621250..1bfc726 100644 --- a/src/css/ImgZoomHover.less +++ b/src/css/ImgZoomHover.less @@ -28,8 +28,8 @@ width:16px; height:16px; position:absolute; - right:5px; - bottom:5px; + right:3px; + bottom:3px; background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.png); _background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.gif); } \ No newline at end of file From f366f1f670b79b2e9c7b55ecb4a3e135a15243f3 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 25 Sep 2014 15:11:52 +0800 Subject: [PATCH 32/34] modified: package.json modified: src/ui/ImgZoomHover.js --- package.json | 2 +- src/ui/ImgZoomHover.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1c41540..c422a3d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.5", + "version": "0.7.6", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index 0460ee9..6afe278 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -160,11 +160,13 @@ define(function (require,exports,module) { _this.closeImgZoom(CurrentImgClass); } CurrentImgClass = imgClass; - - _this.createImgZoomContainer(data); + + Timer = setTimeout(function(){ + _this.createImgZoomContainer(data);},250); }, mouseout: function(event){ + clearTimeout(Timer); if(CurrentImgClass != null) { Timer = setTimeout(function(){ _this.closeImgZoom(CurrentImgClass)},250); From 798f51385e51381ad2b903bdba40d99c7090a3b2 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 25 Sep 2014 15:51:36 +0800 Subject: [PATCH 33/34] modified: src/ui/ImgZoomHover.js --- src/ui/ImgZoomHover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index 6afe278..8f0afdf 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -162,7 +162,7 @@ define(function (require,exports,module) { CurrentImgClass = imgClass; Timer = setTimeout(function(){ - _this.createImgZoomContainer(data);},250); + _this.createImgZoomContainer(data);},200); }, mouseout: function(event){ From ba1755dd4c4b72478fa85ca35c0a3eca78e3d18d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 23 Oct 2014 15:44:07 +0800 Subject: [PATCH 34/34] modified: package.json modified: src/css/ImgZoomHover.less new file: src/css/ImgZoomHover2.less new file: src/css/ImgZoomHover3.less modified: src/ui/ImgZoomHover.js new file: src/ui/ImgZoomHover2.js new file: src/ui/ImgZoomHover3.js --- package.json | 2 +- src/css/ImgZoomHover.less | 5 +- src/css/ImgZoomHover2.less | 36 ++++ src/css/ImgZoomHover3.less | 36 ++++ src/ui/ImgZoomHover.js | 16 +- src/ui/ImgZoomHover2.js | 356 ++++++++++++++++++++++++++++++++++ src/ui/ImgZoomHover3.js | 379 +++++++++++++++++++++++++++++++++++++ 7 files changed, 824 insertions(+), 6 deletions(-) create mode 100644 src/css/ImgZoomHover2.less create mode 100644 src/css/ImgZoomHover3.less create mode 100644 src/ui/ImgZoomHover2.js create mode 100644 src/ui/ImgZoomHover3.js diff --git a/package.json b/package.json index c422a3d..f6bbb82 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Moye", - "version": "0.7.6", + "version": "0.7.7", "description": "知心UI组件库", "devDependencies": { "grunt": "~0.4.0", diff --git a/src/css/ImgZoomHover.less b/src/css/ImgZoomHover.less index 1bfc726..b3ad052 100644 --- a/src/css/ImgZoomHover.less +++ b/src/css/ImgZoomHover.less @@ -1,8 +1,9 @@ @import "./config.less"; -@imgZoomHover-prefix: e(%('%s-imgZoomHover', @ui-prefix)); +@imgZoomHover-prefix: e(%('%s-ImgZoomHover', @ui-prefix)); .@{imgZoomHover-prefix} { - display:none; + opacity:0.3; + filter:~"alpha(opacity=30)" } .@{imgZoomHover-prefix}-container { diff --git a/src/css/ImgZoomHover2.less b/src/css/ImgZoomHover2.less new file mode 100644 index 0000000..c094fdf --- /dev/null +++ b/src/css/ImgZoomHover2.less @@ -0,0 +1,36 @@ +@import "./config.less"; +@imgZoomHover-prefix: e(%('%s-ImgZoomHover2', @ui-prefix)); + +.@{imgZoomHover-prefix} { + opacity:0.3; + filter:~"alpha(opacity=30)" +} + +.@{imgZoomHover-prefix}-container { + text-align:center; + position:absolute; + background:rgb(255,255,255); + background:rgba(255,255,255,0.9); + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; + padding:10px; + z-index:299; + + .c-loading { + position:absolute; + } +} + +.@{imgZoomHover-prefix}-link { + display:block; + line-height:0; +} + +.@{imgZoomHover-prefix}-zoom { + width:16px; + height:16px; + position:absolute; + right:3px; + bottom:3px; + background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.png); + _background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.gif); +} \ No newline at end of file diff --git a/src/css/ImgZoomHover3.less b/src/css/ImgZoomHover3.less new file mode 100644 index 0000000..02dba08 --- /dev/null +++ b/src/css/ImgZoomHover3.less @@ -0,0 +1,36 @@ +@import "./config.less"; +@imgZoomHover-prefix: e(%('%s-ImgZoomHover3', @ui-prefix)); + +.@{imgZoomHover-prefix} { + opacity:0.3; + filter:~"alpha(opacity=30)" +} + +.@{imgZoomHover-prefix}-container { + text-align:center; + position:absolute; + background:rgb(255,255,255); + background:rgba(255,255,255,0.9); + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; + padding:8px; + z-index:299; + + .c-loading { + position:absolute; + } +} + +.@{imgZoomHover-prefix}-link { + display:block; + line-height:0; +} + +.@{imgZoomHover-prefix}-zoom { + width:16px; + height:16px; + position:absolute; + right:3px; + bottom:3px; + background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.png); + _background:url(//www.baidu.com/aladdin/img/ImgZoom/zoom.gif); +} \ No newline at end of file diff --git a/src/ui/ImgZoomHover.js b/src/ui/ImgZoomHover.js index 8f0afdf..c12d4c1 100644 --- a/src/ui/ImgZoomHover.js +++ b/src/ui/ImgZoomHover.js @@ -20,6 +20,14 @@ define(function (require,exports,module) { */ var CurrentImgClass; + /** + * 放大图片的标记 + * + * @type {string} + */ + var ImgFlag = false; + + /** * 计时器 * @@ -60,7 +68,7 @@ define(function (require,exports,module) { main: '', // 控件class前缀，同时将作为main的class之一 - prefix: config.prefix + '-imgZoomHover', + prefix: config.prefix + '-ImgZoomHover', // 放大图片的最小宽度 MinWidth:121, @@ -172,10 +180,11 @@ define(function (require,exports,module) { _this.closeImgZoom(CurrentImgClass)},250); //发统计 rsv_imgZoom：3，mouseout关闭大图，fm:beha - if(window.c){ + if(window.c && ImgFlag){ window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"3"}')); } } + ImgFlag = false; } @@ -221,7 +230,8 @@ define(function (require,exports,module) { load:function () { $loading.hide(); _this.rePositionImgZoom(data); - $imgZoom.animate({opacity:'show'},250); + $imgZoom.animate({opacity:1},250); + ImgFlag = true; //发统计 rsv_imgZoom：2，mousein显示大图，fm:beha if(window.c){ diff --git a/src/ui/ImgZoomHover2.js b/src/ui/ImgZoomHover2.js new file mode 100644 index 0000000..ccb619d --- /dev/null +++ b/src/ui/ImgZoomHover2.js @@ -0,0 +1,356 @@ +/** + * Moye (PS UI) + * Copyright 2014 Baidu Inc. All rights reserved. + * @author guoyong03 + * @date 2014-09-12 + + * @file 预览图放大组件 + */ + +define(function (require,exports,module) { + + var lib = require('./lib'); + var config = require('./config'); + var Control = require('./Control'); + + /** + * 被放大图片class + * + * @type {string} + */ + var CurrentImgClass; + + /** + * 放大图片的标记 + * + * @type {string} + */ + var ImgFlag = false; + + /** + * 计时器 + * + * @type {string} + */ + var Timer; + + + /** + * 预览图放大组件 + * + * @constructor + * @extends module:Control + * @requires Control + * @exports ImgZoomHover2 + */ + var ImgZoomHover2 = Control.extend(/** @lends module:Tabs.prototype */{ + + /** + * 控件类型标识 + * + * @type {string} + * @private + */ + type: 'ImgZoomHover2', + + /** + * 控件配置项 + * + * @name module:ImgZoom#options + * @type {Object} + * @property {(string | HTMLElement)} options.main 控件渲染容器 + * @property {string} options.prefix 控件class前缀，同时将作为main的class之一 + * @private + */ + options: { + // 控件渲染主容器 + main: '', + + // 控件class前缀，同时将作为main的class之一 + prefix: config.prefix + '-ImgZoomHover2', + + // 放大图片的最小宽度 + MinWidth:121, + + // 放大图片的最小高度 + MinHeight:90, + + // 放大图片的最大宽度 + MaxWidth:400, + + // 放大图片的最大高度 + MaxHeight:300 + + }, + + /** + * 控件初始化 + * + * @param {Object} options 控件配置项 + * @see module:ImgZoomHover2#options + * @private + */ + init: function (options){ + this.options.MinWidth = options.MinWidth || this.options.MinWidth; + this.options.MinHeight = options.MinHeight || this.options.MinHeight; + this.options.MaxWidth = options.MaxWidth || this.options.MaxWidth; + this.options.MaxHeight = options.MaxHeight || this.options.MaxHeight; + }, + + + /** + * 渲染控件，绑定事件 + * + * @param {Array} $img 图片对象数组 + * @private + */ + render: function ($imgs) { + var options = this.options; + var _this = this; + $imgs.each(function (i) { + + // 如果图片不可点，或图片没有data-zoomImg属性，return + if(!$(this).attr("data-zoomImg") ||!$(this).parent().attr('href')){ + return + } + + var $img = $(this), + $a = $img.parent(), + $container = $img.parents(".result,.result-op"), + imgClass = [options.prefix,'img',i].join('-'); + + if (!$container.length) {return}; + + // rsv_imgZoom：0，小图点击跳转，fm:as/alop + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + // rsv_imgZoom：2，mousein显示大图，fm:beha + // rsv_imgZoom：3，mouseout关闭大图，fm:beha + $a.attr("data-click","{'rsv_imgZoom':'0'}"); + + $a.css({"display":"block","position":"relative"}); + + $a.append(''); + + var data = { + src: $img.attr('data-zoomImg'), + href: $a.attr('href'), + imgClass: imgClass, + + // 点击参数,仅大搜索环境有效 + click: '"mu":"' + ($container.attr("mu") || $a.attr('href')) + '","p1":"' + $container.attr("id") + '","rsv_srcid":"' + $container.attr("srcid") + '"', + + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + click_fm: ($container.hasClass("result-op")?"alop":"as"), + click_rsv_imgZoom: '1' + }; + + $(this).bind({ + mouseover: function (event) { + imgPosition = $img.offset(); + data.top = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.top + document.body.scrollTop -2 + : imgPosition.top; + data.left = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.left -3 + : imgPosition.left; + data.width = $a.width(); + data.height = $img.height(); + + //修正放大图最小高宽 + options.MinWidth = $img.width(); + options.MinHeight = $img.height(); + + clearTimeout(Timer); + $img.addClass(imgClass); + + if(CurrentImgClass){ + _this.closeImgZoom(CurrentImgClass); + } + CurrentImgClass = imgClass; + + Timer = setTimeout(function(){ + _this.createImgZoomContainer(data);},200); + + }, + mouseout: function(event){ + clearTimeout(Timer); + if(CurrentImgClass != null) { + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},250); + + //发统计 rsv_imgZoom：3，mouseout关闭大图，fm:beha + if(window.c && ImgFlag){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"3"}')); + } + } + ImgFlag = false; + + } + + + }); + }); + }, + + + /** + * 关闭放大效果 + * + * @param {string} img 原图class属性 + * @private + */ + closeImgZoom: function (img) { + img = img || CurrentImgClass; + this.close(); + CurrentImgClass = null; + }, + + /** + * 创建放大图片容器 + * + * @param {object} data 原图属性参数 + * @private + */ + createImgZoomContainer: function (data) { + var _this = this; + var options = this.options + var imgClass = data.imgClass || CurrentImgClass; + + // 放大图片容器 + var $container = $('
'); + + // loading + var $loading = $(''); + + $(document.body).append($container.append($loading)); + + // 放大图片本身 + var $imgZoom=$('').bind({ + load:function () { + $loading.hide(); + _this.rePositionImgZoom(data); + $imgZoom.animate({opacity:1},250); + ImgFlag = true; + + //发统计 rsv_imgZoom：2，mousein显示大图，fm:beha + if(window.c){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"2"}')) + } + }, + mouseover:function(){ + clearTimeout(Timer); + }, + mouseout:function(){ + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},250); + }, + error:function () { + _this.closeImgZoom(data.imgClass); + } + }); + + $container.append($('').bind({click: function () {_this.closeImgZoom(data.imgClass);}}).append($imgZoom)); + + + }, + + /** + * 删除放大图片容器 + * + * @private + */ + removeImgZoomContainer: function () { + var options = this.options; + $('.' + options.prefix + '-container').remove(); + }, + + /** + * 约束图片大小，重新定位图片 + * + * @param {object} data 原图属性参数 + * @private + */ + rePositionImgZoom: function (data) { + var options = this.options; + var SreenHeight = (lib.browser.ie && lib.browser.ie <= 6 + ? document.body.offsetHeight + : $(window).height()); + + //放大方式，1向下，2向上，3居中 + var zoomStyle = 2; + + // 放大的图片 + var $imgZoom = $('.' + options.prefix); + var imgZoomHeight = $imgZoom.height(); + var imgZoomWidth = $imgZoom.width(); + + // 放大图片容器 + var $imgZoomContainer = $('.' + options.prefix + '-container'); + + // 原图距屏幕上边距 + var imgTop = data.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); + + var topLeft = imgTop - 63; + var bottomLeft = SreenHeight - imgTop - data.height; + + // 根据最大宽度和最大高度，约束图片放大效果，等比缩放 + if(imgZoomWidth/imgZoomHeight > options.MaxWidth/options.MaxHeight) { + if($imgZoom.width() >= options.MaxWidth) { + $imgZoom.css("width",options.MaxWidth); + } + } + else{ + if($imgZoom.height() >= options.MaxHeight) { + $imgZoom.css("height",options.MaxHeight); + } + } + + // 当原图小于展现大小，放大时按展现大小展现 + if($imgZoom.height() < options.MinHeight || $imgZoom.width() < options.MinWidth ) { + $imgZoom.css("height",options.MinHeight); + $imgZoom.css("width",options.MinWidth); + } + + var zoomImgHeight = $imgZoom.height() - data.height; + + + + if(topLeft < zoomImgHeight){ + zoomStyle = 1; + } + + switch(zoomStyle) { + case 1:$imgZoomContainer.css("top",data.top - topLeft -10); + break; + + case 2:$imgZoomContainer.css("top",data.top - zoomImgHeight - 10); + break; + } + + }, + + /** + * 关闭放大整体效果 + * + * @private + */ + close: function () { + this.removeImgZoomContainer(); + }, + + /** + * 销毁 + * + * @private + */ + dispose:function () { + this.close(); + CurrentImgClass = null; + clearTimeout(Timer); + Timer = null; + } + }); + + module.exports = ImgZoomHover2; + +}); diff --git a/src/ui/ImgZoomHover3.js b/src/ui/ImgZoomHover3.js new file mode 100644 index 0000000..05e79cc --- /dev/null +++ b/src/ui/ImgZoomHover3.js @@ -0,0 +1,379 @@ +/** + * Moye (PS UI) + * Copyright 2014 Baidu Inc. All rights reserved. + * @author guoyong03 + * @date 2014-09-12 + + * @file 预览图放大组件 + */ + +define(function (require,exports,module) { + + var lib = require('./lib'); + var config = require('./config'); + var Control = require('./Control'); + + /** + * 被放大图片class + * + * @type {string} + */ + var CurrentImgClass; + + /** + * 放大图片的标记 + * + * @type {string} + */ + var ImgFlag = false; + + /** + * 计时器 + * + * @type {string} + */ + var Timer; + + /** + * 全局坐标 + * + * @type {string} + */ + var PageX; + + + /** + * 预览图放大组件 + * + * @constructor + * @extends module:Control + * @requires Control + * @exports ImgZoomHover3 + */ + var ImgZoomHover3 = Control.extend(/** @lends module:Tabs.prototype */{ + + /** + * 控件类型标识 + * + * @type {string} + * @private + */ + type: 'ImgZoomHover3', + + /** + * 控件配置项 + * + * @name module:ImgZoom#options + * @type {Object} + * @property {(string | HTMLElement)} options.main 控件渲染容器 + * @property {string} options.prefix 控件class前缀，同时将作为main的class之一 + * @private + */ + options: { + // 控件渲染主容器 + main: '', + + // 控件class前缀，同时将作为main的class之一 + prefix: config.prefix + '-ImgZoomHover3', + + // 放大图片的最小宽度 + MinWidth:121, + + // 放大图片的最小高度 + MinHeight:90, + + // 放大图片的最大宽度 + MaxWidth:400, + + // 放大图片的最大高度 + MaxHeight:300 + + }, + + /** + * 控件初始化 + * + * @param {Object} options 控件配置项 + * @see module:ImgZoomHover3#options + * @private + */ + init: function (options){ + this.options.MinWidth = options.MinWidth || this.options.MinWidth; + this.options.MinHeight = options.MinHeight || this.options.MinHeight; + this.options.MaxWidth = options.MaxWidth || this.options.MaxWidth; + this.options.MaxHeight = options.MaxHeight || this.options.MaxHeight; + }, + + + /** + * 渲染控件，绑定事件 + * + * @param {Array} $img 图片对象数组 + * @private + */ + render: function ($imgs) { + var options = this.options; + var _this = this; + $imgs.each(function (i) { + + // 如果图片不可点，或图片没有data-zoomImg属性，return + if(!$(this).attr("data-zoomImg") ||!$(this).parent().attr('href')){ + return + } + + var $img = $(this), + $a = $img.parent(), + $container = $img.parents(".result,.result-op"), + imgClass = [options.prefix,'img',i].join('-'); + + if (!$container.length) {return}; + + // rsv_imgZoom：0，小图点击跳转，fm:as/alop + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + // rsv_imgZoom：2，mousein显示大图，fm:beha + // rsv_imgZoom：3，mouseout关闭大图，fm:beha + $a.attr("data-click","{'rsv_imgZoom':'0'}"); + + $a.css({"display":"block","position":"relative"}); + + $a.append(''); + + var data = { + src: $img.attr('data-zoomImg'), + href: $a.attr('href'), + imgClass: imgClass, + + // 点击参数,仅大搜索环境有效 + click: '"mu":"' + ($container.attr("mu") || $a.attr('href')) + '","p1":"' + $container.attr("id") + '","rsv_srcid":"' + $container.attr("srcid") + '"', + + // rsv_imgZoom：1，大图点击跳转，fm:as/alop + click_fm: ($container.hasClass("result-op")?"alop":"as"), + click_rsv_imgZoom: '1' + }; + + $(this).bind({ + mouseover: function (event) { + imgPosition = $img.offset(); + data.top = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.top + document.body.scrollTop -2 + : imgPosition.top; + data.left = lib.browser.ie && lib.browser.ie <=6 + ? imgPosition.left -3 + : imgPosition.left; + data.width = $a.width(); + data.height = $img.height(); + + //修正放大图最小高宽 + options.MinWidth = $img.width(); + options.MinHeight = $img.height(); + + clearTimeout(Timer); + $img.addClass(imgClass); + + if(CurrentImgClass){ + _this.closeImgZoom(CurrentImgClass); + } + CurrentImgClass = imgClass; + + Timer = setTimeout(function(){ + _this.createImgZoomContainer(data);},150); + + }, + mousemove:function(event){ + // 放大图片容器 + var $imgZoomContainer = $('.' + options.prefix + '-container'); + currentPageX = event.PageX||event.clientX; + if(PageX && $imgZoomContainer.length){ + $imgZoomContainer.css("left",currentPageX + 17 +"px"); + } + PageX = currentPageX ; + }, + mouseout: function(event){ + clearTimeout(Timer); + if(CurrentImgClass != null) { + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},0); + + //发统计 rsv_imgZoom：3，mouseout关闭大图，fm:beha + if(window.c && ImgFlag){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"3"}')); + } + } + ImgFlag = false; + + } + + + }); + }); + }, + + + /** + * 关闭放大效果 + * + * @param {string} img 原图class属性 + * @private + */ + closeImgZoom: function (img) { + img = img || CurrentImgClass; + this.close(); + CurrentImgClass = null; + }, + + /** + * 创建放大图片容器 + * + * @param {object} data 原图属性参数 + * @private + */ + createImgZoomContainer: function (data) { + var _this = this; + var options = this.options + var imgClass = data.imgClass || CurrentImgClass; + + // 放大图片容器 + var $container = $('
'); + + // loading + var $loading = $(''); + + $(document.body).append($container.append($loading)); + + // 放大图片本身 + var $imgZoom=$('').bind({ + load:function () { + $loading.hide(); + _this.rePositionImgZoom(data); + $imgZoom.animate({opacity:1},125); + ImgFlag = true; + + //发统计 rsv_imgZoom：2，mousein显示大图，fm:beha + if(window.c){ + window.c($.parseJSON('{'+data.click+',"fm":"beha","rsv_imgZoom":"2"}')) + } + }, + mouseover:function(){ + //clearTimeout(Timer); + }, + mouseout:function(){ + Timer = setTimeout(function(){ + _this.closeImgZoom(CurrentImgClass)},250); + }, + error:function () { + _this.closeImgZoom(data.imgClass); + } + }); + + $container.append($('').bind({click: function () {_this.closeImgZoom(data.imgClass);}}).append($imgZoom)); + + + }, + + /** + * 删除放大图片容器 + * + * @private + */ + removeImgZoomContainer: function () { + var options = this.options; + $('.' + options.prefix + '-container').remove(); + }, + + /** + * 约束图片大小，重新定位图片 + * + * @param {object} data 原图属性参数 + * @private + */ + rePositionImgZoom: function (data) { + var options = this.options; + var SreenHeight = (lib.browser.ie && lib.browser.ie <= 6 + ? document.body.offsetHeight + : $(window).height()); + + //放大方式，1向下，2向上，3居中 + var zoomStyle = 3; + + // 放大的图片 + var $imgZoom = $('.' + options.prefix); + var imgZoomHeight = $imgZoom.height(); + var imgZoomWidth = $imgZoom.width(); + + // 放大图片容器 + var $imgZoomContainer = $('.' + options.prefix + '-container'); + + // 原图距屏幕上边距 + var imgTop = data.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop); + + var topLeft = imgTop - 63; + var bottomLeft = SreenHeight - imgTop - data.height; + + // 根据最大宽度和最大高度，约束图片放大效果，等比缩放 + if(imgZoomWidth/imgZoomHeight > options.MaxWidth/options.MaxHeight) { + if($imgZoom.width() >= options.MaxWidth) { + $imgZoom.css("width",options.MaxWidth); + } + } + else{ + if($imgZoom.height() >= options.MaxHeight) { + $imgZoom.css("height",options.MaxHeight); + } + } + + // 当原图小于展现大小，放大时按展现大小展现 + if($imgZoom.height() < options.MinHeight || $imgZoom.width() < options.MinWidth ) { + $imgZoom.css("height",options.MinHeight); + $imgZoom.css("width",options.MinWidth); + } + + var zoomImgHeight = $imgZoom.height() - data.height; + + + + if(topLeft < zoomImgHeight/2){ + zoomStyle = 1; + } + else if(bottomLeft < zoomImgHeight/2) { + zoomStyle = 2; + }; + + + switch(zoomStyle) { + case 1:$imgZoomContainer.css("top",data.top - topLeft - 8); + break; + + case 2:$imgZoomContainer.css("top",data.top - zoomImgHeight + bottomLeft -8); + break; + + case 3:$imgZoomContainer.css("top",data.top - zoomImgHeight/2 -8); + break; + } + + }, + + /** + * 关闭放大整体效果 + * + * @private + */ + close: function () { + this.removeImgZoomContainer(); + }, + + /** + * 销毁 + * + * @private + */ + dispose:function () { + this.close(); + CurrentImgClass = null; + clearTimeout(Timer); + Timer = null; + } + }); + + module.exports = ImgZoomHover3; + +});