amotify 0.0.2 → 0.0.4

package/src/config.tsx

@@ -0,0 +1,132 @@
+export const script = document.currentScript;
+export const fileName = script?.attributes.getNamedItem( 'src' )!.textContent;
+export const Version = ( fileName?.match( /v\d\.\d\.\d/ ) || [ 'v0.0.0' ] )[ 0 ]!;
+
+export const userAgent = window.navigator.userAgent.toLowerCase();
+export const deviceType =
+  userAgent.indexOf( "windows nt" ) !== -1 ? 'Windows'
+    : userAgent.indexOf( "android" ) !== -1 ? 'Android'
+      : userAgent.indexOf( "iphone" ) !== -1 ? 'iPhone'
+        : userAgent.indexOf( "ipad" ) > -1 || ( userAgent.indexOf( "macintosh" ) > -1 && "ontouchend" in document ) ? 'iPad'
+          : userAgent.indexOf( "mac os x" ) !== -1 ? 'macOSX'
+            : 'undefined';
+
+export const deviceIdentifier = () => {
+  let info = {
+    isWhat: deviceType as 'Windows',
+    isTouchDevice: window.ontouchstart !== undefined && 0 < navigator.maxTouchPoints,
+    isPhone: [ 'Android','iPhone' ].includes( deviceType ),
+    isIOS: [ 'iPhone','iPad' ].includes( deviceType ),
+    isSystemDarkmode: () => {
+      return window.matchMedia( '(prefers-color-scheme: dark)' ).matches == true;
+    },
+    isBreakpoint: () => window.innerWidth <= 896,
+    isPhonepoint: () => window.innerWidth <= 690
+  }
+
+  return info;
+}
+
+export const SetThemeColorTag = () => {
+  let hex = '#45515c';
+  let meta = $( '#ThemeColorMetaTag' );
+  if ( !meta[ 0 ] ) return;
+  meta.setAttribute( 'content',hex );
+}
+
+export const defaultConfig: amotify.config.Methods = {
+  version: Version,
+  tone: 'default',
+  darkMode: 'light',
+  themeColor: 'comun',
+  roundness: 2,
+
+  device: deviceIdentifier(),
+  update: {
+    tone: ( value ) => {
+      if ( ![ 'default','flat','sharp' ].includes( value ) ) value = 'default';
+
+      if ( value == amotify.config.tone ) return;
+
+      amotify.config.tone = value;
+
+      let body = $( 'body' );
+      body
+        .removeClass( body.findClass( /^bdsTN/ ) )
+        .addClass( 'bdsTN' + value )
+        .callback( () => {
+          SetThemeColorTag();
+        } );
+
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+    themeColor: ( value ) => {
+      if ( ![
+        'comun','leaf','heart','droplet',
+        'brick','flower','lip','wine','theater','bat','poizon','eggplant','ufo','alien','tombstone','ninja','moon','rain','unicorn','axe','gem','soap','drizzle','building','fish','icicles','water','tree1','tree2','tree3','battery','seedle','greenTea','oak','salad','cloudy','lemon','angel','parasol','pizza','thunder','latte','island','shovel','coffee','carrot','cactus','volcano','choco','industry','gun','galaxy',
+        'line','twitter','amazon','facebook','android','slackBlue','slackGreen','slackRed','slackYellow','slackBase','googleBlue','googleGreen','googleYellow','googleRed'
+      ].includes( value ) ) value = 'comun';
+      if ( value == amotify.config.themeColor ) return;
+
+      amotify.config.themeColor = value;
+
+      let body = $( document.body );
+      body
+        .removeClass( body.findClass( /^bdsTC/ ) )
+        .addClass( 'bdsTC_' + value )
+        .callback( () => {
+          SetThemeColorTag();
+        } );
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+    darkMode: ( value ) => {
+      if ( ![ 'light','dark','dim','auto' ].includes( value ) ) value = 'light';
+      if ( value == amotify.config.darkMode ) return;
+      let Value = value == 'auto'
+        ? deviceIdentifier().isSystemDarkmode()
+          ? 'dark'
+          : 'light'
+        : value;
+
+      amotify.config.darkMode = value;
+
+      let body = $( 'body' );
+      body
+        .removeClass( body.findClass( /^bdsDM/ ) )
+        .addClass( 'bdsDM_' + Value );
+
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+    roundness: ( value ) => {
+      if ( !( value >= 0 && value <= 5 ) ) value = 2;
+      if ( value == amotify.config.roundness ) return;
+
+      amotify.config.roundness = value;
+      amotify.glob.useRecycle.do( 'RootViewController' );
+    },
+  },
+  readExtraCDN: async ( key ) => {
+    let url = key;
+    let valid = false;
+    if ( url ) {
+      await $.CDNReader( url );
+      console.log( 'Read extraCdn : ' + key );
+      valid = true;
+    }
+    return valid;
+  }
+}
+
+$( 'body' ).addClass( [
+  'usrDevice_' + deviceIdentifier().isWhat,
+  'bdsDM_' + defaultConfig.darkMode,
+  'bdsTC_' + defaultConfig.themeColor
+] );
+
+$( window ).addEvent( {
+  eventType: 'load',
+  callback: () => {
+    let style: any = document.body.style;
+    style.setProperty( '--viewHeight',window.innerHeight + 'px' );
+  }
+} );

package/src/launch.tsx

@@ -0,0 +1,100 @@
+import 'jsmin-front/dist/@types';
+
+if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+
+import './@types/_';
+
+let publicURI = 'https://public.comun.jp/';
+export { publicURI }
+
+import './@jsminAmotifyExtension/_';
+import {
+  React,
+  ReactDom,
+  ReactRouterDom,
+  pageTransit,
+  useStore,
+  useRecycle,
+  StyleConverter,
+  LaunchReactApplication
+} from '@global';
+import {
+  Flex,
+  FlexBr,
+  FAIcon,
+  Placeholder,
+  Grid,
+  Logo,
+  Box,
+  Span,
+  Paragraph,
+  Img
+} from '@atoms';
+import {
+  List,
+  Accordion,
+  LinkifyText,
+  Text,
+  Column,
+  Row
+} from '@mols';
+import {
+  DisplayStyleInput
+} from '@orgs';
+import {
+  PlayGround
+} from '@temps';
+import {
+  Buttons,
+  Input,
+  Inputs,
+  Table,
+  Layout,
+  Sheet,
+  SnackBar,
+  Loader,
+  Tooltips,
+  Effects,
+  Cropper,
+} from '@functions';
+
+import {
+  deviceIdentifier,
+  defaultConfig,
+  SetThemeColorTag
+} from './config';
+
+const amotify: amotify = {
+  config: defaultConfig,
+  glob: { React,ReactDom,ReactRouterDom: ReactRouterDom as any,pageTransit,useStore,useRecycle,StyleConverter,LaunchReactApplication },
+  atoms: { Flex,FlexBr,FAIcon,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
+  mols: { List,Accordion,LinkifyText,Text,Column,Row },
+  orgs: { DisplayStyleInput },
+  temps: { PlayGround },
+  fn: { Buttons,Input,Table,Layout,Sheet,SnackBar,Loader,Tooltips,Effects,Cropper }
+}
+
+export { amotify }
+global.amotify = amotify;
+Object.freeze( global.amotify.atoms );
+Object.freeze( global.amotify.mols );
+Object.freeze( global.amotify.orgs );
+Object.freeze( global.amotify.temps );
+Object.freeze( global.amotify.fn );
+Object.freeze( global.amotify );
+
+import './@styles/@app.scss';
+import './preload';
+
+// document.oncontextmenu = () => {return false;}
+$( window ).addEvent( {
+  eventType: 'resize',
+  eventID: 'getDeviceInfo',
+  callback: () => {
+    global.amotify.config.device = deviceIdentifier();
+
+    $( document.body ).setStyleProperty( '--viewHeight',window.innerHeight + 'px' );
+  }
+} );
+
+SetThemeColorTag();

package/src/preload.tsx

@@ -0,0 +1,49 @@
+let tags: Jsmin.CreateElement.Args[] = [
+  {
+    tag: 'meta',parent: document.head,attr: {
+      name: 'viewport',content: 'width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,viewport-fit=cover'
+    },
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com',rel: 'preconnect',async: true
+    }
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.gstatic.com',rel: 'preconnect',async: true
+    }
+  },
+  {
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap',
+      rel: 'stylesheet',
+      async: true
+    }
+  },{
+    tag: 'link',parent: document.head,attr: {
+      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;600&display=swap',
+      rel: 'stylesheet',
+      async: true
+    }
+  },
+  {
+    tag: 'script',parent: document.head,attr: {
+      src: 'https://kit.fontawesome.com/6745173b38.js',async: true
+    }
+  },{
+    tag: 'meta',parent: document.head,attr: {
+      name: 'theme-color',
+      content: '#45515c',
+    },
+    id: 'ThemeColorMetaTag'
+  },
+  { parent: document.body,id: 'SHEET' },
+  { parent: document.body,id: 'TOOLTIPS' },
+  { parent: document.body,id: 'SNACKBARS' },
+  { parent: document.body,id: 'LOADER' },
+  { parent: document.body,id: 'ROOT' },
+];
+for ( let tag of tags ) {
+  let { id } = tag;
+  if ( id && $( '#' + id )[ 0 ] ) continue;
+  $.createElement( tag );
+}

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib" : [
+    "lib": [
       "DOM"
     ],
     "jsx": "react",
@@ -8,27 +8,40 @@
     "module": "commonjs",
     "sourceMap": false,
     "baseUrl": "./",
-    "paths":{
-      "@uniVar" : [ "src/@styles/@variables/var" ],
-      "@styleSet" : [ "src/@styles/@variables/styleSet" ],
-
-      "@global" : [ "src/Global/@export" ],
-      "@atoms" : [ "src/Atoms/@export" ],
-      "@mols" : [ "src/Molecules/@export" ],
-      "@orgs" : [ "src/Organisms/@export" ],
-      "@temps" : [ "src/Templates/@export" ],
-      "@functions" : [ "src/Functions/@export" ]
+    "paths": {
+      "@uniVar": [
+        "src/@styles/@variables/var"
+      ],
+      "@styleSet": [
+        "src/@styles/@variables/styleSet"
+      ],
+      "@global": [
+        "src/Global/@export"
+      ],
+      "@atoms": [
+        "src/Atoms/@export"
+      ],
+      "@mols": [
+        "src/Molecules/@export"
+      ],
+      "@orgs": [
+        "src/Organisms/@export"
+      ],
+      "@temps": [
+        "src/Templates/@export"
+      ],
+      "@functions": [
+        "src/Functions/@export"
+      ]
     },
     "strict": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "downlevelIteration":true,
-
+    "downlevelIteration": true,
     "allowJs": true,
     "declaration": true,
     // "emitDeclarationOnly": true,
     "outDir": "./dist",
-
     "noImplicitAny": true,
     "noImplicitThis": true,
     "noImplicitReturns": true,