websitesfortrello.com utils

README.md

Utils for embedding at http://websitesfortrello.com/ sites -- as templates to be filled by http://temperos.alhur.es/.

add-carnival-comments.js

window.Carnival = {
  init: function(options) {
    var xmlhttp,
      _this = this;
    Carnival.setOptions(options);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      var n;
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        n = document.createElement('div');
        n.innerHTML = xmlhttp.responseText;
        document.body.appendChild(n);
        return Carnival.replaceScriptsRecurse(n);
      }
    };
    xmlhttp.open('GET', 'https://carnivalapp.io/sites/{{ YOUR-SITE-ID }}/embed?t=' + Math.random(), true);
    return xmlhttp.send();
  },
  setOptions: function(options) {
    var defaults, property, _results;
    window.CarnivalOptions = options || {};
    defaults = {
      enabled: true,
      article_author: '',
      article_selector: 'article',
      block_selector: ':scope > p, :scope > pre',
      onNewComment: function(comment) {}
    };
    _results = [];
    for (property in defaults) {
      if (!(property in CarnivalOptions)) {
        _results.push(CarnivalOptions[property] = defaults[property]);
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  },
  replaceScriptsRecurse: function(node) {
    var child, script, _i, _len, _ref;
    if (Carnival.isScriptNode(node)) {
      script = document.createElement('script');
      script.src = node.src;
      node.parentNode.replaceChild(script, node);
    } else {
      _ref = node.childNodes;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        child = _ref[_i];
        Carnival.replaceScriptsRecurse(child);
      }
    }
    return node;
  },
  isScriptNode: function(node) {
    return node.getAttribute && node.tagName === 'SCRIPT';
  }
};

document.addEventListener("DOMContentLoaded", function() {
  Carnival.init({
    enabled: true,
    article_author: document.querySelector('body > aside h1').innerHTML,
    article_selector: "main > article",
    block_selector: ":scope p, :scope pre",
  });
});

add-disqus.js

var disqus_shortname = '{{ shortname }}';

(function() {
  var articles = document.querySelectorAll('main > article')
  if (articles.length != 1) {
    // only works in pages with one article -- the post itself.
    return
  }
  // insert section.disqus_thread
  var section = document.createElement('section')
  section.id = 'disqus_thread'
  section.style.marginTop = '30px'
  articles[0].parentNode.appendChild(section)

  // insert the disqus things
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

add-google-analytics.js

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '{{ code }}', 'auto');
ga('send', 'pageview');

forms.css

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="url"],
form input[type="date"],
form input[type="month"],
form input[type="time"],
form input[type="datetime"],
form input[type="datetime-local"],
form input[type="week"],
form input[type="number"],
form input[type="search"],
form input[type="tel"],
form input[type="color"],
form select,
form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

form input[type="color"] {
    padding: 0.2em 0.5em;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="url"]:focus,
form input[type="date"]:focus,
form input[type="month"]:focus,
form input[type="time"]:focus,
form input[type="datetime"]:focus,
form input[type="datetime-local"]:focus,
form input[type="week"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="tel"]:focus,
form input[type="color"]:focus,
form select:focus,
form textarea:focus {
    outline: 0;
    border-color: #129FEA;
}

form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}

form input[type="file"]:focus,
form input[type="radio"]:focus,
form input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}
form input[type="checkbox"],
form input[type="radio"] {
    margin: 0.5em 0;
    display: block;
}

form input[type="text"][disabled],
form input[type="password"][disabled],
form input[type="email"][disabled],
form input[type="url"][disabled],
form input[type="date"][disabled],
form input[type="month"][disabled],
form input[type="time"][disabled],
form input[type="datetime"][disabled],
form input[type="datetime-local"][disabled],
form input[type="week"][disabled],
form input[type="number"][disabled],
form input[type="search"][disabled],
form input[type="tel"][disabled],
form input[type="color"][disabled],
form select[disabled],
form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
form input[readonly],
form select[readonly],
form textarea[readonly] {
    background-color: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

form input:focus:invalid,
form textarea:focus:invalid,
form select:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}
form input[type="file"]:focus:invalid:focus,
form input[type="radio"]:focus:invalid:focus,
form input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
form select {
    /* Normalizes the height; padding is not sufficient. */
    height: 2.25em;
    border: 1px solid #ccc;
    background-color: white;
}
form select[multiple] {
    height: auto;
}
form label {
    margin: 0.5em 0 0.2em;
}
form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

form input:first-child:last-child {
    width: 100%;
}
form input:first-child:not(:last-child) {
    width: 50%;
}

@media only screen and (max-width : 480px) {
    form button[type="submit"] {
        margin: 0.7em 0 0;
    }

    form input:not([type]),
    form input[type="text"],
    form input[type="password"],
    form input[type="email"],
    form input[type="url"],
    form input[type="date"],
    form input[type="month"],
    form input[type="time"],
    form input[type="datetime"],
    form input[type="datetime-local"],
    form input[type="week"],
    form input[type="number"],
    form input[type="search"],
    form input[type="tel"],
    form input[type="color"],
    form label {
        margin-bottom: 0.3em;
        display: block;
    }
}

button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.3em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

button:hover,
button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
button:focus {
    outline: 0;
}
button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}

