首頁 探索 說明
登入
pascal
/
pas2js
镜像来自 https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

* CSS demo

Michaël Van Canneyt 3 年之前
父節點
8e1ea7d9df
當前提交
b83e4f3ff3
共有 5 個文件被更改，包括 225 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 5 0
      demo/css/bootstrap.min.css
  2. 50 0
      demo/css/cssdemo.lpr
  3. 93 0
      demo/css/index.html
  4. 67 0
      demo/css/main.pas
  5. 10 0
      demo/css/style.css

File diff suppressed because it is too large
+ 5 - 0
demo/css/bootstrap.min.css


+ 50 - 0
demo/css/cssdemo.lpr
查看文件 

@@ -0,0 +1,50 @@
 
+program cssdemo;
 
+
 
+uses js,web,main;
 
+
 
+Type 
+  TMainForm = Class(TBaseMainForm)
 
+    Procedure doMinimize(Event : TJSEvent); override; async;
 
+    Procedure doExtract(Event : TJSEvent); override; async;
 
+    Function CreateURL(aPath : string) : string;
 
+  end;
 
+  
+  
+Function TMainForm.CreateURL(aPath : string) : string;
 
+
 
+begin
 
+  result:='fpcss.cgi/'+aPath;
 
+end;
 
+  
+Procedure TMainForm.doMinimize(Event : TJSEvent); 
+
 
+var
 
+  Init : TJSObject;
 
+  Resp: TJSResponse;
 
+  CSS : String;
 
+  
+begin
 
+  Init:=New(['method','POST','cache','no-cache','body',userCss.Value]);
 
+  Resp:=await(TJSResponse,window.fetch(createurl('minimize'),Init));
 
+  CSS:=await(string,Resp.text());
 
+  processedCss.Value:=CSS;
 
+end;
 
+
 
+
 
+Procedure TMainForm.doExtract(Event : TJSEvent); 
+var
 
+  Init : TJSObject;
 
+  Resp: TJSResponse;
 
+  CSS : String;
 
+  
+begin
 
+  Init:=New(['method','POST','cache','no-cache','body',userCss.Value]);
 
+  Resp:=await(TJSResponse,window.fetch(createurl('classnames'),Init));
 
+  CSS:=await(string,Resp.text());
 
+  processedCss.Value:=CSS;
 
+end;
 
+
 
+
 
+begin
 
+  TMainForm.Create(Nil);
 
+end.

+ 93 - 0
demo/css/index.html
查看文件 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>FPC CSS Parser Demo</title>
 
+  <link href="bootstrap.min.css" rel="stylesheet">
 
+  <link rel="stylesheet" href="style.css">
 
+  <script src="bootstrap.bundle.min.js"></script>
 
+  <script src="cssdemo.js"></script>
 
+</head>
 
+<body>
 
+  <header>
 
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
 
+      <div class="container">
 
+        <a class="navbar-brand d-flex align-items-center" href="#">
 
+          <span>Free Pascal Demo</span></a>
 
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+          <span class="navbar-toggler-icon"></span>
 
+        </button>
 
+        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
 
+          <ul class="navbar-nav">
 
+            <li class="nav-item">
 
+              <a class="nav-link" aria-current="page" href="https://www.freepascal.org/">
 
+                <i class="bi bi-house-door"></i>
 
+                Home</a>
 
+            </li>
 
+            <!-- If you only have one source code, use this
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="#">
 
+                <i class="bi bi-code-slash"></i>
 
+                Source</a>
 
+            </li> -->
 
+            <li class="nav-item dropdown">
 
+              <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
+                <i class="bi bi-code-slash"></i>
 
+                Sources
 
+              </a>
 
+              <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
 
+                <li>
 
+                  <a class="dropdown-item" href="https://www.freepascal.org/~michael/pas2js-demos/wasienv/canvas/demowasicanvas.lpr" target="_blank">Source 1</a>
 
+                </li>
 
+                <li>
 
+                  <a class="dropdown-item" href="#" target="_blank"> Source 2</a>
 
+                </li>
 
+              </ul>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="https://wiki.freepascal.org/pas2js" target="_blank">
 
+                <i class="bi bi-globe2"></i>
 
+                Wiki</a>
 
+            </li>
 
+          </ul>
 
+        </div>
 
+      </div>
 
+    </nav>
 
+  </header>
 
