$mol rewrite

.gitattributes

@@ -0,0 +1 @@
+*	-text

.github/workflows/mpds_cifplayer.yml

@@ -0,0 +1,23 @@
+name: $mpds_cifplayer
+
+on:
+  workflow_dispatch:
+  push:
+  pull_request:
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+    - uses: hyoo-ru/mam_build@master2
+      with:
+        package: 'mpds/cifplayer'
+        modules: 'demo'
+
+    - uses: JamesIves/github-pages-deploy-action@4.1.7
+      with:
+        branch: gh-pages
+        folder: 'mpds/cifplayer/demo/-'

.gitignore

@@ -1,4 +1 @@
-/src/js/libs/*.custom.js
-/node_modules
-/three.js-r72
-/_work
+-*

app/app.view.css.ts

@@ -0,0 +1,54 @@
+namespace $.$$ {
+
+	$mol_style_define( $mpds_cifplayer_app, {
+
+		contain: 'none', //otherwise in fullscreen 'fixed' positions plot relative to parent not to the viewport
+
+		'[mol_drop_status]': {
+			drag: {
+				Menu: {
+					background: {
+						color: $mol_theme.hover,
+					},
+				},
+			},
+		},
+
+		Start: {
+			background: {
+				color: $mol_theme.back,
+			},
+			padding: {
+				top: '6rem',
+			},
+			flex: {
+				grow: 1,
+				direction: 'column',
+			},
+			align: {
+				items: 'center',
+			},
+		},
+
+		Menu: {
+			Body_content: {
+				gap: $mol_gap.block,
+				maxWidth: '25rem',
+			},
+			Head: {
+				justify: {
+					content: 'flex-start'
+				},
+			},
+		},
+
+		Player: {
+			flex: {
+				grow: 1,
+				basis: '30rem',
+			},
+		},
+
+	} )
+
+}

app/app.view.tree

@@ -0,0 +1,36 @@
+$mpds_cifplayer_app $mol_drop
+	receive? <=> drop_file? null
+	Sub <= Book $mol_book2
+		plugins /
+			<= Theme $mol_theme_auto
+		pages <= pages
+		Placeholder null
+	pages /
+		<= Menu $mol_page
+			title \3d-crystals web-viewer
+			tools /
+				<= Source $mol_link_source
+					uri \https://github.com/tilde-lab/cifplayer
+				<= Lights $mol_lights_toggle
+			body <= menu_body /
+				<= Upload $mol_button_open
+					Icon => Upload_icon
+					Native => Upload_native
+					sub /
+						<= Upload_icon
+						<= Upload_native
+						\Choose file
+				<= Data_text $mol_textarea
+					value? <=> data_str?
+					hint \Paste here...
+		<= Player $mpds_cifplayer_player
+			data <= data_str? \
+			vibrate? => vibrate?
+			unvibrate => unvibrate
+	Start $mol_view
+		sub /
+			<= Start_message $mol_text
+				text \Choose or paste a CIF, POSCAR, or Optimade file. No remote server is used.
+			<= Paste_example $mol_button_minor
+				title \Show example
+				click? <=> paste_example? null

app/app.view.web.ts

@@ -0,0 +1,33 @@
+namespace $.$$ {
+	export class $mpds_cifplayer_app extends $.$mpds_cifplayer_app {
+
+		@ $mol_mem
+		pages(): readonly any[] {
+			return this.data_str()
+				? super.pages()
+				: [ this.Menu(), this.Start() ]
+		}
+
+		@ $mol_action
+		files_read(next: readonly File[]) {
+			const data = $mol_wire_sync( this.$ ).$mol_blob_text( next[0] )
+			this.data_str( data )
+		}
+
+		@ $mol_action
+		drop_file(transfer: any) {
+			this.files_read( transfer.files )
+		}
+
+		@ $mol_action
+		paste_example() {
+			this.data_str( this.data_example() )
+		}
+
+		data_example() {
+			return `# CIF file\n# This file was generated by FINDSYM\n# Harold T. Stokes, Branton J. Campbell, Dorian M. Hatch\n# Brigham Young University, Provo, Utah, USA\n \ndata_findsym-output\n \n_symmetry_space_group_name_H-M "I 4/m 2/c 2/m"\n_symmetry_Int_Tables_number 140\n \n_cell_length_a       5.51665\n_cell_length_b       5.51665\n_cell_length_c       7.80171\n_cell_angle_alpha   90.00000\n_cell_angle_beta    90.00000\n_cell_angle_gamma   90.00000\n \nloop_\n_space_group_symop_operation_xyz\nx,y,z\nx,-y,-z+1/2\n-x,y,-z+1/2\n-x,-y,z\n-y,-x,-z+1/2\n-y,x,z\ny,-x,z\ny,x,-z+1/2\n-x,-y,-z\n-x,y,z+1/2\nx,-y,z+1/2\nx,y,-z\ny,x,z+1/2\ny,-x,-z\n-y,x,-z\n-y,-x,z+1/2\nx+1/2,y+1/2,z+1/2\nx+1/2,-y+1/2,-z\n-x+1/2,y+1/2,-z\n-x+1/2,-y+1/2,z+1/2\n-y+1/2,-x+1/2,-z\n-y+1/2,x+1/2,z+1/2\ny+1/2,-x+1/2,z+1/2\ny+1/2,x+1/2,-z\n-x+1/2,-y+1/2,-z+1/2\n-x+1/2,y+1/2,z\nx+1/2,-y+1/2,z\nx+1/2,y+1/2,-z+1/2\ny+1/2,x+1/2,z\ny+1/2,-x+1/2,-z+1/2\n-y+1/2,x+1/2,-z+1/2\n-y+1/2,-x+1/2,z\n \nloop_\n_atom_site_label\n_atom_site_type_symbol\n_atom_site_fract_x\n_atom_site_fract_y\n_atom_site_fract_z\n_atom_site_occupancy\nTi1 Ti   0.00000   0.00000   0.00000   1.00000\nO1 O   0.23602   0.73602   0.00000   1.00000\nO2 O   0.00000   0.00000   0.25000   1.00000\nSr1 Sr   0.00000   0.50000   0.25000   1.00000\n `
+		}
+
+	}
+
+}

app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html mol_view_root>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+	</head>
+	<body mol_view_root>
+		<div mol_view_root="$mpds_cifplayer_app"></div>
+		<script src="web.js" charset="utf-8"></script>
+	</body>
+</html>

demo/demo.view.tree

@@ -0,0 +1,10 @@
+$mpds_cifplayer_demo $mol_book2_catalog
+	plugins /
+		<= Theme $mol_theme_auto
+	menu_title \Demo
+	Placeholder null
+	spreads *
+		app <= App $mpds_cifplayer_app
+			title \App
+		phonons <= Phonons $mpds_cifplayer_phonons
+			title \Phonons example

demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html mol_view_root>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+	</head>
+	<body mol_view_root>
+		<div mol_view_root="$mpds_cifplayer_demo"></div>
+		<script src="web.js" charset="utf-8"></script>
+	</body>
+</html>