Intiial commit
This commit is contained in:
		
						commit
						d79432f848
					
				
							
								
								
									
										38
									
								
								README.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										38
									
								
								README.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,38 @@
 | 
			
		||||
Headline Count
 | 
			
		||||
==============
 | 
			
		||||
 | 
			
		||||
http://zyphlar.github.io/headline-count
 | 
			
		||||
 | 
			
		||||
Counts headline characters using the FLITJ method, and allows you to customize the counts of each letter to satisfy different editors' rules.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
Copyright Will Bradley, 2015
 | 
			
		||||
 | 
			
		||||
License
 | 
			
		||||
-------
 | 
			
		||||
 | 
			
		||||
This is free and unencumbered software released into the public domain.
 | 
			
		||||
 | 
			
		||||
Anyone is free to copy, modify, publish, use, compile, sell, or
 | 
			
		||||
distribute this software, either in source code form or as a compiled
 | 
			
		||||
binary, for any purpose, commercial or non-commercial, and by any
 | 
			
		||||
means.
 | 
			
		||||
 | 
			
		||||
In jurisdictions that recognize copyright laws, the author or authors
 | 
			
		||||
of this software dedicate any and all copyright interest in the
 | 
			
		||||
software to the public domain. We make this dedication for the benefit
 | 
			
		||||
of the public at large and to the detriment of our heirs and
 | 
			
		||||
successors. We intend this dedication to be an overt act of
 | 
			
		||||
relinquishment in perpetuity of all present and future rights to this
 | 
			
		||||
software under copyright law.
 | 
			
		||||
 | 
			
		||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 | 
			
		||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 | 
			
		||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 | 
			
		||||
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 | 
			
		||||
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 | 
			
		||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 | 
			
		||||
OTHER DEALINGS IN THE SOFTWARE.
 | 
			
		||||
 | 
			
		||||
For more information, please refer to <http://unlicense.org/>
 | 
			
		||||
							
								
								
									
										304
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										304
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,304 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
<head>
 | 
			
		||||
<meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
 | 
			
		||||
<!-- Jquery -->
 | 
			
		||||
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
 | 
			
		||||
 | 
			
		||||
<!-- Bootstrap -->
 | 
			
		||||
<!-- Latest compiled and minified CSS -->
 | 
			
		||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 | 
			
		||||
<!-- Optional theme -->
 | 
			
		||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 | 
			
		||||
<!-- Latest compiled and minified JavaScript -->
 | 
			
		||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 | 
			
		||||
 | 
			
		||||
<!-- Webfont -->
 | 
			
		||||
<link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
 | 
			
		||||
 | 
			
		||||
