|
@@ -0,0 +1,201 @@
|
|
|
|
+//Store Class
|
|
|
|
+
|
|
|
|
+{
|
|
|
|
+ class Store{
|
|
|
|
+ #reducer;
|
|
|
|
+ #state;
|
|
|
|
+ #cbs = []
|
|
|
|
+
|
|
|
|
+ constructor(reducer){
|
|
|
|
+ this.#reducer=reducer
|
|
|
|
+ this.#state= this.#reducer(undefined, {})
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ get state(){
|
|
|
|
+ return this.#state
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ getState(){
|
|
|
|
+ return this.#state
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ subscribe(cb){
|
|
|
|
+ (this.#cbs.push(cb), () => this.#cbs = this.#cbs.filter(c => c !== cb))
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ dispatch(action){
|
|
|
|
+ const newState = this.#reducer(this.#state, action)
|
|
|
|
+ if (newState !== this.#state){
|
|
|
|
+ this.#state = newState
|
|
|
|
+ for (let cb of this.#cbs) cb()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+class StoreThunk extends Store{
|
|
|
|
+ dispatch(action) {
|
|
|
|
+ if (typeof action === 'function') {
|
|
|
|
+ return action(this.dispatch.bind(this), this.state)
|
|
|
|
+ }
|
|
|
|
+ super.dispatch(action);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+//Password Class
|
|
|
|
+{
|
|
|
|
+ class Password{
|
|
|
|
+
|
|
|
|
+ constructor(parent, open){
|
|
|
|
+ let input = document.createElement('input')
|
|
|
|
+ let checkBox = document.createElement('input')
|
|
|
|
+ checkBox.type = 'checkbox'
|
|
|
|
+ checkBox.onchange =()=>this.open(checkBox.checked)
|
|
|
|
+ parent.append(input, checkBox)
|
|
|
|
+ }
|
|
|
|
+ set value(value){
|
|
|
|
+ this.input.value = value
|
|
|
|
+ }
|
|
|
|
+ set open(open){
|
|
|
|
+ this.input.type = open ?'text':'password'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ get value(){
|
|
|
|
+ this.input.value
|
|
|
|
+ }
|
|
|
|
+ get open(){
|
|
|
|
+ this.input.type
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let p = new Password(document.body, true)
|
|
|
|
+
|
|
|
|
+ p.onChange = data => console.log(data)
|
|
|
|
+ p.onOpenChange = open => console.log(open)
|
|
|
|
+
|
|
|
|
+ p.value('qwerty')
|
|
|
|
+ console.log(p.value())
|
|
|
|
+
|
|
|
|
+ p.open(false)
|
|
|
|
+ console.log(p.open())
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+class RGB{
|
|
|
|
+ #r
|
|
|
|
+ #g
|
|
|
|
+ #b
|
|
|
|
+
|
|
|
|
+ get r(){
|
|
|
|
+ return this.#r
|
|
|
|
+ }
|
|
|
|
+ get g(){
|
|
|
|
+ return this.#g
|
|
|
|
+ }
|
|
|
|
+ get b(){
|
|
|
|
+ return this.#b
|
|
|
|
+ }
|
|
|
|
+ get rgb(){
|
|
|
|
+ return `rgb(${this.#r},${this.#g},${this.#b})`
|
|
|
|
+ }
|
|
|
|
+ get hex(){
|
|
|
|
+ return "#" + ((1 << 24) + (this.#r << 16) + (this.#g << 8) + this.#b).toString(16).slice(1)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ set r(value){
|
|
|
|
+ if(typeof value === 'number' && value<=255 && value>=0){
|
|
|
|
+ return this.#r=value
|
|
|
|
+ }else{throw new RangeError(value)}
|
|
|
|
+ }
|
|
|
|
+ set g(value){
|
|
|
|
+ if(typeof value === 'number' && value<=255 && value>=0){
|
|
|
|
+ return this.#g=value
|
|
|
|
+ }else{throw new RangeError(value)}
|
|
|
|
+ }
|
|
|
|
+ set b(value){
|
|
|
|
+ if(typeof value === 'number' && value<=255 && value>=0){
|
|
|
|
+ return this.#b=value
|
|
|
|
+ }else{throw new RangeError(value)}
|
|
|
|
+ }
|
|
|
|
+ set rgb(rgb){
|
|
|
|
+ var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
|
|
|
|
+ var match = matchColors.exec(rgb);
|
|
|
|
+ if (match !== null) {
|
|
|
|
+ this.#r = match[1]
|
|
|
|
+ this.#g = match[2]
|
|
|
|
+ this.#b = match[3]
|
|
|
|
+ }else{throw new RangeError(rgb)}
|
|
|
|
+ }
|
|
|
|
+ set hex(hex){
|
|
|
|
+ var match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
|
|
+ if (match !== null) {
|
|
|
|
+ this.#r = parseInt(match[1], 16)
|
|
|
|
+ this.#g = parseInt(match[2], 16)
|
|
|
|
+ this.#b = parseInt(match[3], 16)
|
|
|
|
+ }else{throw new SyntaxError(hex)}
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+class RGBA extends RGB{
|
|
|
|
+ #a
|
|
|
|
+ get a(){
|
|
|
|
+ return this.#a
|
|
|
|
+ }
|
|
|
|
+ set a(value){
|
|
|
|
+ if(typeof value === 'number' && value<=1 && value>=0){
|
|
|
|
+ return this.#a=value
|
|
|
|
+ }else{throw new RangeError(value)}
|
|
|
|
+ }
|
|
|
|
+ set hex(hex){
|
|
|
|
+ if(hex.length>7){
|
|
|
|
+ var match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
|
|
+ if (match !== null) {
|
|
|
|
+ this.r = parseInt(match[1], 16)
|
|
|
|
+ this.g = parseInt(match[2], 16)
|
|
|
|
+ this.b = parseInt(match[3], 16)
|
|
|
|
+ this.#a= parseInt(match[4], 16)/255
|
|
|
|
+ this.#a= +this.#a.toFixed(2)
|
|
|
|
+ }else{throw new SyntaxError(hex)}
|
|
|
|
+ }else{return super.hex=hex}
|
|
|
|
+ }
|
|
|
|
+ get hex(){
|
|
|
|
+ debugger
|
|
|
|
+ let transparency=((this.#a * 255) | 1 << 8).toString(16).slice(1)
|
|
|
|
+ if (transparency.length == 1) transparency = '0' + transparency;
|
|
|
|
+ return super.hex+transparency
|
|
|
|
+ }
|
|
|
|
+ set rgba(rgba){
|
|
|
|
+ debugger
|
|
|
|
+ var matchColors = /^rgba\((\d{1,3}), *(\d{1,3}), *(\d{1,3})(?:, *(\d*\.?\d+))?\)$/;
|
|
|
|
+ var match = matchColors.exec(rgba);
|
|
|
|
+ if (match !== null) {
|
|
|
|
+ this.r = Number(match[1])
|
|
|
|
+ this.g = Number(match[2])
|
|
|
|
+ this.b = Number(match[3])
|
|
|
|
+ this.#a = Number(match[4])
|
|
|
|
+ }else{throw new RangeError(rgba)}
|
|
|
|
+ }
|
|
|
|
+ get rgba(){
|
|
|
|
+ return `rgba(${this.r},${this.g},${this.b},${this.#a})`
|
|
|
|
+ }
|
|
|
|
+ set color(value){
|
|
|
|
+ try{
|
|
|
|
+ this.hex=value
|
|
|
|
+ }catch(e){}
|
|
|
|
+ try{
|
|
|
|
+ this.rgba=value
|
|
|
|
+ }catch(e){}
|
|
|
|
+ try{
|
|
|
|
+ this.rgb=value
|
|
|
|
+ }catch(e){}
|
|
|
|
+ }
|
|
|
|
+}
|