coolstrap-generator 0.1.0

data/lib/coolstrap-generator/templates/app/assets/javascripts/coolstrap/view/_Coolstrap.View.Scroll.coffee

@@ -0,0 +1,191 @@
+###
+ * Wrapper of the third library iScroll
+ * Inspired by LungoJS
+ *
+ * @namespace COOLSTRAP.View
+ * @class Scroll
+ * @requires iScroll
+ *
+ * @author Abraham Barrera <abarrerac@gmail.com> || @abraham_barrera
+###
+
+COOLSTRAP.View.Scroll = ((cool) ->
+  CLASS = cool.Constants.CLASS
+  ATTRIBUTE = cool.Constants.ATTRIBUTE
+  ERROR = cool.Constants.ERROR
+  EXCLUDE_ELEMENT = "p"
+  DEFAULT_PROPERTIES =
+    hScroll: false
+    vScroll: false
+    useTransition: true
+    momentum: true
+    lockDirection: true
+    fixedScrollbar: true
+    fadeScrollbar: true
+    hideScrollbar: true
+
+  SCROLLS = {}
+  SCROLL_TIMEFRAME = 250
+  NOID_COUNTER = 0
+  _preventEditInputs = (e) ->
+    target = e.target
+    target = target.parentNode  until target.nodeType is 1
+    e.preventDefault()  if target.tagName isnt "SELECT" and target.tagName isnt "INPUT" and target.tagName isnt "TEXTAREA"
+  
+  ###
+       * Creates a new iScroll element.
+       *
+       * @method init
+       *
+       * @param {dom} element of the container scroll.
+       * @param {object} [OPTIONAL] Properties
+  ###
+  init = (element, properties) ->
+    scroll_id = element.attr(ATTRIBUTE.ID)
+    if not scroll_id or scroll_id is ""
+      NOID_COUNTER++
+      scroll_id = CLASS.SCROLLABLE + NOID_COUNTER
+      element.attr ATTRIBUTE.ID, scroll_id
+    if element.children().length > 1 or element.children().length is 0
+      inner_html = element.html()
+      inner_element = cool.dom("<div class=\"scroll_container\"></div>")
+      inner_element.append inner_html
+      element.html inner_element
+    if scroll_id
+      _render scroll_id, properties
+    else
+      cool.Console.log ERROR.CREATE_SCROLL
+
+
+  ###
+     * Update iScroll element with new <markup> content.
+     *
+     * @method html
+     *
+     * @param {string} Id of the container scroll.
+     * @param {string} Markup content
+  ###
+  html = (id, content) ->
+    container = _getContainer(id)
+    container.html content
+    _render id
+
+
+  ###
+     * Add <markup> content to iScroll instance
+     *
+     * @method append
+     *
+     * @param {string} Id of the container scroll.
+     * @param {string} Markup content
+  ###
+  append = (id, content) ->
+    container = _getContainer(id)
+    container.append content
+    _render id
+
+
+
+  ###
+     * Refresh iScroll instance.
+     *
+     * @method refresh
+     *
+     * @param {string} Id of the container scroll.
+     * @param {object} [OPTIONAL] Properties
+  ###
+  refresh = (id, properties) ->
+    _render id, properties
+  
+  ###
+     * Removes iScroll instance.
+     *
+     * @method remove
+     *
+     * @param {string} Id of the container scroll.
+  ###
+  remove = (id) ->
+    delete SCROLLS[id]  if SCROLLS[id]
+
+
+  ###
+     * Scrolls the wrapper contents to the minimum x/y coordinates
+     *
+     * @method first
+     *
+     * @param {string} Id of the <section>
+  ###
+  first = (id) ->
+    SCROLLS[id].scrollTo 0, 0, SCROLL_TIMEFRAME  if SCROLLS[id]
+
+  ###
+     * Scrolls the wrapper contents to the maximum x/y coordinate
+     *
+     * @method down
+     *
+     * @param {string} Id of the <section>
+  ###
+  last = (id) ->
+    scroll = SCROLLS[id]
+    if scroll
+      element = cool.dom("#" + id).first()
+      content_width = 0
+      content_height = 0
+      if _isHorizontal(element)
+        content_width = -(_sizeProperty(element, ATTRIBUTE.WIDTH))
+      else
+        content_height = -(_sizeProperty(element, ATTRIBUTE.HEIGHT))
+      scroll.scrollTo content_width, content_height, SCROLL_TIMEFRAME
+
+  _getContainer = (id) ->
+    scroll = cool.dom("#" + id)
+    container = scroll.children().first()
+    if container.length is 0
+      scroll.html "<div></div>"
+      container = scroll.children().first()
+    container
+
+  _sizeProperty = (element, property) ->
+    element_content = element.children().first()
+    element_content[property]() - element[property]()
+
+  _render = (id, properties) ->
+    scroll = cool.dom("#" + id)
+    properties = _mixProperties(scroll, properties)
+    _saveScrollInCache id, properties
+
+  _needScroll = (scroll, properties) ->
+    element = scroll[0]
+    is_horizontal = _isHorizontal(cool.dom(element))
+    if is_horizontal
+      element.clientWidth < element.scrollWidth
+    else
+      element.clientHeight < element.scrollHeight
+
+  _saveScrollInCache = (id, properties) ->
+    unless SCROLLS[id]
+      SCROLLS[id] = new iScroll(id, properties)
+    else
+      SCROLLS[id].refresh()
+
+  _mixProperties = (scroll, properties) ->
+    scroll_type = (if _isHorizontal(scroll) then "hScroll" else "vScroll")
+    properties or (properties = {})
+    properties[scroll_type] = true
+    properties = cool.Util.Core.extend(DEFAULT_PROPERTIES, properties)
+    properties = cool.Util.Core.extend(properties,
+      onBeforeScrollStart: _preventEditInputs
+    )
+    properties
+
+  _isHorizontal = (scroll) ->
+    (if (scroll.hasClass(CLASS.HORIZONTAL)) then true else false)
+
+  init: init
+  remove: remove
+  refresh: refresh
+  html: html
+  append: append
+  first: first
+  last: last
+)(COOLSTRAP)

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/_structure.scss

