@@ -19,8 +19,13 @@ class Utils {
1919 }
2020 return uuid . join ( '' ) . toLocaleLowerCase ( ) ;
2121 }
22+ static isDOM ( o ) {
23+ return (
24+ typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
25+ o && typeof o === "object" && o !== null && o . nodeType === 1 && typeof o . nodeName === "string"
26+ ) ;
27+ }
2228}
23-
2429class Socket {
2530 constructor ( baseurl ) {
2631 this . _ws = null ;
@@ -121,6 +126,184 @@ class Socket {
121126 }
122127
123128}
124-
129+ class I18NManager {
130+ constructor ( ) {
131+ this . _i18n = { }
132+ this . _lang = "zh_CN"
133+ }
134+ addLangage ( lang , key , value ) {
135+ if ( ! ( lang in this . _i18n ) ) {
136+ this . _i18n [ lang ] = { }
137+ }
138+ this . _i18n [ lang ] [ key ] = value ;
139+ }
140+ addLanguageTable ( lang , table ) {
141+ table . entries ( ) . forEach ( ( [ key , value ] ) => {
142+ this . addLangage ( lang , key , value )
143+ } )
144+ }
145+ t ( key , params ) {
146+ if ( ! ( this . _lang in this . _i18n ) ) {
147+ return key ;
148+ }
149+ var value = this . _i18n [ this . _lang ] [ key ] ;
150+ if ( value == null ) {
151+ return key ;
152+ }
153+ params . entries ( ) . forEach ( ( [ key , value ] ) => {
154+ value = value . replace ( `%${ key } , value ) ;
155+ } )
156+ return value ;
157+ }
158+ setLang ( lang ) {
159+ this . _lang = lang ;
160+ window . dispatchEvent ( new CustomEvent ( "langChange" , { detail : lang } ) )
161+ }
162+ }
163+ class ElementManager {
164+ constructor ( ) {
165+ this . _elements = [ ]
166+ window . addEventListener ( "langChange" , ( event ) => {
167+ this . _elements . forEach ( element => element . _render_i18n ( ) )
168+ } )
169+ }
170+ add ( element ) {
171+ this . _elements . push ( element ) ;
172+ }
173+ }
174+ class Element {
175+ constructor ( object ) {
176+ if ( typeof object == "string" ) {
177+ this . _base = document . createElement ( object ) ;
178+ } else if ( Utils . isDOM ( object ) ) {
179+ this . _base = object ;
180+ }
181+ this . _i18n_key = null ;
182+ this . _i18n_params = { } ;
183+ this . _children = [ ]
184+ $ElementManager . add ( this ) ;
185+ }
186+ get origin ( ) {
187+ return this . _base ;
188+ }
189+ html ( html ) {
190+ this . _base . innerHTML = html ;
191+ return this ;
192+ }
193+ text ( text ) {
194+ this . _base . innerText = text ;
195+ return this ;
196+ }
197+ i18n ( key ) {
198+ this . _i18n_key = key ;
199+ this . _render_i18n ( ) ;
200+ return this ;
201+ }
202+ t18n ( params ) {
203+ this . _i18n_params = params || { } ;
204+ this . _render_i18n ( ) ;
205+ return this ;
206+ }
207+ _render_i18n ( ) {
208+ if ( this . _i18n_key == null ) {
209+ return ;
210+ }
211+ this . text ( $i18n . t ( this . _i18n_key ) )
212+ }
213+ append ( element ) {
214+ if ( Utils . isDOM ( element ) ) {
215+ element = new Element ( element ) ;
216+ }
217+ this . _children . push ( element ) ;
218+ this . _base . appendChild ( element . origin ) ;
219+ }
220+ classes ( ...classes ) {
221+ this . _base . classList . add ( ...classes ) ;
222+ return this ;
223+ }
224+ removeClasses ( ...classes ) {
225+ this . _base . classList . remove ( ...classes ) ;
226+ return this ;
227+ }
228+ style ( key , value ) {
229+ this . _base . style [ key ] = value ;
230+ return this ;
231+ }
232+ on ( event , handler ) {
233+ this . _base . addEventListener ( event , handler ) ;
234+ return this ;
235+ }
236+ get children ( ) {
237+ return this . _children ;
238+ }
239+ get length ( ) {
240+ return this . _children . length ;
241+ }
242+ removeChild ( object ) {
243+ // first number
244+ // second dom
245+ // last element
246+ if ( typeof object == "number" ) {
247+ this . _children . splice ( object , 1 ) ;
248+ } else if ( Utils . isDOM ( object ) ) {
249+ this . _children . splice ( this . _children . indexOf ( new Element ( object ) ) , 1 ) ;
250+ } else {
251+ this . _children . splice ( this . _children . indexOf ( object ) , 1 ) ;
252+ }
253+ }
254+ get firstChild ( ) {
255+ return this . _children [ 0 ] ;
256+ }
257+ get lastChild ( ) {
258+ return this . _children [ this . _children . length - 1 ] ;
259+ }
260+ }
261+ class Style {
262+ constructor ( ) {
263+ this . _styles = { }
264+ this . _style_dom = document . createElement ( "style" ) ;
265+ document . getElementsByTagName ( "head" ) . item ( 0 ) . appendChild ( this . _style_dom ) ;
266+ }
267+ _parseToString ( object ) {
268+ // if object is array, we foreach and parse again
269+ // if obejct is table, we join ";" in it
270+ // if object is string, we return it
271+ if ( Array . isArray ( object ) ) {
272+ return object . map ( this . _parseToString ) . join ( ";" ) ;
273+ } else if ( typeof object == "object" ) {
274+ return Object . entries ( object ) . map ( ( [ key , value ] ) => `${ key } ${ this . _parseToString ( value ) } ) . join ( ";" ) ;
275+ } else {
276+ return object . toString ( ) ;
277+ }
278+ }
279+ add ( name , style ) {
280+ this . _styles [ name ] = this . _parseToString ( style ) ;
281+ this . render ( ) ;
282+ }
283+ render ( ) {
284+ this . _style_dom . innerHTML = Object . entries ( this . _styles ) . map ( ( [ name , style ] ) => `${ name } ${ style } ) . join ( "" ) ;
285+ }
286+ }
287+ function createElement ( object ) {
288+ return new Element ( object ) ;
289+ }
290+ const $ElementManager = new ElementManager ( ) ;
291+ const $style = new Style ( ) ;
292+ const $i18n = new I18NManager ( ) ;
125293const $socket = new Socket ( window . location . origin + "/api" ) ;
126- $socket . send ( "echo" , "hello world" )
294+
295+ window . addEventListener ( "DOMContentLoaded" , ( ) => {
296+ console . log ( "hello world" )
297+ $style . add ( "body" , {
298+ "background-color" : "black"
299+ } )
300+ Array . from ( document . getElementsByClassName ( "preloader" ) ) . forEach ( e => {
301+ const element = new Element ( e ) ;
302+ requestAnimationFrame ( ( ) => {
303+ element . classes ( "hidden" ) ;
304+ setTimeout ( ( ) => {
305+ element . remove ( ) ;
306+ } , 5000 )
307+ } )
308+ } )
309+ } )
0 commit comments