quran-madina-html 0.1.2

package/package.json

@@ -0,0 +1,181 @@
+{
+  "name": "quran-madina-html",
+  "version": "0.1.2",
+  "devDependencies": {
+    "bower": "^1.8.14",
+    "grunt": "^1.6.1",
+    "grunt-contrib-concat": "^2.1.0",
+    "grunt-contrib-jshint": "^3.2.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0"
+  },
+  "description": "A Madina Quran HTML Renderer without images.",
+  "main": "Gruntfile.js",
+  "dependencies": {
+    "abbrev": "^1.1.1",
+    "ansi-styles": "^4.3.0",
+    "argparse": "^1.0.10",
+    "array-each": "^1.0.1",
+    "array-slice": "^1.1.0",
+    "async": "^2.6.4",
+    "balanced-match": "^1.0.2",
+    "body": "^5.1.0",
+    "brace-expansion": "^1.1.11",
+    "braces": "^3.0.2",
+    "bytes": "^1.0.0",
+    "call-bind": "^1.0.2",
+    "chalk": "^4.1.2",
+    "cli": "^1.0.1",
+    "color-convert": "^2.0.1",
+    "color-name": "^1.1.4",
+    "colors": "^1.1.2",
+    "concat-map": "^0.0.1",
+    "console-browserify": "^1.1.0",
+    "continuable-cache": "^0.3.1",
+    "core-util-is": "^1.0.3",
+    "date-now": "^0.1.4",
+    "dateformat": "^4.6.3",
+    "debug": "^3.2.7",
+    "detect-file": "^1.0.0",
+    "dom-serializer": "^0.2.2",
+    "domelementtype": "^1.3.1",
+    "domhandler": "^2.3.0",
+    "domutils": "^1.5.1",
+    "duplexer": "^0.1.2",
+    "entities": "^1.0.0",
+    "error": "^7.2.1",
+    "escape-string-regexp": "^1.0.5",
+    "esprima": "^4.0.1",
+    "eventemitter2": "^0.4.14",
+    "exit": "^0.1.2",
+    "expand-tilde": "^2.0.2",
+    "extend": "^3.0.2",
+    "faye-websocket": "^0.10.0",
+    "figures": "^3.2.0",
+    "fill-range": "^7.0.1",
+    "findup-sync": "^5.0.0",
+    "fined": "^1.2.0",
+    "flagged-respawn": "^1.0.1",
+    "for-in": "^1.0.2",
+    "for-own": "^1.0.0",
+    "fs.realpath": "^1.0.0",
+    "function-bind": "^1.1.1",
+    "gaze": "^1.1.3",
+    "get-intrinsic": "^1.2.1",
+    "getobject": "^1.0.2",
+    "glob": "^7.1.7",
+    "global-modules": "^1.0.0",
+    "global-prefix": "^1.0.2",
+    "globule": "^1.3.4",
+    "grunt-cli": "^1.4.3",
+    "grunt-known-options": "^2.0.0",
+    "grunt-legacy-log": "^3.0.0",
+    "grunt-legacy-log-utils": "^2.1.0",
+    "grunt-legacy-util": "^2.0.1",
+    "gzip-size": "^5.1.1",
+    "has": "^1.0.3",
+    "has-flag": "^4.0.0",
+    "has-proto": "^1.0.1",
+    "has-symbols": "^1.0.3",
+    "homedir-polyfill": "^1.0.3",
+    "hooker": "^0.2.3",
+    "htmlparser2": "^3.8.3",
+    "http-parser-js": "^0.5.8",
+    "iconv-lite": "^0.6.3",
+    "inflight": "^1.0.6",
+    "inherits": "^2.0.4",
+    "ini": "^1.3.8",
+    "interpret": "^1.1.0",
+    "is-absolute": "^1.0.0",
+    "is-core-module": "^2.12.1",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "is-number": "^7.0.0",
+    "is-plain-object": "^2.0.4",
+    "is-relative": "^1.0.0",
+    "is-unc-path": "^1.0.0",
+    "is-windows": "^1.0.2",
+    "isarray": "^0.0.1",
+    "isexe": "^2.0.0",
+    "isobject": "^3.0.1",
+    "js-yaml": "^3.14.1",
+    "jshint": "^2.13.6",
+    "kind-of": "^6.0.3",
+    "liftup": "^3.0.1",
+    "livereload-js": "^2.4.0",
+    "lodash": "^4.17.21",
+    "make-iterator": "^1.0.1",
+    "map-cache": "^0.2.2",
+    "maxmin": "^3.0.0",
+    "micromatch": "^4.0.5",
+    "minimatch": "^3.0.8",
+    "ms": "^2.1.3",
+    "nopt": "^3.0.6",
+    "object-assign": "^4.1.1",
+    "object-inspect": "^1.12.3",
+    "object.defaults": "^1.1.0",
+    "object.map": "^1.0.1",
+    "object.pick": "^1.3.0",
+    "once": "^1.4.0",
+    "os-homedir": "^1.0.2",
+    "os-tmpdir": "^1.0.2",
+    "osenv": "^0.1.5",
+    "parse-filepath": "^1.0.2",
+    "parse-passwd": "^1.0.0",
+    "path-is-absolute": "^1.0.1",
+    "path-parse": "^1.0.7",
+    "path-root": "^0.1.1",
+    "path-root-regex": "^0.1.2",
+    "picomatch": "^2.3.1",
+    "pify": "^4.0.1",
+    "pretty-bytes": "^5.6.0",
+    "qs": "^6.11.2",
+    "raw-body": "^1.1.7",
+    "readable-stream": "^1.1.14",
+    "rechoir": "^0.7.1",
+    "resolve": "^1.22.2",
+    "resolve-dir": "^1.0.1",
+    "safe-buffer": "^5.2.1",
+    "safe-json-parse": "^1.0.1",
+    "safer-buffer": "^2.1.2",
+    "side-channel": "^1.0.4",
+    "source-map": "^0.5.7",
+    "sprintf-js": "^1.0.3",
+    "string-template": "^0.2.1",
+    "string_decoder": "^0.10.31",
+    "strip-json-comments": "^1.0.4",
+    "supports-color": "^7.2.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "tiny-lr": "^1.1.1",
+    "to-regex-range": "^5.0.1",
+    "uglify-js": "^3.17.4",
+    "unc-path-regex": "^0.1.2",
+    "underscore.string": "^3.3.6",
+    "uri-path": "^1.0.0",
+    "util-deprecate": "^1.0.2",
+    "v8flags": "^3.2.0",
+    "websocket-driver": "^0.7.4",
+    "websocket-extensions": "^0.1.4",
+    "which": "^2.0.2",
+    "wrappy": "^1.0.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tarekeldeeb/quran-madina-html-no-images.git"
+  },
+  "keywords": [
+    "quran",
+    "html",
+    "x-tag",
+    "madina"
+  ],
+  "author": "Tarek Eldeeb",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/tarekeldeeb/quran-madina-html-no-images/issues"
+  },
+  "homepage": "https://github.com/tarekeldeeb/quran-madina-html-no-images#readme"
+}