+  <main class="container mb-4">
 
+    <section class="py-5">
 
+      <h1>CSS Parser</h1>  
+      <div class="row">
 
+        <div class="col-md my-3">
 
+          <form>
 
+            <div class="my-3">
 
+              <label for="userCss" class="form-label fw-bold">Please enter or copy & paste your CSS:</label>
 
+              <textarea class="form-control" id="userCss" rows="10"></textarea>
 
+            </div>
 
+
 
+            <button id="btnMinimize" type="button" _click_="doMinimize" class="btn btn-outline-dark">Minimize CSS</button>
 
+            <button id="btnClassNames" type="button" _click_="doExtract" class="ms-2 btn btn-outline-dark">Extract Class Names</button>
 
+          </form>
 
+        </div>
 
+        <div class="col-md my-3">
 
+          <div class="my-3">
 
+            <label for="userCss" class="form-label fw-bold">Output:</label>
 
+            <textarea class="form-control" id="processedCss" rows="10"></textarea>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+  </main>
 
+
 
+  <footer class="bg-light pt-3 fixed-bottom">
 
+    <div class="container text-center">
 
+      <p class="text-muted">© April 2022</p>
 
+    </div>
 
+  </footer>
 
+  <script>
 
+    window.onload=rtl.run;
 
+  </script>
 
+</body>
 
+</html>

+ 67 - 0
demo/css/main.pas
查看文件 

@@ -0,0 +1,67 @@
 
+unit main;
 
+{$MODE ObjFPC}
 
+{$H+}
 
+
 
+interface
 
+
 
+uses js, web,Classes;
 
+
 
+Type
 
+  
+  { --------------------------------------------------------------------
 
+    TBaseMainForm
 
+    --------------------------------------------------------------------}
 
+  
+  TBaseMainForm = class(TComponent) 
+  Published
 
+    navbarNav : TJSHTMLElement;
 
+    navbarScrollingDropdown : TJSHTMLElement;
 
+    userCss : TJSHTMLTextAreaElement;
 
+    btnMinimize : TJSHTMLButtonElement;
 
+    btnClassNames : TJSHTMLButtonElement;
 
+    processedCss : TJSHTMLTextAreaElement;
 
+    Procedure doMinimize(Event : TJSEvent); async; virtual; abstract;
 
+    Procedure doExtract(Event : TJSEvent); async; virtual; abstract;
 
+  Public
 
+    Constructor Create(aOwner : TComponent); override;
 
+    Procedure BindElements; virtual;
 
+    Procedure BindElementEvents; virtual;
 
+  end;
 
+
 
+implementation
 
+
 
+
 
+{ --------------------------------------------------------------------
 
+  TBaseMainForm
 
+  --------------------------------------------------------------------}
 
+
 
+
 
+Constructor TBaseMainForm.create(aOwner : TComponent);
 
+
 
+begin
 
+  Inherited;
 
+  BindElements;
 
+  BindElementEvents;
 
+end;
 
+
 
+
 
+
 
+Procedure TBaseMainForm.BindElements;
 
+
 
+begin
 
+  navbarNav:=TJSHTMLElement(document.getelementByID('navbarNav'));
 
+  navbarScrollingDropdown:=TJSHTMLElement(document.getelementByID('navbarScrollingDropdown'));
 
+  userCss:=TJSHTMLTextAreaElement(document.getelementByID('userCss'));
 
+  btnMinimize:=TJSHTMLButtonElement(document.getelementByID('btnMinimize'));
 
+  btnClassNames:=TJSHTMLButtonElement(document.getelementByID('btnClassNames'));
 
+  processedCss:=TJSHTMLTextAreaElement(document.getelementByID('processedCss'));
 
+end;
 
+
 
+Procedure TBaseMainForm.BindElementEvents;
 
+
 
+begin
 
+  btnMinimize.AddEventListener('click',@doMinimize);
 
+  btnClassNames.AddEventListener('click',@doExtract);
 
+end;
 
+
 
+end.

+ 10 - 0
demo/css/style.css
查看文件 

@@ -0,0 +1,10 @@
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
 
+
 
+* {
 
+  font-family: "Poppins", sans-serif;
 
+}
 
+
 
+.navbar-brand span {
 
+  text-shadow: 2px 2px 5px rgb(196, 196, 196);
 
+}

Some files were not shown because too many files changed in this diff