123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388 |
- // Generated by CoffeeScript 2.0.0-beta4
- (function() {
- // ------------------------------------------------------------------------
- // 變數與常數設置
- // ------------------------------------------------------------------------
- // 模組名稱。
- var Attribute, ClassName, Device, EVENT_NAMESPACE, Error, Event, MODULE_NAMESPACE, NAME, Selector, Settings, Transition, Visibility;
- NAME = 'sidebar';
- // 模組事件鍵名。
- EVENT_NAMESPACE = `.${NAME}`;
- // 模組命名空間。
- MODULE_NAMESPACE = `module-${NAME}`;
- // 模組設定。
- Settings = {
- // 消音所有提示,甚至是錯誤訊息。
- silent: false,
- // 顯示除錯訊息。
- debug: true,
- // 監聽 DOM 結構異動並自動重整快取。
- observeChanges: true,
- // 是否要在側邊欄出現的時候淡化頁面。
- dimPage: true,
- // 是否允許使用者點擊頁面關閉側邊欄。
- closable: true,
- // 是否要在側邊欄出現的時候所動頁面捲軸滾動。
- scrollLock: true,
- // 側邊欄的出場效果。(`overlay` 為覆蓋、`push` 為推出、`squeeze` 為擠壓)
- transition: 'overlay',
- // 預設的顯示模式,設為 `auto` 的時候出場效果會被覆蓋。(`auto` 為電腦常駐、行動裝置隱藏、`hidden` 為預設隱藏)
- visibility: 'hidden',
- // 當側邊欄剛出現時所會呼叫的回呼函式。
- onVisible: () => {},
- // 當側邊欄出現動畫結束時所會呼叫的回呼函式。
- onShow: () => {},
- // 當側邊欄可見狀態有所變更且動畫執行完畢時所會呼叫的回呼函式。
- onChange: () => {},
- // 當側邊欄關閉時所會呼叫的回呼函式。
- onHide: () => {},
- // 當側邊欄關閉動畫結束時所會呼叫的回呼函式。
- onHidden: () => {}
- };
- // 標籤。
- Attribute = {
- SCROLL_LOCK: 'data-scroll-lock'
- };
- // 過場動畫。
- Transition = {
- OVERLAY: 'overlay',
- PUSH: 'push',
- SQUEEZE: 'squeeze'
- };
- // 可見度。
- Visibility = {
- AUTO: 'auto',
- HIDDEN: 'hidden',
- STATIC: 'static'
- };
- // 事件名稱。
- Event = {
- VISIBLE: `visible${EVENT_NAMESPACE}`,
- SHOW: `show${EVENT_NAMESPACE}`,
- CHANGE: `change${EVENT_NAMESPACE}`,
- HIDE: `hide${EVENT_NAMESPACE}`,
- HIDDEN: `hidden${EVENT_NAMESPACE}`,
- CLICK: `click${EVENT_NAMESPACE}`,
- RESIZE: `resize${EVENT_NAMESPACE}`,
- TOUCHSTART: `touchstart${EVENT_NAMESPACE}`,
- ANIMATIONEND: 'animationend'
- };
- // 樣式名稱。
- ClassName = {
- VISIBLE: 'visible',
- ACTIVE: 'active',
- DIMMED: 'dimmed',
- ANIMATING: 'animating',
- OVERLAY: 'overlay',
- SQUEEZABLE: 'squeezable'
- };
- // 裝置。
- Device = {
- MOBILE: 'mobile'
- };
- // 選擇器名稱。
- Selector = {
- PUSHER: '.ts.pusher',
- BODY: 'body'
- };
- // 錯誤訊息。
- Error = {};
- // ------------------------------------------------------------------------
- // 模組註冊
- // ------------------------------------------------------------------------
- ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
- var $pusher, device, duration, elementNamespace, module;
- // ------------------------------------------------------------------------
- // 區域變數
- // ------------------------------------------------------------------------
- $pusher = ts();
- device = '';
- duration = 450;
- elementNamespace = '';
- // ------------------------------------------------------------------------
- // 模組定義
- // ------------------------------------------------------------------------
- return module = {
- setting: (key, value) => {
- settings[key] = value;
- return $allModules;
- },
- set: {
- lock: (value) => {
- if (value) {
- return $pusher.attr(Attribute.SCROLL_LOCK, 'true');
- } else {
- return $pusher.removeAttr(Attribute.SCROLL_LOCK);
- }
- },
- animating: (value) => {
- if (value) {
- return $this.addClass(ClassName.ANIMATING);
- } else {
- return $this.removeClass(ClassName.ANIMATING);
- }
- },
- visible: (value) => {
- if (value) {
- return $this.addClass(ClassName.VISIBLE);
- } else {
- return $this.removeClass(ClassName.VISIBLE);
- }
- }
- },
- update: {
- device: () => {
- return device = ts.device().device;
- }
- },
- get: {
- transition: () => {
- return settings.transition;
- },
- visibility: () => {
- return settings.visibility;
- }
- },
- reset: {
- pusher: () => {
- return $pusher.removeClass(ClassName.SQUEEZABLE);
- },
- sidebar: () => {
- return $this.removeClass(ClassName.OVERLAY);
- }
- },
- dim: {
- page: (value) => {
- if (value) {
- return $pusher.addClass(ClassName.DIMMED);
- } else {
- return $pusher.removeClass(ClassName.DIMMED);
- }
- }
- },
- show: () => {
- if (module.is.visible()) {
- return;
- }
- module.trigger.visible();
- module.reset.pusher();
- module.reset.sidebar();
- if (module.get.transition() === Transition.SQUEEZE) {
- $pusher.addClass(ClassName.SQUEEZABLE);
- }
- if (module.get.transition() === Transition.OVERLAY) {
- $this.addClass(ClassName.OVERLAY);
- }
- if (module.get.visibility() === Visibility.AUTO) {
- if (device === Device.MOBILE) {
- module.dim.page(true);
- module.set.lock(true);
- } else {
- module.dim.page(false);
- module.set.lock(false);
- }
- }
- if (settings.scrollLock) {
- module.set.lock(true);
- }
- if (settings.dimPage && module.get.visibility() !== Visibility.AUTO) {
- module.dim.page(true);
- }
- module.animate.show(() => {
- module.trigger.show();
- return module.trigger.change();
- });
- return $allModules;
- },
- hide: () => {
- if (module.is.hidden()) {
- return;
- }
- module.trigger.hide();
- module.set.lock(false);
- if (settings.dimPage) {
- module.dim.page(false);
- }
- module.animate.hide(() => {
- module.trigger.hidden();
- module.reset.pusher();
- module.reset.sidebar();
- return module.trigger.change();
- });
- return $allModules;
- },
- toggle: () => {
- if (module.is.hidden()) {
- module.show();
- } else {
- module.hide();
- }
- return $allModules;
- },
- animate: {
- show: (callback) => {
- module.set.animating(true);
- module.set.visible(true);
- return $this.off(Event.ANIMATIONEND).one(Event.ANIMATIONEND, () => {
- module.set.animating(false);
- if (callback != null) {
- return callback.call();
- }
- }).emulate(Event.ANIMATIONEND, duration);
- },
- hide: (callback) => {
- module.set.animating(true);
- module.set.visible(false);
- return $this.off(Event.ANIMATIONEND).one(Event.ANIMATIONEND, () => {
- module.set.animating(false);
- if (callback != null) {
- return callback.call();
- }
- }).emulate(Event.ANIMATIONEND, duration);
- }
- },
- attach: {
- events: (selector) => {
- return ts(selector).on(Event.CLICK, () => {
- return module.toggle();
- });
- }
- },
- is: {
- visible: () => {
- return $this.hasClass(ClassName.VISIBLE);
- },
- hidden: () => {
- return !module.is.visible();
- },
- animating: () => {
- return $this.hasClass(ClassName.ANIMATING);
- },
- closable: () => {
- return settings.closable === true;
- },
- child: (target) => {
- return $this.contains(target);
- }
- },
- repaint: () => {
- module.update.device();
- if (device === Device.MOBILE) {
- settings.transition = Transition.OVERLAY;
- return module.hide();
- } else {
- settings.transition = Transition.SQUEEZE;
- return module.show();
- }
- },
- trigger: {
- visible: () => {
- return $this.trigger(Event.VISIBLE, element);
- },
- show: () => {
- return $this.trigger(Event.SHOW, element);
- },
- change: () => {
- return $this.trigger(Event.CHANGE, element);
- },
- hide: () => {
- return $this.trigger(Event.HIDE, element);
- },
- hidden: () => {
- return $this.trigger(Event.HIDDEN, element);
- }
- },
- create: {
- id: () => {
- var id;
- id = (Math.random().toString(16) + '000000000').substr(2, 8);
- elementNamespace = `.${id}`;
- return debug('已產生臨時編號', id);
- }
- },
- bind: {
- repaint: () => {
- return ts(window).on(Event.RESIZE, () => {
- return module.repaint();
- });
- },
- events: () => {
- ts(Selector.BODY).on(`click.${elementNamespace}`, (event, context) => {
- debug('發生 CLICK 事件', context);
- if (module.is.child(event.target)) {
- return;
- }
- if (device !== Device.MOBILE && module.get.visibility() === Visibility.AUTO) {
- return;
- }
- if (!module.is.animating() && module.is.closable()) {
- return module.hide();
- }
- });
- $this.on(Event.VISIBLE, (event, context) => {
- debug('發生 VISIBLE 事件', context);
- return settings.onVisible.call(context, event);
- });
- $this.on(Event.SHOW, (event, context) => {
- debug('發生 SHOW 事件', context);
- return settings.onShow.call(context, event);
- });
- $this.on(Event.CHANGE, (event, context) => {
- debug('發生 CHANGE 事件', context);
- return settings.onChange.call(context, event);
- });
- $this.on(Event.HIDE, (event, context) => {
- debug('發生 HIDE 事件', context);
- return settings.onHide.call(context, event);
- });
- return $this.on(Event.HIDDEN, (event, context) => {
- debug('發生 HIDDEN 事件', context);
- return settings.onHidden.call(context, event);
- });
- }
- },
- // ------------------------------------------------------------------------
- // 基礎方法
- // ------------------------------------------------------------------------
- initialize: () => {
- debug('初始化側邊欄', element);
- $pusher = ts(Selector.PUSHER);
- module.create.id();
- module.update.device();
- module.bind.events();
- if (module.get.visibility() !== Visibility.AUTO) {
- return;
- }
- module.bind.repaint();
- return module.repaint();
- },
- instantiate: () => {
- return debug('實例化側邊欄', element);
- },
- refresh: () => {
- return $allModules;
- },
- destroy: () => {
- debug('摧毀側邊欄', element);
- $this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
- ts(Selector.BODY).off(`click.${elementNamespace}`);
- return $allModules;
- }
- };
- });
- }).call(this);
|