@@ -0,0 +1,8 @@
+@import "compass";
+$experimental-support-for-mozilla: false;
+$experimental-support-for-opera: false;
+$experimental-support-for-microsoft: false;
+$experimental-support-for-khtml: false;
+@import "structure/utilities";
+@import "structure/layout";
+@import "structure/components";

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/coolstrap.css.scss

@@ -0,0 +1,2 @@
+@import "structure";
+@import "themes/default";

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/_components.scss

@@ -0,0 +1,5 @@
+@import "components/listview";
+@import "components/navigations";
+@import "components/tools";
+@import "components/dialog";
+@import "components/formelements";

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/_layout.scss

@@ -0,0 +1,4 @@
+@import "layout/transitions";
+@import "layout/layers";
+@import "layout/layout";
+@import "layout/positions";

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/_utilities.scss

@@ -0,0 +1,6 @@
+@import "utilities/reset";
+@import "utilities/variables";
+@import "utilities/mixins";
+@import "utilities/animate";
+//@import "utilities/helpers";
+@import "utilities/icons";

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/components/_dialog.scss

@@ -0,0 +1,122 @@
+div#{$isDialog} {
+	@include setFlexibleBox(vertical,stretch,start);
+	@include box-flex(1);
+	text-align: center;
+
+	> * { margin: 0; }
+
+	> a, div, input	 { @include box-flex(1); }
+
+	> *:not(:first-child) { margin-top: $default-content-spacing; }
+
+	a {
+		@include setFlexibleBox;
+		@include box-flex(1);
+	}
+
+	h1 { font-size: 15px; }
+	input { display: block; }
+
+	.button-group + a,
+	a + .button-group,
+	.button-group + .button-group {
+		margin-top: $default-action-spacing;
+	}
+}
+
+div#{$isAction} {
+	width: 100%;
+	position: absolute;
+	padding: $default-action-spacing;
+	a { height: $default-action-button; }
+	&.onTop    		{ top: 0; }
+	&:not(.onTop) { bottom: 0; }
+}
+
+div#{$isAlert} {
+	width: $default-alert-size;
+	max-width: 90%;
+	padding: $default-alert-spacing;
+	position: absolute;
+	a { height: $default-alert-button; }
+}
+
+div#{$isModal} {
+	position: absolute;
+	top: 		$default-modal-spacing;
+	bottom: $default-modal-spacing;
+	left: 	$default-modal-spacing;
+	right: 	$default-modal-spacing;
+	.close {
+		position: absolute;
+		top: -10px;
+		right: -10px;
+		display: inline-block;
+		padding: 5px 10px;
+	}
+}
+
+div#{$isPopover} {
+	//TODO Pasar calculos de la posicion de la flecha al JS
+	position: absolute;
+	max-height: $default-dialog-maxheight;
+	max-width: 	$default-dialog-maxwidth;
+
+	$carret-front-size:     $default-popover-arrow;
+	$carret-back-size:      $default-popover-arrow + $default-popover-border;
+
+	$carret-front-position: -($carret-front-size * 2 - $default-popover-border);
+	$carret-back-position:  -($carret-back-size * 2 - $default-popover-border);
+
+	&:after,
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+		border-style: solid;
+		border-color: transparent;
+		width: 0;
+		height: 0;
+	}
+	&:after {
+		border-width:   $carret-front-size;
+	}
+	&:before {
+		border-width:   $carret-back-size;
+	}
+
+	&.onbottom,
+	&.ontop {
+		&:after  { left: 50%; margin-left: -($carret-front-size); }
+		&:before { left: 50%; margin-left: -($carret-back-size);  }
+	}
+	&.onleft,
+	&.onright {
+		&:after  { top: 50%; margin-top:   -($carret-front-size); }
+
+		&:before { top: 50%; margin-top:   -($carret-back-size);  }
+	}
+
+	&.onbottom {
+		&:after  { top:    $carret-front-position; border-bottom-color:  red;   }
+		&:before { top:    $carret-back-position;  border-bottom-color:  green; }
+	}
+	&.onleft {
+		&:after  { right:  $carret-front-position; border-left-color:    red;   }
+		&:before { right:  $carret-back-position;  border-left-color:    green; }
+	}
+	&.ontop {
+		&:after  { bottom: $carret-front-position; border-top-color:     red;   }
+		&:before { bottom: $carret-back-position;  border-top-color:     green; }
+	}
+	&.onright {
+		&:after  { left:   $carret-front-position; border-right-color:   red;   }
+		&:before { left:   $carret-back-position;  border-right-color:   green; }
+	}
+}
+
+
+
+
+
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/components/_formelements.scss