<style type="text/css">
 | 
			
		||||
  body {
 | 
			
		||||
    font-family: 'PT Serif', 'Georgia', serif;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
 | 
			
		||||
    font-weight: 700;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .highlight {
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 1em;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    font-size: 3em;
 | 
			
		||||
  }
 | 
			
		||||
  .highlight small {
 | 
			
		||||
    display: block;
 | 
			
		||||
    color: #666;
 | 
			
		||||
    font-size: 0.33em;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .highlight.u5, .color-u5 {
 | 
			
		||||
    background-color: #BDE5F8;
 | 
			
		||||
  }
 | 
			
		||||
  .highlight.u10, .color-u10 {
 | 
			
		||||
    background-color: #DFF2BF;
 | 
			
		||||
  }
 | 
			
		||||
  .highlight.u15, .color-u15 {
 | 
			
		||||
    background-color: #FEEFB3;
 | 
			
		||||
  }
 | 
			
		||||
  .highlight.u20, .color-u20 {
 | 
			
		||||
    background-color: #FFBABA;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .label-dark {
 | 
			
		||||
    color: #000;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<script type="text/javascript">
 | 
			
		||||
  // function for outputting a range of characters
 | 
			
		||||
  function range(first, last) {
 | 
			
		||||
      var a = first.charCodeAt(0)
 | 
			
		||||
      var b = last.charCodeAt(0) + 1
 | 
			
		||||
      return Array.apply(null, {length: Math.abs(b - a)})
 | 
			
		||||
        .map(function (x,i) { return String.fromCharCode(Math.min(a, b) + i) });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // store all ascii chars for comparison
 | 
			
		||||
  var allPossibleChars = range(' ','~');
 | 
			
		||||
 | 
			
		||||
  // rules defaults
 | 
			
		||||
  var halfUnit = "";
 | 
			
		||||
  var oneUnit = "";
 | 
			
		||||
  var oneAndHalfUnit = "";
 | 
			
		||||
  var twoUnit = "";
 | 
			
		||||
 | 
			
		||||
  // onload
 | 
			
		||||
  $(function(){
 | 
			
		||||
 | 
			
		||||
    // load rules from localstorage if available
 | 
			
		||||
    if (localStorage["halfUnit"]) {
 | 
			
		||||
      halfUnit = localStorage["halfUnit"];
 | 
			
		||||
      oneUnit = localStorage["oneUnit"];
 | 
			
		||||
      oneAndHalfUnit = localStorage["oneAndHalfUnit"];
 | 
			
		||||
      twoUnit = localStorage["twoUnit"];
 | 
			
		||||
      checkRules();
 | 
			
		||||
      displayRules();
 | 
			
		||||
      $("#rulesHeader").html("Rules <small><button onClick='clearLocalStorage()'>Reset Changes</button></small>");
 | 
			
		||||
    } else {
 | 
			
		||||
      setRuleDefaults();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // handle keyup
 | 
			
		||||
    $('#headline').keyup(function(){
 | 
			
		||||
      countHeadline($(this));
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // count just in case
 | 
			
		||||
    countHeadline($('#headline'));
 | 
			
		||||
 | 
			
		||||
    // handle rule change
 | 
			
		||||
    $('#halfUnit').keyup(function(){
 | 
			
		||||
      if (halfUnit != $(this).val()) {
 | 
			
		||||
        halfUnit = $(this).val();
 | 
			
		||||
        checkRules();
 | 
			
		||||
        countHeadline($('#headline'));
 | 
			
		||||
        setLocalStorage();
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
    $('#oneUnit').keyup(function(){
 | 
			
		||||
      if (oneUnit != $(this).val()) {
 | 
			
		||||
        oneUnit = $(this).val();
 | 
			
		||||
        checkRules();
 | 
			
		||||
        countHeadline($('#headline'));
 | 
			
		||||
        setLocalStorage();
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
    $('#oneAndHalfUnit').keyup(function(){
 | 
			
		||||
      if (oneAndHalfUnit != $(this).val()) {
 | 
			
		||||
        oneAndHalfUnit = $(this).val()
 | 
			
		||||
        checkRules();;
 | 
			
		||||
        countHeadline($('#headline'));
 | 
			
		||||
        setLocalStorage();
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
    $('#twoUnit').keyup(function(){
 | 
			
		||||
      if (twoUnit != $(this).val()) {
 | 
			
		||||
        twoUnit = $(this).val();
 | 
			
		||||
        checkRules();
 | 
			
		||||
        countHeadline($('#headline'));
 | 
			
		||||
        setLocalStorage();
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  function setLocalStorage(){
 | 
			
		||||
    localStorage["halfUnit"] = halfUnit;
 | 
			
		||||
    localStorage["oneUnit"] = oneUnit;
 | 
			
		||||
    localStorage["oneAndHalfUnit"] = oneAndHalfUnit;
 | 
			
		||||
    localStorage["twoUnit"] = twoUnit;
 | 
			
		||||
    $("#rulesHeader").html("Rules <small><button onClick='clearLocalStorage()'>Reset Changes</button></small>");
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function clearLocalStorage(){
 | 
			
		||||
    localStorage.clear();
 | 
			
		||||
    setRuleDefaults();
 | 
			
		||||
    $("#rulesHeader").html("Rules <small>(any changes will be saved)</small>");
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function setRuleDefaults(){
 | 
			
		||||
    halfUnit = " flitjIL1,./<>?;:'\"[]{}\\|`~!@#$%^&*()-_=+";
 | 
			
		||||
    oneUnit = "abcdeghkmnopqrsuvwxyz023456789";
 | 
			
		||||
    oneAndHalfUnit = "ABCDEFGHJKNOPQRSTUVXYZ";
 | 
			
		||||
    twoUnit = "MW";
 | 
			
		||||
    checkRules();
 | 
			
		||||
    displayRules();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function displayRules(){
 | 
			
		||||
    // display rules
 | 
			
		||||
    $('#halfUnit').val(halfUnit);
 | 
			
		||||
    $('#oneUnit').val(oneUnit);
 | 
			
		||||
    $('#oneAndHalfUnit').val(oneAndHalfUnit);
 | 
			
		||||
    $('#twoUnit').val(twoUnit);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // check to see if there is any overlap (or missing chars) in rules
 | 
			
		||||
  function checkRules(){
 | 
			
		||||
    var allCharsArray = (halfUnit+oneUnit+oneAndHalfUnit+twoUnit).split('');
 | 
			
		||||
 | 
			
		||||
    var sorted_arr = allCharsArray.sort();
 | 
			
		||||
 | 
			
		||||
    var alerts = [];
 | 
			
		||||
    for (var i = 0; i < sorted_arr.length - 1; i++) {
 | 
			
		||||
        if (sorted_arr[i + 1] == sorted_arr[i]) {
 | 
			
		||||
            alerts.push(sorted_arr[i]);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // display duplicated letters
 | 
			
		||||
    alertOutput = "";
 | 
			
		||||
    if (alerts.length > 0){
 | 
			
		||||
      alertsText = "";
 | 
			
		||||
      $.each(alerts, function(i, c){
 | 
			
		||||
        alertsText += "<span class='label label-danger'>"+c+"</span> ";
 | 
			
		||||
      });
 | 
			
		||||
      alertOutput += "<div><b>Warning, duplicated letters:</b> "+alertsText+"</div>";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // check for missing chars
 | 
			
		||||
    var missing = [];
 | 
			
		||||
    $.each(allPossibleChars, function (i, c) {
 | 
			
		||||
      if (allCharsArray.indexOf(c) == -1) {
 | 
			
		||||
        missing.push(c)
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // display missing letters
 | 
			
		||||
    if (missing.length > 0){
 | 
			
		||||
      missingText = "";
 | 
			
		||||
      $.each(missing, function(i, c){
 | 
			
		||||
        missingText += "<span class='label label-warning'>"+c+"</span> ";
 | 
			
		||||
      });
 | 
			
		||||
      alertOutput += "<div><b>Warning, missing letters:</b> "+missingText+"</div>";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    $('#formErrors').html(alertOutput);
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // do the count
 | 
			
		||||
  function countHeadline(element){
 | 
			
		||||
    value = element.val();
 | 
			
		||||
 | 
			
		||||
    // calculate
 | 
			
		||||
    var valueArray = value.split('');
 | 
			
		||||
    var outputArray = [];
 | 
			
		||||
    $.each(valueArray, function (i, c) {
 | 
			
		||||
        if (halfUnit.indexOf(c) != -1) {
 | 
			
		||||
          outputArray.push({cha: c, val: 0.5});
 | 
			
		||||
        }
 | 
			
		||||
        else if (oneUnit.indexOf(c) != -1) {
 | 
			
		||||
          outputArray.push({cha: c, val: 1});
 | 
			
		||||
        }
 | 
			
		||||
        else if (oneAndHalfUnit.indexOf(c) != -1) {
 | 
			
		||||
          outputArray.push({cha: c, val: 1.5});
 | 
			
		||||
        }
 | 
			
		||||
        else if (twoUnit.indexOf(c) != -1) {
 | 
			
		||||
          outputArray.push({cha: c, val: 2});
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // display
 | 
			
		||||
    var output = "";
 | 
			
		||||
    var count = 0;
 | 
			
		||||
    $.each(outputArray, function(i, o){
 | 
			
		||||
      // replace spaces with nbsp
 | 
			
		||||
      if (o['cha'] == ' ') {
 | 
			
		||||
        cha = " ";
 | 
			
		||||
      } else {
 | 
			
		||||
        cha = o['cha'];
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      output += "<span class='highlight u"+o['val']*10+"'>"+cha+"<small>"+o['val']+"</small></span>";
 | 
			
		||||
      count += o['val'];
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    $('#output').html(output);
 | 
			
		||||
    $('#count').html("Count: "+count);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<div class="container-fluid">
 | 
			
		||||
  <div class="col-sm-9">
 | 
			
		||||
    <h1>FLITJ Headline Count Tool</h1>
 | 
			
		||||
 | 
			
		||||
    <p>
 | 
			
		||||
      <input type="text" placeholder="Type your headline here." id="headline" class="form-control" />
 | 
			
		||||
    </p>
 | 
			
		||||
 | 
			
		||||
    <p id="output"></p>
 | 
			
		||||
 | 
			
		||||
    <h2><span class="label label-default" id="count"></span></h2>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="col-sm-3">
 | 
			
		||||
    <h3>Key</h3>
 | 
			
		||||
    <p>
 | 
			
		||||
      <span class="label label-dark color-u5">0.5 units</span>
 | 
			
		||||
      <span class="label label-dark color-u10">1 unit</span>
 | 
			
		||||
      <span class="label label-dark color-u15">1.5 units</span>
 | 
			
		||||
      <span class="label label-dark color-u20">2 units</span>
 | 
			
		||||
    </p>
 | 
			
		||||
 | 
			
		||||
    <h3 id="rulesHeader">Rules <small>(any changes will be saved)</small></h3>
 | 
			
		||||
    <form role="form">
 | 
			
		||||
      <div class="form-group">
 | 
			
		||||
        <label>0.5 units <small>(note space at beginning)</small></label><br/>
 | 
			
		||||
        <input class="form-control" type="text" id="halfUnit" />
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="form-group">
 | 
			
		||||
        <label>1 unit</label><br/>
 | 
			
		||||
        <input class="form-control" type="text" id="oneUnit" />
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="form-group">
 | 
			
		||||
        <label>1.5 units</label><br/>
 | 
			
		||||
        <input class="form-control" type="text" id="oneAndHalfUnit" />
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="form-group">
 | 
			
		||||
        <label>2 units</label><br/>
 | 
			
		||||
        <input class="form-control" type="text" id="twoUnit" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </form>
 | 
			
		||||
 | 
			
		||||
    <p id="formErrors"></p>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user