package/part_width_test.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Arabic Text with Amiri Font</title>
+<link href="https://fonts.cdnfonts.com/css/amiri-quran-colored" rel="stylesheet"/>
+<style>
+		@font-face {
+		font-family: 'me_quran';
+			src: url('https://icikiwir.github.io/test/me_quran.woff') format('woff'); 
+			font-weight: normal;
+			font-style: normal;
+		}
+		body {
+			font-family: "Amiri Quran Colored", serif;
+			font-size: 16px;
+		}
+		.container {
+			width: 260px;
+			margin: 0 auto; /* to center the container horizontally */
+			border-style: solid;
+			display: block;
+		}
+		.text {
+			direction: rtl;
+			float: right;
+			border-style: dotted;
+			border-width: thin;
+			border-color: blue;
+			white-space: nowrap;
+		}
+	</style>
+</head>
+<body>
+<div class="container">
+		<span class="text" id="test">هذا نص باللغة العربية يستخدم خط الأميري</span>
+</div>
+</body>
+</html>
+<!-- document.getElementById("test").getBoundingClientRect().width - 4.8 -->

package/requirements.txt

@@ -0,0 +1,4 @@
+beautifulsoup4==4.12.0
+Requests==2.31.0
+selenium==4.9.1
+tqdm==4.65.0

package/src/quran-madina-html.css

@@ -0,0 +1,10 @@
+quran-madina-html {
+  padding: 5px 5px 7px 5px;
+  background-color:beige;
+  border-radius: 5px;
+}
+quran-madina-html-line {
+  text-align: right;
+  white-space: nowrap;
+  transform-origin: top right;
+}

package/src/quran-madina-html.js

@@ -0,0 +1,131 @@
+(function(){
+  var name = "quran-madina-html";
+  var cdn = 'https://raw.githubusercontent.com/tarekeldeeb/quran-madina-html-no-images/main/DBs/';
+  function loadJSON(path, success, error){
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function()
+    {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                if (success)
+                    success(JSON.parse(xhr.responseText));
+            } else {
+                if (error)
+                    error(xhr);
+            }
+        }
+    };
+    xhr.open("GET", path, true);
+    xhr.send();
+  }
+  function parseRange(str){
+    if (str.split('-').length == 2) return str.split('-').map(elem => elem -1);
+    return Array(2).fill(str.split('-')[0]-1);
+  }
+  var madina_data = {"content":"Loading .."};
+  var this_script = document.querySelector('script[data-name]');
+  var doc_name    = this_script.getAttribute('data-name') || "Madina";
+  var doc_font    = this_script.getAttribute('data-font') || "Amiri";
+  var doc_font_sz = this_script.getAttribute('data-font-size') || 16;
+  console.log("Quran> "+doc_name+" with font:"+doc_font+" size:"+doc_font_sz);
+  const name_css = "../src/"+name+".css";
+  if (!document.getElementById(name))
+  {
+      var head  = document.getElementsByTagName('head')[0];
+      var link  = document.createElement('link');
+      link.id   = name;
+      link.rel  = 'stylesheet';
+      link.type = 'text/css';
+      link.href = name_css;
+      link.media = 'all';
+      head.appendChild(link);
+  }
+  loadJSON(cdn+doc_name+'-'+doc_font+'-'+doc_font_sz+'px.json',
+        function(data) { 
+          madina_data = data; 
+          const myFont = new FontFace(madina_data.font_family, 'url('+encodeURI(madina_data.font_url)+')');
+          myFont.load().then( () => {document.fonts.add(myFont);});
+          xtag.register('quran-madina-html', {
+            lifecycle: {
+              created: function() {
+                this.render(this);
+              },
+              inserted: function() {},
+              removed: function() {},
+              attributeChanged: function() {}
+            }, 
+            events: {},
+            accessors: {
+              aya:{
+                attribute: {},
+                set: function(value) {
+                  this.xtag.data.aya = value;
+                },
+                get: function(){
+                  return this.getAttribute("aya");
+                }
+              },
+              sura:{
+                attribute: {},
+                set: function(value) {
+                  this.xtag.data.sura = value;
+                },
+                get: function(){
+                  return this.getAttribute("sura");
+                }
+              }              
+            }, 
+            methods: {
+               render: function(tag){
+                var sura = parseRange(this.sura)[0]; // Only a single Sura
+                var multiline = false;
+                [aya_from,aya_to] = parseRange(this.aya);
+                var line_from = madina_data.suras[sura].ayas[aya_from].r[0].l;
+                var line_to = madina_data.suras[sura].ayas[aya_to].r.slice(-1)[0].l;
+                
+                if(line_from!=line_to){
+                  multiline = true;
+                  tag.style = "display:block;";
+                }
+                if(multiline){
+                  tag.style.setProperty('font-family', madina_data.font_family, '');
+                  tag.style.setProperty('font-size', madina_data.font_size+"px", '');                  
+                }
+                var aya_current = aya_from;
+                for(let l = line_from; l <= line_to; l++) {
+                  const ll = l; //Const for inner loops to refer
+                  line = document.createElement("quran-madina-html-line");
+                  tag.appendChild(line);
+                  if(!multiline){
+                    line.style.setProperty('font-family', madina_data.font_family, '');
+                    line.style.setProperty('font-size', madina_data.font_size+"px", '');
+                  }
+                  if(multiline){
+                    tag.style.width = (madina_data.line_width+10)+"px";
+                    let isRightPage = madina_data.suras[sura].ayas[aya_from].p%2==1?"":"-";
+                    tag.style.setProperty('box-shadow', 'inset '+isRightPage+'8px 0 7px -7px #333','');
+                    line.style.setProperty('display','block','');
+                  } 
+                  for(let a = aya_current; a < aya_current+5 && a <=aya_to ; a++) { //Look ahead
+                    line_match = madina_data.suras[sura].ayas[a].r.filter(rr => rr.l == ll);
+                    if (line_match.length){
+                      if(line.innerHTML.trim() == ""){ // First part in the line
+                        var offset = line_match[0].o;
+                        line.style.setProperty('padding-right', offset+"px", '');
+                        if(offset > 0) line.style.setProperty('transform-origin', "left");
+                      }
+                      line.style.setProperty("transform","scaleX("+line_match[0].s+")","");
+                      line.innerHTML += line_match[0].t;
+                      aya_current = a;
+                    }
+                  }
+                }
+              }
+            }
+          });
+        
+        },
+         function(xhr) { console.error(xhr); }
+  );
+
+})();