Info¶

There are cases when local variables require a little extra oomph, such as maths calculations or calc transformations. This is where the eval Object plugin comes into play. In a future rendition of ctr, once I make a decision about how I would like to handle various external plugins, you will be able to create, use, and mix and match an assortment of plugins like the eval Object. Nevertheless, as it stands, this is still an early thought and I have not spent the time to fine tune things yet. But, I figured this little taste would wet your whistle.

Syntax¶

Description: The eval plugin is defined as a special Object in the local ctr variable Object.

ctr('<#selector>', {
  // private variables
  $$: {
    one: <value:one>
    // eval plugin Object
    eval: {
      two: <value:two>
    }
  }
  <property:one>: '$one$'
  <property:two>: '$[eval.two]$'
})

<#selector>:
  # private variables
  $$:
    one: <value:one>
    # eval plugin Object
    eval:
      two: <value:eval>
  <property:one>: $one$
  <property:two>: $[eval.two]$

<#selector> {
  <property:one>: <value:one>;
  <property:two>: <value:eval>;
}

Calc¶

Description: Inside the eval Object, all inner calc references will be removed.

ctr('.test', {
  $$: {
    baseHeight: calc(100vh - 100px)
    eval: {
      halfHeight: 'calc($baseHeight$ / 2)'
    }
  }
  width: 200px
  height: '$baseHeight$'
  media-sm: {
    height: '$[eval.halfHeight]$'
  }
})

.test:
  $$:
    baseHeight: calc(100vh - 100px)
    eval:
      halfHeight: calc($baseHeight$ / 2)
  width: 200px
  height: $baseHeight$
  media-sm:
    height: $[eval.halfHeight]$

.test {
  width: 200px;
  height: calc(100vh - 100px);
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    height: calc((100vh - 100px) / 2);
  }
}

ctr('.test', {
  $$: {
    baseHeight: calc(100vh - 100px)
    eval: {
      halfHeight: 'calc($baseHeight$ / 2)'
    }
  }
  width: 200px
  height: '$baseHeight$'
  media-sm: {
    height: '$[eval.halfHeight]$'
  }
})

.test {
  width: 200px;
  height: calc(100vh - 100px);
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    height: calc((100vh - 100px) / 2);
  }
}

.test:
  $$:
    baseHeight: calc(100vh - 100px)
    eval:
      halfHeight: calc($baseHeight$ / 2)
  width: 200px
  height: $baseHeight$
  media-sm:
    height: $[eval.halfHeight]$

Notes

• The reason this is done is because you cannot nest calc
• MDN calc()

Arith¶

Description: Inside the eval Object, basic arithmetic can be performed through an arith invocation.

ctr('.test', {
  $$: {
    base: 10
    multiplier: 2
    type: 'px'
    eval: {
      // 10 * 2 = 20
      font-size: 'arith($base$ * $multiplier$)$type$'
    }
  }
  width: 200px
  font-size: '$[eval.font-size]$'
})

.test:
  $$:
    base: 10
    multiplier: 2
    type: px
    eval:
      # 10 * 2 = 20
      font-size: arith($base$ * $multiplier$)$type$
  width: 200px
  font-size: $[eval.font-size]$

.test {
  width: 200px;
  font-size: 20px;
}

ctr('.test', {
  $$: {
    base: 10
    multiplier: 2
    type: 'px'
    eval: {
      // 10 * 2 = 20
      font-size: 'arith($base$ * $multiplier$)$type$'
    }
  }
  width: 200px
  font-size: '$[eval.font-size]$'
})

.test {
  width: 200px;
  font-size: 20px;
}

.test:
  $$:
    base: 10
    multiplier: 2
    type: px
    eval:
      # 10 * 2 = 20
      font-size: arith($base$ * $multiplier$)$type$
  width: 200px
  font-size: $[eval.font-size]$

Notes

• Essentially, anything inside of arith will be calculated via the eval() Javascript Function
• Any value inside of arith will be removed of any word character (regex removal: \w+)
• Either you will see the immediate purpose of this feature or you won’t, but do not worry, it will click in due time

Arith Math¶

Description: Inside the eval Object, in an arith invocation, the Javascript Math Object can be used.

ctr('.test', {
  $$: {
    base: 10
    eval: {
      // 10 * 3.14
      top: 'arith( $base$ * Math.PI )'
      // 10 * 0.9
      left: 'arith( $base$ * Math.sin(3) )'
    }
  }
  top: '$[eval.top]$'
  left: '$[eval.left]$'
})

.test:
  $$:
    base: 10
    eval:
      # 10 * 3.14
      top: arith( $base$ * Math.PI )
      # 10 * 0.9
      left: arith( $base$ * Math.sin(3) )
  top: $[eval.top]$
  left: $[eval.left]$

.test {
  left: 1.4112;
  top: 31.4159;
}

ctr('.test', {
  $$: {
    base: 10
    eval: {
      // 10 * 3.14
      top: 'arith( $base$ * Math.PI )'
      // 10 * 0.9
      left: 'arith( $base$ * Math.sin(3) )'
    }
  }
  top: '$[eval.top]$'
  left: '$[eval.left]$'
})

.test {
  left: 1.4112;
  top: 31.4159;
}

.test:
  $$:
    base: 10
    eval:
      # 10 * 3.14
      top: arith( $base$ * Math.PI )
      # 10 * 0.9
      left: arith( $base$ * Math.sin(3) )
  top: $[eval.top]$
  left: $[eval.left]$

Notes

• I am a little shaky on this one — most Math Constants and Functions should work, but I have not put this idea through proper testing yet
• Spacing is of critical importance: arith( Math.PI ) not arith(Math.PI)
• MDN Math