Dot Attribute Editor

HTML, jQuery and CSS for Dot Editor.

by Troy Alford

HTML

<div class="stat" text="Strength" dots="3/5"></div>
<div class="stat" text="Dexterity" dots="3/5"></div>
<div class="stat" text="Stamina" dots="3/5"></div>
<br />
<div class="stat" text="This is a test for a really long text name..." dots="3/5"></div>

SCSS

* { box-sizing: border-box; }

div.stat {
  box-sizing: border-box;
  padding: 2px;
  width: 250px;

  div.dots {
    float: right;
      
    div.dot {
      border-radius: 4px;
      border: 1px solid #000;
      display: inline-block;
      height: 8px; width: 8px;
      margin: 1px;
    }
    
    &[data-max-dots="0"] + .text { width: 240px; }
    &[data-max-dots="1"] + .text { width: 230px; }
    &[data-max-dots="2"] + .text { width: 220px; }
    &[data-max-dots="3"] + .text { width: 210px; }
    &[data-max-dots="4"] + .text { width: 200px; }
    &[data-max-dots="5"] + .text { width: 190px; }
    &[data-max-dots="6"] + .text { width: 180px; }
    &[data-max-dots="7"] + .text { width: 170px; }
    &[data-max-dots="8"] + .text { width: 160px; }
    &[data-max-dots="9"] + .text { width: 150px; }
  }
  
  div.dots + div.text {
    display: block;
    line-height: 20px;
    width: 140px;
      
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

JavaScript

$('.stat[dots]').each(function (ix, el) {
  var $stat = $(el);
  
  var dots = ($stat.attr('dots') || '0/5').split('/');
  var dotCur = parseInt(dots[0] || '0', 10);
  var dotMax = parseInt(dots[1] || '5', 10);

  var $dots = $('<div>').addClass('dots').attr('data-max-dots', dotMax);

  for (var i = 1; i <= dotMax; i++) {
    var $dot = $('<div>').addClass('dot');
    if (i <= dotCur) $dot.addClass('filled');
    
    $dots.append($dot);
  }
  
  var text = $stat.attr('text') || '';
  var $text = $('<div>').addClass('text editable').text(text);
  
  $stat.append($dots).append($text);
});