button[disabled] {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

button::-moz-focus-inner{
    padding: 0;
    border: 0;
}

hide-author.css

body > aside > * { display: none !important }

hide-category-header-on-article-pages.css

main > header:first-child { display: none !important; }

hide-date.css

time { display: none !important; }

label-colors-trello.css

.green {
  background-color: #61BD4F;
}
.red {
  background-color: #EB5A46;
}
.yellow {
  background-color: #F2D600;
}
.blue {
  background-color: #0079BF;
}
.black {
  background-color: #4D4D4D;
}
.purple {
  background-color: #C377E0;
}
.sky {
  background-color: #00C2E0;
}
.orange {
  background-color: #FFAB4A;
}
.lime {
  background-color: #51E898;
}
.pink {
  background-color: #FF80CE;
}

replace-footer-text.css

body > footer > * { display: none; }
body > footer:after {
  content: '{{ text }}';
  display: block;
}

show-attachments-as-images.js

var attachments = document.querySelectorAll('section ul li > a')
for (var i = 0; i < attachments.length; i++) {
  var attachment = attachments[i]
  var ext = attachment.href.split('.').slice(-1)[0]
  if (ext == 'jpg' || ext == 'jpeg' || ext == 'png' || ext == 'gif') {
    var img = document.createElement('img')
    img.src = attachment.href
    img.alt = attachment.innerHTML
    attachment.innerHTML = ''
    attachment.appendChild(img)
  }
}

show-excerpts.coffee

limit = '{{ limit }}'
if isNaN parseInt(limit)
  limit = 200

for elem in document.querySelectorAll 'main > section > ul li article'
  (->
    a = elem.querySelector 'header a'
    article = elem
      
    xhr = new XMLHttpRequest()
    xhr.open('GET', a.href + 'desc?limit=', true)
    xhr.onreadystatechange = ->
      if xhr.readyState == 4
        textElement = document.createElement 'div'
        textElement.innerHTML = xhr.responseText
        article.appendChild textElement
        
        # read more
        if xhr.responseText.length == limit
          readMore = document.createElement 'a'
          readMore.href = a.href
          readMore.innerHTML = '{{ read_more_text }}' or '(read more...)'
          article.appendChild readMore
        
        # hack to work with Aluod
        if window.M and window.M.layout
          M.layout()
    xhr.send()
  )()

show-excerpts.js

var elem, fn, i, len, limit, ref;

limit = '{{ limit }}';

if (isNaN(parseInt(limit))) {
  limit = 200;
}

ref = document.querySelectorAll('main > section > ul li article');
fn = function() {
  var a, article, xhr;
  a = elem.querySelector('header a');
  article = elem;
  xhr = new XMLHttpRequest();
  xhr.open('GET', a.href + 'desc?limit=', true);
  xhr.onreadystatechange = function() {
    var readMore, textElement;
    if (xhr.readyState === 4) {
      textElement = document.createElement('div');
      textElement.innerHTML = xhr.responseText;
      article.appendChild(textElement);
      if (xhr.responseText.length === limit) {
        readMore = document.createElement('a');
        readMore.href = a.href;
        readMore.innerHTML = '{{ read_more_text }}' || '(read more...)';
        article.appendChild(readMore);
      }
      if (window.M && window.M.layout) {
        return M.layout();
      }
    }
  };
  return xhr.send();
};
for (i = 0, len = ref.length; i < len; i++) {
  elem = ref[i];
  fn();
}

youtube-embed.coffee

makeEmbed = (node, videoId) ->
  embed = document.createElement 'iframe'
  embed.src = 'https://youtube.com/embed/' + videoId
  embed.allowfullscreen = true
  embed.width = 420
  embed.height = 315
  embed.frameborder = 0
  node.parentNode.insertBefore embed, node
  node.parentNode.removeChild node

for node in document.querySelectorAll('main > article a[href*="youtube.com/watch?"]')
  params = node.href.split('?')[1].split('&')
  for p in params
    kv = p.split('=')
    if kv[0] == 'v'
      videoId = kv[1]
      makeEmbed node, videoId

for node in document.querySelectorAll('main > article a[href*="youtu.be/"]')
  path = node.href.split('youtu.be/')[1]
  videoId = path.split('/')[0]
  makeEmbed node, videoId

youtube-embed.js

var i, j, k, kv, len, len1, len2, makeEmbed, node, p, params, path, ref, ref1, videoId;

makeEmbed = function(node, videoId) {
  var embed;
  embed = document.createElement('iframe');
  embed.src = 'https://youtube.com/embed/' + videoId;
  embed.allowfullscreen = true;
  embed.width = 420;
  embed.height = 315;
  embed.frameborder = 0;
  node.parentNode.insertBefore(embed, node);
  return node.parentNode.removeChild(node);
};

ref = document.querySelectorAll('main > article a[href*="youtube.com/watch?"]');
for (i = 0, len = ref.length; i < len; i++) {
  node = ref[i];
  params = node.href.split('?')[1].split('&');
  for (j = 0, len1 = params.length; j < len1; j++) {
    p = params[j];
    kv = p.split('=');
    if (kv[0] === 'v') {
      videoId = kv[1];
      makeEmbed(node, videoId);
    }
  }
}

ref1 = document.querySelectorAll('main > article a[href*="youtu.be/"]');
for (k = 0, len2 = ref1.length; k < len2; k++) {
  node = ref1[k];
  path = node.href.split('youtu.be/')[1];
  videoId = path.split('/')[0];
  makeEmbed(node, videoId);
}