@@ -0,0 +1,89 @@
+
+form {
+  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
+    -webkit-appearance: none;
+  }
+  input:not([type="checkbox"]):not([type="radio"]),
+  select {
+    height:  $default-header-button;
+    padding: 0  $default-interface-spacing;
+  }
+  label {
+    display:      block;
+    line-height:  $default-header-button;
+  }
+  .content {
+    @include setFlexibleBox(vertical,stretch, center);
+    min-height: 44px;
+    padding: $default-interface-spacing;
+    i {
+      @include square($default-tabbar-icon);
+      line-height:  $default-tabbar-icon;
+      font-size:    $default-tabbar-icon;
+    }
+    .aside {
+      width: 30%;
+      text-align: right;
+      padding-right: $default-interface-spacing * 2;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+    textarea,
+    select, {
+      @include box-flex(1);
+      display: block;
+    }
+    label, .slider { @include box-flex(1); }
+    textarea {
+      padding: $default-interface-spacing;
+    }
+  }
+
+  .stack {
+    label {
+      line-height: normal;
+      input, textarea, select { width: 100%; }
+    }
+  }
+  .horizontal {
+    @include setFlexibleBox(horizontal,center, stretch);
+    @include clearfix;
+    label {
+      @include box-flex();
+      @include clearfix;
+      height:       $default-header-button;
+      line-height:  $default-header-button;
+        input {
+          height:   $default-header-button;
+          float:    right;
+        }
+        input[type="radio"], input[type="checkbox"] { margin-right: 1px; }
+    }
+    .slider { @include box-flex(1) }
+    i {
+      display:  block;
+      float:    right;
+    }
+  }
+  li .content.horizontal {
+    padding: 0 !important;
+  }
+  .start { @include setFlexibleBox(horizontal,start, stretch); }
+}
+.horizontal {
+  @include setFlexibleBox(horizontal,center, stretch);
+  @include clearfix;
+  label {
+    @include box-flex();
+    @include clearfix;
+    input {
+      float:  right;
+      height: 20px;
+    }
+    input[type="radio"], input[type="checkbox"] {
+      @include box-flex();
+      margin-right: 1px;
+    }
+  }
+}
+
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/components/_listview.scss

@@ -0,0 +1,76 @@
+@import "../utilities";
+
+ul[data-type="listview"] {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  li,
+  li > a {
+    @include setFlexibleBox(horizontal,stretch, stretch);
+    padding: $default-listview-spacing;
+  }
+  li > a, {
+    margin: -($default-listview-spacing);
+  }
+
+  li {
+    > div,
+    a > div,
+    .nested > div {
+      margin-left: $default-listview-spacing;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  div {
+    @include setFlexibleBox(vertical,stretch,center);
+  }
+  .nested {
+    @include setFlexibleBox;
+  }
+  .content {
+    * {
+      margin:   0;
+      padding:  0;
+    }
+    > * + * {
+      margin-top: 7px;
+    }
+  }
+  .content,
+  .nested > *:first-child,
+  li > a {
+    @include box-flex(1);
+  }
+  i { @include inline-block; }
+  input {
+    @include box-flex(1);
+    display: block;
+  }
+  .aside {
+    * + i { margin-left: $default-interface-spacing; }
+  }
+
+  &.inset {
+    margin: 10px;
+  }
+  .up { @include box-pack(start); }
+  .stretch {
+    margin-top:     -($default-listview-spacing);
+    margin-bottom:  -($default-listview-spacing);
+    &:first-child { margin-left: -($default-listview-spacing) !important; }
+  }
+  .vertical {
+    @include setFlexibleBox(vertical,center,center);
+    i, span {
+      display: block;
+    }
+    * + * {
+      margin-top: 7px;
+    }
+  }
+}
+
+