123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 |
- // Generated by CoffeeScript 2.0.0-beta4
- (function() {
- // ------------------------------------------------------------------------
- // 變數與常數設置
- // ------------------------------------------------------------------------
- // 模組名稱。
- var ClassName, EVENT_NAMESPACE, Error, Event, MODULE_NAMESPACE, Metadata, NAME, Selector, Settings;
- NAME = 'comparison';
- // 模組事件鍵名。
- EVENT_NAMESPACE = `.${NAME}`;
- // 模組命名空間。
- MODULE_NAMESPACE = `module-${NAME}`;
- // 模組設定。
- Settings = {
- // 消音所有提示,甚至是錯誤訊息。
- silent: false,
- // 顯示除錯訊息。
- debug: true,
- // 監聽 DOM 結構異動並自動重整快取。
- observeChanges: true,
- // 當尺寸正在變更時所呼叫的回呼函式。
- onResize: function() {},
- // 當圖片載入完畢後並顯示時所會呼叫的回呼函式。
- onDisplay: function() {},
- // 標籤上的文字。
- labels: {
- // 之前圖片的標籤文字。
- before: 'Before',
- // 之後圖片的標籤文字。
- after: 'After'
- },
- // 更改大小拉桿的設置。
- resizer: {
- // 拉桿的樣式,可用為:divider、circular、dots、rounded。
- style: 'rounded'
- }
- };
- // 中繼資料名稱。
- Metadata = {
- CONTENT: 'content'
- };
- // 事件名稱。
- Event = {
- LOAD: `load${EVENT_NAMESPACE}`,
- RESIZE: `resize${EVENT_NAMESPACE}`,
- DISPLAY: `display${EVENT_NAMESPACE}`,
- MOUSEDOWN: `mousedown${EVENT_NAMESPACE}`,
- MOUSEMOVE: `mousemove${EVENT_NAMESPACE}`,
- MOUSEUP: `mouseup${EVENT_NAMESPACE}`,
- MOUSEOUT: `mouseout${EVENT_NAMESPACE}`,
- TOUCHSTART: `touchstart${EVENT_NAMESPACE}`,
- TOUCHMOVE: `touchmove${EVENT_NAMESPACE}`,
- TOUCHEND: `touchend${EVENT_NAMESPACE}`
- };
- // 樣式名稱。
- ClassName = {
- ACTIVE: 'active',
- ANIMATING: 'animating'
- };
- // 選擇器名稱。
- Selector = {
- AFTER: '.after',
- BEFORE: '.before',
- RESIZER: '.resizer',
- IMG: 'img',
- BODY: 'body'
- };
- // 錯誤訊息。
- Error = {};
- // ------------------------------------------------------------------------
- // 模組註冊
- // ------------------------------------------------------------------------
- ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
- var $after, $before, $body, $comparison, $resizer, comparisonRect, module, resizerWidth;
- // ------------------------------------------------------------------------
- // 區域變數
- // ------------------------------------------------------------------------
- $comparison = $this;
- $before = void 0;
- $after = void 0;
- $resizer = void 0;
- $body = ts(Selector.BODY);
- comparisonRect = void 0;
- resizerWidth = 14;
- // ------------------------------------------------------------------------
- // 模組定義
- // ------------------------------------------------------------------------
- return module = {
- show: {
- after: () => {
- return module.set.resizer(100);
- },
- before: () => {
- return module.set.resizer(0);
- }
- },
- create: {
- template: () => {
- var afterImg, beforeImg;
- beforeImg = $this.find(Selector.BEFORE).attr('src');
- afterImg = $this.find(Selector.AFTER).attr('src');
- return `<div class=\"before\">\n <img src=\"${beforeImg}\" style=\"filter: blur(5px);\">\n <label>${settings.labels.before}</label>\n</div>\n<div class=\"after\">\n <img src=\"${afterImg}\">\n <label>${settings.labels.after}</label>\n</div>\n<div class=\"${settings.resizer.style} resizer\"></div>`;
- }
- },
- set: {
- resizer: (percent) => {
- percent = percent > 50 ? `calc(${percent}% - ${resizerWidth}px)` : `${percent}%`;
- $after.css('width', percent);
- $resizer.css('left', percent);
- return module.trigger.resize();
- },
- after: {
- url: (url) => {
- return module.get.after.$img().prop('src', url);
- }
- },
- before: {
- url: (url) => {
- return module.get.before.$img().prop('src', url);
- }
- },
- html: (html) => {
- return $this.html(html);
- },
- content: (content) => {
- return $this.data(Metadata.CONTENT, content);
- }
- },
- get: {
- rect: () => {
- return $this.get().getBoundingClientRect();
- },
- resizer: {
- rect: () => {
- return $resizer.get().getBoundingClientRect();
- }
- },
- after: {
- rect: () => {
- return $after.get().getBoundingClientRect();
- },
- $img: () => {
- return $after.find(Selector.IMG);
- }
- },
- before: {
- $img: () => {
- return $before.find(Selector.IMG);
- }
- },
- html: () => {
- return $this.html();
- },
- content: () => {
- return $this.data(Metadata.CONTENT);
- },
- clientX: (event) => {
- if (event.type === 'touchstart' || event.type === 'touchmove') {
- return event.touches[0].clientX;
- } else {
- return event.clientX;
- }
- }
- },
- trigger: {
- resize: () => {
- return $this.trigger(Event.RESIZE, element);
- },
- display: () => {
- return $this.trigger(Event.DISPLAY, element);
- }
- },
- move: {
- resizer: (event) => {
- var offset, rect;
- rect = comparisonRect;
- offset = module.get.clientX(event) - module.get.resizer.rect().left;
- return $this.on(`${Event.MOUSEMOVE} ${Event.TOUCHMOVE}`, (event) => {
- var clientX, left, reached;
- clientX = module.get.clientX(event);
- left = clientX - rect.left - offset;
- reached = {
- left: left < 0,
- right: left > rect.right - rect.left - resizerWidth
- };
- if (reached.left || reached.right) {
- return;
- }
- $resizer.css('left', `${left}px`);
- $after.css('width', `${((module.get.resizer.rect().left - rect.left) / rect.width) * 100}%`);
- return module.trigger.resize();
- });
- }
- },
- bind: {
- events: () => {
- $this.on(Event.RESIZE, (event, context) => {
- debug('發生 RESIZE 事件', context);
- return settings.onResize.call(context, event);
- });
- $this.on(Event.DISPLAY, (event, context) => {
- debug('發生 DISPLAY 事件', context);
- return settings.onDisplay.call(context, event);
- });
- $body.on(`${Event.MOUSEUP} ${Event.TOUCHEND}`, (event) => {
- $this.off(`${Event.MOUSEDOWN} ${Event.MOUSEMOVE} ${Event.MOUSEUP} ${Event.TOUCHSTART} ${Event.TOUCHMOVE}`);
- return module.bind.resizer.events();
- });
- module.get.after.$img().on(Event.LOAD, (event, context) => {
- debug('發生 LOAD 事件', context);
- return module.trigger.display();
- });
- return module.get.before.$img().on(Event.LOAD, (event, context) => {
- debug('發生 LOAD 事件', context);
- return module.trigger.display();
- });
- },
- resizer: {
- events: () => {
- return $this.on(`${Event.MOUSEDOWN} ${Event.TOUCHSTART}`, Selector.RESIZER, (event) => {
- return module.move.resizer(event);
- });
- }
- }
- },
- // ------------------------------------------------------------------------
- // 基礎方法
- // ------------------------------------------------------------------------
- initialize: () => {
- debug('初始化圖片比較', element);
- module.set.content(module.get.html());
- module.set.html(module.create.template());
- module.refresh();
- module.bind.events();
- return module.bind.resizer.events();
- },
- instantiate: () => {
- return debug('實例化圖片比較', element);
- },
- refresh: () => {
- $after = $this.find(Selector.AFTER);
- $before = $this.find(Selector.BEFORE);
- $resizer = $this.find(Selector.RESIZER);
- comparisonRect = module.get.rect();
- return $allModules;
- },
- destroy: () => {
- debug('摧毀圖片比較', element);
- $this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
- module.set.html(module.get.content());
- return $allModules;
- }
- };
- });
- }).call(this);
|