Add first variant of marketplace

store/config.json

@@ -1,77 +1,164 @@
 {
 	"A103601F-FDA0-418A-BC37-A514031894C0" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-autocomplete/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-autocomplete/"
 	},
 	"E6978D28-0441-4BD7-8346-82FAD68BCA3B" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-macros/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-macros/"
 	},
 	"BE5CBF95-C0AD-4842-B157-AC40FEDD9441" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-mendeley/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-mendeley/"
 	},
 	"440EBF13-9B19-4BD8-8621-05200E58140B" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-ocr/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-ocr/"
 	},
 	"38E022EA-AD92-45FC-B22B-49DF39746DB4" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-youtube/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-youtube/"
 	},
 	"7327FC95-16DA-41D9-9AF2-0E7F449F6800" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-translator/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-translator/"
 	},
 	"0847b6a4-b007-11e7-abc4-cec278b6b50a" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-wordpress/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-wordpress/"
 	},
 	"BE5CBF95-C0AD-4842-B157-AC40FEDD9841" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-highlightcode/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-highlightcode/"
 	},
 	"c9d216a5-4f1a-49f2-9ff0-67c510a73523" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-easybib/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-easybib/"
 	},
 	"BE5CBF95-C0AD-4842-B157-AC40FEDD9840" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-thesaurus/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-thesaurus/"
 	},
 	"07FD8DFA-DFE0-4089-AL24-0730933CC80A" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-photoeditor/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-photoeditor/"
 	},
 	"BFC5D5C6-89DE-4168-9565-ABD8D1E48711" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-zotero/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-zotero/"
 	},
 	"D71C2EF0-F15B-47C7-80E9-86D671F9C595" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-speech/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-speech/"
 	},
 	"b78a062b-e349-4634-8a44-99825600d299" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-deepl/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-deepl/"
 	},
 	"7CDB02C9-A0BF-4B56-9A1A-71C860B8498F" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-languagetool/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-languagetool/"
 	},
 	"B631E142-E40B-4B4C-90B9-2D00222A286E" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-glavred/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-glavred/"
 	},
 	"E5773A43-F9B3-4E81-81D9-CE0A132470E7" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-telegram/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-telegram/"
 	},
 	"0743b63f-cb32-438c-b46b-81ce182ff4f7" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-rainbow/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-rainbow/"
 	},
 	"7645D461-84BC-4FB0-A42C-98118C14A1CD" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-jitsi/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-jitsi/"
 	},
 	"584EEEE8-DBF5-45C3-A4CA-F52177C82754" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-wordscounter/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-wordscounter/"
 	},
 	"DB38923B-A8C0-4DE9-8AEE-A61BB5C901A5" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-drawio/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-drawio/"
 	},
 	"E581C417-3C80-4BC2-B42D-502850FDC1E7" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-html/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-html/"
 	},
 	"9b224050-2354-4c1b-822b-03a97f61c79d" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-apertium/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-apertium/"
 	},
 	"55159EC6-C91A-4DDB-8E1E-558454666461" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-typograf/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-typograf/"
 	},
 	"6ef67492-a111-4ca5-bd4f-bf02645afc61" : {
-		"url" : "https://raw.githubusercontent.com/ONLYOFFICE/plugin-grammalecte/master/config.json"
+		"Url" : "/ONLYOFFICE/plugin-grammalecte/"
+	},
+	"5aff455d-96c4-4bd8-9658-16e5bc143738" : {
+		"Url" : "/ONLYOFFICE/plugin-doc2md/"
+	},
+	"FFE1F462-1EA2-4391-990D-4CC84940B754" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/chess/"
+	},
+	"5C521CB8-FD20-4CA3-83D7-1EEB8F4DC759" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/clippy/"
+	},
+	"89643394-0F74-4297-9E0B-541A67F1E98C" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_add_comment_in_cell/"
+	},
+	"5F9D4EB4-AF61-46EF-AE25-46C96E75E1DD" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/cbr/"
+	},
+	"CD4E451C-6928-43A4-B641-ECBBF688AC76" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_add_content_controls/"
+	},
+	"111735E0-69A7-4D4A-9ABE-F58FD70F488D" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_controls/"
+	},
+	"C05D81BC-92C7-4C48-BA49-E8B9AAFCD776" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_custom_fields_add_2/"
+	},
+	"4E2B5030-E1BE-41FA-BEE3-7E9BE7B5BFCF" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_customfields_add/"
+	},
+	"E5A81B17-C871-4C4B-A90A-62D3A7EC0751" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_customfields_load/"
+	},
+	"91EAC419-EF8B-440C-A960-B451C7DF3A37" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_extended_comments/"
+	},
+	"7CC733B1-9B26-4977-926E-D212B13F2B70" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_insert_content_and_document/"
+	},
+	"EF5735E0-69A7-4D4A-9ABE-F58FD70F488D" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_move_cursor/"
+	},
+	"EF5735E0-69A7-4D4A-9ABE-F58FD70F488J" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_search_and_change_text_background_color/"
+	},
+	"5FF5F75F-2977-4B98-8D36-7C406D610B90" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_search_replace/"
+	},
+	"F30BDD79-23A0-4B05-8DE3-2AB77D03A1B4" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_speech_input/"
+	},
+	"267D986E-C41D-4E3E-BA4D-54AA6CB952EF" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_work_with_content_controls/"
+	},
+	"639E69BC-58DE-4029-9B43-F0420F67E6F9" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_work_with_content_controls_combo/"
+	},
+	"C9945AC2-8275-4F9B-92E4-CA1104D7305B" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_work_with_content_controls_content/"
+	},
+	"C36DDFB5-08F0-4A68-B829-5FB1F7D49728" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_work_with_content_controls_navigation/"
+	},
+	"C36DDFB5-08F0-4A68-B829-5FB1F7D49331" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/example_work_with_content_controls_tags/"
+	},
+	"A8705DEE-7544-4C33-B3D5-168406D92F72" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/externallistener/"
+	},
+	"0616AE85-5DBE-4B6B-A0A9-455C4F1503AD" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/helloworld/"
+	},
+	"6B6715E5-A558-4F70-8058-40704CD659CF" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/invoices/"
+	},
+	"902F74A4-89F2-4028-8DB0-BD913E07335C" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/num2word/"
+	},
+	"C820F3CC-1248-4CA2-8D0F-D7EFD44DE09C" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/searchAndReplaceOnStart/"
+	},
+	"CF3A000F-C6B4-451D-AC0B-F3DDAB1880D2" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/settings/"
+	},
+	"03C18A8D-8E01-444A-86EB-EDDFA7773157" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/symboltable/"
+	},
+	"94DF0B57-299D-4F68-AF6F-9A6BB53F3031" : {
+		"Url" : "/ONLYOFFICE/sdkjs-plugins/master/templates/"
 	}
 }

store/index.html

@@ -17,26 +17,32 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Digital signature</title>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
-	<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
-	<!-- <script src="../plugin-drawio/resources/css/ui.js"></script>
-	<link rel="stylesheet" href="../plugin-drawio/resources/css/ui.css"> -->
-	<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
 	<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
-	<link rel="stylesheet" href="resources/css/plugin_style.css">
+	<link rel="stylesheet" href="./resources/css/styles.css">
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+	<!-- TODO из-за этого скрипта не работает нормально изменение размера окна (возможно в окне редактора всё будет нормально) -->
+	<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
 	<script type="text/javascript" src="scripts/code.js"></script>
-	
 </head>
-<body>
-	<div id="div_body" >
-		<div id="sign" class="div-sign">
-			<button id="btn_send" class="btn-text-default noselect">Send file to extention</button>
+	<body>
+		<div class="header noselect">
+			<span id="arrow" class="arrow hidden">&#8592;</span>
+			<label class="aboutlable header">Manage plugins</label>
+			<span id="close" class="close">&times;</span>
 		</div>
-		<div id="div_mess" class="div-mess hidden">
-			<span id="span_mess" class="defaultlable"></span>
+		<div id="div_body" class="div_body">
+			<div id="toolbar" class="toolbar noselect">
+				<div class="toolbar_buttons">
+					<button id="btn_myPlugins" class="btn-text-default">My plugins</button>
+					<button id="btn_marketplace" class="btn-text-default btn_selected">Marketplace</button>
+				</div>
+				<div class="toolbar_link">
+					<!-- TODO подумать над тем, как открывать форму для загрузки -->
+					<a id="link_newPlugin" class="aboutlink link_submit" target="blank" href="https://htmldom.dev/make-a-resizable-element/">Submit your own plugin</a>
+				</div>
+			</div>
+			<div id="loader-container" class="asc-loader-container div_loader"></div>
+			<div id="div_main" class="main_content noselect"></div>
 		</div>
-	</div>
-	<div id="loader-container" class="asc-loader-container div-loader"></div>
-</body>
+	</body>
 </html>

store/resources/css/styles.css

@@ -1,64 +1,40 @@
 html, body {
+	margin: 0px !important;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-flow: column;
+	font-size: 12px !important;
+}
+
+img {
+	pointer-events: none;
+}
+
+button {
+	font-size: 13px !important;
 	margin: 0px;
-	padding: 0px;
-	overflow: hidden;
-	width:100%;
-	height:100%;
 }
-.div-data {
-	display: flex;
-	flex-flow: column;
-	margin: 10px 5px 10px 5px;
+
+div.header {
+	background: #d8dadc;
+    display: flex;
+    justify-content: center;
+    border-bottom: solid var(--scaled-one-pixel, 1px) #4444;
+	align-items: center;
 }
-input[type="file"] {
-	position: absolute;
-	left: -100000px;
+
+label.header {
+	margin: 5px;
+	font-size: 14px !important;
 }
-.hidden {
-	display: none !important;
-}
-.div-select {
-	display: flex;
-	flex-flow: row;
-	justify-content: space-between;
-	border: 1px solid #cfcfcf;
-	border-radius: 3px;
-}
-.label-caption {
-	margin-bottom: 5px;
-}
-.label-file-name {
-	padding: 5px;
-	width: 100%;
-	overflow: hidden;
-	height: 10px;
-	white-space: nowrap;
-}
-.button-select {
-	min-width: 110px;
-	border-top: none !important;
-	border-bottom: none !important;
-	border-right: none !important;
-}
-.div-sign {
-	display: flex;
-	flex-flow: column;
-	padding-top: 15px;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-.div-mess {
-	margin: 15px 5px 15px 5px;
-}
-.span-err {
-	color: red !important;
-}
-.span-mess {
-	color: green !important;
-}
-input[type="password"] {
-	width: 100%;
+
+.btn_selected {
+	color: #fff;
+    background-color: #7d858c
 }
+
 .div-loader {
 	margin: 10px;
 	height: 40px;
@@ -66,12 +42,207 @@ input[type="password"] {
 	right: 50%;
 	position: sticky;
 }
-.disabled {
-	opacity: 0.4;
+
+.close {
+	position: absolute;
+    right: 10px;
+    font-size: 25px;
+    opacity: 0.7;
+	cursor: pointer;
 }
-.noselect {
-	-khtml-user-select: none;
-	user-select: none;
-	-moz-user-select: none;
-	-webkit-user-select: none;
+
+.close:hover {
+	opacity: 1;
+}
+
+.arrow {
+	position: absolute;
+    left: 10px;
+    font-size: 20px;
+    opacity: 0.7;
+	cursor: pointer;
+}
+
+.arrow:hover {
+	opacity: 1;
+}
+
+.toolbar {
+	display: flex;
+    justify-content: space-between;
+    margin: 20px 15px;
+}
+
+.toolbar_link {
+	display: flex;
+    align-items: center;
+	margin-right: 5px;
+	font-size: 13px;
+}
+
+.toolbar_buttons {
+	display: flex;
+}
+
+.main_content {
+	position: absolute;
+	inset: 90px 0px 0px;
+	overflow: hidden;
+	display: flex;
+	flex-flow: column;
+}
+
+.div_row {
+	display: flex;
+	margin: 0 10px 20px 5px;
+}
+.div_item {
+	display: flex;
+	flex-flow: column;
+	border: 1px solid #c0c0c0;
+	border-radius: 5px;
+	width: calc((100% - 60px)/3);
+	margin: 0 10px;
+	position: relative;
+	height: 225px;
+}
+.div_description {
+	display: flex;
+	flex-flow: column;
+	word-break: break-all;
+}
+.div_image {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(52,126,232);
+	cursor: pointer;
+	border-radius: 3px 3px 0 0;
+}
+.span_name {
+	margin: 10px;
+	font-weight: bold;
+}
+.span_description {
+	margin: 0px 10px;
+}
+.div_footer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+    flex-flow: column;
+}
+.btn_install {
+	margin: 0px 10px 10px;;
+	width: calc(100% - 20px);
+}
+.btn_preview {
+    margin: 10px 0px 10px 10px;
+    width: fit-content;
+}
+.div_loader {
+	margin: 10px;
+	height: 40px;
+	top: 50%;
+	right: 50%;
+	position: absolute !important;
+}
+.div_body {
+	/* border: 1px solid red; */
+	height: 100%;
+}
+.div_preview {
+	/* border: 1px solid green; */
+	height: 100%;
+	font-size: 13px !important;
+}
+
+.link_submit {
+	color : #445799 !important;
+}
+
+.link_submit:hover {
+	color : #445799 !important;
+	cursor: pointer;
+}
+
+.link_submit:active {
+	color : #445799 !important;
+}
+
+.link_submit:visited {
+	color : #445799 !important;
+}
+
+.link_info {
+	border-bottom: 1px solid;
+    text-decoration: none !important;
+}
+
+.hidden {
+	display: none;
+}
+
+.div_selected_toolbar {
+	display: flex;
+	margin: 20px 15px;
+}
+
+.div_selected_description {
+	display: flex;
+	flex-flow: column;
+}
+
+.div_selected_main {
+	/* border: 1px solid red; */
+	margin: 0 15px;
+	position: absolute;
+	inset: 160px 0px 0px;
+}
+
+.div_selected_preview {
+	width:100%;
+	height: calc(100% - 25px);
+	margin-top: 5px;
+}
+
+.div_selected_image {
+	margin:10px 0 10px;
+}
+
+.image_preview {
+	width:100%;
+	height:100%;
+	object-fit:scale-down;
+}
+
+.div_selected_info {
+	margin: 5px 0 5px;
+	font-size: 13px;
+}
+
+.span_caption {
+	margin-right: 10px;
+	cursor: pointer;
+}
+
+.span_selected {
+	border-bottom: 3px solid;
+	padding-bottom: 4px;
+}
+
+.span_info {
+	font-weight: bold;
+}
+
+.span_update {
+	align-self: flex-end;
+    background-color: #06a10d;
+    color: white;
+    padding: 1px 5px;
+    border: 1px solid #06a10d;
+    border-radius: 12px;
+    margin: 10px;
 }