TwilioDevEd · vernig · Feb 10, 2021 · Jan 25, 2021 · Jan 25, 2021 · Jan 25, 2021
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 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/)