mirror of https://github.com/IoTcat/sakura2.git
parent
a11067364d
commit
2d70da49e9
6 changed files with 183 additions and 36 deletions
@ -1,33 +0,0 @@ |
|||||||
/** |
|
||||||
* Copyright 2019 Mashiro |
|
||||||
* @description material-components initial |
|
||||||
* @author Mashiro |
|
||||||
* @license MIT |
|
||||||
*/ |
|
||||||
|
|
||||||
import { MDCRipple } from '@material/ripple' |
|
||||||
import { MDCTextField } from '@material/textfield' |
|
||||||
import { MDCTopAppBar } from '@material/top-app-bar' |
|
||||||
|
|
||||||
export default function () { |
|
||||||
/* See https://git.io/JegHJ */ |
|
||||||
/* use once (single <HTMLElement>) */ |
|
||||||
// MDCRipple.attachTo(document.querySelector('.mdc-button'))
|
|
||||||
// const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'))
|
|
||||||
|
|
||||||
/* use to all (map <NodeList>) */ |
|
||||||
// for several classes
|
|
||||||
const rippleList = [] |
|
||||||
rippleList.push('.mdc-button','.demo-card__primary-action', ".something") |
|
||||||
const mdcRipple = [].map.call(document.querySelectorAll(rippleList.join(',')), function (e: any) { |
|
||||||
return new MDCRipple(e) |
|
||||||
}) |
|
||||||
|
|
||||||
// for specified class
|
|
||||||
const topAppBar = [].map.call(document.querySelectorAll('.mdc-top-app-bar'), function (e: any) { |
|
||||||
return new MDCTopAppBar(e) |
|
||||||
}) |
|
||||||
const textField = [].map.call(document.querySelectorAll('.mdc-text-field'), function (e: any) { |
|
||||||
return new MDCTextField(e) |
|
||||||
}) |
|
||||||
} |
|
@ -0,0 +1,126 @@ |
|||||||
|
/** |
||||||
|
* @license |
||||||
|
* Copyright 2016 Google Inc. |
||||||
|
* |
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
* of this software and associated documentation files (the "Software"), to deal |
||||||
|
* in the Software without restriction, including without limitation the rights |
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
* copies of the Software, and to permit persons to whom the Software is |
||||||
|
* furnished to do so, subject to the following conditions: |
||||||
|
* |
||||||
|
* The above copyright notice and this permission notice shall be included in |
||||||
|
* all copies or substantial portions of the Software. |
||||||
|
* |
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||||
|
* THE SOFTWARE. |
||||||
|
*/ |
||||||
|
|
||||||
|
// tslint:disable:only-arrow-functions
|
||||||
|
|
||||||
|
import {MDCComponent} from '@material/base/component'; |
||||||
|
import {MDCFoundation} from '@material/base/foundation'; |
||||||
|
|
||||||
|
import {strings} from './constants'; |
||||||
|
|
||||||
|
const {AUTO_INIT_ATTR, AUTO_INIT_STATE_ATTR, INITIALIZED_STATE} = strings; |
||||||
|
|
||||||
|
export interface MDCAttachable { |
||||||
|
new<F extends MDCFoundation>(root: Element, foundation?: F, ...args: Array<unknown>): MDCComponent<F>; |
||||||
|
|
||||||
|
// Static method.
|
||||||
|
attachTo<F extends MDCFoundation>(root: Element): MDCComponent<F>; |
||||||
|
} |
||||||
|
|
||||||
|
interface InternalComponentRegistry { |
||||||
|
[key: string]: MDCAttachable; |
||||||
|
} |
||||||
|
|
||||||
|
const registry: InternalComponentRegistry = {}; |
||||||
|
|
||||||
|
const CONSOLE_WARN = console.warn.bind(console); // tslint:disable-line:no-console
|
||||||
|
|
||||||
|
function emit<T extends object>(evtType: string, evtData: T, shouldBubble = false) { |
||||||
|
let evt; |
||||||
|
if (typeof CustomEvent === 'function') { |
||||||
|
evt = new CustomEvent<T>(evtType, { |
||||||
|
bubbles: shouldBubble, |
||||||
|
detail: evtData, |
||||||
|
}); |
||||||
|
} else { |
||||||
|
evt = document.createEvent('CustomEvent'); |
||||||
|
evt.initCustomEvent(evtType, shouldBubble, false, evtData); |
||||||
|
} |
||||||
|
|
||||||
|
document.dispatchEvent(evt); |
||||||
|
} |
||||||
|
|
||||||
|
/* istanbul ignore next: optional argument is not a branch statement */ |
||||||
|
/** |
||||||
|
* Auto-initializes all MDC components on a page. |
||||||
|
*/ |
||||||
|
export function mdcAutoInit(root = document) { |
||||||
|
const components = []; |
||||||
|
//捕获所有节点
|
||||||
|
let nodes: Element[] = [].slice.call(root.querySelectorAll(`[${AUTO_INIT_ATTR}]`)); |
||||||
|
nodes = nodes.filter((node) => node.getAttribute(AUTO_INIT_STATE_ATTR) !== INITIALIZED_STATE); |
||||||
|
|
||||||
|
for (const node of nodes) { |
||||||
|
const ctorName = node.getAttribute(AUTO_INIT_ATTR); |
||||||
|
if (!ctorName) { |
||||||
|
throw new Error('(mdc-auto-init) Constructor name must be given.'); |
||||||
|
} |
||||||
|
|
||||||
|
const Constructor = registry[ctorName]; // tslint:disable-line:variable-name
|
||||||
|
if (typeof Constructor !== 'function') { |
||||||
|
throw new Error( |
||||||
|
`(mdc-auto-init) Could not find constructor in registry for ${ctorName}`); |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: Should we make an eslint rule for an attachTo() static method?
|
||||||
|
// See https://github.com/Microsoft/TypeScript/issues/14600 for discussion of static interface support in TS
|
||||||
|
//const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'))
|
||||||
|
const component = Constructor.attachTo(node); |
||||||
|
Object.defineProperty(node, ctorName, { |
||||||
|
configurable: true, |
||||||
|
enumerable: false, |
||||||
|
value: component, |
||||||
|
writable: false, |
||||||
|
}); |
||||||
|
components.push(component); |
||||||
|
node.setAttribute(AUTO_INIT_STATE_ATTR, INITIALIZED_STATE); |
||||||
|
} |
||||||
|
|
||||||
|
emit('MDCAutoInit:End', {}); |
||||||
|
return components; |
||||||
|
} |
||||||
|
|
||||||
|
// Constructor is PascalCased because it is a direct reference to a class, rather than an instance of a class.
|
||||||
|
// tslint:disable-next-line:variable-name
|
||||||
|
mdcAutoInit.register = function(componentName: string, Constructor: MDCAttachable, warn = CONSOLE_WARN) { |
||||||
|
if (typeof Constructor !== 'function') { |
||||||
|
throw new Error(`(mdc-auto-init) Invalid Constructor value: ${Constructor}. Expected function.`); |
||||||
|
} |
||||||
|
const registryValue = registry[componentName]; |
||||||
|
if (registryValue) { |
||||||
|
warn(`(mdc-auto-init) Overriding registration for ${componentName} with ${Constructor}. Was: ${registryValue}`); |
||||||
|
} |
||||||
|
registry[componentName] = Constructor; |
||||||
|
}; |
||||||
|
|
||||||
|
mdcAutoInit.deregister = function(componentName: string) { |
||||||
|
delete registry[componentName]; |
||||||
|
}; |
||||||
|
|
||||||
|
mdcAutoInit.deregisterAll = function() { |
||||||
|
const keys = Object.keys(registry) as string[]; |
||||||
|
keys.forEach(this.deregister, this); |
||||||
|
}; |
||||||
|
|
||||||
|
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
|
||||||
|
export default mdcAutoInit; |
@ -0,0 +1,24 @@ |
|||||||
|
/** |
||||||
|
* Copyright 2019 Mashiro |
||||||
|
* @description material-components initial configuration |
||||||
|
* @author Mashiro |
||||||
|
* @license MIT |
||||||
|
*/ |
||||||
|
|
||||||
|
import { MDCRipple } from '@material/ripple' |
||||||
|
import { MDCTextField } from '@material/textfield' |
||||||
|
import { MDCTopAppBar } from '@material/top-app-bar' |
||||||
|
|
||||||
|
const Conf = [ |
||||||
|
['.mdc-top-app-bar', MDCTopAppBar], |
||||||
|
['.mdc-text-field', MDCTextField], |
||||||
|
[ |
||||||
|
[ |
||||||
|
'.mdc-button', |
||||||
|
'.demo-card__primary-action', |
||||||
|
], |
||||||
|
MDCRipple |
||||||
|
], |
||||||
|
] |
||||||
|
|
||||||
|
export default Conf |
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
* Copyright 2019 Mashiro |
||||||
|
* @description material-components initial handler |
||||||
|
* @author Mashiro |
||||||
|
* @license MIT |
||||||
|
*/ |
||||||
|
import mdcConf from "./mdcConf" |
||||||
|
|
||||||
|
const Conf = mdcConf |
||||||
|
export default function () { |
||||||
|
/* See https://git.io/JegHJ */ |
||||||
|
let components = [] |
||||||
|
for (const i of Conf) { |
||||||
|
if (typeof (i[0]) == 'string') { |
||||||
|
console.log(i) |
||||||
|
const component = i[0] |
||||||
|
const constructor = i[1] |
||||||
|
components.map.call(document.querySelectorAll(component), function (e: any) { |
||||||
|
return new constructor(e) |
||||||
|
}) |
||||||
|
} else if (typeof (i[0]) == 'object') { |
||||||
|
const component = i[0].join(',') |
||||||
|
const constructor = i[1] |
||||||
|
components.map.call(document.querySelectorAll(component), function (e: any) { |
||||||
|
return new constructor(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue