Merge pull request #1 from TwilioDevEd/non-gsm-chars

vernig · web-flow · commit 3e6579176c8c · 2021-02-10T10:01:35.000Z
* Add basic README file
* Add highlighting of the non GSM7 characters
* Add legend at the bottom of the page
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# Messaging Segment Calculator
+
+This repo contains an SMS segments calculator. You can access this [here](https://twiliodeved.github.io/message-segment-calculator/)
+
diff --git a/index.html b/index.html
@@ -10,6 +10,8 @@
 </head>
 
 <body>
+  <!-- https://github.com/tholman/github-corners -->
+  <a href="https://github.com/TwilioDevEd/message-segment-calculator" class="github-corner" aria-label="View source on GitHub"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
   <h1>Messaging Segment Calculator</h1>
   <div id="calculator">
     <div id="calculator-header">
@@ -67,6 +69,13 @@ <h1>Messaging Segment Calculator</h1>
         </span>
       </div>
     </div>
+
+    <div id="legend" class="legend">
+      <p><span class="label">Legend</span></p>
+      <p><img class="legend-block" src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMwIDMwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij48cGF0aCBkPSJNMTUgMEM2LjcgMCAwIDYuNyAwIDE1czYuNyAxNSAxNSAxNSAxNS02LjcgMTUtMTVTMjMuMyAwIDE1IDB6bTAgMjZDOC45IDI2IDQgMjEuMSA0IDE1UzguOSA0IDE1IDRzMTEgNC45IDExIDExLTQuOSAxMS0xMSAxMXptNi44LTE0LjdjMCAxLjctMS40IDMuMS0zLjEgMy4xcy0zLjEtMS40LTMuMS0zLjEgMS40LTMuMSAzLjEtMy4xIDMuMSAxLjQgMy4xIDMuMXptMCA3LjRjMCAxLjctMS40IDMuMS0zLjEgMy4xcy0zLjEtMS40LTMuMS0zLjFjMC0xLjcgMS40LTMuMSAzLjEtMy4xczMuMSAxLjQgMy4xIDMuMXptLTcuNCAwYzAgMS43LTEuNCAzLjEtMy4xIDMuMXMtMy4xLTEuNC0zLjEtMy4xYzAtMS43IDEuNC0zLjEgMy4xLTMuMXMzLjEgMS40IDMuMSAzLjF6bTAtNy40YzAgMS43LTEuNCAzLjEtMy4xIDMuMVM4LjIgMTMgOC4yIDExLjNzMS40LTMuMSAzLjEtMy4xIDMuMSAxLjQgMy4xIDMuMXoiLz48L3N2Zz4=">&nbsp;-&nbsp;SMS Header</p>
+      <p><span class="legend-block">0xFFFF</span>&nbsp;-&nbsp;Character block</p>
+      <p><span class="legend-block" style="color: red">0xFFFF</span>&nbsp;-&nbsp;Non GSM-7 character block</p>
+    </div>
   </div>
 
   <script>
diff --git a/main.css b/main.css
@@ -192,6 +192,9 @@ h1 {
     background-color: #F47C22;
 }
 
+.block.non-gsm {
+  color: red;
+}
 
 .recently-changed {
     animation: pulseHighlight 1s ease-out infinite;
@@ -204,4 +207,25 @@ h1 {
   100% {
     color: white;
   }
-}
+}
+
+/********************************/
+/* Legend                       */
+/********************************/
+.legend {
+    font-size: 10px;
+    background-color: #f9f9f9;
+    padding: 0px 0px 5px 5px;
+}
+
+.legend-block {
+    display: inline;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    font-size: 10px;
+    height: 1em;
+    padding: 4px;
+    width: 6ch;
+    vertical-align: middle;
+    font-family: monospace;
+  }
+  
diff --git a/segments_calculator.js b/segments_calculator.js
@@ -162,6 +162,7 @@ class EncodedChar {
   constructor(char) {
     this.raw = char;
     this.codeUnits = null;
+    this.isGSM7 = char && unicodeToGsm[char.charCodeAt(0)] ? true : false;
   }
 
   sizeInBits() {
diff --git a/segments_viewer.js b/segments_viewer.js
@@ -22,9 +22,9 @@ class SegmentsViewer {
         return block;
     }
 
-    createCodeUnitBlock(codeUnit, segmentType, mapKey) {
+    createCodeUnitBlock(codeUnit, segmentType, mapKey, isGSM7) {
         let block = document.createElement('div');
-        block.setAttribute('class', `block ${segmentType}`);
+        block.setAttribute('class', `block ${segmentType} ${isGSM7 ? '' : 'non-gsm'}`);
 
         block.setAttribute("data-key", mapKey);
         this.blockMap.get(mapKey).push(block);
@@ -57,7 +57,7 @@ class SegmentsViewer {
                     if (encodedChar.codeUnits) {
                         for (const codeUnit of encodedChar.codeUnits) {
                             newSegments.appendChild(
-                                this.createCodeUnitBlock(codeUnit, segmentType, mapKey)
+                                this.createCodeUnitBlock(codeUnit, segmentType, mapKey, encodedChar.isGSM7)
                             );
                         }
                     }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +# Messaging Segment Calculator
++
 +This repo contains an SMS segments calculator. You can access this [here](https://twiliodeved.github.io/message-segment-calculator/)
++
Original file line number	Diff line number	Diff line change
`@@ -162,6 +162,7 @@ class EncodedChar {`
`162`	`162`	`constructor(char) {`
`163`	`163`	`this.raw = char;`
`164`	`164`	`this.codeUnits = null;`
	`165`	`+ this.isGSM7 = char && unicodeToGsm[char.charCodeAt(0)] ? true : false;`
`165`	`166`	`}`
`166`	`167`
`167`	`168`	`sizeInBits() {`
Original file line number	Diff line number	Diff line change
`@@ -22,9 +22,9 @@ class SegmentsViewer {`
`22`	`22`	`return block;`
`23`	`23`	`}`
`24`	`24`
`25`		`- createCodeUnitBlock(codeUnit, segmentType, mapKey) {`
	`25`	`+ createCodeUnitBlock(codeUnit, segmentType, mapKey, isGSM7) {`
`26`	`26`	`let block = document.createElement('div');`
`27`		- block.setAttribute('class', `block ${segmentType}`);
	`27`	+ block.setAttribute('class', `block ${segmentType} ${isGSM7 ? '' : 'non-gsm'}`);
`28`	`28`
`29`	`29`	`block.setAttribute("data-key", mapKey);`
`30`	`30`	`this.blockMap.get(mapKey).push(block);`
`@@ -57,7 +57,7 @@ class SegmentsViewer {`
`57`	`57`	`if (encodedChar.codeUnits) {`
`58`	`58`	`for (const codeUnit of encodedChar.codeUnits) {`
`59`	`59`	`newSegments.appendChild(`
`60`		`- this.createCodeUnitBlock(codeUnit, segmentType, mapKey)`
	`60`	`+ this.createCodeUnitBlock(codeUnit, segmentType, mapKey, encodedChar.isGSM7)`
`61`	`61`	`);`
`62`	`62`	`}`
`63`	`63`	`}`