Sorry, there\'s nothing at this address.
"); 34 | } 35 | )); 36 | builder2.CloseComponent(); 37 | } 38 | )); 39 | builder.CloseComponent(); 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/opensilver/DemoApp/DemoApp.Browser/DemoApp.Browser.csproj: -------------------------------------------------------------------------------- 1 |
34 |
49 |
50 |
51 |
65 |
66 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/libs/OpenSilver.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*===================================================================================
4 | *
5 | * Copyright (c) Userware (OpenSilver.net, CSHTML5.com)
6 | *
7 | * This file is part of both the OpenSilver Runtime (https://opensilver.net), which
8 | * is licensed under the MIT license (https://opensource.org/licenses/MIT), and the
9 | * CSHTML5 Runtime (http://cshtml5.com), which is dual-licensed (MIT + commercial).
10 | *
11 | * As stated in the MIT license, "the above copyright notice and this permission
12 | * notice shall be included in all copies or substantial portions of the Software."
13 | *
14 | \*====================================================================================*/
15 |
16 | window.onCallBack = (function () {
17 | const opensilver = "OpenSilver";
18 | const opensilver_js_callback = "OnCallbackFromJavaScriptBrowser";
19 | const opensilver_js_error_callback = "OnCallbackFromJavaScriptError";
20 |
21 | function prepareCallbackArgs(args) {
22 | let callbackArgs;
23 | switch (typeof args) {
24 | case 'number':
25 | case 'string':
26 | case 'boolean':
27 | callbackArgs = args;
28 | break;
29 | case 'object':
30 | // if we deal with an array, we need to check
31 | // that all the items are primitive types.
32 | if (Array.isArray(args)) {
33 | callbackArgs = [];
34 | for (let i = 0; i < args.length; i++) {
35 | let itemType = typeof args[i];
36 | if ((args[i] === null || itemType === 'number' || itemType === 'string' || itemType === 'boolean' ||
37 | // Check for TypedArray. This is used for reading binary data for FileReader for example
38 | (ArrayBuffer.isView(args[i]) && !(args[i] instanceof DataView))
39 | )) {
40 | callbackArgs.push(args[i]);
41 | } else {
42 | callbackArgs.push(undefined);
43 | }
44 | }
45 | break;
46 | }
47 | // if args === null, fall to next case.
48 | case 'undefined':
49 | default:
50 | callbackArgs = [];
51 | break;
52 | }
53 |
54 | return callbackArgs;
55 | }
56 |
57 | return {
58 | OnCallbackFromJavaScript: function (callbackId, idWhereCallbackArgsAreStored, callbackArgsObject, returnValue) {
59 | let formattedArgs = prepareCallbackArgs(callbackArgsObject);
60 | const res = DotNet.invokeMethod(opensilver, opensilver_js_callback, callbackId, idWhereCallbackArgsAreStored, formattedArgs, returnValue || false);
61 | if (returnValue) {
62 | return res;
63 | }
64 | },
65 |
66 | OnCallbackFromJavaScriptError: function (idWhereCallbackArgsAreStored) {
67 | DotNet.invokeMethod(opensilver, opensilver_js_error_callback, idWhereCallbackArgsAreStored);
68 | }
69 | };
70 | })();
71 |
72 | window._openSilverRuntime = (function () {
73 | const _promises = [];
74 | const _textDecoder = new TextDecoder('utf-16le');
75 |
76 | (function () {
77 | const styleheets = ['libs/cshtml5.css', 'libs/quill.core.css'];
78 | const scripts = ['libs/cshtml5.js', 'libs/ResizeObserver.js', 'libs/quill.min.js', 'libs/html2canvas.js'];
79 | const timestamp = '?date=' + new Date().toISOString();
80 |
81 | styleheets.forEach((name) => {
82 | _promises.push(new Promise((resolve, reject) => {
83 | const url = name + timestamp;
84 | const stylesheet = document.createElement('link');
85 | stylesheet.setAttribute('rel', 'stylesheet');
86 | stylesheet.setAttribute('type', 'text/css');
87 | stylesheet.setAttribute('href', url);
88 | stylesheet.onload = () => { resolve(url); };
89 | stylesheet.onerror = () => { reject(url); };
90 | document.getElementsByTagName('head')[0].appendChild(stylesheet);
91 | }));
92 | });
93 |
94 | scripts.forEach((name) => {
95 | _promises.push(new Promise((resolve, reject) => {
96 | const url = name + timestamp;
97 | const script = document.createElement('script');
98 | script.setAttribute('type', 'application/javascript');
99 | script.setAttribute('src', url);
100 | script.onload = () => { resolve(url); };
101 | script.onerror = () => { reject(url); };
102 | document.getElementsByTagName('head')[0].appendChild(script);
103 | }));
104 | });
105 | })();
106 |
107 | return {
108 | startAsync: async function () {
109 | try {
110 | await Promise.all(_promises);
111 | return true;
112 | } catch (error) {
113 | console.error(error);
114 | return false;
115 | }
116 | },
117 | invokeJS: function (javaScriptToExecute, referenceId) {
118 | const result = eval(javaScriptToExecute);
119 |
120 | if (referenceId >= 0) {
121 | document.jsObjRef[referenceId.toString()] = result;
122 | }
123 |
124 | const resultType = typeof result;
125 | if (resultType == 'string' || resultType == 'number' || resultType == 'boolean') {
126 | return result;
127 | } else if (result == null) {
128 | return null;
129 | } else {
130 | return result + " [NOT USABLE DIRECTLY IN C#] (" + resultType + ")";
131 | }
132 | },
133 | invokeJSVoid: function (javaScriptToExecute) {
134 | eval(javaScriptToExecute);
135 | },
136 | invokePendingJS: function (span) {
137 | const view = span._unsafe_create_view();
138 | const javaScriptToExecute = _textDecoder.decode(view);
139 | eval(javaScriptToExecute);
140 | },
141 | WBM: (function () {
142 | let _tempPixelsData;
143 |
144 | function smoothCanvasContext(ctx) {
145 | ctx.imageSmoothingEnabled = true;
146 | ctx.webkitImageSmoothingEnabled = true;
147 | ctx.mozImageSmoothingEnabled = true;
148 | ctx.msImageSmoothingEnabled = true;
149 | }
150 |
151 | return {
152 | createFromBitmapSource: function (data, callback) {
153 | const img = new Image();
154 | img.src = data;
155 | img.onload = function () {
156 | try {
157 | const canvas = document.createElement('canvas');
158 | canvas.height = img.height;
159 | canvas.width = img.width;
160 | const ctx = canvas.getContext('2d');
161 | smoothCanvasContext(ctx);
162 | ctx.drawImage(img, 0, 0);
163 | const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
164 | _tempPixelsData = new Int32Array(imgData.data.buffer);
165 | callback(imgData.data.length, imgData.width, imgData.height);
166 | } catch (err) {
167 | console.error(err);
168 | callback(err.message);
169 | }
170 | }
171 | },
172 | renderUIElement: function (id, width, height, transform, callback) {
173 | const element = document.getElementById(id);
174 | const currentTransform = element.style.transform;
175 | element.style.transform = transform;
176 | html2canvas(element, { scale: 1 }).then(function (canvas) {
177 | try {
178 | const ctx = canvas.getContext('2d');
179 | smoothCanvasContext(ctx);
180 | const w = width > -1 ? width : canvas.width;
181 | const h = height > -1 ? height : canvas.height;
182 | const imgData = ctx.getImageData(0, 0, w, h);
183 | _tempPixelsData = new Int32Array(imgData.data.buffer);
184 | callback(imgData.data.length, imgData.width, imgData.height);
185 | } catch (err) {
186 | console.error(err);
187 | callback(err.message);
188 | }
189 | });
190 | element.style.transform = currentTransform;
191 | },
192 | fillInt32Buffer: function (buffer) {
193 | buffer.set(new Int32Array(_tempPixelsData), 0);
194 | },
195 | }
196 | })(),
197 | }
198 | })();
199 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/libs/ResizeObserver.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The throttle pattern is more suitable for events that are triggered many times in a short period of time.
3 | * This technique is normally used to control scrolling, resizing and mouse-related events.
4 | * By using throttle, we can filter repeated executions of an event handler, enforcing a minimum wait time between calls.
5 | *
6 | * @param {Function} callback
7 | * @param {Number} interval
8 | */
9 | function throttle(callback, interval) {
10 | let enableCall = true;
11 |
12 | return function (...args) {
13 | if (!enableCall) return;
14 |
15 | enableCall = false;
16 | callback.apply(this, args);
17 | setTimeout(() => enableCall = true, interval);
18 | }
19 | }
20 |
21 | /**
22 | * The debounce pattern delays the calling of the event handler until a pause happens.
23 | * This technique is commonly used in search boxes with a suggest drop-down list.
24 | * By applying this pattern, we can prevent unnecessary requests to the backend while the user is typing.
25 | *
26 | * @param {Function} callback
27 | * @param {Number} interval
28 | */
29 | function debounce(callback, interval) {
30 | let debounceTimeoutId;
31 |
32 | return function (...args) {
33 | clearTimeout(debounceTimeoutId);
34 | debounceTimeoutId = setTimeout(() => callback.apply(this, args), interval);
35 | };
36 | }
37 |
38 | class ResizeObserverAdapter {
39 |
40 | constructor() {
41 | this.observer = new ResizeObserver(entries => this.onResize(entries));
42 | this.callbacks = {};
43 | }
44 |
45 | observe(element, callback) {
46 | if (element && element.id) {
47 | this.observer.observe(element);
48 | this.callbacks[element.id] = debounce(callback, 100);
49 | }
50 | }
51 |
52 | unobserve(element) {
53 | if (element && element.id) {
54 | this.observer.unobserve(element);
55 | delete this.callbacks[element.id];
56 | }
57 | }
58 |
59 | onResize(resizedElements) {
60 | for (const element of resizedElements) {
61 | if (this.callbacks[element.target.id]) {
62 | this.callbacks[element.target.id](element.contentRect.width + '|' + element.contentRect.height);
63 | }
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/libs/cshtml5.css:
--------------------------------------------------------------------------------
1 |
2 | /*===================================================================================
3 | *
4 | * Copyright (c) Userware (OpenSilver.net, CSHTML5.com)
5 | *
6 | * This file is part of both the OpenSilver Runtime (https://opensilver.net), which
7 | * is licensed under the MIT license (https://opensource.org/licenses/MIT), and the
8 | * CSHTML5 Runtime (http://cshtml5.com), which is dual-licensed (MIT + commercial).
9 | *
10 | * As stated in the MIT license, "the above copyright notice and this permission
11 | * notice shall be included in all copies or substantial portions of the Software."
12 | *
13 | \*====================================================================================*/
14 |
15 | * {
16 | -webkit-tap-highlight-color: rgba(0,0,0,0);
17 | }
18 |
19 | html {
20 | height: 100%;
21 | width: 100%;
22 | margin: 0px;
23 | }
24 |
25 | body {
26 | background-color: white;
27 | margin: 0px;
28 | padding: 0px;
29 | height: 100%;
30 | width: 100%;
31 | font-size: 11px;
32 | overflow-x: hidden;
33 | overflow-y: hidden;
34 | cursor: default;
35 | font-family: 'Segoe UI', Verdana, 'DejaVu Sans', Lucida, 'MS Sans Serif', sans-serif;
36 | -webkit-touch-callout: none; /* prevents callout to copy image, etc when tap to hold */
37 | -webkit-text-size-adjust: none; /* prevents webkit from resizing text to fit */
38 | -webkit-user-select: text; /* 'none' prevents copy paste. 'text' allows it. */
39 | }
40 |
41 | .opensilver-mouse-captured {
42 | -moz-user-select: none; /* Firefox */
43 | -webkit-user-select: none; /* Chrome, Safari, and Opera */
44 | -ms-user-select: none; /* Internet Explorer/Edge */
45 | user-select: none;
46 | }
47 |
48 | .uielement-collapsed {
49 | display: none !important;
50 | }
51 |
52 | .uielement-unarranged {
53 | opacity: 0 !important;
54 | }
55 |
56 | .opensilver-hyperlink {
57 | cursor: pointer;
58 | }
59 |
60 | .opensilver-hyperlink:hover {
61 | color: var(--mouse-over-color, rgb(237, 110, 0)) !important;
62 | text-decoration: var(--mouse-over-decoration, underline) !important;
63 | }
64 |
65 | .opensilver-uielement {
66 | position: absolute;
67 | box-sizing: border-box;
68 | pointer-events: none;
69 | z-index: 0;
70 | outline: none;
71 | }
72 |
73 | .opensilver-shape {
74 | pointer-events: none !important;
75 | fill: none; /* CSS default value is black */
76 | fill-rule: evenodd; /* CSS default value is nonzero, and evenodd is the default value of every shape */
77 | stroke: none; /* CSS default value is black */
78 | stroke-miterlimit: 10; /* CSS default value is 4 */
79 | }
80 |
81 | .opensilver-border {
82 | border-style: solid;
83 | border-color: transparent; /* CSS default value matches the color property (currentcolor) */
84 | border-width: 0px; /* CSS default value is medium */
85 | background-clip: padding-box !important;
86 | }
87 |
88 | .opensilver-popup {
89 | position: absolute;
90 | width: 100%;
91 | height: 100%;
92 | overflow: clip;
93 | }
94 |
95 | .opensilver-inkpresenter {
96 | width: 100%;
97 | height: 100%;
98 | position: absolute;
99 | pointer-events: none;
100 | }
101 |
102 | .opensilver-textblock {
103 | text-overflow: ellipsis;
104 | text-align: start;
105 | white-space: pre;
106 | overflow: visible;
107 | }
108 |
109 | .opensilver-textelement {
110 | line-height: var(--line-stacking-strategy, normal);
111 | }
112 |
113 | /* Media query used for printing (cf. "CSHTML5.Native.Html.Printing.PrintManager") */
114 | @media print {
115 | body {
116 | -webkit-print-color-adjust: exact;
117 | }
118 |
119 | body * {
120 | visibility: hidden;
121 | }
122 |
123 | .section-to-print, .section-to-print * {
124 | visibility: visible;
125 | }
126 |
127 | .section-to-print {
128 | position: fixed;
129 | left: 0;
130 | top: 0;
131 | height: 100%;
132 | width: 100%;
133 | }
134 | }
135 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/libs/quill.core.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Quill Editor v2.0.2
3 | * https://quilljs.com
4 | * Copyright (c) 2017-2024, Slab
5 | * Copyright (c) 2014, Jason Chen
6 | * Copyright (c) 2013, salesforce.com
7 | */
8 | .ql-container {
9 | box-sizing: border-box;
10 | margin: 0;
11 | cursor: text;
12 | overflow: hidden !important; /* required for scroll support */
13 | user-select: text; /* required for selection support in readonly mode */
14 | }
15 |
16 | .ql-container.ql-disabled .ql-tooltip {
17 | visibility: hidden
18 | }
19 |
20 | .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
21 | .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
22 | cursor: pointer
23 | }
24 |
25 | .ql-clipboard {
26 | left: -100000px;
27 | height: 1px;
28 | overflow-y: hidden;
29 | position: absolute;
30 | top: 50%
31 | }
32 |
33 | .ql-clipboard p {
34 | margin: 0;
35 | padding: 0
36 | }
37 |
38 | .ql-editor {
39 | box-sizing: border-box;
40 | counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
41 | width: 100%;
42 | height: 100%;
43 | outline: none;
44 | tab-size: 4;
45 | -moz-tab-size: 4;
46 | }
47 |
48 | .ql-editor > * {
49 | cursor: text
50 | }
51 |
52 | .ql-editor p,
53 | .ql-editor ol,
54 | .ql-editor pre,
55 | .ql-editor blockquote,
56 | .ql-editor h1,
57 | .ql-editor h2,
58 | .ql-editor h3,
59 | .ql-editor h4,
60 | .ql-editor h5,
61 | .ql-editor h6 {
62 | margin: 0;
63 | padding: 0
64 | }
65 |
66 | @supports (counter-set:none) {
67 |
68 | .ql-editor p,
69 | .ql-editor h1,
70 | .ql-editor h2,
71 | .ql-editor h3,
72 | .ql-editor h4,
73 | .ql-editor h5,
74 | .ql-editor h6 {
75 | counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
76 | }
77 | }
78 |
79 | @supports not (counter-set:none) {
80 |
81 | .ql-editor p,
82 | .ql-editor h1,
83 | .ql-editor h2,
84 | .ql-editor h3,
85 | .ql-editor h4,
86 | .ql-editor h5,
87 | .ql-editor h6 {
88 | counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
89 | }
90 | }
91 |
92 | .ql-editor table {
93 | border-collapse: collapse
94 | }
95 |
96 | .ql-editor td {
97 | border: 1px solid #000;
98 | padding: 2px 5px
99 | }
100 |
101 | .ql-editor ol {
102 | padding-left: 1.5em
103 | }
104 |
105 | .ql-editor li {
106 | list-style-type: none;
107 | padding-left: 1.5em;
108 | position: relative
109 | }
110 |
111 | .ql-editor li > .ql-ui:before {
112 | display: inline-block;
113 | margin-left: -1.5em;
114 | margin-right: .3em;
115 | text-align: right;
116 | white-space: nowrap;
117 | width: 1.2em
118 | }
119 |
120 | .ql-editor li[data-list=checked] > .ql-ui,
121 | .ql-editor li[data-list=unchecked] > .ql-ui {
122 | color: #777
123 | }
124 |
125 | .ql-editor li[data-list=bullet] > .ql-ui:before {
126 | content: '\2022'
127 | }
128 |
129 | .ql-editor li[data-list=checked] > .ql-ui:before {
130 | content: '\2611'
131 | }
132 |
133 | .ql-editor li[data-list=unchecked] > .ql-ui:before {
134 | content: '\2610'
135 | }
136 |
137 | @supports (counter-set:none) {
138 | .ql-editor li[data-list] {
139 | counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
140 | }
141 | }
142 |
143 | @supports not (counter-set:none) {
144 | .ql-editor li[data-list] {
145 | counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
146 | }
147 | }
148 |
149 | .ql-editor li[data-list=ordered] {
150 | counter-increment: list-0
151 | }
152 |
153 | .ql-editor li[data-list=ordered] > .ql-ui:before {
154 | content: counter(list-0, decimal) '. '
155 | }
156 |
157 | .ql-editor li[data-list=ordered].ql-indent-1 {
158 | counter-increment: list-1
159 | }
160 |
161 | .ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
162 | content: counter(list-1, lower-alpha) '. '
163 | }
164 |
165 | @supports (counter-set:none) {
166 | .ql-editor li[data-list].ql-indent-1 {
167 | counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
168 | }
169 | }
170 |
171 | @supports not (counter-set:none) {
172 | .ql-editor li[data-list].ql-indent-1 {
173 | counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
174 | }
175 | }
176 |
177 | .ql-editor li[data-list=ordered].ql-indent-2 {
178 | counter-increment: list-2
179 | }
180 |
181 | .ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
182 | content: counter(list-2, lower-roman) '. '
183 | }
184 |
185 | @supports (counter-set:none) {
186 | .ql-editor li[data-list].ql-indent-2 {
187 | counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9
188 | }
189 | }
190 |
191 | @supports not (counter-set:none) {
192 | .ql-editor li[data-list].ql-indent-2 {
193 | counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
194 | }
195 | }
196 |
197 | .ql-editor li[data-list=ordered].ql-indent-3 {
198 | counter-increment: list-3
199 | }
200 |
201 | .ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
202 | content: counter(list-3, decimal) '. '
203 | }
204 |
205 | @supports (counter-set:none) {
206 | .ql-editor li[data-list].ql-indent-3 {
207 | counter-set: list-4 list-5 list-6 list-7 list-8 list-9
208 | }
209 | }
210 |
211 | @supports not (counter-set:none) {
212 | .ql-editor li[data-list].ql-indent-3 {
213 | counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
214 | }
215 | }
216 |
217 | .ql-editor li[data-list=ordered].ql-indent-4 {
218 | counter-increment: list-4
219 | }
220 |
221 | .ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
222 | content: counter(list-4, lower-alpha) '. '
223 | }
224 |
225 | @supports (counter-set:none) {
226 | .ql-editor li[data-list].ql-indent-4 {
227 | counter-set: list-5 list-6 list-7 list-8 list-9
228 | }
229 | }
230 |
231 | @supports not (counter-set:none) {
232 | .ql-editor li[data-list].ql-indent-4 {
233 | counter-reset: list-5 list-6 list-7 list-8 list-9
234 | }
235 | }
236 |
237 | .ql-editor li[data-list=ordered].ql-indent-5 {
238 | counter-increment: list-5
239 | }
240 |
241 | .ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
242 | content: counter(list-5, lower-roman) '. '
243 | }
244 |
245 | @supports (counter-set:none) {
246 | .ql-editor li[data-list].ql-indent-5 {
247 | counter-set: list-6 list-7 list-8 list-9
248 | }
249 | }
250 |
251 | @supports not (counter-set:none) {
252 | .ql-editor li[data-list].ql-indent-5 {
253 | counter-reset: list-6 list-7 list-8 list-9
254 | }
255 | }
256 |
257 | .ql-editor li[data-list=ordered].ql-indent-6 {
258 | counter-increment: list-6
259 | }
260 |
261 | .ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
262 | content: counter(list-6, decimal) '. '
263 | }
264 |
265 | @supports (counter-set:none) {
266 | .ql-editor li[data-list].ql-indent-6 {
267 | counter-set: list-7 list-8 list-9
268 | }
269 | }
270 |
271 | @supports not (counter-set:none) {
272 | .ql-editor li[data-list].ql-indent-6 {
273 | counter-reset: list-7 list-8 list-9
274 | }
275 | }
276 |
277 | .ql-editor li[data-list=ordered].ql-indent-7 {
278 | counter-increment: list-7
279 | }
280 |
281 | .ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
282 | content: counter(list-7, lower-alpha) '. '
283 | }
284 |
285 | @supports (counter-set:none) {
286 | .ql-editor li[data-list].ql-indent-7 {
287 | counter-set: list-8 list-9
288 | }
289 | }
290 |
291 | @supports not (counter-set:none) {
292 | .ql-editor li[data-list].ql-indent-7 {
293 | counter-reset: list-8 list-9
294 | }
295 | }
296 |
297 | .ql-editor li[data-list=ordered].ql-indent-8 {
298 | counter-increment: list-8
299 | }
300 |
301 | .ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
302 | content: counter(list-8, lower-roman) '. '
303 | }
304 |
305 | @supports (counter-set:none) {
306 | .ql-editor li[data-list].ql-indent-8 {
307 | counter-set: list-9
308 | }
309 | }
310 |
311 | @supports not (counter-set:none) {
312 | .ql-editor li[data-list].ql-indent-8 {
313 | counter-reset: list-9
314 | }
315 | }
316 |
317 | .ql-editor li[data-list=ordered].ql-indent-9 {
318 | counter-increment: list-9
319 | }
320 |
321 | .ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
322 | content: counter(list-9, decimal) '. '
323 | }
324 |
325 | .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
326 | padding-left: 3em
327 | }
328 |
329 | .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
330 | padding-left: 4.5em
331 | }
332 |
333 | .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
334 | padding-right: 3em
335 | }
336 |
337 | .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
338 | padding-right: 4.5em
339 | }
340 |
341 | .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
342 | padding-left: 6em
343 | }
344 |
345 | .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
346 | padding-left: 7.5em
347 | }
348 |
349 | .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
350 | padding-right: 6em
351 | }
352 |
353 | .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
354 | padding-right: 7.5em
355 | }
356 |
357 | .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
358 | padding-left: 9em
359 | }
360 |
361 | .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
362 | padding-left: 10.5em
363 | }
364 |
365 | .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
366 | padding-right: 9em
367 | }
368 |
369 | .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
370 | padding-right: 10.5em
371 | }
372 |
373 | .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
374 | padding-left: 12em
375 | }
376 |
377 | .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
378 | padding-left: 13.5em
379 | }
380 |
381 | .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
382 | padding-right: 12em
383 | }
384 |
385 | .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
386 | padding-right: 13.5em
387 | }
388 |
389 | .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
390 | padding-left: 15em
391 | }
392 |
393 | .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
394 | padding-left: 16.5em
395 | }
396 |
397 | .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
398 | padding-right: 15em
399 | }
400 |
401 | .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
402 | padding-right: 16.5em
403 | }
404 |
405 | .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
406 | padding-left: 18em
407 | }
408 |
409 | .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
410 | padding-left: 19.5em
411 | }
412 |
413 | .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
414 | padding-right: 18em
415 | }
416 |
417 | .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
418 | padding-right: 19.5em
419 | }
420 |
421 | .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
422 | padding-left: 21em
423 | }
424 |
425 | .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
426 | padding-left: 22.5em
427 | }
428 |
429 | .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
430 | padding-right: 21em
431 | }
432 |
433 | .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
434 | padding-right: 22.5em
435 | }
436 |
437 | .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
438 | padding-left: 24em
439 | }
440 |
441 | .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
442 | padding-left: 25.5em
443 | }
444 |
445 | .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
446 | padding-right: 24em
447 | }
448 |
449 | .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
450 | padding-right: 25.5em
451 | }
452 |
453 | .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
454 | padding-left: 27em
455 | }
456 |
457 | .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
458 | padding-left: 28.5em
459 | }
460 |
461 | .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
462 | padding-right: 27em
463 | }
464 |
465 | .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
466 | padding-right: 28.5em
467 | }
468 |
469 | .ql-editor li.ql-direction-rtl {
470 | padding-right: 1.5em
471 | }
472 |
473 | .ql-editor li.ql-direction-rtl > .ql-ui:before {
474 | margin-left: .3em;
475 | margin-right: -1.5em;
476 | text-align: left
477 | }
478 |
479 | .ql-editor table {
480 | table-layout: fixed;
481 | width: 100%
482 | }
483 |
484 | .ql-editor table td {
485 | outline: none
486 | }
487 |
488 | .ql-editor .ql-code-block-container {
489 | font-family: monospace
490 | }
491 |
492 | .ql-editor .ql-video {
493 | display: block;
494 | max-width: 100%
495 | }
496 |
497 | .ql-editor .ql-video.ql-align-center {
498 | margin: 0 auto
499 | }
500 |
501 | .ql-editor .ql-video.ql-align-right {
502 | margin: 0 0 0 auto
503 | }
504 |
505 | .ql-editor .ql-bg-black {
506 | background-color: #000
507 | }
508 |
509 | .ql-editor .ql-bg-red {
510 | background-color: #e60000
511 | }
512 |
513 | .ql-editor .ql-bg-orange {
514 | background-color: #f90
515 | }
516 |
517 | .ql-editor .ql-bg-yellow {
518 | background-color: #ff0
519 | }
520 |
521 | .ql-editor .ql-bg-green {
522 | background-color: #008a00
523 | }
524 |
525 | .ql-editor .ql-bg-blue {
526 | background-color: #06c
527 | }
528 |
529 | .ql-editor .ql-bg-purple {
530 | background-color: #93f
531 | }
532 |
533 | .ql-editor .ql-color-white {
534 | color: #fff
535 | }
536 |
537 | .ql-editor .ql-color-red {
538 | color: #e60000
539 | }
540 |
541 | .ql-editor .ql-color-orange {
542 | color: #f90
543 | }
544 |
545 | .ql-editor .ql-color-yellow {
546 | color: #ff0
547 | }
548 |
549 | .ql-editor .ql-color-green {
550 | color: #008a00
551 | }
552 |
553 | .ql-editor .ql-color-blue {
554 | color: #06c
555 | }
556 |
557 | .ql-editor .ql-color-purple {
558 | color: #93f
559 | }
560 |
561 | .ql-editor .ql-font-serif {
562 | font-family: Georgia, Times New Roman, serif
563 | }
564 |
565 | .ql-editor .ql-font-monospace {
566 | font-family: Monaco, Courier New, monospace
567 | }
568 |
569 | .ql-editor .ql-size-small {
570 | font-size: .75em
571 | }
572 |
573 | .ql-editor .ql-size-large {
574 | font-size: 1.5em
575 | }
576 |
577 | .ql-editor .ql-size-huge {
578 | font-size: 2.5em
579 | }
580 |
581 | .ql-editor .ql-direction-rtl {
582 | direction: rtl;
583 | text-align: inherit
584 | }
585 |
586 | .ql-editor .ql-align-center {
587 | text-align: center
588 | }
589 |
590 | .ql-editor .ql-align-justify {
591 | text-align: justify
592 | }
593 |
594 | .ql-editor .ql-align-right {
595 | text-align: right
596 | }
597 |
598 | .ql-editor .ql-ui {
599 | position: absolute
600 | }
601 |
602 | .ql-editor.ql-blank::before {
603 | color: rgba(0, 0, 0, 0.6);
604 | content: attr(data-placeholder);
605 | font-style: italic;
606 | left: 15px;
607 | pointer-events: none;
608 | position: absolute;
609 | right: 15px
610 | }
611 |
612 | /*# sourceMappingURL=quill.core.css.map*/
613 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/loading-indicator.css:
--------------------------------------------------------------------------------
1 | @keyframes loading-indicator-ball-anim {
2 | 0% {
3 | transform: translate(-50%, -50%) scale(0);
4 | opacity: 0;
5 | }
6 |
7 | 25% {
8 | transform: translate(-50%, -50%) scale(1);
9 | opacity: 1;
10 | }
11 |
12 | 32% {
13 | transform: translate(-50%, -50%) scale(0.5);
14 | opacity: 0;
15 | }
16 |
17 | 100% {
18 | transform: translate(-50%, -50%) scale(0);
19 | opacity: 0;
20 | }
21 | }
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | .loading-indicator-wrapper {
28 | display: flex;
29 | justify-content: center;
30 | align-items: center;
31 | width: 100vw;
32 | height: 100vh;
33 | background-color: #f0f0f0; /* Lighter background */
34 | }
35 |
36 | .loading-indicator {
37 | position: relative;
38 | width: 80px;
39 | height: 80px;
40 | pointer-events: none;
41 | }
42 |
43 | .loading-indicator-ball {
44 | will-change: transform, opacity;
45 | position: absolute;
46 | width: 16%;
47 | height: 16%;
48 | border-radius: 50%;
49 | background: #3b8eea; /* Light blue */
50 | filter: blur(3px); /* Slightly lighter blur */
51 | opacity: 0;
52 | animation: loading-indicator-ball-anim 9s infinite;
53 | }
54 |
55 | .loading-indicator-ball:nth-child(1) {
56 | left: 85.3553390593%;
57 | top: 85.3553390593%;
58 | animation-delay: 0s;
59 | }
60 |
61 | .loading-indicator-ball:nth-child(2) {
62 | left: 100%;
63 | top: 50%;
64 | animation-delay: 0.2s;
65 | }
66 |
67 | .loading-indicator-ball:nth-child(3) {
68 | left: 85.3553390593%;
69 | top: 14.6446609407%;
70 | --rotation: calc(-45deg * 3);
71 | animation-delay: 0.4s;
72 | }
73 |
74 | .loading-indicator-ball:nth-child(4) {
75 | left: 50%;
76 | top: 0%;
77 | animation-delay: 0.6s;
78 | }
79 |
80 | .loading-indicator-ball:nth-child(5) {
81 | left: 14.6446609407%;
82 | top: 14.6446609407%;
83 | animation-delay: 0.8s;
84 | }
85 |
86 | .loading-indicator-ball:nth-child(6) {
87 | left: 0%;
88 | top: 50%;
89 | animation-delay: 1.0s;
90 | }
91 |
92 | .loading-indicator-ball:nth-child(7) {
93 | left: 14.6446609407%;
94 | top: 85.3553390593%;
95 | animation-delay: 1.2s;
96 | }
97 |
98 | .loading-indicator-ball:nth-child(8) {
99 | left: 50%;
100 | top: 100%;
101 | animation-delay: 1.4s;
102 | }
103 |
104 | .loading-indicator-ball:nth-child(9) {
105 | left: 50%;
106 | top: 100%;
107 | animation-delay: 4.5s;
108 | }
109 |
110 | .loading-indicator-ball:nth-child(10) {
111 | left: 14.6446609407%;
112 | top: 85.3553390593%;
113 | animation-delay: 4.7s;
114 | }
115 |
116 | .loading-indicator-ball:nth-child(11) {
117 | left: 0%;
118 | top: 50%;
119 | animation-delay: 4.9s;
120 | }
121 |
122 | .loading-indicator-ball:nth-child(12) {
123 | left: 14.6446609407%;
124 | top: 14.6446609407%;
125 | animation-delay: 5.1s;
126 | }
127 |
128 | .loading-indicator-ball:nth-child(13) {
129 | left: 50%;
130 | top: 0%;
131 | animation-delay: 5.3s;
132 | }
133 |
134 | .loading-indicator-ball:nth-child(14) {
135 | left: 85.3553390593%;
136 | top: 14.6446609407%;
137 | animation-delay: 5.5s;
138 | }
139 |
140 | .loading-indicator-ball:nth-child(15) {
141 | left: 100%;
142 | top: 50%;
143 | animation-delay: 5.7s;
144 | }
145 |
146 | .loading-indicator-ball:nth-child(16) {
147 | left: 85.3553390593%;
148 | top: 85.3553390593%;
149 | animation-delay: 5.9s;
150 | }
151 |
152 | .loading-indicator-text {
153 | display: flex;
154 | justify-content: center;
155 | align-items: center;
156 | width: 100%;
157 | height: 100%;
158 | }
159 |
160 | .loading-indicator-text:after {
161 | content: var(--blazor-load-percentage-text, "Loading...");
162 | color: #555; /* Darker text for contrast */
163 | font-size: 1.2rem;
164 | font-family: 'Arial', sans-serif;
165 | }
166 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/modern/loading-animation.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | let lastAnimationTime = 0;
3 | const ANIMATION_THROTTLE_DELAY = 150; // Minimum time between animations
4 | const ANIMATION_DURATION = 150; // Total animation duration
5 |
6 | const odometerClass = "opensilver-odometer";
7 |
8 | function startLoader() {
9 | const count = document.querySelectorAll("." + odometerClass);
10 | const loader = document.querySelector(".opensilver-loader-progress-bar");
11 | const loaderProgress = document.querySelector(".opensilver-loader-progress");
12 | if (!count || !loader) return;
13 |
14 | loader.style.width = "0%";
15 | const observer = new MutationObserver(updateCount);
16 |
17 | function updateCount() {
18 | const loadPercentageText = getComputedStyle(document.documentElement)
19 | .getPropertyValue("--blazor-load-percentage-text")
20 | .trim();
21 | const loadPercentage = parseInt(loadPercentageText.replace(/"/g, ""));
22 | const currentValue = isNaN(loadPercentage) ? 0 : loadPercentage;
23 |
24 | // Always animate 100 regardless of throttling
25 | if (currentValue === 100) {
26 | animateCounter(currentValue, true);
27 | loader.style.width = "100%";
28 | loaderProgress.style["border-right"] = "none";
29 | observer.disconnect();
30 | return;
31 | }
32 |
33 | // Throttle animations to prevent too frequent updates
34 | const now = Date.now();
35 | if (now - lastAnimationTime >= ANIMATION_THROTTLE_DELAY) {
36 | animateCounter(currentValue);
37 | lastAnimationTime = now;
38 | }
39 |
40 | loader.style.width = currentValue + "%";
41 | }
42 |
43 | observer.observe(document.documentElement, {
44 | attributes: true,
45 | attributeFilter: ["style"],
46 | });
47 | updateCount();
48 | }
49 |
50 | function animateCounter(newValue, force = false) {
51 | const odometers = Array.from(document.querySelectorAll("." + odometerClass));
52 | const newValueString = String(newValue).padStart(3, "0");
53 |
54 | for (let index = odometers.length - 1; index > -1; index--) {
55 | const element = odometers[index];
56 |
57 | if (force) {
58 | const finalOdometer = document.createElement("div");
59 | finalOdometer.textContent = newValueString[index];
60 | finalOdometer.classList.add(odometerClass);
61 | element.replaceWith(finalOdometer);
62 | continue;
63 | }
64 |
65 | if (element.textContent === "") {
66 | element.textContent = "0";
67 | }
68 | const currentValue = element.textContent || "0";
69 |
70 | if (newValueString[index] !== currentValue) {
71 | element.style.transition = `transform ${ANIMATION_DURATION}ms, opacity ${ANIMATION_DURATION}ms`;
72 | element.style.transform = "translateY(-4px)";
73 | element.style.opacity = "0.5";
74 |
75 | setTimeout(() => {
76 | element.textContent = newValueString[index];
77 | element.style.transform = "translateY(4px)";
78 | element.style.opacity = "0.5";
79 |
80 | setTimeout(() => {
81 | element.style.transform = "translateY(0)";
82 | element.style.opacity = "1";
83 | }, ANIMATION_DURATION / 2);
84 | }, ANIMATION_DURATION / 2);
85 | }
86 | };
87 | }
88 |
89 | function onDomReady() {
90 | startLoader();
91 | startAnimations();
92 | }
93 |
94 | function startAnimations() {
95 | const loaderProgress = document.querySelector(".opensilver-loader-progress");
96 | const counterContainer = document.querySelector(".opensilver-counter-container");
97 |
98 | if (loaderProgress) {
99 | loaderProgress.style.transition = "width 1.25s, opacity 1.25s";
100 | loaderProgress.style.width = "60vw";
101 | loaderProgress.style.opacity = "1";
102 | }
103 |
104 | if (counterContainer) {
105 | counterContainer.style.transition = "opacity 0.3s";
106 | counterContainer.style.opacity = "1";
107 | }
108 | }
109 |
110 | if (document.readyState === 'loading') {
111 | document.addEventListener('DOMContentLoaded', onDomReady);
112 | } else {
113 | onDomReady();
114 | }
115 | })();
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Browser/wwwroot/modern/loading-indicator.css:
--------------------------------------------------------------------------------
1 | html body {
2 | background: var(--opensilver-loading-background-color);
3 | }
4 |
5 | .opensilver-loading-indicator {
6 | position: fixed;
7 | top: 0;
8 | left: 0;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | pointer-events: none;
13 | height: 100vh;
14 | width: 100vw;
15 | overflow: hidden;
16 | background: var(--opensilver-loading-background-color);
17 | }
18 |
19 | .opensilver-loading-indicator .opensilver-loader-container {
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 | gap: 8px;
24 | }
25 |
26 | .opensilver-loading-indicator .opensilver-loader {
27 | display: flex;
28 | flex-direction: column;
29 | justify-content: center;
30 | align-items: center;
31 | gap: 10px;
32 | width: 100%;
33 | height: 100%;
34 | margin-left: 20px;
35 | }
36 |
37 | .opensilver-loading-indicator .opensilver-loader-progress {
38 | display: flex;
39 | justify-content: flex-start;
40 | align-items: center;
41 | width: 0;
42 | max-width: 200px;
43 | height: 4px;
44 | border-radius: 12px;
45 | background-color: var(--opensilver-loading-progress-bg);
46 | border-bottom: 1px var(--opensilver-loading-progress-border-color) solid;
47 | border-right: 1px var(--opensilver-loading-progress-border-color) solid;
48 | }
49 |
50 | .opensilver-loading-indicator .opensilver-loader-progress-bar {
51 | width: 0%;
52 | height: 5px;
53 | border-radius: 12px;
54 | background-color: var(--opensilver-loading-progress-bar-color);
55 | }
56 |
57 | .opensilver-loading-indicator .opensilver-counter-container {
58 | align-self: end;
59 | display: flex;
60 | justify-content: end;
61 | align-items: center;
62 | font-family: sans-serif;
63 | font-size: 0.8rem;
64 | font-weight: 500;
65 | width: 100%;
66 | min-width: 26px;
67 | line-height: 1;
68 | gap: 1px;
69 | color: var(--opensilver-loading-counter-color);
70 | }
71 |
--------------------------------------------------------------------------------
/src/opensilver/DemoApp/DemoApp.Simulator/DemoApp.Simulator.csproj:
--------------------------------------------------------------------------------
1 |
35 |
48 |
36 |
47 |
37 |
41 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |