Skip to content

Commit

Permalink
Implement span formats under new format design
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhchen
jhchen committed May 23, 2013
1 parent 9c51040 commit fffa6dd
Show file tree
Hide file tree
Showing 8 changed files with 166 additions and 133 deletions.
59 changes: 25 additions & 34 deletions demo/dual.haml
View file
Expand Up @@ -12,22 +12,18 @@
.editor-wrapper.first
#formatting-container1.formatting-container
%select.family
%option{:value => 'san-serif', :selected => true} San Serif
%option{:value => false, :selected => true} San Serif
%option{:value => 'serif'} Serif
%option{:value => 'monospace'} Monospace
%select.size
%option{:value => 'small'} Small
%option{:value => 'normal', :selected => true} Normal
%option{:value => false, :selected => true} Normal
%option{:value => 'large'} Large
%option{:value => 'huge'} Huge
%button.format-button.bold B
%button.format-button.italic I
%button.format-button.underline U
%button.format-button.link L
%button.format-button.list 1.
%button.format-button.bullet -
%button.format-button.indent <-
%button.format-button.outdent ->
#editor-container1.editor-container
%div
%span Welcome to Stypi
Expand Down Expand Up @@ -65,18 +61,18 @@
%div
%span &#09;I look like an indent but actually I'm not cuz I'm a tab.
%div
%span.size-huge Huge
%span.size-large Large
%span.size-small Small
%span{:style => 'font-size: 32px; line-height: 36px;' } Huge
%span{:style => 'font-size: 18px; line-height: 22px;' } Large
%span{:style => 'font-size: 10px; line-height: 12px;' } Small
%div
%span.size-huge Huge
%span{:style => 'font-size: 32px; line-height: 36px;' } Huge
%div
%span.size-large Large
%span{:style => 'font-size: 18px; line-height: 22px;' } Large
%div
%span.size-small Small
%span{:style => 'font-size: 10px; line-height: 12px;' } Small
%div
%span.family-serif Serif
%span.family-monospace Monospace
%span{:style => 'font-family: "Times New Roman", serif;' } Serif
%span{:style => 'font-family: "Courier New", monospace;' } Monospace
%div
%br
%div
Expand All @@ -88,22 +84,17 @@
.editor-wrapper
#formatting-container2.formatting-container
%select.family
%option San Serif
%option Serif
%option Monospace
%option{:value => false, :selected => true} San Serif
%option{:value => 'serif'} Serif
%option{:value => 'monospace'} Monospace
%select.size
%option Small
%option Normal
%option Large
%option Huge
%option{:value => 'small'} Small
%option{:value => false, :selected => true} Normal
%option{:value => 'large'} Large
%option{:value => 'huge'} Huge
%button.format-button.bold B
%button.format-button.italic I
%button.format-button.underline U
%button.format-button.link L
%button.format-button.list 1.
%button.format-button.bullet -
%button.format-button.outdent <-
%button.format-button.indent ->
#editor-container2.editor-container
%div
%span Welcome to Stypi
Expand Down Expand Up @@ -141,18 +132,18 @@
%div
%span &#09;I look like an indent but actually I'm not cuz I'm a tab.
%div
%span.size-huge Huge
%span.size-large Large
%span.size-small Small
%span{:style => 'font-size: 32px; line-height: 36px;' } Huge
%span{:style => 'font-size: 18px; line-height: 22px;' } Large
%span{:style => 'font-size: 10px; line-height: 12px;' } Small
%div
%span.size-huge Huge
%span{:style => 'font-size: 32px; line-height: 36px;' } Huge
%div
%span.size-large Large
%span{:style => 'font-size: 18px; line-height: 22px;' } Large
%div
%span.size-small Small
%span{:style => 'font-size: 10px; line-height: 12px;' } Small
%div
%span.family-serif Serif
%span.family-monospace Monospace
%span{:style => 'font-family: "Times New Roman", serif;' } Serif
%span{:style => 'font-family: "Courier New", monospace;' } Monospace
%div
%br
%div
Expand Down
78 changes: 38 additions & 40 deletions demo/index.haml
View file
Expand Up @@ -11,34 +11,32 @@
.editor-wrapper
#formatting-container.formatting-container
%select.family
%option{:value => 'san-serif', :selected => true} San Serif
%option{:value => false, :selected => true} San Serif
%option{:value => 'serif'} Serif
%option{:value => 'monospace'} Monospace
%select.size
%option{:value => 'small'} Small
%option{:value => 'normal', :selected => true} Normal
%option{:value => 'large'} Large
%option{:value => 'huge'} Huge
%option{:value => 'small'} Small
%option{:value => false, :selected => true} Normal
%option{:value => 'large'} Large
%option{:value => 'huge'} Huge
%select.color
%option{:value => ''}
%option{:value => 'white'} White
%option{:value => 'black', :selected => true} Black
%option{:value => 'red'} Red
%option{:value => 'orange'} Orange
%option{:value => 'yellow'} Yellow
%option{:value => 'green'} Green
%option{:value => 'blue'} Blue
%option{:value => 'purple'} Purple
%option{:value => 'white'} White
%option{:value => false, :selected => true} Black
%option{:value => 'red'} Red
%option{:value => 'blue'} Blue
%option{:value => 'lime'} Lime
%option{:value => 'teal'} Teal
%option{:value => 'magenta'} Magenta
%option{:value => 'yellow'} Yellow
%select.background
%option{:value => ''}
%option{:value => 'white', :selected => true} White
%option{:value => 'black'} Black
%option{:value => 'red'} Red
%option{:value => 'orange'} Orange
%option{:value => 'yellow'} Yellow
%option{:value => 'green'} Green
%option{:value => 'blue'} Blue
%option{:value => 'purple'} Purple
%option{:value => false, :selected => true} White
%option{:value => 'black'} Black
%option{:value => 'red'} Red
%option{:value => 'blue'} Blue
%option{:value => 'lime'} Lime
%option{:value => 'teal'} Teal
%option{:value => 'magenta'} Magenta
%option{:value => 'yellow'} Yellow
%button.format-button.bold Bold
%button.format-button.italic Italic
%button.format-button.underline Under
Expand Down Expand Up @@ -95,23 +93,23 @@
%span{:style => 'font-family: "Times New Roman", serif;' } Serif
%span{:style => 'font-family: "Courier New", monospace;' } Monospace
%div
%span{:style => 'color: "Courier New", monospace;' }
%span.background-black white
%span.color-red red
%span.color-orange orange
%span.color-yellow yellow
%span.color-green green
%span.color-blue blue
%span.color-purple purple
%div
%span.background-black
%span.color-white black
%span.background-red red
%span.background-orange orange
%span.background-yellow yellow
%span.background-green green
%span.background-blue blue
%span.background-purple purple
%span{:style => 'color: #FFF;' }
%span{:style => 'background-color: #000;'} white
%span{:style => 'color: #F00;' } red
%span{:style => 'color: #00F;' } blue
%span{:style => 'color: #0F0;' } lime
%span{:style => 'color: #0FF;' } teal
%span{:style => 'color: #F0F;' } magenta
%span{:style => 'color: #FF0;' } yellow
%div
%span{:style => 'background-color: #000;'}
%span{:style => 'color: #FFF;' } black
%span{:style => 'background-color: #F00;' } red
%span{:style => 'background-color: #00F;' } blue
%span{:style => 'background-color: #0F0;' } lime
%span{:style => 'background-color: #0FF;' } teal
%span{:style => 'background-color: #F0F;' } magenta
%span{:style => 'background-color: #FF0;' } yellow
%div
%br
%div
Expand Down
4 changes: 2 additions & 2 deletions demo/pretty.haml
View file
Expand Up @@ -14,13 +14,13 @@
.format-group
// Dropkick screws up without id
%select.format-dropdown.family#font-family
%option.default{:value => 'san-serif', :selected => true} San Serif
%option.default{:value => false, :selected => true} San Serif
%option{:value => 'serif'} Serif
%option{:value => 'monospace'} Monospace
.format-group
%select.format-dropdown.size#font-size
%option{:value => 'small'} Small
%option.default{:value => 'normal', :selected => true} Normal
%option.default{:value => false, :selected => true} Normal
%option{:value => 'large'} Large
%option{:value => 'huge'} Huge
.format-group
Expand Down
4 changes: 2 additions & 2 deletions src/editor.coffee
View file
Expand Up @@ -239,13 +239,13 @@ class Scribe.Editor extends EventEmitter2
this.doSilently( =>
trackDelta.call(this, =>
@selection.preserve( =>
Scribe.Normalizer.breakBlocks(@root)
@doc.normalizer.breakBlocks()
lines = @doc.lines.toArray()
lineNode = @root.firstChild
_.each(lines, (line, index) =>
while line.node != lineNode
if line.node.parentNode == @root
Scribe.Normalizer.normalizeLine(lineNode, @renderer)
@doc.normalizer.normalizeLine(lineNode, @renderer)
newLine = @doc.insertLineBefore(lineNode, line)
lineNode = lineNode.nextSibling
else
Expand Down
23 changes: 19 additions & 4 deletions src/format.coffee
View file
Expand Up @@ -56,16 +56,31 @@ class Scribe.Format.Style extends Scribe.Format.Span
return styles
, {})

constructor: (@root, @keyName, @styles) ->
@getCamelCase: (cssName) ->
nameArr = cssName.split('-')
capitalNameArr = _.map(nameArr, (name) ->
return name[0].toUpperCase() + name.slice(1)
)
return nameArr[0] + capitalNameArr.slice(1).join('')

constructor: (@root, @keyName, @cssName, @styles, @matchFn) ->
@matchFn or= (formatName, cssValue) =>
return @styles[formatName] == cssValue
super

createContainer: (value) ->
container = super(value)
return container unless @styles[value]?
_.each(@styles[value], (cssValue, cssName) ->
container.style[cssName] = cssValue
)
cssName = Scribe.Format.Style.getCamelCase(@cssName)
container.style[@cssName] = @styles[value] if @styles[value]
return container

matchContainer: (container) ->
return false unless super(container)
styles = Scribe.Format.Style.getStyleObject(container)
if styles[@cssName]?
for formatName of @styles
return formatName if @matchFn(formatName, styles[@cssName])
return false

module.exports = Scribe
73 changes: 69 additions & 4 deletions src/modules/default-format.coffee
View file
Expand Up @@ -6,18 +6,22 @@ class Scribe.Format.Bold extends Scribe.Format.Tag
constructor: (@root) ->
super(@root, 'bold', 'B')


class Scribe.Format.Italic extends Scribe.Format.Tag
constructor: (@renderer) ->
super(@root, 'italic', 'I')


class Scribe.Format.Strike extends Scribe.Format.Tag
constructor: (@renderer) ->
super(@root, 'strike', 'S')


class Scribe.Format.Underline extends Scribe.Format.Tag
constructor: (@renderer) ->
super(@root, 'underline', 'U')


class Scribe.Format.Link extends Scribe.Format.Tag
constructor: (@renderer) ->
super(@root, 'link', 'A')
Expand All @@ -36,22 +40,83 @@ class Scribe.Format.Link extends Scribe.Format.Tag

class Scribe.Format.Background extends Scribe.Format.Style
constructor: (@root) ->
super(@root, 'background')
colors = _.extend({}, Scribe.Format.Color.COLORS)
delete colors['white']
super(@root, 'background', 'background-color', colors, Scribe.Format.Color.matchColor)


class Scribe.Format.Color extends Scribe.Format.Style
@COLORS: {
'black' : '#000'
'red' : '#F00'
'blue' : '#00F'
'lime' : '#0F0'
'teal' : '#0FF'
'magenta' : '#F0F'
'yellow' : '#FF0'
'white' : '#FFF'
}

@normalizeColor: (color) ->
color = Scribe.Format.Color.COLORS[color] if Scribe.Format.Color.COLORS[color]?
if color[0] == '#'
color = color.slice(1)
if color.length == 3
color = _.map(color, (letter) ->
letter + letter
).join('')
return [
parseInt(color.slice(0, 2), 16)
parseInt(color.slice(2, 4), 16)
parseInt(color.slice(4, 6), 16)
]
else if color.indexOf('rgb(') == 0
color = color.slice(4)
return _.map(color.split(','), (part) ->
parseInt(part, 10)
)
else
return [0, 0, 0]

@matchColor: (color1, color2) ->
color1 = Scribe.Format.Color.normalizeColor(color1)
color2 = Scribe.Format.Color.normalizeColor(color2)
return _.isEqual(color1, color2)


constructor: (@root) ->
super(@root, 'color')
colors = _.extend({}, Scribe.Format.Color.COLORS)
delete colors['black']
super(@root, 'color', 'color', colors, Scribe.Format.Color.matchColor)


class Scribe.Format.Family extends Scribe.Format.Style
constructor: (@root) ->
super(@root, 'family')
super(@root, 'family', 'font-family', {
'serif' : "'Times New Roman', serif"
'monospace' : "'Courier New', monospace"
}, (formatValue, cssValue) =>
return cssValue.indexOf(formatValue) >= 0
)


class Scribe.Format.Size extends Scribe.Format.Style
constructor: (@root) ->
super(@root, 'size')
super(@root, 'size', 'font-size', {
'huge' : '32px'
'large' : '18px'
'small' : '10px'
})
@lineHeights = {
'huge' : '36px'
'large' : '22px'
'small' : '12px'
}

createContainer: (value) ->
container = super(value)
container.style.lineHeight = @lineHeights[value] if @lineHeights[value]?
return container


module.exports = Scribe

0 comments on commit fffa6dd

Please sign in to comment.