@webhandle/tree-file-browser 1.0.0

package/less/components.less

@@ -0,0 +1,357 @@
+
+.webhandle-file-tree-image-browser-colors() {
+	@webhandle-file-tree-image-box-background: #eeeeee;
+	@webhandle-file-tree-image-selected-box-hightlight: blue;
+}
+
+.webhandle-file-tree-image-browser-colors();
+
+.webhandle-file-tree-image-browser-test {
+	background-color: #656963;
+}
+
+.webhandle-file-tree-image-browser {
+	--webhandle-file-tree-image-box-background: @webhandle-file-tree-image-box-background;
+	--webhandle-file-tree-image-selected-box-hightlight: @webhandle-file-tree-image-selected-box-hightlight;
+	
+	@box-padding-right: 20px;
+	
+
+	.file-lines {
+		grid-auto-flow: row dense;
+		grid-template-columns: 100px 1fr auto auto auto;
+		overflow-x: hidden;
+
+		.variant-choice-box {
+			display: contents;
+			.bottom {
+				display: contents;
+				
+				.content {
+					display: contents;
+				}
+			}
+			
+			&.selected {
+				.extensions, .basename, .size-line, .actions, .img {
+					z-index: 2;
+				}
+
+				.img:before {
+					content: '\00a0';
+					position: absolute;
+					top: -3px;
+					bottom: 0px;
+					left: -3px;
+					width: 100vw;
+					background-color: #f0f0f0;
+				}
+			}
+		}
+		
+		.extensions {
+			// align-self: start;
+			display: block !important;
+			grid-column: 3;
+			padding-top: 3px;
+			.extension-pill {
+				display: inline-block;
+				margin-right: 2px;
+			}
+			
+		}
+		.basename {
+			grid-column: 2;
+		}
+		.size-line {
+			grid-column: 4;
+		}
+		.img {
+			max-width: 100px;
+			
+			.thumbnail-icon {
+				font-size: 30px;
+				position: relative;
+				z-index: 2;
+			}
+		}
+		.actions {
+			grid-column: 5;
+		}
+	}
+
+	.image-browser {
+		.image-browser-frame {
+			position: relative;
+			display: grid;
+			grid-template-columns: minmax(300px, 30%) 1fr;
+			column-gap: 20px;
+			background-color: white;
+
+			& > .directory-side {
+				height: 800px;
+				.the-dialog & {
+					max-height: 67vh;
+				}
+				max-height: 90vh;
+				position: relative;
+				
+				display: grid;
+				grid-template-rows: 1fr auto;
+				
+				button {
+					border: none;
+					background-color: transparent;
+					color: white;
+				}
+				.directory-controls {
+					background-color: #393C40;
+				}
+			}
+		}
+
+		
+		.node-content {
+			position: relative;
+		}
+		.box-holder {
+			position: absolute;
+			box-sizing: border-box;
+			height: 100%;
+			width: 100%;
+			top: 0;
+			left: 0;
+			overflow: auto;
+			padding-right: @box-padding-right;
+			padding-bottom: 20px;
+			padding-top: 3px;
+			padding-left: 3px;
+		}
+		
+		.node-view {
+			display: grid;
+			grid-template-rows: auto 1fr auto;
+			row-gap: 12px;
+			
+			.view-controls {
+				display: grid;
+				grid-template-columns: auto auto;
+				padding-right: @box-padding-right;
+				padding-top: 4px;
+				
+				.right {
+					text-align: right;
+					-webkit-user-select: none; /* Safari */
+					user-select: none; /* Standard syntax */
+				}
+				
+				
+				button {
+					border: none;
+					background: none;
+				}
+
+			}
+		}
+		
+		.choice-boxes {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			column-gap: 20px;
+			row-gap: 20px;
+			
+			&.grid-small {
+				grid-template-columns: repeat(5, 1fr);
+			}
+			&.rows {
+				.webhandle-file-tree-image-browser.file-lines();
+			}
+			
+			&.list-text {
+				.webhandle-file-tree-image-browser.file-lines();
+				grid-template-columns: auto 1fr auto auto auto;
+				row-gap: 5px;
+				.img {
+					aspect-ratio: auto;
+					img {
+						display: none;
+					}
+					.thumbnail-icon {
+						font-size: 0;
+					}
+				}
+			}
+		}
+		
+		.variant-choice-box {
+			padding: 10px;
+			border-radius: 5px;
+			box-shadow: 1px 1px 5px #cccccc;
+			-webkit-user-select: none; /* Safari */
+			user-select: none; /* Standard syntax */
+
+			.img {
+				display: grid;
+				aspect-ratio: 1.6;
+				position: relative;
+				
+				.thumbnail-icon {
+					font-size: 70px;
+				}
+
+				& > span {
+					grid-column: 1;
+					grid-row: 1;
+					justify-self: center;
+					align-self: center;
+				}
+				
+				img {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					max-width: 100%;
+					max-height: 100%;
+				}
+			}
+			
+			.bottom {
+				display: grid;
+				grid-template-columns: 1fr auto;
+				.basename {
+					display: inline;
+				}
+				
+				.extensions {
+					display: inline-flex;
+					column-gap: 5px;
+				}
+				
+				.actions {
+					button {
+						border: 0;
+						background: none;
+						cursor: pointer;
+					}
+				}
+			}
+			
+			&.selected {
+				box-shadow: 1px 1px 10px var(--webhandle-file-tree-image-selected-box-hightlight);
+			}
+			&.hidden {
+				display: none;
+				& > * {
+					display: none !important;
+				}
+			}
+		}
+		
+		
+		.bottom-controls {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			padding-right: 34px;
+			padding-top: 10px;
+			
+			button {
+				border: none;
+				background-color: transparent;
+			}
+		}
+
+		.drop-cover {
+			position: absolute;
+			inset: 0;
+			background-color: rgba(255, 255, 255, .8);
+			z-index: -1;
+
+			display: grid;
+			column-gap: 30px;
+			row-gap: 30px;
+			transition: opacity .3s;
+			opacity: .2;
+
+			.drop-type {
+				display: flex;
+				align-items: center;
+				text-align: center;
+				
+				padding: 12px;
+				border: solid 1px black;
+				border-radius: 5px;
+				box-shadow: 1px 1px 5px #cccccc;
+				background-color: fade(@webhandle-file-tree-image-box-background, 70%);
+				
+				.msg {
+					width: 100%;
+				}
+				
+				&:hover {
+					background-color: @webhandle-file-tree-image-box-background;
+
+				}
+			}
+			
+			&.file-dropping {
+				z-index: 2;
+				opacity: 1;
+			}
+		}
+
+		.img-drop-cover {
+			
+			grid-template-columns: repeat(3, 1fr);
+			grid-template-rows: repeat(4, 1fr);
+			
+			
+			.guided-upload {
+				grid-row: 1 / span 4;
+				grid-column: 1 / span 2;
+			}
+			.automatic {
+				grid-row: 1 / span 3;
+				grid-column: 3;
+			}
+			.literal {
+				grid-row: 4;
+				grid-column: 3;
+			}
+
+		}
+		
+
+	}
+
+
+	.extension-pill {
+		padding: 3px 5px;
+		border-radius: 5px;
+		background-color: var(--webhandle-file-tree-image-box-background);
+	}
+	
+	.radio-options {
+		label {
+			display: inline-block;
+			position: relative;
+			input[type=radio] {
+				position: absolute;
+				display: inline-block;
+				left: -10000px;
+			}
+			input[type=radio]:not(:checked) + .extension-pill {
+				background-color: transparent;
+			}
+			
+		}
+	}
+	
+	.hidden-elements {
+		position: absolute;
+		left: -10000px;
+		top: 0;
+	}
+	
+}
+

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@webhandle/tree-file-browser",
+	"version": "1.0.0",
+	"description": "",
+	"main": "client-lib/image-browser-view.mjs",
+	"scripts": {
+		"test": "node_modules/mocha/bin/mocha",
+		"less-build": "npx lessc --source-map --source-map-include-source less/pages.less public/css/pages.css; npx lessc --source-map --source-map-include-source less/components.less public/tree-file-browser/resources/css/tree-browser.css",
+		"less-compress": "npx uglifycss public/css/pages.css > public/css/pages.min.css",
+		"client-js-build": "npx webpack --config pages.webpack.cjs",
+		"client-js-compress": "npx uglifyjs public/js/pages.cjs -o public/js/pages.min.cjs -c --source-map url=public/js/pages.min.cjs.map",
+		"client-js-browserify-build": "npm run client-js-pages-browserify-build",
+		"client-js-pages-browserify build": "npx browserify client-js/pages.cjs --debug | npx exorcist public/js/pages.cjs.map > public/js/pages.cjs",
+		"dev-less-watch": "onchange 'less/**/*.less' -- npm run less-build",
+		"dev-client-js-watch": "onchange 'client-lib/**/*js' 'views/webhandle-tree-image-browser/**/*tri' 'client-js/**/*js' -- npm run client-js-build",
+		"dev-server-js-watch": "onchange 'server-lib/**/*js' 'server-js/**/*js' -- pm2 restart webhandle-tree-image-browser-web",
+		"start": "node ./web-server.js",
+		"testDebug": "node --inspect-brk node_modules/mocha/bin/mocha",
+		"bg": "parallelshell 'npm run dev-less-watch' 'npm run dev-client-js-watch'",
+		"pm2-bg": "parallelshell 'npm run dev-less-watch' 'npm run dev-client-js-watch' 'npm run dev-server-js-watch'",
+		"dev": "parallelshell 'npm run start' 'npm run dev-less-watch' 'npm run dev-client-js-watch'"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@dankolz/ei-css-grid": "^1.0.0",
+		"@webhandle/event-notification-panel": "^1.0.0",
+		"browserify": "^14.4.0",
+		"chai": "^4.3.4",
+		"ei-form-styles-1": "^1.0.2",
+		"ei-pic-browser": "^1.0.15",
+		"exorcist": "^2.0.0",
+		"express": "^4.17.1",
+		"file-sink": "^1.0.13",
+		"file-sink-remote-http": "^1.0.2",
+		"file-sink-server": "^1.0.5",
+		"filter-log": "0.0.5",
+		"jsdoc": "^3.6.11",
+		"less": "^3.10.3",
+		"mocha": "^9.1.3",
+		"node-polyfill-webpack-plugin": "^2.0.1",
+		"onchange": "^3.2.1",
+		"parallelshell": "3.0.1",
+		"raw-loader": "^4.0.2",
+		"tripartite": "^1.1.1",
+		"uglify-js": "^3.17.4",
+		"webhandle": "^1.0.32",
+		"webhandle-js-widget-setup": "^1.0.5",
+		"webpack-cli": "^5.1.4"
+	},
+	"dependencies": {
+		"@dankolz/escape-html-attribute-value": "^1.0.0",
+		"@dankolz/webhandle-admin-icons": "^1.0.2",
+		"@dankolz/webp-detection": "^1.0.14",
+		"@webhandle/backbone-view": "^1.0.1",
+		"@webhandle/gather-form-data": "^1.0.0",
+		"@webhandle/minimal-browser-event-emitter": "^1.0.2",
+		"ei-dialog": "^1.0.9",
+		"form-value-injector": "^1.0.6",
+		"input-value-injector": "^1.0.11",
+		"kalpa-tree-on-page": "^1.0.2",
+		"select-value-injector": "^1.0.3",
+		"textarea-value-injector": "^1.0.3"
+	},
+	"browserify": {
+		"transform": [
+			"tripartite/browserify-transform"
+		]
+	},
+	"files": [
+		"/client-lib",
+		"/less/components.less",
+		"/server-lib",
+		"public/tree-file-browser",
+		"/views/load-browser-views.js",
+		"/views/webhandle-tree-image-browser"
+	],
+	"type": "module"
+}