Lungo.Attributes.coffee 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. ###
  2. Object with data-attributes (HTML5) with a special <markup>
  3. @namespace Lungo
  4. @class Attributes
  5. @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  6. @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
  7. ###
  8. Lungo.Attributes =
  9. count:
  10. selector: "*"
  11. html: "<span class=\"tag count\">{{value}}</span>"
  12. pull:
  13. selector: "*"
  14. html: """
  15. <div data-control=\"pull\" data-icon=\"{{value}}\" data-loading>
  16. <strong></strong>
  17. </div>"""
  18. progress:
  19. selector: "*"
  20. html: """
  21. <div class=\"progress\">
  22. <span class=\"bar\"><span class=\"value\" style=\"width:{{value}};\"></span></span>
  23. </div>"""
  24. label:
  25. selector: "*"
  26. html: "<abbr>{{value}}</abbr>"
  27. icon:
  28. selector: "*"
  29. html: "<span class=\"icon {{value}}\"></span>"
  30. image:
  31. selector: "*"
  32. html: "<img src=\"{{value}}\" class=\"icon\" />"
  33. title:
  34. selector: "header"
  35. html: "<h1 class=\"title centered\">{{value}}</h1>"
  36. "control-checkbox":
  37. selector: "*"
  38. html: """
  39. <input type="checkbox" value="None" id="{{value}}" />
  40. <label for="{{value}}"></label>
  41. """
  42. loading:
  43. selector: "*"
  44. html: """
  45. <div class=\"loading {{value}}\">
  46. <span class=\"top\"></span>
  47. <span class=\"right\"></span>
  48. <span class=\"bottom\"></span>
  49. <span class=\"left\"></span>
  50. </div>"""
  51. back:
  52. selector: "header"
  53. html: "<nav class=\"left\"><a href=\"#\" data-view-section=\"back\"><span class=\"icon {{value}}\"></span></a></nav>"