Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Reindent code by 2 spaces, instead of 4

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2015-08-27 13:50:05 +03:00
parent 21a4843a48
commit e6d59496eb
72 changed files with 7216 additions and 7264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
assets/css/src/newsletter_editor/common.styl
View File

@ -23,196 +23,194 @@ $range-border-radius = 3px
$range-thumb-hover-background-color = $primary-active-color
a
color: $link-color
text-decoration: none
color: $link-color
text-decoration: none
.mailpoet_hidden
display: none !important
display: none !important
input.mailpoet_color
width: 5em
width: 5em
select.mailpoet_font-family
width: 8em
width: 8em
select.mailpoet_font-size
width: 5em
width: 5em
.mailpoet_input, .mailpoet_select
border-radius(1px)
box-shadow(none !important)
appearance: none
border-radius(1px)
box-shadow(none !important)
appearance: none
padding: $form-control-padding = 3px
line-height: 28px - $form-control-padding*2
padding: $form-control-padding = 3px
line-height: 28px - $form-control-padding*2
.mailpoet_input
width: 283px
border: 1px solid $select-border-color
width: 283px
border: 1px solid $select-border-color
.mailpoet_input_small
width: 48px
width: 48px
.mailpoet_input_medium
width: 150px
width: 150px
.mailpoet_input_full
width: 100%
box-sizing: border-box
width: 100%
box-sizing: border-box
.mailpoet_range
width: 283px
width: 283px
-webkit-appearance: none
padding: 0
vertical-align: middle
&:focus
outline: none
&::-webkit-slider-runnable-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: $range-track-background-color
border-radius($range-border-radius)
border: 1px solid $range-track-border-color
&::-webkit-slider-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
-webkit-appearance: none
padding: 0
vertical-align: middle
&:focus
outline: none
&::-webkit-slider-runnable-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: $range-track-background-color
border-radius($range-border-radius)
border: 1px solid $range-track-border-color
&::-webkit-slider-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
-webkit-appearance: none
margin-top: (-1 * $range-thumb-height / 3)
&:hover::-webkit-slider-thumb
background: $range-thumb-hover-background-color
&::-moz-range-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: $range-track-background-color
border-radius($range-border-radius)
border: 1px solid $range-track-border-color
&::-moz-range-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
&:hover::-moz-range-thumb
background: $range-thumb-hover-background-color
&::-ms-fill-lower
border: 1px solid $range-track-border-color
background: $range-track-background-color
&::-ms-fill-upper
border: 1px solid $range-track-border-color
background: $range-track-background-color
&::-ms-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: transparent
border-color: transparent
border-width: ($range-track-height * 2) 0
color: transparent
&::-ms-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
&:hover::-ms-thumb
background: $range-thumb-hover-background-color
&:focus::-ms-fill-lower
border: 1px solid $range-track-border-color
background: $range-track-background-color
&:focus::-ms-fill-upper
border: 1px solid $range-track-border-color
background: $range-track-background-color
margin-top: (-1 * $range-thumb-height / 3)
&:hover::-webkit-slider-thumb
background: $range-thumb-hover-background-color
&::-moz-range-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: $range-track-background-color
border-radius($range-border-radius)
border: 1px solid $range-track-border-color
&::-moz-range-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
&:hover::-moz-range-thumb
background: $range-thumb-hover-background-color
&::-ms-fill-lower
border: 1px solid $range-track-border-color
background: $range-track-background-color
&::-ms-fill-upper
border: 1px solid $range-track-border-color
background: $range-track-background-color
&::-ms-track
width: 100%
height: $range-track-height
cursor: pointer
animate: 0.2s
background: transparent
border-color: transparent
border-width: ($range-track-height * 2) 0
color: transparent
&::-ms-thumb
border: 1px solid $range-thumb-border-color
height: $range-thumb-height
width: $range-thumb-width
border-radius($range-border-radius)
background: $range-thumb-background-color
cursor: pointer
&:hover::-ms-thumb
background: $range-thumb-hover-background-color
&:focus::-ms-fill-lower
border: 1px solid $range-track-border-color
background: $range-track-background-color
&:focus::-ms-fill-upper
border: 1px solid $range-track-border-color
background: $range-track-background-color
.mailpoet_range_small
width: 100px
width: 100px
.mailpoet_range_medium
width: 180px
width: 180px
.mailpoet_select
border-color: $select-border-color
color: $select-text-color
margin: 0
border-color: $select-border-color
color: $select-text-color
margin: 0
.mailpoet_select_large
width: 139px
width: 139px
.mailpoet_select_medium
width: 103px
width: 103px
.mailpoet_select_small
width: 68px
width: 68px
.mailpoet_select_half_width
width: 50%
width: 50%
#mailpoet_editor_content ol
#mailpoet_editor_content ul
list-style-position: inside
margin-left: 0
list-style-position: inside
margin-left: 0
#mailpoet_editor_content ul
list-style-type: disc
list-style-type: disc
.mailpoet_button
margin: 0
border: 1px solid $button-default-border-color
background-color: $button-default-background-color
padding: 6px 20px
color: $button-default-text-color
border-radius(3px)
line-height: normal
vertical-align: top
margin: 0
border: 1px solid $button-default-border-color
background-color: $button-default-background-color
padding: 6px 20px
color: $button-default-text-color
border-radius(3px)
line-height: normal
vertical-align: top
.mailpoet_button_full
width: 100%
box-sizing: border-box
width: 100%
box-sizing: border-box
.mailpoet_button_primary
border-color: $button-primary-border-color
background-color: $button-primary-background-color
color: $button-primary-text-color
border-color: $button-primary-border-color
background-color: $button-primary-background-color
color: $button-primary-text-color
&:hover
background-color: $button-primary-hover-background-color
&:hover
background-color: $button-primary-hover-background-color
.mailpoet_button_group
display: inline
display: inline
.mailpoet_button:first-child
margin-right: 0
padding: 6px 12px 6px
border-top-right-radius: 0
border-bottom-right-radius: 0
.mailpoet_button:first-child
margin-right: 0
padding: 6px 12px 6px
border-top-right-radius: 0
border-bottom-right-radius: 0
.mailpoet_button:last-child
margin-left: 0
padding-left: 10px
padding-right: 10px
border-left: 0
border-top-left-radius: 0
border-bottom-left-radius: 0
.mailpoet_button:last-child
margin-left: 0
padding-left: 10px
padding-right: 10px
border-left: 0
border-top-left-radius: 0
border-bottom-left-radius: 0
.mailpoet_text_content p
margin: 0
margin: 0
.mailpoet_separator
margin: 17px 20px
margin: 17px 20px
.mailpoet_option_offset_left_small
margin-left: 10px
margin-left: 10px
input.mailpoet_option_offset_left_small
margin-left: 10px !important
margin-left: 10px !important

182
assets/css/src/newsletter_editor/components/blockTools.styl
View File

@ -10,114 +10,114 @@ $master-column-tool-width = 24px
$layer-selector-width = 30px
.mailpoet_tools
position: absolute
top: 0
right: 0
display: none
z-index: 20
padding: 2px
text-align: right
a
vertical-align: top
.mailpoet_container_horizontal + &
left: 100%
padding-left: 5px
.mailpoet_tool
width: $master-column-tool-width
height: $master-column-tool-width
.mailpoet_tool_icon
width: $master-column-tool-width
height: $master-column-tool-width
.mailpoet_delete_block_activated
width: auto
height: auto
.mailpoet_tool
display: inline-block
width: $tool-width
height: $tool-width
padding: 2px
&:hover
filter-shadow(1px, 2px, 0px, $tool-active-color)
.mailpoet_tool_icon
fill: $tool-inactive-color
width: $tool-width
height: $tool-width
.mailpoet_tool_icon_foreground
fill: $tool-inactive-secondary-color
&:hover
fill: $tool-hover-color
.mailpoet_tool_icon_foreground
fill: $tool-hover-secondary-color
&:active
fill: $primary-active-color
.mailpoet_tool_icon_foreground
fill: $tool-active-secondary-color
.mailpoet_delete_block_confirmation
position: absolute
top: 0
right: 0
display: none
z-index: 20
padding: 2px
text-align: right
a
vertical-align: top
.mailpoet_container_horizontal + &
left: 100%
padding-left: 5px
.mailpoet_tool
width: $master-column-tool-width
height: $master-column-tool-width
.mailpoet_tool_icon
width: $master-column-tool-width
height: $master-column-tool-width
.mailpoet_delete_block_activated
width: auto
height: auto
.mailpoet_tool
display: inline-block
width: $tool-width
height: $tool-width
padding: 2px
&:hover
filter-shadow(1px, 2px, 0px, $tool-active-color)
.mailpoet_tool_icon
fill: $tool-inactive-color
width: $tool-width
height: $tool-width
.mailpoet_tool_icon_foreground
fill: $tool-inactive-secondary-color
&:hover
fill: $tool-hover-color
.mailpoet_tool_icon_foreground
fill: $tool-hover-secondary-color
&:active
fill: $primary-active-color
.mailpoet_tool_icon_foreground
fill: $tool-active-secondary-color
.mailpoet_delete_block_confirmation
position: absolute
top: 0
right: 0
width: 200px
width: 200px
.mailpoet_delete_block
display: inline-block
padding: 2px
vertical-align: top
display: inline-block
padding: 2px
vertical-align: top
.mailpoet_tool
padding: 0
.mailpoet_tool
padding: 0
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel
display: none
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel
display: none
.mailpoet_delete_block_activated
width: auto
border-radius(3px)
background-color: $warning-background-color
padding: 3px 5px
line-height: 1.2em
height: auto
width: auto
border-radius(3px)
background-color: $warning-background-color
padding: 3px 5px
line-height: 1.2em
height: auto
.mailpoet_delete_block_activate
display: none
.mailpoet_delete_block_activate
display: none
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel
display: inline-block
.mailpoet_delete_block_confirm,
.mailpoet_delete_block_cancel
display: inline-block
.mailpoet_delete_block_confirm
color: $warning-text-color
color: $warning-text-color
&:hover
color: $warning-text-color
text-decoration: underline
&:hover
color: $warning-text-color
text-decoration: underline
.mailpoet_delete_block_cancel
color: $warning-alternate-text-color
color: $warning-alternate-text-color
&:hover
color: $warning-alternate-text-color
text-decoration: underline
&:hover
color: $warning-alternate-text-color
text-decoration: underline
.mailpoet_newsletter_layer_selector
&.mailpoet_container_layer_active
.mailpoet_tool_icon
fill: $primary-active-color
z-index: 100001 !important
&.mailpoet_container_layer_active
.mailpoet_tool_icon
fill: $primary-active-color
z-index: 100001 !important
.mailpoet_tool_icon_foreground
fill: $white-color
.mailpoet_tool_icon_foreground
fill: $white-color

66
assets/css/src/newsletter_editor/components/dragAndDrop.styl
View File

@ -6,58 +6,58 @@ $marker-z-index = 1
$draggable-widget-z-index = 2
.mailpoet_drop_marker
background-color: $primary-active-color
background-color: $primary-active-color
position: absolute
min-width: $marker-width
min-height: $marker-width
z-index: $marker-z-index
box-shadow(0px 0px 1px 0px $primary-active-color)
&::before, &::after
position: absolute
min-width: $marker-width
min-height: $marker-width
z-index: $marker-z-index
box-shadow(0px 0px 1px 0px $primary-active-color)
&::before, &::after
position: absolute
margin-top: -18px
font: 400 40px/1 dashicons
color: $primary-active-color
&::before
left: -25px
content: "\f139"
&::after
right: -23px
content: "\f141";
margin-top: -18px
font: 400 40px/1 dashicons
color: $primary-active-color
&::before
left: -25px
content: "\f139"
&::after
right: -23px
content: "\f141";
// Offset middle markers slightly above, so that the middle of the marker is
// right on the boundary between two adjacent content blocks
.mailpoet_drop_marker.mailpoet_drop_marker_middle
.mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after
.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before
margin-top: -1 * ($marker-width / 2)
margin-top: -1 * ($marker-width / 2)
// Offset the last marker up, so that the bottom of it matches the bottom of the
// container
.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after
margin-top: -1 * $marker-width
margin-top: -1 * $marker-width
#mailpoet_editor .mailpoet_droppable_active
z-index: 21000
z-index: 21000
.mailpoet_block.mailpoet_droppable_active
border: 1px dashed $drop-active-color !important
width: $newsletter-width
border: 1px dashed $drop-active-color !important
width: $newsletter-width
.mailpoet_tools
display: none !important
.mailpoet_tools
display: none !important
.mailpoet_widget.mailpoet_droppable_active
padding: 0
margin: 0
z-index: $draggable-widget-z-index
.mailpoet_widget_icon
padding: 0
margin: 0
z-index: $draggable-widget-z-index
.mailpoet_widget_icon
padding: 0
margin: 0
.mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty
background-color: $primary-active-color
box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
color: $white-color
background-color: $primary-active-color
box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
color: $white-color

44
assets/css/src/newsletter_editor/components/forms.styl
View File

@ -1,39 +1,39 @@
.mailpoet_form_field
margin-top: 15px
margin-bottom: 15px
margin-top: 15px
margin-bottom: 15px
.mailpoet_form_field_title
clear: both
font-size: 1.1em
margin-bottom: 5px
clear: both
font-size: 1.1em
margin-bottom: 5px
.mailpoet_form_field_title_small
width: 120px
width: 120px
.mailpoet_form_field_title_inline
display: inline-block
margin-bottom: 0
margin-top: 6px
display: inline-block
margin-bottom: 0
margin-top: 6px
.mailpoet_form_field_optional
font-size: 0.8em
color: $primary-inactive-color
font-size: 0.8em
color: $primary-inactive-color
.mailpoet_form_field_radio_option,
.mailpoet_form_field_checkbox_option
display: inline-block
vertical-align: top
margin-right: 5px
line-height: 30px
display: inline-block
vertical-align: top
margin-right: 5px
line-height: 30px
&:last-child
margin-right: 0
&:last-child
margin-right: 0
.mailpoet_form_field_input_option
display: inline-block
display: inline-block
input[type=checkbox]
vertical-align:top
input[type=checkbox]
vertical-align:top
input[type=text]
vertical-align: middle
input[type=text]
vertical-align: middle

24
assets/css/src/newsletter_editor/components/heading.styl
View File

@ -1,20 +1,20 @@
.mailpoet_heading_form_field
margin-top: 5px
margin-bottom: 5px
margin-top: 5px
margin-bottom: 5px
.mailpoet_input_title,
.mailpoet_input_preheader
width: 400px
padding: 3px
line-height: normal
width: 400px
padding: 3px
line-height: normal
.mailpoet_input_title
font-size: 23px
font-size: 23px
.mailpoet_breadcrumbs
float: right
clear: both
margin-bottom: 13px
margin-right: 17px
font-size: 0.9em
text-transform: uppercase
float: right
clear: both
margin-bottom: 13px
margin-right: 17px
font-size: 0.9em
text-transform: uppercase

48
assets/css/src/newsletter_editor/components/layers.styl
View File

@ -1,32 +1,32 @@
.mailpoet_container_layer_active
.mailpoet_block
pointer-events: none
opacity: 0.4
.mailpoet_block
pointer-events: none
opacity: 0.4
.mailpoet_container_block
pointer-events: auto
opacity: 1
.mailpoet_container_block
pointer-events: auto
opacity: 1
.mailpoet_container_block > .mailpoet_tools
display: block !important
.mailpoet_container_block > .mailpoet_tools
display: block !important
& > .mailpoet_tools
z-index: 100001 !important;
& > .mailpoet_tools
z-index: 100001 !important;
.mailpoet_layer_overlay
height: 100%
left: 0
overflow-y: auto
overflow-x: hidden
position: fixed
top: 0
width: 100%
z-index: 100000
background-color: rgba(0, 0, 0, 0.6)
margin: 0 !important
height: 100%
left: 0
overflow-y: auto
overflow-x: hidden
position: fixed
top: 0
width: 100%
z-index: 100000
background-color: rgba(0, 0, 0, 0.6)
margin: 0 !important
.mailpoet_layer_highlight
pointer-events:none;
background-color: #f1f1f1;
position: relative;
z-index: 100001 !important;
pointer-events:none;
background-color: #f1f1f1;
position: relative;
z-index: 100001 !important;

62
assets/css/src/newsletter_editor/components/resize.styl
View File

@ -6,45 +6,45 @@ $resize-handle-width = 30px
$resize-handle-z-index = 2
.mailpoet_resize_handle_container
position: absolute
bottom: 0
text-align: center
width: 100%
position: absolute
bottom: 0
text-align: center
width: 100%
.mailpoet_resize_handle
padding: 6px 15px 10px 6px
position: relative
top: 5px
background: $resize-handle-background-color
border-radius(3px)
display: inline-block
width: $resize-handle-width
cursor: ns-resize
z-index: $resize-handle-z-index
padding: 6px 15px 10px 6px
position: relative
top: 5px
background: $resize-handle-background-color
border-radius(3px)
display: inline-block
width: $resize-handle-width
cursor: ns-resize
z-index: $resize-handle-z-index
.mailpoet_resize_handle_text,
.mailpoet_resize_handle_icon
pointer-events: none
.mailpoet_resize_handle_text,
.mailpoet_resize_handle_icon
pointer-events: none
.mailpoet_resize_handle_text
line-height: 1.5em
font-size: 11px
font-weight: bold
color: $resize-handle-font-color
text-align: center
line-height: 1.5em
font-size: 11px
font-weight: bold
color: $resize-handle-font-color
text-align: center
.mailpoet_resize_handle_icon
position: absolute
top: 9px
right: 1px
position: absolute
top: 9px
right: 1px
& > svg
width: 15px
height: 15px
fill: $resize-handle-font-color
& > svg
width: 15px
height: 15px
fill: $resize-handle-font-color
.mailpoet_block.mailpoet_resize_active > .mailpoet_block_highlight
border: 1px dashed $resize-active-color
border: 1px dashed $resize-active-color
.mailpoet_resize_handle
display: inline-block
.mailpoet_resize_handle
display: inline-block

83
assets/css/src/newsletter_editor/components/save.styl
View File

@ -1,68 +1,67 @@
#mailpoet_editor_bottom
margin-top: 39px
margin-left: 29px
margin-top: 39px
margin-left: 29px
.mailpoet_save_options
border-radius(3px)
border-radius(3px)
float: left
overflow: hidden
margin: 5px 0 0 0
clear: both
vertical-align: top
float: left
overflow: hidden
margin: 5px 0 0 0
clear: both
vertical-align: top
background: $white-color
border: 1px solid $content-border-color
background: $white-color
border: 1px solid $content-border-color
.mailpoet_save_option
margin: 0
margin: 0
& > a
display: block
padding-left: 20px
padding-right: 20px
line-height: 2em
& > a
display: block
padding-left: 20px
padding-right: 20px
line-height: 2em
.mailpoet_save_option:hover
background-color: $primary-active-background-color
background-color: $primary-active-background-color
color: $white-color
& > a
color: $white-color
& > a
color: $white-color
.mailpoet_save_show_options
padding: 6px 3px 4px
padding: 6px 3px 4px
&.mailpoet_save_show_options_active
.mailpoet_save_show_options_icon::before
content: '\f142'
&.mailpoet_save_show_options_active
.mailpoet_save_show_options_icon::before
content: '\f142'
.mailpoet_save_show_options_icon
width: auto
height: auto
line-height: auto
&::before
content: '\f140'
width: auto
height: auto
line-height: auto
&::before
content: '\f140'
.mailpoet_save_as_template_container
border-radius(3px)
float: left
clear: both
border-radius(3px)
float: left
clear: both
margin-top: 5px
padding: 0 10px
background-color: $white-color
border: 1px solid $structure-border-color
margin-top: 5px
padding: 0 10px
background-color: $white-color
border: 1px solid $structure-border-color
.mailpoet_save_as_template_title
font-size: 1.1em
font-size: 1.1em
.mailpoet_editor_last_saved
color: $primary-inactive-color
font-size: 0.9em
display: inline
color: $primary-inactive-color
font-size: 0.9em
display: inline
.mailpoet_save_error
color: $error-text-color
color: $error-text-color

194
assets/css/src/newsletter_editor/components/sidebar.styl
View File

@ -14,118 +14,118 @@ $widget-icon-hover-color = $primary-active-color
$widget-icon-width = 30px
#mailpoet_editor_sidebar
border-left: $content-border-color
border-bottom: $content-border-color
color: $sidebar-text-color
border-left: $content-border-color
border-bottom: $content-border-color
color: $sidebar-text-color
.mailpoet_sidebar_region
margin-bottom: 0
border-left: 1px solid $content-border-color
border-bottom: 1px solid $content-border-color
border-top: 0
border-right: 0
.mailpoet_sidebar_region
margin-bottom: 0
border-left: 1px solid $content-border-color
border-bottom: 1px solid $content-border-color
border-top: 0
border-right: 0
&.closed .mailpoet_region_content
max-height: 0px
overflow: hidden
margin-top: 0
&.closed .mailpoet_region_content
max-height: 0px
overflow: hidden
margin-top: 0
.mailpoet_region_content
max-height: 2000px
transition: max-height 0.2s ease
padding: 0 20px
margin-top: 12px
.mailpoet_region_content
max-height: 2000px
transition: max-height 0.2s ease
padding: 0 20px
margin-top: 12px
&, .postbox
background-color: $sidebar-background-color
&, .postbox
background-color: $sidebar-background-color
.postbox
padding-bottom: 20px
.postbox
padding-bottom: 20px
&.closed
padding-bottom: 0
&.closed
padding-bottom: 0
&.closed h3
color: $sidebar-inactive-heading-color
cursor: pointer
&.closed h3
color: $sidebar-inactive-heading-color
cursor: pointer
h3
&:hover h3
margin: 0
padding: 17px 20px
text-transform: uppercase
color: $sidebar-active-heading-color
h3
&:hover h3
margin: 0
padding: 17px 20px
text-transform: uppercase
color: $sidebar-active-heading-color
h3
.handlediv
cursor: auto
border: 0
h3
.handlediv
cursor: auto
border: 0
.handlediv::before
top: 18px
right: 18px
font: 400 20px/1 dashicons
speak: none
display: inline-block
position: relative
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-decoration: none!important
content: '\f142'
color: $sidebar-active-heading-color
.handlediv::before
top: 18px
right: 18px
font: 400 20px/1 dashicons
speak: none
display: inline-block
position: relative
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-decoration: none!important
content: '\f142'
color: $sidebar-active-heading-color
&.closed .handlediv::before
content: '\f140'
color: $sidebar-inactive-heading-color
&.closed .handlediv::before
content: '\f140'
color: $sidebar-inactive-heading-color
&.closed:hover .handlediv::before
color: $sidebar-active-heading-color
&.closed:hover .handlediv::before
color: $sidebar-active-heading-color
.mailpoet_widget
display: inline-block
width: $widget-width
text-align: center
float: left
padding: 0 13px 15px 13px
display: inline-block
width: $widget-width
text-align: center
float: left
padding: 0 13px 15px 13px
// Place 3 widgets per row
&:nth-child(3n+1)
clear: left
// Place 3 widgets per row
&:nth-child(3n+1)
clear: left
.mailpoet_widget_icon
width: $widget-width
height: $widget-width
background-color: $widget-background-color
border-radius(3px)
box-shadow(1px 2px $widget-shadow-color)
color: $widget-icon-color
fill: $widget-icon-color
text-align: center
line-height: $widget-width
box-sizing: border-box
margin-bottom: 9px
/* Vertically align widget icon glyphs */
& > *
vertical-align: middle
width: $widget-icon-width
height: $widget-icon-width
font-size: $widget-icon-width
&:hover
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
border: 1px solid $widget-icon-hover-color
&.mailpoet_droppable_active
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
.mailpoet_widget_icon
width: $widget-width
height: $widget-width
background-color: $widget-background-color
border-radius(3px)
box-shadow(1px 2px $widget-shadow-color)
color: $widget-icon-color
fill: $widget-icon-color
text-align: center
line-height: $widget-width
box-sizing: border-box
margin-bottom: 9px
border: 1px solid $widget-icon-hover-color
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
box-shadow(none)
/* Vertically align widget icon glyphs */
& > *
vertical-align: middle
width: $widget-icon-width
height: $widget-icon-width
font-size: $widget-icon-width
&:hover
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
border: 1px solid $widget-icon-hover-color
&.mailpoet_droppable_active
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
.mailpoet_widget_icon
border: 1px solid $widget-icon-hover-color
color: $widget-icon-hover-color
fill: $widget-icon-hover-color
box-shadow(none)
.mailpoet_widget_title
display: none
.mailpoet_widget_title
display: none

61
assets/css/src/newsletter_editor/components/sidepanel.styl
View File

@ -2,54 +2,53 @@ $sidepanel-active-heading-color = $primary-active-color
/* Sidepanel */
.mailpoet_editor_settings
color: $sidebar-text-color
color: $sidebar-text-color
p
font-size: 1em
p
font-size: 1em
h3
font-size: 1.4em
color: $sidepanel-active-heading-color
text-transform: uppercase
h3
font-size: 1.4em
color: $sidepanel-active-heading-color
text-transform: uppercase
.mailpoet_sidepanel_field
margin-top: 15px
margin-bottom: 15px
margin-top: 15px
margin-bottom: 15px
.mailpoet_sidepanel_field_title
clear: both
font-size: 1.1em
margin-bottom: 5px
clear: both
font-size: 1.1em
margin-bottom: 5px
.mailpoet_sidepanel_field_title_small
width: 120px
width: 120px
.mailpoet_sidepanel_field_title_inline
//clear: left
display: inline-block
vertical-align: middle
line-height: 30px
margin-bottom: 0
display: inline-block
vertical-align: middle
line-height: 30px
margin-bottom: 0
.mailpoet_sidepanel_field_optional
font-size: 0.8em
color: $primary-inactive-color
font-size: 0.8em
color: $primary-inactive-color
.mailpoet_sidepanel_radio_option,
.mailpoet_sidepanel_checkbox_option
display: inline-block
vertical-align: top
margin-right: 15px
line-height: 30px
display: inline-block
vertical-align: top
margin-right: 15px
line-height: 30px
&:last-child
margin-right: 0
&:last-child
margin-right: 0
.mailpoet_sidepanel_input_option
display: inline-block
display: inline-block
input[type=checkbox]
vertical-align:top
input[type=checkbox]
vertical-align:top
input[type=text]
vertical-align: middle
input[type=text]
vertical-align: middle

18
assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
View File

@ -1,15 +1,15 @@
.mailpoet_automated_latest_content_block
padding: 0
padding: 0
.mailpoet_automated_latest_content_block_overlay
position: absolute
z-index: 19
width: 100%
height: 100%
background: rgba(255, 255, 255, 0.7)
position: absolute
z-index: 19
width: 100%
height: 100%
background: rgba(255, 255, 255, 0.7)
.mailpoet_automated_latest_content_block_posts
overflow: auto
overflow: auto
& > .mailpoet_block
width: 100%
& > .mailpoet_block
width: 100%

40
assets/css/src/newsletter_editor/contentBlocks/base.styl
View File

@ -1,32 +1,32 @@
$block-hover-highlight-color = $primary-active-color
.mailpoet_block
box-sizing: border-box
position: relative
float: left
background-color: inherit
box-sizing: border-box
box-sizing: border-box
position: relative
float: left
background-color: inherit
box-sizing: border-box
margin-bottom: 20px
margin-bottom: 20px
padding-left: 20px
padding-right: 20px
padding-left: 20px
padding-right: 20px
& > .mailpoet_block_highlight
position: absolute
top: 0
right: 0
bottom: 0
left: 0
pointer-events: none
border: 1px solid $transparent-color
& > .mailpoet_block_highlight
position: absolute
top: 0
right: 0
bottom: 0
left: 0
pointer-events: none
border: 1px solid $transparent-color
&:hover > .mailpoet_block_highlight
border: 1px dashed $block-hover-highlight-color
&:hover > .mailpoet_block_highlight
border: 1px dashed $block-hover-highlight-color
.mailpoet_block:last-child
margin-bottom: 0
margin-bottom: 0
.mailpoet_content
position: relative
position: relative

27
assets/css/src/newsletter_editor/contentBlocks/button.styl
View File

@ -1,20 +1,19 @@
$button-vertical-padding = 13px
.mailpoet_button_block
padding-top: $button-vertical-padding
padding-bottom: $button-vertical-padding
padding-top: $button-vertical-padding
padding-bottom: $button-vertical-padding
overflow: hidden
overflow: hidden
.mailpoet_editor_button
display: block
margin: auto
line-height: 2em
text-align: center
text-decoration: none
box-sizing: border-box
max-width: 100%
&:hover
cursor: all-scroll
.mailpoet_editor_button
display: block
margin: auto
line-height: 2em
text-align: center
text-decoration: none
box-sizing: border-box
max-width: 100%
&:hover
cursor: all-scroll

100
assets/css/src/newsletter_editor/contentBlocks/container.styl
View File

@ -1,26 +1,26 @@
.mailpoet_container
width: 100%
min-height: 15px
position: relative
width: 100%
min-height: 15px
position: relative
.mailpoet_container_block
margin-left: 0
margin-right: 0
position: relative
box-sizing: border-box
border: 0
padding-left: 0
padding-right: 0
margin-left: 0
margin-right: 0
position: relative
box-sizing: border-box
border: 0
padding-left: 0
padding-right: 0
&:hover
border: 0
&:hover
border: 0
.mailpoet_container_vertical > *
width: 100%
box-sizing: border-box
width: 100%
box-sizing: border-box
.mailpoet_container_horizontal > *
vertical-align: top
vertical-align: top
/**
* Enforce column widths:
@ -30,47 +30,47 @@
*/
#mailpoet_editor_content
.mailpoet_container
box-sizing: border-box
float: left
.mailpoet_container
box-sizing: border-box
float: left
// One column
& > .mailpoet_container_block
width: $newsletter-width
border: 0
// One column
& > .mailpoet_container_block
width: $newsletter-width
border: 0
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block
margin-bottom: 0
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block
margin-bottom: 0
.mailpoet_container_horizontal > .mailpoet_container_block
margin-bottom: 0
width: 20px + 560px + 20px
.mailpoet_container_horizontal > .mailpoet_container_block
margin-bottom: 0
width: 20px + 560px + 20px
// More than one column
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
// More than one column
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
// Column number detection technique found here:
// http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has
// Column number detection technique found here:
// http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has
// Two columns
& > .mailpoet_block:first-child:nth-last-child(2)
& > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block
//padding-left: 20px
//padding-right: 20px
width: 260px + 20px + 20px
// Two columns
& > .mailpoet_block:first-child:nth-last-child(2)
& > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block
//padding-left: 20px
//padding-right: 20px
width: 260px + 20px + 20px
// Three columns
& > .mailpoet_block:first-child:nth-last-child(3)
& > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block
//padding-left: 20px
//padding-right: 20px
width: 160px + 20px + 20px
// Three columns
& > .mailpoet_block:first-child:nth-last-child(3)
& > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block
//padding-left: 20px
//padding-right: 20px
width: 160px + 20px + 20px
.mailpoet_container_empty
text-align: center
background-color: #f2f2f2
margin: 20px
padding: 15px
box-shadow(inset 1px 2px 1px $primary-inactive-color)
color: #656565
border-radius(3px)
text-align: center
background-color: #f2f2f2
margin: 20px
padding: 15px
box-shadow(inset 1px 2px 1px $primary-inactive-color)
color: #656565
border-radius(3px)

28
assets/css/src/newsletter_editor/contentBlocks/divider.styl
View File

@ -3,27 +3,27 @@ $active-divider-background-color = #daebf2
$divider-hover-border-color = $primary-active-color
.mailpoet_divider_block
padding-left: 0
padding-right: 0
margin-bottom: 0
cursor: all-scroll
padding-left: 0
padding-right: 0
margin-bottom: 0
cursor: all-scroll
.mailpoet_divider
margin-left: 20px
margin-right: 20px
margin-left: 20px
margin-right: 20px
.mailpoet_field_divider_style
max-width: $newsletter-width
margin: auto
display: block
width: 100%
border: 1px solid transparent
max-width: $newsletter-width
margin: auto
display: block
width: 100%
border: 1px solid transparent
.mailpoet_field_divider_style:hover
border: 1px solid $divider-hover-border-color
border: 1px solid $divider-hover-border-color
.mailpoet_divider_selector img
width: 100%
width: 100%
.mailpoet_field_divider_style
padding: 10px 0
padding: 10px 0

8
assets/css/src/newsletter_editor/contentBlocks/footer.styl
View File

@ -1,6 +1,6 @@
.mailpoet_footer_block
padding-left: 0
padding-right: 0
padding-left: 0
padding-right: 0
.mailpoet_content
padding: 5px 20px
.mailpoet_content
padding: 5px 20px

8
assets/css/src/newsletter_editor/contentBlocks/header.styl
View File

@ -1,6 +1,6 @@
.mailpoet_header_block
padding-left: 0
padding-right: 0
padding-left: 0
padding-right: 0
.mailpoet_content
padding: 5px 20px
.mailpoet_content
padding: 5px 20px

22
assets/css/src/newsletter_editor/contentBlocks/image.styl
View File

@ -1,15 +1,15 @@
.mailpoet_image_block
&.mailpoet_full_image
padding-left: 0
padding-right: 0
margin-bottom: 0
&.mailpoet_full_image
padding-left: 0
padding-right: 0
margin-bottom: 0
.mailpoet_content a:hover
cursor: all-scroll
.mailpoet_content a:hover
cursor: all-scroll
img
vertical-align: bottom
max-width: $newsletter-width
width: 100%
height: auto
img
vertical-align: bottom
max-width: $newsletter-width
width: 100%
height: auto

62
assets/css/src/newsletter_editor/contentBlocks/posts.styl
View File

@ -1,46 +1,46 @@
.mailpoet_posts_block
box-shadow(none)
box-shadow(none)
& > .mailpoet_content
font-size: 1em
text-align: center
background-color: $primary-active-color
margin: 20px 0
padding: 15px
box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
color: $white-color
border-radius(3px)
& > .mailpoet_content
font-size: 1em
text-align: center
background-color: $primary-active-color
margin: 20px 0
padding: 15px
box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
color: $white-color
border-radius(3px)
.mailpoet_post_selection_filter_row
margin-top: 5px
margin-bottom: 5px
margin-top: 5px
margin-bottom: 5px
.mailpoet_posts_categories_and_tags
width: 100%
width: 100%
.mailpoet_settings_posts_show_display_options
.mailpoet_settings_posts_show_post_selection
display: block
margin-top: 10px
display: block
margin-top: 10px
.mailpoet_post_selection_container
margin-top: 20px
margin-bottom: 20px
margin-top: 20px
margin-bottom: 20px
.mailpoet_settings_posts_single_post
border-radius(1px)
width: 100%
margin-top: 5px
margin-bottom: 5px
height: 38px
line-height: 38px
overflow: hidden
border: 1px solid $content-border-color
background-color: $white-color
border-radius(1px)
width: 100%
margin-top: 5px
margin-bottom: 5px
height: 38px
line-height: 38px
overflow: hidden
border: 1px solid $content-border-color
background-color: $white-color
&:hover
border-color: $primary-active-color
&:hover
border-color: $primary-active-color
.mailpoet_select_post_checkbox
margin-left: 10px
margin-right: 8px
.mailpoet_select_post_checkbox
margin-left: 10px
margin-right: 8px

131
assets/css/src/newsletter_editor/contentBlocks/social.styl
View File

@ -12,105 +12,102 @@ $tool-active-color = #d2d2d4
$tool-width = 16px
.mailpoet_social_block
padding-top: $social-block-vertical-padding
padding-bottom: $social-block-vertical-padding
padding-top: $social-block-vertical-padding
padding-bottom: $social-block-vertical-padding
.mailpoet_social
text-align: center
.mailpoet_social
text-align: center
.mailpoet_social
span
display: inline-block
padding: 2px 3px
span
display: inline-block
padding: 2px 3px
span,
a,
img
vertical-align: top
span,
a,
img
vertical-align: top
a
cursor: all-scroll
a
cursor: all-scroll
.mailpoet_social_icon_set
border: 1px solid transparent
padding: 5px
margin-bottom: 5px
border: 1px solid transparent
padding: 5px
margin-bottom: 5px
&:hover
border: 1px solid $social-icon-set-hover-border-color
&:hover
border: 1px solid $social-icon-set-hover-border-color
img
width: $social-icon-width
height: $social-icon-width
vertical-align: middle
padding: 2px 3px
img
width: $social-icon-width
height: $social-icon-width
vertical-align: middle
padding: 2px 3px
.mailpoet_active_icon_set
border: 1px dashed $active-social-icon-set-border-color
background-color: $active-social-icon-set-background-color
border: 1px dashed $active-social-icon-set-border-color
background-color: $active-social-icon-set-background-color
.mailpoet_social_icon_settings
position: relative
position: relative
padding: 28px 9px (18px - 10px) 9px
margin-bottom: 9px
padding: 28px 9px (18px - 10px) 9px
margin-bottom: 9px
background: $white-color
border: 1px solid $content-border-color
background: $white-color
border: 1px solid $content-border-color
.mailpoet_social_icon_settings_row
clear: both
overflow: auto
margin-bottom: 10px
clear: both
overflow: auto
margin-bottom: 10px
line-height: 30px
line-height: 30px
.mailpoet_social_icon_settings_label
margin-right: 5px
margin-right: 5px
text-align: left
text-align: left
.mailpoet_social_icon_image
width: 30px
height: 30px
.mailpoet_social_icon_image
width: 30px
height: 30px
&.mailpoet_social_icon_image_label
line-height: initial
&.mailpoet_social_icon_image_label
line-height: initial
.mailpoet_social_icon_settings_form_element
float: left
float: left
width: 100%
input, select
width: 100%
input, select
width: 100%
height: 30px
box-sizing: border-box
margin: 0
vertical-align: middle
display: inline-block
height: 30px
box-sizing: border-box
margin: 0
vertical-align: middle
display: inline-block
.mailpoet_social_icon_settings_tool
position: absolute
top: 10px
position: absolute
top: 10px
.mailpoet_tool_icon
fill: $tool-inactive-color
width: $tool-width
height: $tool-width
.mailpoet_tool_icon
fill: $tool-inactive-color
width: $tool-width
height: $tool-width
&:hover
fill: $tool-hover-color
&:hover
fill: $tool-hover-color
&:active
fill: $primary-active-color
&:active
fill: $primary-active-color
&:active
filter-shadow(1px, 2px, 0px, $tool-active-color)
&:active
filter-shadow(1px, 2px, 0px, $tool-active-color)
.mailpoet_social_icon_settings_move_icon
right: 5px
right: 5px
.mailpoet_social_icon_settings_delete_icon
right: 5px + 5px + $tool-width
right: 5px + 5px + $tool-width

10
assets/css/src/newsletter_editor/contentBlocks/spacer.styl
View File

@ -1,8 +1,8 @@
.mailpoet_spacer
text-align: center
text-align: center
.mailpoet_spacer_block
padding-left: 0
padding-right: 0
margin-bottom: 0
cursor: all-scroll
padding-left: 0
padding-right: 0
margin-bottom: 0
cursor: all-scroll

22
assets/css/src/newsletter_editor/contentBlocks/text.styl
View File

@ -1,17 +1,17 @@
$text-vertical-padding = 3px
.mailpoet_text_block
padding-left: 0
padding-right: 0
padding-left: 0
padding-right: 0
& > .mailpoet_content
overflow: hidden
padding-top: 13px
padding-bottom: 13px
padding-left: 20px
padding-right: 20px
& > .mailpoet_content
overflow: hidden
padding-top: 13px
padding-bottom: 13px
padding-left: 20px
padding-right: 20px
blockquote
margin: 1em
padding-left: 1em
border-left: 2px #565656 solid
margin: 1em
padding-left: 1em
border-left: 2px #565656 solid

36
assets/css/src/newsletter_editor/layout.styl
View File

@ -2,31 +2,31 @@ $sidebar-width = 330px
$content-border-color = $structure-border-color
#mailpoet_editor
width: 100%
clear: both
width: 100%
clear: both
#mailpoet_editor_heading
padding-left: 15px
margin-left: 2px
padding-left: 15px
margin-left: 2px
#mailpoet_editor_main_wrapper
border: 1px solid $content-border-color
border-left: 0
position: relative
min-width: 1050px
border: 1px solid $content-border-color
border-left: 0
position: relative
min-width: 1050px
#mailpoet_editor_content_container
width: 100%
padding-right: $sidebar-width
box-sizing: border-box
width: 100%
padding-right: $sidebar-width
box-sizing: border-box
#mailpoet_editor_sidebar
float: right
width: $sidebar-width
box-sizing: border-box
float: right
width: $sidebar-width
box-sizing: border-box
.mailpoet_newsletter_wrapper
max-width: $newsletter-width
width: $newsletter-width
margin: auto
position: relative
max-width: $newsletter-width
width: $newsletter-width
margin: auto
position: relative

117
assets/css/src/newsletter_editor/libraryOverrides.styl
View File

@ -1,119 +1,118 @@
/* Fix select2 z-index to work with MailPoet.Modal */
.select2-drop
z-index: 101000
z-index: 101000
/* Remove input field styles from select2 type input */
.select2-container
border: none
padding: 0
border: none
padding: 0
/* Fix inline TinyMCE toolbar to have minimal width instead of being close to 100% of the screen */
div.mce-toolbar-grp.mce-container
position: absolute
position: absolute
.mce-tinymce.mce-tinymce-inline
border-radius(3px)
background-color: $primary-background-color
border: 1px solid $content-border-color
box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
border-radius(3px)
background-color: $primary-background-color
border: 1px solid $content-border-color
box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
.mce-window
/* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
div.mce-container-body.mce-abs-layout
overflow: hidden
/* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
div.mce-container-body.mce-abs-layout
overflow: hidden
/* Fix TinyMCE popup window's close button to not be covered by draggable section */
.mce-window-head div.mce-dragh
width: -webkit-calc( 100% - 36px )
width: calc( 100% - 36px )
/* Fix TinyMCE popup window's close button to not be covered by draggable section */
.mce-window-head div.mce-dragh
width: -webkit-calc( 100% - 36px )
width: calc( 100% - 36px )
/* TinyMCE mailpoet_custom_fields toolbar icon */
.mce-i-mailpoet_custom_fields:before
font: 400 20px/1 dashicons!important
content: "\f307"
font: 400 20px/1 dashicons!important
content: "\f307"
/* TinyMCE remove active border from the editor */
.mce-edit-focus
outline: none
outline: none
/* Style "No search term specified" in TinyMCE link editor */
#wp-link li, #wp-link div.query-notice
clear: both
margin-bottom: 0
border-bottom: 1px solid #f1f1f1
color: #333
padding: 4px 6px
cursor: pointer
position: relative
clear: both
margin-bottom: 0
border-bottom: 1px solid #f1f1f1
color: #333
padding: 4px 6px
cursor: pointer
position: relative
/* Remove empty space between WP admin sidebar and content */
#wpbody-content > *
margin-left: 20px
margin-left: 20px
#wpbody-content > .wrap
margin-left: 0
margin-left: 0
#wpcontent
margin-left: 160px
padding-left: 0
margin-left: 160px
padding-left: 0
.folded &
margin-left: 36px
.folded &
margin-left: 36px
.wrap
margin-left: 0
margin-right: 0
margin-left: 0
margin-right: 0
/* Reduce WP admin bar z-index in order for TinyMCE toolbar to be visible */
#wpadminbar
z-index: 50000
z-index: 50000
/* Allow horizontal scrolling on smaller (tablet/phone) sized screens */
body
overflow-x: auto
overflow-x: auto
/* Hide the "Details" section of Wordpress Media manager */
.media-sidebar
display: none
display: none
#mailpoet-media-manager
.attachments-browser .attachments
.attachments-browser .uploader-inline
margin-right: 0
.attachments-browser .attachments
.attachments-browser .uploader-inline
margin-right: 0
.attachments-browser .attachments
.attachments-browser .media-toolbar
.attachments-browser .uploader-inline
right: 0
.attachments-browser .attachments
.attachments-browser .media-toolbar
.attachments-browser .uploader-inline
right: 0
/* Remove max width from date selector in Wordpress Media Manager */
#media-attachment-date-filters
max-width: calc(100% - 12px)
max-width: calc(100% - 12px)
/* Alter Spectrum color picker to leave only the color preview, without arrows */
.sp-replacer
border-radius(3px)
padding: 0
border: 0
box-shadow(1px 2px darken($primary-background-color, 13%))
border-radius(3px)
padding: 0
border: 0
box-shadow(1px 2px darken($primary-background-color, 13%))
.sp-preview
border-width: 0
margin-right: 0
width: 25px
height: 25px
border-width: 0
margin-right: 0
width: 25px
height: 25px
.sp-dd
display: none
display: none
/* Sidepanel overrides */
.mailpoet_panel_body
margin: 19px
padding: 0
margin: 19px
padding: 0
.mailpoet_panel_wrapper
background-color: $primary-background-color
border: 1px solid $content-border-color
background-color: $primary-background-color
border: 1px solid $content-border-color
#mailpoet_modal_close
display: none
display: none

6
assets/css/src/newsletter_editor/mixins/border-radius.styl
View File

@ -1,4 +1,4 @@
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

7
assets/css/src/newsletter_editor/mixins/box-shadow.styl
View File

@ -1,5 +1,4 @@
box-shadow()
-webkit-box-shadow: arguments
-moz-box-shadow: arguments
box-shadow: arguments
-webkit-box-shadow: arguments
-moz-box-shadow: arguments
box-shadow: arguments

8
assets/css/src/newsletter_editor/mixins/filter-shadow.styl
View File

@ -1,5 +1,5 @@
filter-shadow(offset-x, offset-y, blur-radius=0px, color=#ff0000)
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color)
-webkit-filter: drop-shadow(offset-x offset-y blur-radius color)
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color)
filter: drop-shadow(offset-x offset-y blur-radius color)
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color)
-webkit-filter: drop-shadow(offset-x offset-y blur-radius color)
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color)
filter: drop-shadow(offset-x offset-y blur-radius color)

1
assets/css/src/newsletter_editor/variables.styl
View File

@ -23,5 +23,4 @@ $warning-alternate-text-color = #f4c6c8
$error-text-color = #d54e21
// Dimensions
$newsletter-width = 600px

1
assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
View File

@ -20,5 +20,4 @@ define('newsletter_editor/behaviors/ColorPickerBehavior', [
});
},
});
});

1
assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
View File

@ -424,5 +424,4 @@ define('newsletter_editor/behaviors/ContainerDropZoneBehavior', [
return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
},
});
});

207
assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
View File

@ -11,122 +11,121 @@ define('newsletter_editor/behaviors/DraggableBehavior', [
], function(Marionette, BehaviorsLookup, interact) {
BehaviorsLookup.DraggableBehavior = Marionette.Behavior.extend({
defaults: {
cloneOriginal: false,
hideOriginal: false,
ignoreSelector: '.mailpoet_ignore_drag, .mailpoet_ignore_drag *',
onDragSubstituteBy: undefined,
/**
* Constructs a model that will be passed to the receiver on drop
*
* @return Backbone.Model A model that will be passed to the receiver
*/
getDropModel: function() {
throw "Missing 'drop' function for DraggableBehavior";
},
onDrop: function(model, view) {},
testAttachToInstance: function(model, view) { return true; },
defaults: {
cloneOriginal: false,
hideOriginal: false,
ignoreSelector: '.mailpoet_ignore_drag, .mailpoet_ignore_drag *',
onDragSubstituteBy: undefined,
/**
* Constructs a model that will be passed to the receiver on drop
*
* @return Backbone.Model A model that will be passed to the receiver
*/
getDropModel: function() {
throw "Missing 'drop' function for DraggableBehavior";
},
onRender: function() {
var that = this,
interactable;
// Give instances more control over whether Draggable should be applied
if (!this.options.testAttachToInstance(this.view.model, this.view)) return;
onDrop: function(model, view) {},
testAttachToInstance: function(model, view) { return true; },
},
onRender: function() {
var that = this,
interactable;
interactable = interact(this.$el.get(0), {
ignoreFrom: this.options.ignoreSelector,
}).draggable({
// allow dragging of multple elements at the same time
max: Infinity,
// Give instances more control over whether Draggable should be applied
if (!this.options.testAttachToInstance(this.view.model, this.view)) return;
// Scroll when dragging near edges of a window
autoScroll: true,
interactable = interact(this.$el.get(0), {
ignoreFrom: this.options.ignoreSelector,
}).draggable({
// allow dragging of multple elements at the same time
max: Infinity,
onstart: function(event) {
console.log('Drag start', event, this);
// Scroll when dragging near edges of a window
autoScroll: true,
if (that.options.cloneOriginal === true) {
// Use substitution instead of a clone
var tempClone = (_.isFunction(that.options.onDragSubstituteBy)) ? that.options.onDragSubstituteBy(that) : undefined,
// Or use a clone
clone = tempClone ? tempClone : event.target.cloneNode(true),
onstart: function(event) {
console.log('Drag start', event, this);
$original = jQuery(event.target),
$clone = jQuery(clone),
centerXOffset, centerYOffset, parentOffset;
if (that.options.cloneOriginal === true) {
// Use substitution instead of a clone
var tempClone = (_.isFunction(that.options.onDragSubstituteBy)) ? that.options.onDragSubstituteBy(that) : undefined,
// Or use a clone
clone = tempClone ? tempClone : event.target.cloneNode(true),
$clone.addClass('mailpoet_droppable_active');
$clone.css('position', 'absolute');
$clone.css('top', 0);
$clone.css('left', 0);
document.body.appendChild(clone);
$original = jQuery(event.target),
$clone = jQuery(clone),
centerXOffset, centerYOffset, parentOffset;
// Position the clone over the target element with a slight
// offset to center the clone under the mouse cursor.
// Accurate dimensions can only be taken after insertion to document
centerXOffset = $clone.width() / 2;
centerYOffset = $clone.height() / 2;
$clone.css('top', event.pageY - centerYOffset);
$clone.css('left', event.pageX - centerXOffset);
$clone.addClass('mailpoet_droppable_active');
$clone.css('position', 'absolute');
$clone.css('top', 0);
$clone.css('left', 0);
document.body.appendChild(clone);
event.interaction.element = clone;
// Position the clone over the target element with a slight
// offset to center the clone under the mouse cursor.
// Accurate dimensions can only be taken after insertion to document
centerXOffset = $clone.width() / 2;
centerYOffset = $clone.height() / 2;
$clone.css('top', event.pageY - centerYOffset);
$clone.css('left', event.pageX - centerXOffset);
event.interaction.element = clone;
if (that.options.hideOriginal === true) {
that.view.$el.addClass('mailpoet_hidden');
}
}
},
// call this function on every dragmove event
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function (event) {
var target = event.target;
target.style.webkitTransform = target.style.transform = '';
target.removeAttribute('data-x');
target.removeAttribute('data-y');
jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
if (that.options.cloneOriginal === true) {
jQuery(target).remove();
if (that.options.hideOriginal === true) {
that.view.$el.removeClass('mailpoet_hidden');
}
}
},
}).preventDefault('auto');
if (this.options.drop !== undefined) {
interactable.getDropModel = this.options.drop;
} else {
interactable.getDropModel = this.view.getDropFunc();
if (that.options.hideOriginal === true) {
that.view.$el.addClass('mailpoet_hidden');
}
}
interactable.onDrop = function(options) {
if (_.isObject(options)) {
// Inject Draggable behavior if possible
options.dragBehavior = that;
}
// Delegate to view's event handler
that.options.onDrop.apply(that, [options]);
};
},
});
},
// call this function on every dragmove event
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function (event) {
var target = event.target;
target.style.webkitTransform = target.style.transform = '';
target.removeAttribute('data-x');
target.removeAttribute('data-y');
jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
if (that.options.cloneOriginal === true) {
jQuery(target).remove();
if (that.options.hideOriginal === true) {
that.view.$el.removeClass('mailpoet_hidden');
}
}
},
}).preventDefault('auto');
if (this.options.drop !== undefined) {
interactable.getDropModel = this.options.drop;
} else {
interactable.getDropModel = this.view.getDropFunc();
}
interactable.onDrop = function(options) {
if (_.isObject(options)) {
// Inject Draggable behavior if possible
options.dragBehavior = that;
}
// Delegate to view's event handler
that.options.onDrop.apply(that, [options]);
};
},
});
});

103
assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
View File

@ -10,60 +10,59 @@ define('newsletter_editor/behaviors/ResizableBehavior', [
], function(Marionette, BehaviorsLookup, interact) {
BehaviorsLookup.ResizableBehavior = Marionette.Behavior.extend({
defaults: {
elementSelector: null,
resizeHandleSelector: true, // true will use edges of the element itself
transformationFunction: function(y) { return y; },
minLength: 0,
modelField: 'styles.block.height',
},
events: {
"mouseenter": 'showResizeHandle',
"mouseleave": 'hideResizeHandle',
},
onRender: function() {
this.attachResize();
defaults: {
elementSelector: null,
resizeHandleSelector: true, // true will use edges of the element itself
transformationFunction: function(y) { return y; },
minLength: 0,
modelField: 'styles.block.height',
},
events: {
"mouseenter": 'showResizeHandle',
"mouseleave": 'hideResizeHandle',
},
onRender: function() {
this.attachResize();
if (this.isBeingResized !== true) {
this.hideResizeHandle();
}
},
attachResize: function() {
var domElement = (this.options.elementSelector === null) ? this.view.$el.get(0) : this.view.$(this.options.elementSelector).get(0),
that = this;
interact(domElement).resizable({
//axis: 'y',
edges: {
top: false,
left: false,
right: false,
bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector,
},
}).on('resizestart', function(event) {
that.isBeingResized = true;
that.$el.addClass('mailpoet_resize_active');
}).on('resizemove', function(event) {
var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
newLength = currentLength + that.options.transformationFunction(event.dy);
if (this.isBeingResized !== true) {
this.hideResizeHandle();
}
},
attachResize: function() {
var domElement = (this.options.elementSelector === null) ? this.view.$el.get(0) : this.view.$(this.options.elementSelector).get(0),
that = this;
interact(domElement).resizable({
//axis: 'y',
edges: {
top: false,
left: false,
right: false,
bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector,
},
}).on('resizestart', function(event) {
that.isBeingResized = true;
that.$el.addClass('mailpoet_resize_active');
}).on('resizemove', function(event) {
var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
newLength = currentLength + that.options.transformationFunction(event.dy);
if (newLength < that.options.minLength) newLength = that.options.minLength;
if (newLength < that.options.minLength) newLength = that.options.minLength;
that.view.model.set(that.options.modelField, newLength + 'px');
}).on('resizeend', function(event) {
that.isBeingResized = null;
that.$el.removeClass('mailpoet_resize_active');
});
},
showResizeHandle: function() {
if (typeof this.options.resizeHandleSelector === 'string') {
this.view.$(this.options.resizeHandleSelector).removeClass('mailpoet_hidden');
}
},
hideResizeHandle: function() {
if (typeof this.options.resizeHandleSelector === 'string') {
this.view.$(this.options.resizeHandleSelector).addClass('mailpoet_hidden');
}
},
that.view.model.set(that.options.modelField, newLength + 'px');
}).on('resizeend', function(event) {
that.isBeingResized = null;
that.$el.removeClass('mailpoet_resize_active');
});
},
showResizeHandle: function() {
if (typeof this.options.resizeHandleSelector === 'string') {
this.view.$(this.options.resizeHandleSelector).removeClass('mailpoet_hidden');
}
},
hideResizeHandle: function() {
if (typeof this.options.resizeHandleSelector === 'string') {
this.view.$(this.options.resizeHandleSelector).addClass('mailpoet_hidden');
}
},
});
});

47
assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
View File

@ -9,32 +9,31 @@ define('newsletter_editor/behaviors/SortableBehavior', [
], function(Marionette, BehaviorsLookup) {
BehaviorsLookup.SortableBehavior = Marionette.Behavior.extend({
onRender: function() {
var collection = this.view.collection;
onRender: function() {
var collection = this.view.collection;
if (_.isFunction(this.$el.sortable)) {
this.$el.sortable({
cursor: "move",
start: function(event, ui) {
ui.item.data('previousIndex', ui.item.index());
},
end: function(event, ui) {
ui.item.removeData('previousIndex');
},
update: function(event, ui) {
var previousIndex = ui.item.data('previousIndex'),
newIndex = ui.item.index(),
model = collection.at(previousIndex);
if (_.isFunction(this.$el.sortable)) {
this.$el.sortable({
cursor: "move",
start: function(event, ui) {
ui.item.data('previousIndex', ui.item.index());
},
end: function(event, ui) {
ui.item.removeData('previousIndex');
},
update: function(event, ui) {
var previousIndex = ui.item.data('previousIndex'),
newIndex = ui.item.index(),
model = collection.at(previousIndex);
// Replicate DOM changes. Move target model to a new position
// within the collection
collection.remove(model);
collection.add(model, { at: newIndex });
},
items: this.options.items,
});
}
// Replicate DOM changes. Move target model to a new position
// within the collection
collection.remove(model);
collection.add(model, { at: newIndex });
},
items: this.options.items,
});
}
}
});
});

607
assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
View File

@ -14,327 +14,326 @@ define('newsletter_editor/blocks/automatedLatestContent', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.automatedLatestContent", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
stale: ['_container'],
defaults: function() {
return this._getDefaults({
type: 'automatedLatestContent',
amount: '5',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
terms: [], // List of category and tag objects
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imagePadded: true, // true|false
//imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Categories:',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Read more', // 'link'|'button'
readMoreButton: {
text: 'Read more',
url: '[postLink]'
},
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {},
_container: new (App.getBlockTypeModel('container'))(),
}, EditorApplication.getConfig().get('blockDefaults.automatedLatestContent'));
Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
stale: ['_container'],
defaults: function() {
return this._getDefaults({
type: 'automatedLatestContent',
amount: '5',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
terms: [], // List of category and tag objects
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imagePadded: true, // true|false
//imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Categories:',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Read more', // 'link'|'button'
readMoreButton: {
text: 'Read more',
url: '[postLink]'
},
relations: function() {
return {
readMoreButton: App.getBlockTypeModel('button'),
divider: App.getBlockTypeModel('divider'),
_container: App.getBlockTypeModel('container'),
};
},
initialize: function() {
base.BlockModel.prototype.initialize.apply(this);
this.fetchPosts();
this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:titlePosition change:titleAlignment change:titleIsLink change:imagePadded change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
this.listenTo(this.get('divider'), 'change', this._scheduleFetchPosts);
},
fetchPosts: function() {
var that = this;
// TODO: Migrate to new AJAX queries
//mailpoet_post_wpi('automated_latest_content.php', this.toJSON(), function(response) {
//console.log('ALC fetched', arguments);
//that.get('_container').get('blocks').reset(response, {parse: true});
//}, function() {
//console.log('ALC fetchPosts error', arguments);
//});
},
/**
* Batch more changes during a specific time, instead of fetching
* ALC posts on each model change
*/
_scheduleFetchPosts: function() {
var timeout = 2000,
that = this;
if (this._fetchPostsTimer !== undefined) {
clearTimeout(this._fetchPostsTimer);
}
this._fetchPostsTimer = setTimeout(function() {
that.fetchPosts();
that._fetchPostsTimer = undefined;
}, timeout);
},
});
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {},
_container: new (App.getBlockTypeModel('container'))(),
}, EditorApplication.getConfig().get('blockDefaults.automatedLatestContent'));
},
relations: function() {
return {
readMoreButton: App.getBlockTypeModel('button'),
divider: App.getBlockTypeModel('divider'),
_container: App.getBlockTypeModel('container'),
};
},
initialize: function() {
base.BlockModel.prototype.initialize.apply(this);
this.fetchPosts();
this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:titlePosition change:titleAlignment change:titleIsLink change:imagePadded change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
this.listenTo(this.get('divider'), 'change', this._scheduleFetchPosts);
},
fetchPosts: function() {
var that = this;
// TODO: Migrate to new AJAX queries
//mailpoet_post_wpi('automated_latest_content.php', this.toJSON(), function(response) {
//console.log('ALC fetched', arguments);
//that.get('_container').get('blocks').reset(response, {parse: true});
//}, function() {
//console.log('ALC fetchPosts error', arguments);
//});
},
/**
* Batch more changes during a specific time, instead of fetching
* ALC posts on each model change
*/
_scheduleFetchPosts: function() {
var timeout = 2000,
that = this;
if (this._fetchPostsTimer !== undefined) {
clearTimeout(this._fetchPostsTimer);
}
this._fetchPostsTimer = setTimeout(function() {
that.fetchPosts();
that._fetchPostsTimer = undefined;
}, timeout);
},
});
Module.AutomatedLatestContentBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
getTemplate: function() { return templates.automatedLatestContentBlock; },
regions: {
toolsRegion: '.mailpoet_tools',
postsRegion: '.mailpoet_automated_latest_content_block_posts',
},
onDragSubstituteBy: function() { return Module.AutomatedLatestContentWidgetView; },
onRender: function() {
var ContainerView = App.getBlockTypeView('container'),
renderOptions = {
disableTextEditor: true,
disableDragAndDrop: true,
};
this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.postsRegion.show(new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
},
});
Module.AutomatedLatestContentBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
getTemplate: function() { return templates.automatedLatestContentBlock; },
regions: {
toolsRegion: '.mailpoet_tools',
postsRegion: '.mailpoet_automated_latest_content_block_posts',
},
onDragSubstituteBy: function() { return Module.AutomatedLatestContentWidgetView; },
onRender: function() {
var ContainerView = App.getBlockTypeView('container'),
renderOptions = {
disableTextEditor: true,
disableDragAndDrop: true,
};
this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.postsRegion.show(new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
},
});
Module.AutomatedLatestContentBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.AutomatedLatestContentBlockSettingsView; },
});
Module.AutomatedLatestContentBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.AutomatedLatestContentBlockSettingsView; },
});
// Sidebar view container
Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
events: function() {
return {
"click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
"click .mailpoet_automated_latest_content_show_display_options": 'toggleDisplayOptions',
"click .mailpoet_automated_latest_content_select_button": 'showButtonSettings',
"click .mailpoet_automated_latest_content_select_divider": 'showDividerSettings',
"change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
"change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
"change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
"change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
"change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
"keyup .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
"change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
"change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
"change .mailpoet_automated_latest_content_title_position": _.partial(this.changeField, "titlePosition"),
"change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
"change .mailpoet_automated_latest_content_image_padded": _.partial(this.changeBoolField, "imagePadded"),
"change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
"keyup .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
"change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
"keyup .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
"keyup .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
"change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
onRender: function() {
var that = this;
// Sidebar view container
Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
events: function() {
return {
"click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
"click .mailpoet_automated_latest_content_show_display_options": 'toggleDisplayOptions',
"click .mailpoet_automated_latest_content_select_button": 'showButtonSettings',
"click .mailpoet_automated_latest_content_select_divider": 'showDividerSettings',
"change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
"change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
"change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
"change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
"change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
"keyup .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
"change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
"change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
"change .mailpoet_automated_latest_content_title_position": _.partial(this.changeField, "titlePosition"),
"change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
"change .mailpoet_automated_latest_content_image_padded": _.partial(this.changeBoolField, "imagePadded"),
"change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
"keyup .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
"change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
"keyup .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
"keyup .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
"change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
onRender: function() {
var that = this;
this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
multiple: true,
allowClear: true,
ajax: {
url: App.getConfig().get('urls.termSearch'),
type: 'POST',
dataType: 'json',
delay: 250,
data: function(searchParameter, page) {
return JSON.stringify({
postType: that.model.get('contentType'),
search: searchParameter,
limit: 10, // TODO: Move this hardcoded limit to Config
page: page,
});
},
/**
* Parse results for select2.
* Returns object, where `results` key holds a list of
* select item objects
*/
results: function (data, page) {
return {
results: _.map(
data.results,
function(item) {
return _.defaults({
text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
id: item.term_id
}, item);
}
)
};
}
},
initSelection: function(element, callback) {
// On external data load tell select2 which terms to preselect
callback(_.map(
that.model.get('terms').toJSON(),
function(item) {
return {
id: item.id,
text: item.text,
};
}
));
},
}).trigger( 'change' ).on({
'change': function(e){
var data = $(this).data('selected');
if (typeof data === 'string') {
if (data === '') {
data = [];
} else {
data = JSON.parse(data);
}
}
if ( e.added ){
data.push(e.added);
} else {
data = _.filter(data, function(item) {
return item.id !== e.removed.id;
});
}
// Update ALC model
that.model.set('terms', data);
$(this).data('selected', JSON.stringify(data));
}
this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
multiple: true,
allowClear: true,
ajax: {
url: App.getConfig().get('urls.termSearch'),
type: 'POST',
dataType: 'json',
delay: 250,
data: function(searchParameter, page) {
return JSON.stringify({
postType: that.model.get('contentType'),
search: searchParameter,
limit: 10, // TODO: Move this hardcoded limit to Config
page: page,
});
},
onBeforeDestroy: function() {
// Force close select2 if it hasn't closed yet
this.$('.mailpoet_automated_latest_content_categories_and_tags').select2('close');
},
toggleDisplayOptions: function(event) {
var el = this.$('.mailpoet_automated_latest_content_display_options'),
showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
if (el.hasClass('mailpoet_hidden')) {
el.removeClass('mailpoet_hidden');
showControl.addClass('mailpoet_hidden');
} else {
el.addClass('mailpoet_hidden');
showControl.removeClass('mailpoet_hidden');
}
},
showButtonSettings: function(event) {
var buttonModule = App.module('blocks.button');
(new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
})).render();
},
showDividerSettings: function(event) {
var dividerModule = App.module('blocks.divider');
(new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
})).render();
},
changeReadMoreType: function(event) {
var value = jQuery(event.target).val();
if (value == 'link') {
this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').addClass('mailpoet_hidden');
} else if (value == 'button') {
this.$('.mailpoet_automated_latest_content_read_more_text').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').removeClass('mailpoet_hidden');
}
this.changeField('readMoreType', event);
},
changeDisplayType: function(event) {
var value = jQuery(event.target).val();
if (value == 'titleOnly') {
this.$('.mailpoet_automated_latest_content_title_position_container').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
} else {
this.$('.mailpoet_automated_latest_content_title_position_container').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
},
/**
* Parse results for select2.
* Returns object, where `results` key holds a list of
* select item objects
*/
results: function (data, page) {
return {
results: _.map(
data.results,
function(item) {
return _.defaults({
text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
id: item.term_id
}, item);
}
}
this.changeField('displayType', event);
)
};
}
},
changeTitleFormat: function(event) {
var value = jQuery(event.target).val();
if (value == 'ul') {
this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
initSelection: function(element, callback) {
// On external data load tell select2 which terms to preselect
this.model.set('titleIsLink', true);
this.$('.mailpoet_automated_latest_content_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_links').val(['true']);
callback(_.map(
that.model.get('terms').toJSON(),
function(item) {
return {
id: item.id,
text: item.text,
};
}
));
},
}).trigger( 'change' ).on({
'change': function(e){
var data = $(this).data('selected');
if (typeof data === 'string') {
if (data === '') {
data = [];
} else {
this.$('.mailpoet_automated_latest_content_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
data = JSON.parse(data);
}
this.changeField('titleFormat', event);
}
if ( e.added ){
data.push(e.added);
} else {
data = _.filter(data, function(item) {
return item.id !== e.removed.id;
});
}
// Update ALC model
that.model.set('terms', data);
$(this).data('selected', JSON.stringify(data));
}
});
},
onBeforeDestroy: function() {
// Force close select2 if it hasn't closed yet
this.$('.mailpoet_automated_latest_content_categories_and_tags').select2('close');
},
toggleDisplayOptions: function(event) {
var el = this.$('.mailpoet_automated_latest_content_display_options'),
showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
if (el.hasClass('mailpoet_hidden')) {
el.removeClass('mailpoet_hidden');
showControl.addClass('mailpoet_hidden');
} else {
el.addClass('mailpoet_hidden');
showControl.removeClass('mailpoet_hidden');
}
},
showButtonSettings: function(event) {
var buttonModule = App.module('blocks.button');
(new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
});
Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.automatedLatestContentInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.AutomatedLatestContentBlockModel({}, { parse: true });
}
}
})).render();
},
showDividerSettings: function(event) {
var dividerModule = App.module('blocks.divider');
(new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
})).render();
},
changeReadMoreType: function(event) {
var value = jQuery(event.target).val();
if (value == 'link') {
this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').addClass('mailpoet_hidden');
} else if (value == 'button') {
this.$('.mailpoet_automated_latest_content_read_more_text').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_select_button').removeClass('mailpoet_hidden');
}
this.changeField('readMoreType', event);
},
changeDisplayType: function(event) {
var value = jQuery(event.target).val();
if (value == 'titleOnly') {
this.$('.mailpoet_automated_latest_content_title_position_container').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
} else {
this.$('.mailpoet_automated_latest_content_title_position_container').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
}
}
this.changeField('displayType', event);
},
changeTitleFormat: function(event) {
var value = jQuery(event.target).val();
if (value == 'ul') {
this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
this.$('.mailpoet_automated_latest_content_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_links').val(['true']);
} else {
this.$('.mailpoet_automated_latest_content_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event);
},
});
Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.automatedLatestContentInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.AutomatedLatestContentBlockModel({}, { parse: true });
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('automatedLatestContent', {
blockModel: Module.AutomatedLatestContentBlockModel,
blockView: Module.AutomatedLatestContentBlockView,
});
App.on('before:start', function() {
App.registerBlockType('automatedLatestContent', {
blockModel: Module.AutomatedLatestContentBlockModel,
blockView: Module.AutomatedLatestContentBlockView,
});
App.registerWidget({
name: 'automatedLatestContent',
widgetView: Module.AutomatedLatestContentWidgetView,
priority: 97,
});
App.registerWidget({
name: 'automatedLatestContent',
widgetView: Module.AutomatedLatestContentWidgetView,
priority: 97,
});
});
});
});

383
assets/js/src/newsletter_editor/blocks/base.js
View File

@ -13,207 +13,206 @@ define('newsletter_editor/blocks/base', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.base", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var AugmentedView = Marionette.LayoutView.extend({});
var AugmentedView = Marionette.LayoutView.extend({});
Module.BlockModel = Backbone.SuperModel.extend({
stale: [], // Attributes to be removed upon saving
initialize: function() {
var that = this;
this.on('change', function() {
App.getChannel().trigger('autoSave');
});
},
_getDefaults: function(blockDefaults, configDefaults) {
var defaults = (_.isObject(configDefaults) && _.isFunction(configDefaults.toJSON)) ? configDefaults.toJSON() : configDefaults;
Module.BlockModel = Backbone.SuperModel.extend({
stale: [], // Attributes to be removed upon saving
initialize: function() {
var that = this;
this.on('change', function() {
App.getChannel().trigger('autoSave');
});
},
_getDefaults: function(blockDefaults, configDefaults) {
var defaults = (_.isObject(configDefaults) && _.isFunction(configDefaults.toJSON)) ? configDefaults.toJSON() : configDefaults;
// Patch the resulting JSON object and fix it's constructors to be Object.
// Otherwise Backbone.SuperModel interprets it not as a simpleObject
// and misbehaves
// TODO: Investigate for a better solution
return JSON.parse(JSON.stringify(jQuery.extend(blockDefaults, defaults || {})));
},
toJSON: function() {
// Remove stale attributes from resulting JSON object
return _.omit(Backbone.SuperModel.prototype.toJSON.call(this), this.stale);
},
});
// Patch the resulting JSON object and fix it's constructors to be Object.
// Otherwise Backbone.SuperModel interprets it not as a simpleObject
// and misbehaves
// TODO: Investigate for a better solution
return JSON.parse(JSON.stringify(jQuery.extend(blockDefaults, defaults || {})));
},
toJSON: function() {
// Remove stale attributes from resulting JSON object
return _.omit(Backbone.SuperModel.prototype.toJSON.call(this), this.stale);
},
});
Module.BlockView = AugmentedView.extend({
regions: {
toolsRegion: '> .mailpoet_tools',
Module.BlockView = AugmentedView.extend({
regions: {
toolsRegion: '> .mailpoet_tools',
},
modelEvents: {
'change': 'render',
},
events: {
"mouseenter": "showTools",
"mouseleave": "hideTools",
},
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
modelEvents: {
'change': 'render',
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
events: {
"mouseenter": "showTools",
"mouseleave": "hideTools",
},
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
constructor: function() {
AugmentedView.apply(this, arguments);
this.$el.addClass('mailpoet_editor_view_' + this.cid);
},
showTools: function(_event) {
if (!this.showingToolsDisabled) {
this.$('> .mailpoet_tools').show();
this.toolsView.triggerMethod('showTools');
}
},
hideTools: function(e) {
this.$('> .mailpoet_tools').hide();
this.toolsView.triggerMethod('hideTools');
},
enableShowingTools: function() {
this.showingToolsDisabled = false;
},
disableShowingTools: function() {
this.showingToolsDisabled = true;
this.hideTools();
},
/**
* Defines drop behavior of BlockView instance
*/
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
//that.model.destroy();
return newModel;
};
},
});
},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
constructor: function() {
AugmentedView.apply(this, arguments);
this.$el.addClass('mailpoet_editor_view_' + this.cid);
},
showTools: function(_event) {
if (!this.showingToolsDisabled) {
this.$('> .mailpoet_tools').show();
this.toolsView.triggerMethod('showTools');
}
},
hideTools: function(e) {
this.$('> .mailpoet_tools').hide();
this.toolsView.triggerMethod('hideTools');
},
enableShowingTools: function() {
this.showingToolsDisabled = false;
},
disableShowingTools: function() {
this.showingToolsDisabled = true;
this.hideTools();
},
/**
* Defines drop behavior of BlockView instance
*/
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
//that.model.destroy();
return newModel;
};
},
});
Module.BlockToolsView = AugmentedView.extend({
getTemplate: function() { return templates.genericBlockTools; },
events: {
"click .mailpoet_edit_block": "changeSettings",
"click .mailpoet_delete_block_activate": "showDeletionConfirmation",
"click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
"click .mailpoet_delete_block_confirm": "deleteBlock",
},
// Markers of whether these particular tools will be used for this instance
tools: {
settings: true,
delete: true,
move: true,
},
getSettingsView: function() { return Module.BlockSettingsView; },
initialize: function(options) {
options = options || {};
if (!_.isUndefined(options.tools)) {
// Make a new block specific tool config object
this.tools = jQuery.extend({}, this.tools, options.tools || {});
}
Module.BlockToolsView = AugmentedView.extend({
getTemplate: function() { return templates.genericBlockTools; },
events: {
"click .mailpoet_edit_block": "changeSettings",
"click .mailpoet_delete_block_activate": "showDeletionConfirmation",
"click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
"click .mailpoet_delete_block_confirm": "deleteBlock",
},
// Markers of whether these particular tools will be used for this instance
tools: {
settings: true,
delete: true,
move: true,
},
getSettingsView: function() { return Module.BlockSettingsView; },
initialize: function(options) {
options = options || {};
if (!_.isUndefined(options.tools)) {
// Make a new block specific tool config object
this.tools = jQuery.extend({}, this.tools, options.tools || {});
}
// Automatically cancel deletion
this.on('hideTools', this.hideDeletionConfirmation, this);
// Automatically cancel deletion
this.on('hideTools', this.hideDeletionConfirmation, this);
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
tools: this.tools,
};
},
changeSettings: function() {
var ViewType = this.getSettingsView();
(new ViewType({ model: this.model })).render();
},
showDeletionConfirmation: function() {
this.$('.mailpoet_delete_block').addClass('mailpoet_delete_block_activated');
},
hideDeletionConfirmation: function() {
this.$('.mailpoet_delete_block').removeClass('mailpoet_delete_block_activated');
},
deleteBlock: function(event) {
event.preventDefault();
this.model.destroy();
return false;
}
});
Module.BlockSettingsView = Marionette.LayoutView.extend({
className: 'mailpoet_editor_settings',
initialize: function() {
var that = this;
MailPoet.Modal.panel({
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
onCancel: function() {
that.destroy();
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
tools: this.tools,
};
},
changeSettings: function() {
var ViewType = this.getSettingsView();
(new ViewType({ model: this.model })).render();
},
showDeletionConfirmation: function() {
this.$('.mailpoet_delete_block').addClass('mailpoet_delete_block_activated');
},
hideDeletionConfirmation: function() {
this.$('.mailpoet_delete_block').removeClass('mailpoet_delete_block_activated');
},
deleteBlock: function(event) {
event.preventDefault();
this.model.destroy();
return false;
});
},
close: function(event) {
MailPoet.Modal.cancel();
this.destroy();
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
changePixelField: function(field, event) {
this.changeFieldWithSuffix(field, event, 'px');
},
changeFieldWithSuffix: function(field, event, suffix) {
this.model.set(field, jQuery(event.target).val() + suffix);
},
changeBoolField: function(field, event) {
this.model.set(field, (jQuery(event.target).val() === 'true') ? true : false);
},
changeColorField: function(field, event) {
var value = jQuery(event.target).val();
if (value === '') {
value = 'transparent';
}
this.model.set(field, value);
},
});
Module.WidgetView = Marionette.ItemView.extend({
className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {
drop: function() {
throw "Unsupported operation";
}
});
Module.BlockSettingsView = Marionette.LayoutView.extend({
className: 'mailpoet_editor_settings',
initialize: function() {
var that = this;
MailPoet.Modal.panel({
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
onCancel: function() {
that.destroy();
},
});
},
close: function(event) {
MailPoet.Modal.cancel();
this.destroy();
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
changePixelField: function(field, event) {
this.changeFieldWithSuffix(field, event, 'px');
},
changeFieldWithSuffix: function(field, event, suffix) {
this.model.set(field, jQuery(event.target).val() + suffix);
},
changeBoolField: function(field, event) {
this.model.set(field, (jQuery(event.target).val() === 'true') ? true : false);
},
changeColorField: function(field, event) {
var value = jQuery(event.target).val();
if (value === '') {
value = 'transparent';
}
this.model.set(field, value);
},
});
Module.WidgetView = Marionette.ItemView.extend({
className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {
drop: function() {
throw "Unsupported operation";
}
}
},
});
}
},
});
});
});

285
assets/js/src/newsletter_editor/blocks/button.js
View File

@ -9,154 +9,153 @@ define('newsletter_editor/blocks/button', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.button", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.ButtonBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'button',
text: 'Button',
url: 'http://google.com',
styles: {
block: {
backgroundColor: '#ff0000',
borderColor: '#cccccc',
borderWidth: '1px',
borderRadius: '4px',
borderStyle: 'solid',
width: '200px',
lineHeight: '40px',
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '16px',
textAlign: 'center',
},
},
}, EditorApplication.getConfig().get('blockDefaults.button'));
Module.ButtonBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'button',
text: 'Button',
url: 'http://google.com',
styles: {
block: {
backgroundColor: '#ff0000',
borderColor: '#cccccc',
borderWidth: '1px',
borderRadius: '4px',
borderStyle: 'solid',
width: '200px',
lineHeight: '40px',
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '16px',
textAlign: 'center',
},
},
}, EditorApplication.getConfig().get('blockDefaults.button'));
},
});
Module.ButtonBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
getTemplate: function() { return templates.buttonBlock; },
modelEvents: {
'change': 'render',
},
onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
var that = this;
// Listen for attempts to change all dividers in one go
this._replaceButtonStylesHandler = function(data) { that.model.set(data); };
App.getChannel().on('replaceAllButtonStyles', this._replaceButtonStylesHandler);
},
onRender: function() {
this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
});
Module.ButtonBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ButtonBlockSettingsView; },
});
Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.buttonBlockSettings; },
events: function() {
return {
"keyup .mailpoet_field_button_text": _.partial(this.changeField, "text"),
"keyup .mailpoet_field_button_url": _.partial(this.changeField, "url"),
"change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
"change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
"change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
"change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
"change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
"input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"keyup .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"change .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"keyup .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"change .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"keyup .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"change .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"keyup .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"click .mailpoet_field_button_replace_all_styles": "applyToAll",
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
initialize: function(params) {
var panelParams = {
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
};
this.renderOptions = params.renderOptions || {};
if (this.renderOptions.displayFormat === 'subpanel') {
MailPoet.Modal.subpanel(panelParams);
} else {
MailPoet.Modal.panel(panelParams);
}
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
},
applyToAll: function() {
App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));
},
updateValueAndCall: function(fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event);
},
});
Module.ButtonWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.buttonInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ButtonBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('button', {
blockModel: Module.ButtonBlockModel,
blockView: Module.ButtonBlockView,
});
Module.ButtonBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
getTemplate: function() { return templates.buttonBlock; },
modelEvents: {
'change': 'render',
},
onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
var that = this;
// Listen for attempts to change all dividers in one go
this._replaceButtonStylesHandler = function(data) { that.model.set(data); };
App.getChannel().on('replaceAllButtonStyles', this._replaceButtonStylesHandler);
},
onRender: function() {
this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
});
Module.ButtonBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ButtonBlockSettingsView; },
});
Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.buttonBlockSettings; },
events: function() {
return {
"keyup .mailpoet_field_button_text": _.partial(this.changeField, "text"),
"keyup .mailpoet_field_button_url": _.partial(this.changeField, "url"),
"change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
"change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
"change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
"change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
"change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
"input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"keyup .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"change .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"keyup .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
"input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"change .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"keyup .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
"input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"change .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"keyup .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
"click .mailpoet_field_button_replace_all_styles": "applyToAll",
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
initialize: function(params) {
var panelParams = {
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
};
this.renderOptions = params.renderOptions || {};
if (this.renderOptions.displayFormat === 'subpanel') {
MailPoet.Modal.subpanel(panelParams);
} else {
MailPoet.Modal.panel(panelParams);
}
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
},
applyToAll: function() {
App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));
},
updateValueAndCall: function(fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event);
},
});
Module.ButtonWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.buttonInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ButtonBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('button', {
blockModel: Module.ButtonBlockModel,
blockView: Module.ButtonBlockView,
});
App.registerWidget({
name: 'button',
widgetView: Module.ButtonWidgetView,
priority: 92,
});
App.registerWidget({
name: 'button',
widgetView: Module.ButtonWidgetView,
priority: 92,
});
});
});
});

649
assets/js/src/newsletter_editor/blocks/container.js
View File

@ -11,338 +11,337 @@ define('newsletter_editor/blocks/container', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.container", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base'),
BlockCollection;
var base = App.module('blocks.base'),
BlockCollection;
Module.ContainerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'container',
orientation: 'vertical',
styles: {
block: {
backgroundColor: 'transparent',
},
},
blocks: new BlockCollection(),
}, EditorApplication.getConfig().get('blockDefaults.container'));
Module.ContainerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'container',
orientation: 'vertical',
styles: {
block: {
backgroundColor: 'transparent',
},
},
parse: function(response) {
// If container has any blocks - add them to a collection
if (response.type === 'container' && _.has(response, 'blocks')) {
response.blocks = new BlockCollection(response.blocks, {
parse: true,
});
}
return response;
},
validate: function() {
// Recursively propagate validation checks to blocks in the tree
var invalidBlock = this.get('blocks').find(function(block) { return !block.isValid(); });
if (invalidBlock) {
return invalidBlock.validationError;
}
},
});
BlockCollection = Backbone.Collection.extend({
model: base.BlockModel,
initialize: function() {
this.on('add change remove', function() { App.getChannel().trigger('autoSave'); });
},
parse: function(response) {
var self = this;
return _.map(response, function(block) {
var Type = App.getBlockTypeModel(block.type);
// TODO: If type has no registered model, use a backup one
return new Type(block, {parse: true});
});
},
});
Module.ContainerBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
getTemplate: function() { return templates.containerBlock; },
childViewContainer: '> .mailpoet_container',
getEmptyView: function() { return Module.ContainerBlockEmptyView; },
emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
modelEvents: {
'change': 'render'
},
events: {
"mouseenter": "showTools",
"mouseleave": "hideTools",
"click .mailpoet_newsletter_layer_selector": "toggleEditingLayer",
},
regions: {
toolsRegion: '> .mailpoet_tools',
},
ui: {
tools: '> .mailpoet_tools'
},
behaviors: {
ContainerDropZoneBehavior: {},
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
testAttachToInstance: function(model, view) {
// Attach Draggable only to layout containers and disable it
// for root and column containers.
return view.renderOptions.depth === 1;
},
},
},
onDragSubstituteBy: function() {
// For two and three column layouts display their respective widgets,
// otherwise always default to one column layout widget
if (this.renderOptions.depth === 1) {
if (this.model.get('blocks').length === 3) return Module.ThreeColumnContainerWidgetView;
if (this.model.get('blocks').length === 2) return Module.TwoColumnContainerWidgetView;
}
return Module.OneColumnContainerWidgetView;
},
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('blocks');
Marionette.CompositeView.apply(this, arguments);
this.$el.addClass('mailpoet_editor_view_' + this.cid);
},
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
// Determines which view type should be used for a child
getChildView: function(model) {
// TODO: If type does not have a type registered, use a generic one
return App.getBlockTypeView(model.get('type'));
},
childViewOptions: function() {
var newRenderOptions = _.clone(this.renderOptions);
if (newRenderOptions.depth !== undefined) {
newRenderOptions.depth += 1;
}
return {
renderOptions: newRenderOptions
};
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
this.toolsView = new Module.ContainerBlockToolsView({
model: this.model,
tools: {
settings: this.renderOptions.depth > 1,
delete: this.renderOptions.depth === 1,
move: this.renderOptions.depth === 1,
layerSelector: this.renderOptions.depth === 1,
},
});
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
},
showTools: function() {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
this.$(this.ui.tools).show();
this.toolsView.triggerMethod('showTools');
}
},
hideTools: function() {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
this.$(this.ui.tools).hide();
this.toolsView.triggerMethod('hideTools');
}
},
toggleEditingLayer: function(event) {
var that = this,
$toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector'),
$overlay = jQuery('.mailpoet_layer_overlay'),
$container = this.$('> .mailpoet_container'),
enableContainerLayer = function() {
that.$el.addClass('mailpoet_container_layer_active');
$toggleButton.addClass('mailpoet_container_layer_active');
$container.addClass('mailpoet_layer_highlight');
$overlay.click(disableContainerLayer);
$overlay.show();
},
disableContainerLayer = function() {
that.$el.removeClass('mailpoet_container_layer_active');
$toggleButton.removeClass('mailpoet_container_layer_active');
$container.removeClass('mailpoet_layer_highlight');
$overlay.hide();
$overlay.off('click');
};
if ($toggleButton.hasClass('mailpoet_container_layer_active')) {
disableContainerLayer();
} else {
enableContainerLayer();
}
event.stopPropagation();
},
_buildRegions: function(regions) {
var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Backbone.Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
that.model.destroy();
return newModel;
};
},
});
Module.ContainerBlockEmptyView = Marionette.ItemView.extend({
getTemplate: function() { return templates.containerEmpty; },
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
templateHelpers: function() {
return {
isRoot: this.renderOptions.depth === 0,
};
},
});
Module.ContainerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ContainerBlockSettingsView; },
});
Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.containerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
});
Module.OneColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.oneColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
]
});
}
}
},
});
Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.twoColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
]
});
}
}
},
});
Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.threeColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
]
});
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('container', {
blockModel: Module.ContainerBlockModel,
blockView: Module.ContainerBlockView,
blocks: new BlockCollection(),
}, EditorApplication.getConfig().get('blockDefaults.container'));
},
parse: function(response) {
// If container has any blocks - add them to a collection
if (response.type === 'container' && _.has(response, 'blocks')) {
response.blocks = new BlockCollection(response.blocks, {
parse: true,
});
}
return response;
},
validate: function() {
// Recursively propagate validation checks to blocks in the tree
var invalidBlock = this.get('blocks').find(function(block) { return !block.isValid(); });
if (invalidBlock) {
return invalidBlock.validationError;
}
},
});
App.registerLayoutWidget({
name: 'oneColumnLayout',
priority: 100,
widgetView: Module.OneColumnContainerWidgetView,
});
BlockCollection = Backbone.Collection.extend({
model: base.BlockModel,
initialize: function() {
this.on('add change remove', function() { App.getChannel().trigger('autoSave'); });
},
parse: function(response) {
var self = this;
return _.map(response, function(block) {
var Type = App.getBlockTypeModel(block.type);
// TODO: If type has no registered model, use a backup one
return new Type(block, {parse: true});
});
},
});
App.registerLayoutWidget({
name: 'twoColumnLayout',
priority: 100,
widgetView: Module.TwoColumnContainerWidgetView,
});
Module.ContainerBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
getTemplate: function() { return templates.containerBlock; },
childViewContainer: '> .mailpoet_container',
getEmptyView: function() { return Module.ContainerBlockEmptyView; },
emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
modelEvents: {
'change': 'render'
},
events: {
"mouseenter": "showTools",
"mouseleave": "hideTools",
"click .mailpoet_newsletter_layer_selector": "toggleEditingLayer",
},
regions: {
toolsRegion: '> .mailpoet_tools',
},
ui: {
tools: '> .mailpoet_tools'
},
behaviors: {
ContainerDropZoneBehavior: {},
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
testAttachToInstance: function(model, view) {
// Attach Draggable only to layout containers and disable it
// for root and column containers.
return view.renderOptions.depth === 1;
},
},
},
onDragSubstituteBy: function() {
// For two and three column layouts display their respective widgets,
// otherwise always default to one column layout widget
if (this.renderOptions.depth === 1) {
if (this.model.get('blocks').length === 3) return Module.ThreeColumnContainerWidgetView;
if (this.model.get('blocks').length === 2) return Module.TwoColumnContainerWidgetView;
}
return Module.OneColumnContainerWidgetView;
App.registerLayoutWidget({
name: 'threeColumnLayout',
priority: 100,
widgetView: Module.ThreeColumnContainerWidgetView,
});
},
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('blocks');
Marionette.CompositeView.apply(this, arguments);
this.$el.addClass('mailpoet_editor_view_' + this.cid);
},
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
// Determines which view type should be used for a child
getChildView: function(model) {
// TODO: If type does not have a type registered, use a generic one
return App.getBlockTypeView(model.get('type'));
},
childViewOptions: function() {
var newRenderOptions = _.clone(this.renderOptions);
if (newRenderOptions.depth !== undefined) {
newRenderOptions.depth += 1;
}
return {
renderOptions: newRenderOptions
};
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
this.toolsView = new Module.ContainerBlockToolsView({
model: this.model,
tools: {
settings: this.renderOptions.depth > 1,
delete: this.renderOptions.depth === 1,
move: this.renderOptions.depth === 1,
layerSelector: this.renderOptions.depth === 1,
},
});
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
},
showTools: function() {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
this.$(this.ui.tools).show();
this.toolsView.triggerMethod('showTools');
}
},
hideTools: function() {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
this.$(this.ui.tools).hide();
this.toolsView.triggerMethod('hideTools');
}
},
toggleEditingLayer: function(event) {
var that = this,
$toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector'),
$overlay = jQuery('.mailpoet_layer_overlay'),
$container = this.$('> .mailpoet_container'),
enableContainerLayer = function() {
that.$el.addClass('mailpoet_container_layer_active');
$toggleButton.addClass('mailpoet_container_layer_active');
$container.addClass('mailpoet_layer_highlight');
$overlay.click(disableContainerLayer);
$overlay.show();
},
disableContainerLayer = function() {
that.$el.removeClass('mailpoet_container_layer_active');
$toggleButton.removeClass('mailpoet_container_layer_active');
$container.removeClass('mailpoet_layer_highlight');
$overlay.hide();
$overlay.off('click');
};
if ($toggleButton.hasClass('mailpoet_container_layer_active')) {
disableContainerLayer();
} else {
enableContainerLayer();
}
event.stopPropagation();
},
_buildRegions: function(regions) {
var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Backbone.Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
that.model.destroy();
return newModel;
};
},
});
Module.ContainerBlockEmptyView = Marionette.ItemView.extend({
getTemplate: function() { return templates.containerEmpty; },
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
templateHelpers: function() {
return {
isRoot: this.renderOptions.depth === 0,
};
},
});
Module.ContainerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ContainerBlockSettingsView; },
});
Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.containerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
});
Module.OneColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.oneColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
]
});
}
}
},
});
Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.twoColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
]
});
}
}
},
});
Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function() { return templates.threeColumnLayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel(),
]
});
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('container', {
blockModel: Module.ContainerBlockModel,
blockView: Module.ContainerBlockView,
});
App.registerLayoutWidget({
name: 'oneColumnLayout',
priority: 100,
widgetView: Module.OneColumnContainerWidgetView,
});
App.registerLayoutWidget({
name: 'twoColumnLayout',
priority: 100,
widgetView: Module.TwoColumnContainerWidgetView,
});
App.registerLayoutWidget({
name: 'threeColumnLayout',
priority: 100,
widgetView: Module.ThreeColumnContainerWidgetView,
});
});
});
});

307
assets/js/src/newsletter_editor/blocks/divider.js
View File

@ -9,165 +9,164 @@ define('newsletter_editor/blocks/divider', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.divider", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.DividerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'divider',
styles: {
block: {
backgroundColor: 'transparent',
padding: '12px',
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '#000000',
},
},
}, EditorApplication.getConfig().get('blockDefaults.divider'));
Module.DividerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'divider',
styles: {
block: {
backgroundColor: 'transparent',
padding: '12px',
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '#000000',
},
},
}, EditorApplication.getConfig().get('blockDefaults.divider'));
},
});
Module.DividerBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
getTemplate: function() { return templates.dividerBlock; },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
behaviors: _.defaults({
ResizableBehavior: {
elementSelector: '.mailpoet_content',
resizeHandleSelector: '.mailpoet_resize_handle',
transformationFunction: function(y) { return y / 2; },
minLength: 0, // TODO: Move this number to editor configuration
modelField: 'styles.block.padding',
},
}, base.BlockView.prototype.behaviors),
onDragSubstituteBy: function() { return Module.DividerWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
var that = this;
// Listen for attempts to change all dividers in one go
this._replaceDividerHandler = function(data) { that.model.set(data); that.model.trigger('applyToAll'); };
App.getChannel().on('replaceAllDividers', this._replaceDividerHandler);
this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
};
},
onRender: function() {
this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
App.getChannel().off('replaceAllDividers', this._replaceDividerHandler);
this.stopListening(this.model);
},
changePadding: function() {
this.$('.mailpoet_content').css('padding-top', this.model.get('styles.block.padding'));
this.$('.mailpoet_content').css('padding-bottom', this.model.get('styles.block.padding'));
this.$('.mailpoet_resize_handle_text').text(parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px');
},
});
Module.DividerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.DividerBlockSettingsView; },
});
Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.dividerBlockSettings; },
events: function() {
return {
"click .mailpoet_field_divider_style": 'changeStyle',
"input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"keyup .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
"change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_button_divider_apply_to_all": "applyToAll",
"click .mailpoet_done_editing": "close",
};
},
modelEvents: function() {
return {
'change:styles.block.borderColor': 'repaintDividerStyleOptions',
};
},
behaviors: {
ColorPickerBehavior: {},
},
initialize: function(params) {
var panelParams = {
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
};
this.renderOptions = params.renderOptions || {};
if (this.renderOptions.displayFormat === 'subpanel') {
MailPoet.Modal.subpanel(panelParams);
} else {
MailPoet.Modal.panel(panelParams);
}
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
},
changeStyle: function(event) {
var style = jQuery(event.currentTarget).data('style');
this.model.set('styles.block.borderStyle', style);
this.$('.mailpoet_field_divider_style').removeClass('mailpoet_active_divider_style');
this.$('.mailpoet_field_divider_style[data-style="' + style + '"]').addClass('mailpoet_active_divider_style');
},
repaintDividerStyleOptions: function() {
this.$('.mailpoet_field_divider_style > div').css('border-top-color', this.model.get('styles.block.borderColor'));
},
applyToAll: function(event) {
App.getChannel().trigger('replaceAllDividers', this.model.toJSON());
},
updateValueAndCall: function(fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event);
},
});
Module.DividerWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.dividerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.DividerBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('divider', {
blockModel: Module.DividerBlockModel,
blockView: Module.DividerBlockView,
});
Module.DividerBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
getTemplate: function() { return templates.dividerBlock; },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
behaviors: _.defaults({
ResizableBehavior: {
elementSelector: '.mailpoet_content',
resizeHandleSelector: '.mailpoet_resize_handle',
transformationFunction: function(y) { return y / 2; },
minLength: 0, // TODO: Move this number to editor configuration
modelField: 'styles.block.padding',
},
}, base.BlockView.prototype.behaviors),
onDragSubstituteBy: function() { return Module.DividerWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
var that = this;
// Listen for attempts to change all dividers in one go
this._replaceDividerHandler = function(data) { that.model.set(data); that.model.trigger('applyToAll'); };
App.getChannel().on('replaceAllDividers', this._replaceDividerHandler);
this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
};
},
onRender: function() {
this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
App.getChannel().off('replaceAllDividers', this._replaceDividerHandler);
this.stopListening(this.model);
},
changePadding: function() {
this.$('.mailpoet_content').css('padding-top', this.model.get('styles.block.padding'));
this.$('.mailpoet_content').css('padding-bottom', this.model.get('styles.block.padding'));
this.$('.mailpoet_resize_handle_text').text(parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px');
},
});
Module.DividerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.DividerBlockSettingsView; },
});
Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.dividerBlockSettings; },
events: function() {
return {
"click .mailpoet_field_divider_style": 'changeStyle',
"input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"keyup .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
"change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
"change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_button_divider_apply_to_all": "applyToAll",
"click .mailpoet_done_editing": "close",
};
},
modelEvents: function() {
return {
'change:styles.block.borderColor': 'repaintDividerStyleOptions',
};
},
behaviors: {
ColorPickerBehavior: {},
},
initialize: function(params) {
var panelParams = {
element: this.$el,
template: '',
position: 'right',
width: App.getConfig().get('sidepanelWidth'),
};
this.renderOptions = params.renderOptions || {};
if (this.renderOptions.displayFormat === 'subpanel') {
MailPoet.Modal.subpanel(panelParams);
} else {
MailPoet.Modal.panel(panelParams);
}
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
},
changeStyle: function(event) {
var style = jQuery(event.currentTarget).data('style');
this.model.set('styles.block.borderStyle', style);
this.$('.mailpoet_field_divider_style').removeClass('mailpoet_active_divider_style');
this.$('.mailpoet_field_divider_style[data-style="' + style + '"]').addClass('mailpoet_active_divider_style');
},
repaintDividerStyleOptions: function() {
this.$('.mailpoet_field_divider_style > div').css('border-top-color', this.model.get('styles.block.borderColor'));
},
applyToAll: function(event) {
App.getChannel().trigger('replaceAllDividers', this.model.toJSON());
},
updateValueAndCall: function(fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event);
},
});
Module.DividerWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.dividerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.DividerBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('divider', {
blockModel: Module.DividerBlockModel,
blockView: Module.DividerBlockView,
});
App.registerWidget({
name: 'divider',
widgetView: Module.DividerWidgetView,
priority: 93,
});
App.registerWidget({
name: 'divider',
widgetView: Module.DividerWidgetView,
priority: 93,
});
});
});
});

255
assets/js/src/newsletter_editor/blocks/footer.js
View File

@ -9,139 +9,138 @@ define('newsletter_editor/blocks/footer', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.footer", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.FooterBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'footer',
text: '<a href="[unsubscribeUrl]">Unsubscribe</a> | <a href="[manageSubscriptionUrl]">Manage subscription</a><br /><b>Add your postal address here!</b>',
styles: {
block: {
backgroundColor: 'transparent',
},
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '12px',
textAlign: 'center',
},
link: {
fontColor: '#0000ff',
textDecoration: 'none',
},
},
}, EditorApplication.getConfig().get('blockDefaults.footer'));
Module.FooterBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'footer',
text: '<a href="[unsubscribeUrl]">Unsubscribe</a> | <a href="[manageSubscriptionUrl]">Manage subscription</a><br /><b>Add your postal address here!</b>',
styles: {
block: {
backgroundColor: 'transparent',
},
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '12px',
textAlign: 'center',
},
link: {
fontColor: '#0000ff',
textDecoration: 'none',
},
},
}, EditorApplication.getConfig().get('blockDefaults.footer'));
},
});
Module.FooterBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
getTemplate: function() { return templates.footerBlock; },
modelEvents: {
'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
},
onDragSubstituteBy: function() { return Module.FooterWidgetView; },
onRender: function() {
this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
this.$('.mailpoet_content').tinymce({
inline: true,
menubar: false,
toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
invalid_elements: "script",
style_formats: [
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
editor.on('focus', function(e) {
that.disableShowingTools();
});
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
},
});
Module.FooterBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.FooterBlockSettingsView; },
});
Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.footerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
"change .mailpoet_field_footer_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
"change .mailpoet_field_footer_text_size": _.partial(this.changeField, "styles.text.fontSize"),
"change #mailpoet_field_footer_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
"change #mailpoet_field_footer_link_underline": function(event) {
this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
};
},
});
Module.FooterWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.footerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.FooterBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('footer', {
blockModel: Module.FooterBlockModel,
blockView: Module.FooterBlockView,
});
Module.FooterBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
getTemplate: function() { return templates.footerBlock; },
modelEvents: {
'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
},
onDragSubstituteBy: function() { return Module.FooterWidgetView; },
onRender: function() {
this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
this.$('.mailpoet_content').tinymce({
inline: true,
menubar: false,
toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
invalid_elements: "script",
style_formats: [
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
editor.on('focus', function(e) {
that.disableShowingTools();
});
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
},
});
Module.FooterBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.FooterBlockSettingsView; },
});
Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.footerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
"change .mailpoet_field_footer_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
"change .mailpoet_field_footer_text_size": _.partial(this.changeField, "styles.text.fontSize"),
"change #mailpoet_field_footer_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
"change #mailpoet_field_footer_link_underline": function(event) {
this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
};
},
});
Module.FooterWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.footerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.FooterBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('footer', {
blockModel: Module.FooterBlockModel,
blockView: Module.FooterBlockView,
});
App.registerWidget({
name: 'footer',
widgetView: Module.FooterWidgetView,
priority: 99,
});
App.registerWidget({
name: 'footer',
widgetView: Module.FooterWidgetView,
priority: 99,
});
});
});
});

255
assets/js/src/newsletter_editor/blocks/header.js
View File

@ -9,139 +9,138 @@ define('newsletter_editor/blocks/header', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.header", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.HeaderBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'header',
text: 'Display problems? <a href="[viewInBrowserUrl]">View it in your browser</a>',
styles: {
block: {
backgroundColor: 'transparent',
},
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '12px',
textAlign: 'center',
},
link: {
fontColor: '#0000ff',
textDecoration: 'underline',
},
},
}, EditorApplication.getConfig().get('blockDefaults.header'));
Module.HeaderBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'header',
text: 'Display problems? <a href="[viewInBrowserUrl]">View it in your browser</a>',
styles: {
block: {
backgroundColor: 'transparent',
},
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '12px',
textAlign: 'center',
},
link: {
fontColor: '#0000ff',
textDecoration: 'underline',
},
},
}, EditorApplication.getConfig().get('blockDefaults.header'));
},
});
Module.HeaderBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
getTemplate: function() { return templates.headerBlock; },
modelEvents: {
'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
},
onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
onRender: function() {
this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
this.$('.mailpoet_content').tinymce({
inline: true,
menubar: false,
toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
invalid_elements: "script",
style_formats: [
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
editor.on('focus', function(e) {
that.disableShowingTools();
});
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
},
});
Module.HeaderBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.HeaderBlockSettingsView; },
});
Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.headerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
"change .mailpoet_field_header_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
"change .mailpoet_field_header_text_size": _.partial(this.changeField, "styles.text.fontSize"),
"change #mailpoet_field_header_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
"change #mailpoet_field_header_link_underline": function(event) {
this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
};
},
});
Module.HeaderWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.headerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.HeaderBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('header', {
blockModel: Module.HeaderBlockModel,
blockView: Module.HeaderBlockView,
});
Module.HeaderBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
getTemplate: function() { return templates.headerBlock; },
modelEvents: {
'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
},
onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
onRender: function() {
this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
this.$('.mailpoet_content').tinymce({
inline: true,
menubar: false,
toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
invalid_elements: "script",
style_formats: [
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
editor.on('focus', function(e) {
that.disableShowingTools();
});
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
},
});
Module.HeaderBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.HeaderBlockSettingsView; },
});
Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.headerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
"change .mailpoet_field_header_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
"change .mailpoet_field_header_text_size": _.partial(this.changeField, "styles.text.fontSize"),
"change #mailpoet_field_header_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
"change #mailpoet_field_header_link_underline": function(event) {
this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),
};
},
});
Module.HeaderWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.headerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.HeaderBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('header', {
blockModel: Module.HeaderBlockModel,
blockView: Module.HeaderBlockView,
});
App.registerWidget({
name: 'header',
widgetView: Module.HeaderWidgetView,
priority: 98,
});
App.registerWidget({
name: 'header',
widgetView: Module.HeaderWidgetView,
priority: 98,
});
});
});
});

707
assets/js/src/newsletter_editor/blocks/image.js
View File

@ -9,381 +9,380 @@ define('newsletter_editor/blocks/image', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.image", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base'),
ImageWidgetView;
var base = App.module('blocks.base'),
ImageWidgetView;
Module.ImageBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'image',
link: 'http://example.org',
src: 'no-image.png',
alt: 'An image of...',
padded: true, // true | false - Padded or full width
width: '64px',
height: '64px',
styles: {
block: {
textAlign: 'center',
},
},
}, EditorApplication.getConfig().get('blockDefaults.image'));
Module.ImageBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'image',
link: 'http://example.org',
src: 'no-image.png',
alt: 'An image of...',
padded: true, // true | false - Padded or full width
width: '64px',
height: '64px',
styles: {
block: {
textAlign: 'center',
},
},
});
}, EditorApplication.getConfig().get('blockDefaults.image'));
},
});
Module.ImageBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
getTemplate: function() { return templates.imageBlock; },
initialize: function() {
this.on('showSettings', this.showSettings);
},
onDragSubstituteBy: function() { return Module.ImageWidgetView; },
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
imageMissingSrc: App.getConfig().get('urls.imageMissing'),
};
},
onRender: function() {
this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
if (this.model.get('padded')) {
this.$el.removeClass('mailpoet_full_image');
} else {
this.$el.addClass('mailpoet_full_image');
}
},
showSettings: function(options) {
this.toolsView.triggerMethod('showSettings', options);
},
onBeforeDestroy: function() {
this.off('showSettings');
},
});
Module.ImageBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ImageBlockSettingsView; },
initialize: function() {
base.BlockToolsView.prototype.initialize.apply(this, arguments);
this.on('showSettings', this.changeSettings);
},
changeSettings: function(options) {
(new Module.ImageBlockSettingsView({
model: this.model,
showImageManager: (options.showImageManager === true),
})).render();
},
onBeforeDestroy: function() {
this.off('showSettings');
},
});
Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.imageBlockSettings; },
events: function() {
return {
"keyup .mailpoet_field_image_link": _.partial(this.changeField, "link"),
"keyup .mailpoet_field_image_address": _.partial(this.changeField, "src"),
"keyup .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
"change .mailpoet_field_image_padded": _.partial(this.changeBoolField, "padded"),
"change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
"click .mailpoet_field_image_select_another_image": "showMediaManager",
"click .mailpoet_done_editing": "close",
};
},
initialize: function(options) {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
if (options.showImageManager) {
this.showMediaManager();
}
},
showMediaManager: function() {
if (this._mediaManager) {
this._mediaManager.resetSelections();
this._mediaManager.open();
return;
}
var MediaManager = wp.media.view.MediaFrame.Select.extend({
Module.ImageBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
getTemplate: function() { return templates.imageBlock; },
initialize: function() {
this.on('showSettings', this.showSettings);
wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
_.defaults(this.options, {
multiple: true,
editing: false,
state: 'insert'
});
this.createSelection();
this.createStates();
this.bindHandlers();
this.createIframeStates();
// Hide title
this.$el.addClass('hide-title');
},
onDragSubstituteBy: function() { return Module.ImageWidgetView; },
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
imageMissingSrc: App.getConfig().get('urls.imageMissing'),
resetSelections: function() {
this.state().get('selection').reset();
},
createQuery: function(options) {
var query = wp.media.query(options);
return query;
},
createStates: function() {
var options = this.options;
// Add the default states.
this.states.add([
// Main states.
new wp.media.controller.Library({
id: 'insert',
title: 'Add images',
priority: 20,
toolbar: 'main-insert',
filterable: 'image',
library: this.createQuery(options.library),
multiple: options.multiple ? 'reset' : false,
editable: false,
// If the user isn't allowed to edit fields,
// can they still edit it locally?
allowLocalEdits: false,
// Show the attachment display settings.
displaySettings: false,
// Update user settings when users adjust the
// attachment display settings.
displayUserSettings: false
}),
]);
if(wp.media.view.settings.post.featuredImageId) {
this.states.add(new wp.media.controller.FeaturedImage());
}
},
bindHandlers: function() {
// from Select
this.on('router:create:browse', this.createRouter, this);
this.on('router:render:browse', this.browseRouter, this);
this.on('content:create:browse', this.browseContent, this);
this.on('content:render:upload', this.uploadContent, this);
this.on('toolbar:create:select', this.createSelectToolbar, this);
this.on('menu:create:gallery', this.createMenu, this);
this.on('toolbar:create:main-insert', this.createToolbar, this);
this.on('toolbar:create:main-gallery', this.createToolbar, this);
this.on('toolbar:create:main-embed', this.mainEmbedToolbar, this);
this.on('updateExcluded', this.browseContent, this);
var handlers = {
content: {
'embed': 'embedContent',
'edit-selection': 'editSelectionContent'
},
toolbar: {
'main-insert': 'mainInsertToolbar'
}
};
},
onRender: function() {
this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
if (this.model.get('padded')) {
this.$el.removeClass('mailpoet_full_image');
} else {
this.$el.addClass('mailpoet_full_image');
_.each(handlers, function(regionHandlers, region) {
_.each(regionHandlers, function(callback, handler) {
this.on(region + ':render:' + handler, this[callback], this);
}, this);
}, this);
},
uploadContent: function() {
wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
this.$el.addClass('hide-toolbar');
},
// Content
embedContent: function() {
var view = new wp.media.view.Embed({
controller: this,
model: this.state()
}).render();
this.content.set(view);
view.url.focus();
},
editSelectionContent: function() {
var state = this.state(),
selection = state.get('selection'),
view;
view = new wp.media.view.AttachmentsBrowser({
controller: this,
collection: selection,
selection: selection,
model: state,
sortable: true,
search: false,
dragInfo: true,
AttachmentView: wp.media.view.Attachment.EditSelection
}).render();
view.toolbar.set('backToLibrary', {
text: 'Return to library',
priority: -100,
click: function() {
this.controller.content.mode('browse');
}
},
showSettings: function(options) {
this.toolsView.triggerMethod('showSettings', options);
},
onBeforeDestroy: function() {
this.off('showSettings');
},
});
});
Module.ImageBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.ImageBlockSettingsView; },
initialize: function() {
base.BlockToolsView.prototype.initialize.apply(this, arguments);
this.on('showSettings', this.changeSettings);
// Browse our library of attachments.
this.content.set(view);
},
changeSettings: function(options) {
(new Module.ImageBlockSettingsView({
model: this.model,
showImageManager: (options.showImageManager === true),
})).render();
},
onBeforeDestroy: function() {
this.off('showSettings');
},
});
Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.imageBlockSettings; },
events: function() {
return {
"keyup .mailpoet_field_image_link": _.partial(this.changeField, "link"),
"keyup .mailpoet_field_image_address": _.partial(this.changeField, "src"),
"keyup .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
"change .mailpoet_field_image_padded": _.partial(this.changeBoolField, "padded"),
"change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
"click .mailpoet_field_image_select_another_image": "showMediaManager",
"click .mailpoet_done_editing": "close",
};
},
initialize: function(options) {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
// Toolbars
selectionStatusToolbar: function(view) {
var editable = this.state().get('editable');
if (options.showImageManager) {
this.showMediaManager();
view.set('selection', new wp.media.view.Selection({
controller: this,
collection: this.state().get('selection'),
priority: -40,
// If the selection is editable, pass the callback to
// switch the content mode.
editable: editable && function() {
this.controller.content.mode('edit-selection');
}
}).render() );
},
showMediaManager: function() {
if (this._mediaManager) {
this._mediaManager.resetSelections();
this._mediaManager.open();
return;
mainInsertToolbar: function(view) {
var controller = this;
this.selectionStatusToolbar(view);
view.set('insert', {
style: 'primary',
priority: 80,
text: 'Select Image',
requires: { selection: true },
click: function() {
var state = controller.state(),
selection = state.get('selection');
controller.close();
state.trigger('insert', selection).reset();
}
var MediaManager = wp.media.view.MediaFrame.Select.extend({
initialize: function() {
wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
_.defaults(this.options, {
multiple: true,
editing: false,
state: 'insert'
});
this.createSelection();
this.createStates();
this.bindHandlers();
this.createIframeStates();
// Hide title
this.$el.addClass('hide-title');
},
resetSelections: function() {
this.state().get('selection').reset();
},
createQuery: function(options) {
var query = wp.media.query(options);
return query;
},
createStates: function() {
var options = this.options;
// Add the default states.
this.states.add([
// Main states.
new wp.media.controller.Library({
id: 'insert',
title: 'Add images',
priority: 20,
toolbar: 'main-insert',
filterable: 'image',
library: this.createQuery(options.library),
multiple: options.multiple ? 'reset' : false,
editable: false,
// If the user isn't allowed to edit fields,
// can they still edit it locally?
allowLocalEdits: false,
// Show the attachment display settings.
displaySettings: false,
// Update user settings when users adjust the
// attachment display settings.
displayUserSettings: false
}),
]);
if(wp.media.view.settings.post.featuredImageId) {
this.states.add(new wp.media.controller.FeaturedImage());
}
},
bindHandlers: function() {
// from Select
this.on('router:create:browse', this.createRouter, this);
this.on('router:render:browse', this.browseRouter, this);
this.on('content:create:browse', this.browseContent, this);
this.on('content:render:upload', this.uploadContent, this);
this.on('toolbar:create:select', this.createSelectToolbar, this);
this.on('menu:create:gallery', this.createMenu, this);
this.on('toolbar:create:main-insert', this.createToolbar, this);
this.on('toolbar:create:main-gallery', this.createToolbar, this);
this.on('toolbar:create:main-embed', this.mainEmbedToolbar, this);
this.on('updateExcluded', this.browseContent, this);
var handlers = {
content: {
'embed': 'embedContent',
'edit-selection': 'editSelectionContent'
},
toolbar: {
'main-insert': 'mainInsertToolbar'
}
};
_.each(handlers, function(regionHandlers, region) {
_.each(regionHandlers, function(callback, handler) {
this.on(region + ':render:' + handler, this[callback], this);
}, this);
}, this);
},
uploadContent: function() {
wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
this.$el.addClass('hide-toolbar');
},
// Content
embedContent: function() {
var view = new wp.media.view.Embed({
controller: this,
model: this.state()
}).render();
this.content.set(view);
view.url.focus();
},
editSelectionContent: function() {
var state = this.state(),
selection = state.get('selection'),
view;
view = new wp.media.view.AttachmentsBrowser({
controller: this,
collection: selection,
selection: selection,
model: state,
sortable: true,
search: false,
dragInfo: true,
AttachmentView: wp.media.view.Attachment.EditSelection
}).render();
view.toolbar.set('backToLibrary', {
text: 'Return to library',
priority: -100,
click: function() {
this.controller.content.mode('browse');
}
});
// Browse our library of attachments.
this.content.set(view);
},
// Toolbars
selectionStatusToolbar: function(view) {
var editable = this.state().get('editable');
view.set('selection', new wp.media.view.Selection({
controller: this,
collection: this.state().get('selection'),
priority: -40,
// If the selection is editable, pass the callback to
// switch the content mode.
editable: editable && function() {
this.controller.content.mode('edit-selection');
}
}).render() );
},
mainInsertToolbar: function(view) {
var controller = this;
this.selectionStatusToolbar(view);
view.set('insert', {
style: 'primary',
priority: 80,
text: 'Select Image',
requires: { selection: true },
click: function() {
var state = controller.state(),
selection = state.get('selection');
controller.close();
state.trigger('insert', selection).reset();
}
});
},
mainEmbedToolbar: function(toolbar) {
toolbar.view = new wp.media.view.Toolbar.Embed({
controller: this,
text: 'Add images'
});
}
});
var theFrame = this._mediaManager = new MediaManager({
id: 'mailpoet-media-manager',
frame: 'select',
title: 'Select image',
editing: false,
multiple: false,
library: {
type: 'image'
},
displaySettings: false,
button: {
text: 'Select',
},
}),
that = this;
this._mediaManager.on('insert', function() {
// Append media manager image selections to Images tab
var selection = theFrame.state().get('selection');
selection.each(function(attachment) {
var sizes = attachment.get('sizes'),
// Following advice from Becs, the target width should
// be a double of one column width to render well on
// retina screen devices
targetImageWidth = 1200,
// For main image use the size, that's closest to being 600px in width
sizeKeys = _.keys(sizes),
// Pick the width that is closest to target width
increasingByWidthDifference = _.sortBy(
_.keys(sizes),
function(size) { return Math.abs(targetImageWidth - sizes[size].width); }
),
bestWidth = sizes[_.first(increasingByWidthDifference)].width,
imagesOfBestWidth = _.filter(_.values(sizes), function(size) { return size.width === bestWidth; }),
// Maximize the height if there are multiple images with same width
mainSize = _.max(imagesOfBestWidth, function(size) { return size.height; });
that.model.set({
height: mainSize.height + 'px',
width: mainSize.width + 'px',
src: mainSize.url,
alt: (attachment.get('alt') !== "" && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title'),
});
// Rerender settings view due to changes from outside of settings view
that.render();
});
});
this._mediaManager.open();
});
},
onBeforeDestroy: function() {
if (typeof this._mediaManager === 'object') {
this._mediaManager.remove();
}
},
});
ImageWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.imageInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ImageBlockModel();
},
onDrop: function(options) {
options.droppedView.triggerMethod('showSettings', { showImageManager: true });
},
}
},
});
Module.ImageWidgetView = ImageWidgetView;
mainEmbedToolbar: function(toolbar) {
toolbar.view = new wp.media.view.Toolbar.Embed({
controller: this,
text: 'Add images'
});
}
App.on('before:start', function() {
App.registerBlockType('image', {
blockModel: Module.ImageBlockModel,
blockView: Module.ImageBlockView,
});
var theFrame = this._mediaManager = new MediaManager({
id: 'mailpoet-media-manager',
frame: 'select',
title: 'Select image',
editing: false,
multiple: false,
library: {
type: 'image'
},
displaySettings: false,
button: {
text: 'Select',
},
}),
that = this;
this._mediaManager.on('insert', function() {
// Append media manager image selections to Images tab
var selection = theFrame.state().get('selection');
selection.each(function(attachment) {
var sizes = attachment.get('sizes'),
// Following advice from Becs, the target width should
// be a double of one column width to render well on
// retina screen devices
targetImageWidth = 1200,
// For main image use the size, that's closest to being 600px in width
sizeKeys = _.keys(sizes),
// Pick the width that is closest to target width
increasingByWidthDifference = _.sortBy(
_.keys(sizes),
function(size) { return Math.abs(targetImageWidth - sizes[size].width); }
),
bestWidth = sizes[_.first(increasingByWidthDifference)].width,
imagesOfBestWidth = _.filter(_.values(sizes), function(size) { return size.width === bestWidth; }),
// Maximize the height if there are multiple images with same width
mainSize = _.max(imagesOfBestWidth, function(size) { return size.height; });
that.model.set({
height: mainSize.height + 'px',
width: mainSize.width + 'px',
src: mainSize.url,
alt: (attachment.get('alt') !== "" && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title'),
});
// Rerender settings view due to changes from outside of settings view
that.render();
});
});
App.registerWidget({
name: 'image',
widgetView: Module.ImageWidgetView,
priority: 91,
});
this._mediaManager.open();
},
onBeforeDestroy: function() {
if (typeof this._mediaManager === 'object') {
this._mediaManager.remove();
}
},
});
ImageWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.imageInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.ImageBlockModel();
},
onDrop: function(options) {
options.droppedView.triggerMethod('showSettings', { showImageManager: true });
},
}
},
});
Module.ImageWidgetView = ImageWidgetView;
App.on('before:start', function() {
App.registerBlockType('image', {
blockModel: Module.ImageBlockModel,
blockView: Module.ImageBlockView,
});
App.registerWidget({
name: 'image',
widgetView: Module.ImageWidgetView,
priority: 91,
});
});
});
});

869
assets/js/src/newsletter_editor/blocks/posts.js
View File

@ -18,463 +18,462 @@ define('newsletter_editor/blocks/posts', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.posts", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.PostsBlockModel = base.BlockModel.extend({
stale: ['_selectedPosts', '_availablePosts'],
defaults: function() {
return this._getDefaults({
type: 'posts',
amount: '10',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
terms: [], // List of category and tag objects
search: '', // Search keyword term
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imagePadded: true, // true|false
//imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Categories:',
readMoreType: 'link', // 'link'|'button'
readMoreText: 'Read more', // 'link'|'button'
readMoreButton: {
text: 'Read more',
url: '[postLink]'
},
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {},
_selectedPosts: [],
_availablePosts: [],
}, EditorApplication.getConfig().get('blockDefaults.posts'));
Module.PostsBlockModel = base.BlockModel.extend({
stale: ['_selectedPosts', '_availablePosts'],
defaults: function() {
return this._getDefaults({
type: 'posts',
amount: '10',
contentType: 'post', // 'post'|'page'|'mailpoet_page'
postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
terms: [], // List of category and tag objects
search: '', // Search keyword term
inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'inTextBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true
imagePadded: true, // true|false
//imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Categories:',
readMoreType: 'link', // 'link'|'button'
readMoreText: 'Read more', // 'link'|'button'
readMoreButton: {
text: 'Read more',
url: '[postLink]'
},
relations: function() {
return {
readMoreButton: App.getBlockTypeModel('button'),
divider: App.getBlockTypeModel('divider'),
_selectedPosts: Backbone.Collection,
_availablePosts: Backbone.Collection,
};
},
initialize: function() {
var that = this;
// Attach Radio.Requests API primarily for highlighting
_.extend(this, Backbone.Radio.Requests);
sortBy: 'newest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {},
_selectedPosts: [],
_availablePosts: [],
}, EditorApplication.getConfig().get('blockDefaults.posts'));
},
relations: function() {
return {
readMoreButton: App.getBlockTypeModel('button'),
divider: App.getBlockTypeModel('divider'),
_selectedPosts: Backbone.Collection,
_availablePosts: Backbone.Collection,
};
},
initialize: function() {
var that = this;
// Attach Radio.Requests API primarily for highlighting
_.extend(this, Backbone.Radio.Requests);
this.fetchAvailablePosts();
this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', this._scheduleFetchAvailablePosts, this);
this.on('insertSelectedPosts', this._insertSelectedPosts, this);
},
fetchAvailablePosts: function() {
var that = this;
// TODO: Move this logic to new AJAX query format
//mailpoet_post_wpi('posts.php', this.toJSON(), function(response) {
//console.log('Posts fetched', arguments);
//that.get('_availablePosts').reset(response);
//that.get('_selectedPosts').reset(); // Empty out the collection
//that.trigger('change:_availablePosts');
//}, function() {
//console.log('Posts fetchPosts error', arguments);
//});
},
/**
* Batch more changes during a specific time, instead of fetching
* ALC posts on each model change
*/
_scheduleFetchAvailablePosts: function() {
var timeout = 500,
that = this;
if (this._fetchPostsTimer !== undefined) {
clearTimeout(this._fetchPostsTimer);
}
this._fetchPostsTimer = setTimeout(function() {
that.fetchAvailablePosts();
that._fetchPostsTimer = undefined;
}, timeout);
},
_insertSelectedPosts: function() {
var that = this,
data = this.toJSON(),
index = this.collection.indexOf(this),
collection = this.collection;
this.fetchAvailablePosts();
this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', this._scheduleFetchAvailablePosts, this);
this.on('insertSelectedPosts', this._insertSelectedPosts, this);
},
fetchAvailablePosts: function() {
var that = this;
// TODO: Move this logic to new AJAX query format
//mailpoet_post_wpi('posts.php', this.toJSON(), function(response) {
//console.log('Posts fetched', arguments);
//that.get('_availablePosts').reset(response);
//that.get('_selectedPosts').reset(); // Empty out the collection
//that.trigger('change:_availablePosts');
//}, function() {
//console.log('Posts fetchPosts error', arguments);
//});
},
/**
* Batch more changes during a specific time, instead of fetching
* ALC posts on each model change
*/
_scheduleFetchAvailablePosts: function() {
var timeout = 500,
that = this;
if (this._fetchPostsTimer !== undefined) {
clearTimeout(this._fetchPostsTimer);
}
this._fetchPostsTimer = setTimeout(function() {
that.fetchAvailablePosts();
that._fetchPostsTimer = undefined;
}, timeout);
},
_insertSelectedPosts: function() {
var that = this,
data = this.toJSON(),
index = this.collection.indexOf(this),
collection = this.collection;
data.posts = this.get('_selectedPosts').pluck('ID');
data.posts = this.get('_selectedPosts').pluck('ID');
if (data.posts.length === 0) return;
if (data.posts.length === 0) return;
// TODO: Move query logic to new AJAX format
//mailpoet_post_wpi('automated_latest_content.php', data, function(response) {
//console.log('Available posts fetched', arguments);
//collection.add(response, { at: index });
//}, function() {
//console.log('Posts fetchPosts error', arguments);
//});
},
});
// TODO: Move query logic to new AJAX format
//mailpoet_post_wpi('automated_latest_content.php', data, function(response) {
//console.log('Available posts fetched', arguments);
//collection.add(response, { at: index });
//}, function() {
//console.log('Posts fetchPosts error', arguments);
//});
},
});
Module.PostsBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
getTemplate: function() { return templates.postsBlock; },
modelEvents: {},
onDragSubstituteBy: function() { return Module.PostsWidgetView; },
initialize: function() {
this.toolsView = new Module.PostsBlockToolsView({ model: this.model });
this.on('showSettings', this.showSettings);
this.model.reply('blockView', this.notifyAboutSelf, this);
},
onRender: function() {
if (!this.toolsRegion.hasView()) {
this.toolsRegion.show(this.toolsView);
}
this.trigger('showSettings');
},
showSettings: function(options) {
this.toolsView.triggerMethod('showSettings', options);
},
notifyAboutSelf: function() {
return this;
},
onBeforeDestroy: function() {
this.model.stopReplying('blockView', this.notifyAboutSelf, this);
},
});
Module.PostsBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
getTemplate: function() { return templates.postsBlock; },
modelEvents: {},
onDragSubstituteBy: function() { return Module.PostsWidgetView; },
initialize: function() {
this.toolsView = new Module.PostsBlockToolsView({ model: this.model });
this.on('showSettings', this.showSettings);
this.model.reply('blockView', this.notifyAboutSelf, this);
},
onRender: function() {
if (!this.toolsRegion.hasView()) {
this.toolsRegion.show(this.toolsView);
}
this.trigger('showSettings');
},
showSettings: function(options) {
this.toolsView.triggerMethod('showSettings', options);
},
notifyAboutSelf: function() {
return this;
},
onBeforeDestroy: function() {
this.model.stopReplying('blockView', this.notifyAboutSelf, this);
},
});
Module.PostsBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.PostsBlockSettingsView; },
initialize: function() {
base.BlockToolsView.prototype.initialize.apply(this, arguments);
this.on('showSettings', this.changeSettings);
this.settingsView = new Module.PostsBlockSettingsView({ model: this.model });
},
changeSettings: function() {
this.settingsView.render();
},
onBeforeDestroy: function() {
this.settingsView.destroy();
this.off('showSettings');
MailPoet.Modal.close();
},
});
Module.PostsBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.PostsBlockSettingsView; },
initialize: function() {
base.BlockToolsView.prototype.initialize.apply(this, arguments);
this.on('showSettings', this.changeSettings);
this.settingsView = new Module.PostsBlockSettingsView({ model: this.model });
},
changeSettings: function() {
this.settingsView.render();
},
onBeforeDestroy: function() {
this.settingsView.destroy();
this.off('showSettings');
MailPoet.Modal.close();
},
});
Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.postsBlockSettings; },
regions: {
selectionRegion: '.mailpoet_settings_posts_selection',
displayOptionsRegion: '.mailpoet_settings_posts_display_options',
},
events: {
'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
initialize: function() {
this.selectionView = new PostSelectionSettingsView({ model: this.model });
this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
},
onRender: function() {
var that = this,
blockView = this.model.request('blockView');
Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.postsBlockSettings; },
regions: {
selectionRegion: '.mailpoet_settings_posts_selection',
displayOptionsRegion: '.mailpoet_settings_posts_display_options',
},
events: {
'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
initialize: function() {
this.selectionView = new PostSelectionSettingsView({ model: this.model });
this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
},
onRender: function() {
var that = this,
blockView = this.model.request('blockView');
this.selectionRegion.show(this.selectionView);
this.displayOptionsRegion.show(this.displayOptionsView);
this.selectionRegion.show(this.selectionView);
this.displayOptionsRegion.show(this.displayOptionsView);
MailPoet.Modal.panel({
element: this.$el,
template: '',
position: 'right',
overlay: true,
highlight: blockView.$el,
width: App.getConfig().get('sidepanelWidth'),
onCancel: function() {
// Self destroy the block if the user closes settings modal
that.model.destroy();
},
MailPoet.Modal.panel({
element: this.$el,
template: '',
position: 'right',
overlay: true,
highlight: blockView.$el,
width: App.getConfig().get('sidepanelWidth'),
onCancel: function() {
// Self destroy the block if the user closes settings modal
that.model.destroy();
},
});
},
switchToDisplayOptions: function() {
// Switch content view
this.$('.mailpoet_settings_posts_selection').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_display_options').removeClass('mailpoet_hidden');
// Switch controls
this.$('.mailpoet_settings_posts_show_display_options').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_show_post_selection').removeClass('mailpoet_hidden');
},
switchToPostSelection: function() {
// Switch content view
this.$('.mailpoet_settings_posts_display_options').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_selection').removeClass('mailpoet_hidden');
// Switch controls
this.$('.mailpoet_settings_posts_show_post_selection').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_show_display_options').removeClass('mailpoet_hidden');
},
insertPosts: function() {
this.model.trigger('insertSelectedPosts');
this.model.destroy();
},
});
var PostSelectionSettingsView = Marionette.CompositeView.extend({
getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
getChildView: function() { return SinglePostSelectionSettingsView; },
childViewContainer: '.mailpoet_post_selection_container',
getEmptyView: function() { return EmptyPostSelectionSettingsView; },
childViewOptions: function() {
return {
blockModel: this.model,
};
},
events: function() {
return {
'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
'keyup .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
};
},
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('_availablePosts');
Marionette.CompositeView.apply(this, arguments);
},
onRender: function() {
var that = this;
this.$('.mailpoet_posts_categories_and_tags').select2({
multiple: true,
allowClear: true,
ajax: {
url: App.getConfig().get('urls.termSearch'),
type: 'POST',
dataType: 'json',
delay: 250,
data: function(searchParameter, page) {
return JSON.stringify({
postType: that.model.get('contentType'),
search: searchParameter,
limit: 10, // TODO: Move this hardcoded limit to Config
page: page,
});
},
switchToDisplayOptions: function() {
// Switch content view
this.$('.mailpoet_settings_posts_selection').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_display_options').removeClass('mailpoet_hidden');
// Switch controls
this.$('.mailpoet_settings_posts_show_display_options').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_show_post_selection').removeClass('mailpoet_hidden');
},
switchToPostSelection: function() {
// Switch content view
this.$('.mailpoet_settings_posts_display_options').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_selection').removeClass('mailpoet_hidden');
// Switch controls
this.$('.mailpoet_settings_posts_show_post_selection').addClass('mailpoet_hidden');
this.$('.mailpoet_settings_posts_show_display_options').removeClass('mailpoet_hidden');
},
insertPosts: function() {
this.model.trigger('insertSelectedPosts');
this.model.destroy();
},
});
var PostSelectionSettingsView = Marionette.CompositeView.extend({
getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
getChildView: function() { return SinglePostSelectionSettingsView; },
childViewContainer: '.mailpoet_post_selection_container',
getEmptyView: function() { return EmptyPostSelectionSettingsView; },
childViewOptions: function() {
},
/**
* Parse results for select2.
* Returns object, where `results` key holds a list of
* select item objects
*/
results: function (data, page) {
return {
blockModel: this.model,
};
},
events: function() {
return {
'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
'keyup .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
};
},
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('_availablePosts');
Marionette.CompositeView.apply(this, arguments);
},
onRender: function() {
var that = this;
this.$('.mailpoet_posts_categories_and_tags').select2({
multiple: true,
allowClear: true,
ajax: {
url: App.getConfig().get('urls.termSearch'),
type: 'POST',
dataType: 'json',
delay: 250,
data: function(searchParameter, page) {
return JSON.stringify({
postType: that.model.get('contentType'),
search: searchParameter,
limit: 10, // TODO: Move this hardcoded limit to Config
page: page,
});
},
/**
* Parse results for select2.
* Returns object, where `results` key holds a list of
* select item objects
*/
results: function (data, page) {
return {
results: _.map(
data.results,
function(item) {
return _.defaults({
text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
id: item.term_id
}, item);
}
)
};
}
},
}).trigger( 'change' ).on({
'change': function(e){
var data = [];
if (typeof data === 'string') {
if (data === '') {
data = [];
} else {
data = JSON.parse(data);
}
}
if ( e.added ){
data.push(e.added);
}
// Update ALC model
that.model.set('terms', data);
$(this).data('selected', JSON.stringify(data));
results: _.map(
data.results,
function(item) {
return _.defaults({
text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
id: item.term_id
}, item);
}
});
},
onBeforeDestroy: function() {
// Force close select2 if it hasn't closed yet
this.$('.mailpoet_posts_categories_and_tags').select2('close');
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
var EmptyPostSelectionSettingsView = Marionette.ItemView.extend({
getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
});
var SinglePostSelectionSettingsView = Marionette.ItemView.extend({
getTemplate: function() { return templates.singlePostPostsBlockSettings; },
events: function() {
return {
'change .mailpoet_select_post_checkbox': 'postSelectionChange',
)
};
}
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
index: this._index,
};
},
initialize: function(options) {
this.blockModel = options.blockModel;
},
postSelectionChange: function(event) {
var checkBox = jQuery(event.target),
selectedPostsCollection = this.blockModel.get('_selectedPosts');
if (checkBox.prop('checked')) {
selectedPostsCollection.add(this.model);
}).trigger( 'change' ).on({
'change': function(e){
var data = [];
if (typeof data === 'string') {
if (data === '') {
data = [];
} else {
selectedPostsCollection.remove(this.model);
data = JSON.parse(data);
}
}
if ( e.added ){
data.push(e.added);
}
// Update ALC model
that.model.set('terms', data);
$(this).data('selected', JSON.stringify(data));
}
});
},
onBeforeDestroy: function() {
// Force close select2 if it hasn't closed yet
this.$('.mailpoet_posts_categories_and_tags').select2('close');
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
var EmptyPostSelectionSettingsView = Marionette.ItemView.extend({
getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
});
var SinglePostSelectionSettingsView = Marionette.ItemView.extend({
getTemplate: function() { return templates.singlePostPostsBlockSettings; },
events: function() {
return {
'change .mailpoet_select_post_checkbox': 'postSelectionChange',
};
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
index: this._index,
};
},
initialize: function(options) {
this.blockModel = options.blockModel;
},
postSelectionChange: function(event) {
var checkBox = jQuery(event.target),
selectedPostsCollection = this.blockModel.get('_selectedPosts');
if (checkBox.prop('checked')) {
selectedPostsCollection.add(this.model);
} else {
selectedPostsCollection.remove(this.model);
}
},
});
var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
events: function() {
return {
"click .mailpoet_posts_select_button": 'showButtonSettings',
"click .mailpoet_posts_select_divider": 'showDividerSettings',
"change .mailpoet_posts_read_more_type": 'changeReadMoreType',
"change .mailpoet_posts_display_type": 'changeDisplayType',
"change .mailpoet_posts_title_format": 'changeTitleFormat',
"change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
"change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
"keyup .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
"change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
"change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
"change .mailpoet_posts_title_position": _.partial(this.changeField, "titlePosition"),
"change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
"change .mailpoet_posts_image_padded": _.partial(this.changeBoolField, "imagePadded"),
"change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
"keyup .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
"change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
"keyup .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
"keyup .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
"change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
showButtonSettings: function(event) {
var buttonModule = App.module('blocks.button');
(new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
})).render();
},
showDividerSettings: function(event) {
var dividerModule = App.module('blocks.divider');
(new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
})).render();
},
changeReadMoreType: function(event) {
var value = jQuery(event.target).val();
if (value == 'link') {
this.$('.mailpoet_posts_read_more_text').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_select_button').addClass('mailpoet_hidden');
} else if (value == 'button') {
this.$('.mailpoet_posts_read_more_text').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_select_button').removeClass('mailpoet_hidden');
}
this.changeField('readMoreType', event);
},
changeDisplayType: function(event) {
var value = jQuery(event.target).val();
if (value == 'titleOnly') {
this.$('.mailpoet_posts_title_position_container').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden');
} else {
this.$('.mailpoet_posts_title_position_container').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_list').addClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_posts_title_format').val(['h1']);
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
}
this.changeField('displayType', event);
},
changeTitleFormat: function(event) {
var value = jQuery(event.target).val();
if (value == 'ul') {
this.$('.mailpoet_posts_non_title_list_options').addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
this.$('.mailpoet_posts_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_links').val(['true']);
} else {
this.$('.mailpoet_posts_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event);
},
});
Module.PostsWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.postsInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.PostsBlockModel({}, { parse: true });
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('posts', {
blockModel: Module.PostsBlockModel,
blockView: Module.PostsBlockView,
});
var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
events: function() {
return {
"click .mailpoet_posts_select_button": 'showButtonSettings',
"click .mailpoet_posts_select_divider": 'showDividerSettings',
"change .mailpoet_posts_read_more_type": 'changeReadMoreType',
"change .mailpoet_posts_display_type": 'changeDisplayType',
"change .mailpoet_posts_title_format": 'changeTitleFormat',
"change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
"change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
"keyup .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
"change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
"change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
"change .mailpoet_posts_title_position": _.partial(this.changeField, "titlePosition"),
"change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
"change .mailpoet_posts_image_padded": _.partial(this.changeBoolField, "imagePadded"),
"change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
"keyup .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
"change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
"keyup .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
"keyup .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
"change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
};
},
behaviors: {
ColorPickerBehavior: {},
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
showButtonSettings: function(event) {
var buttonModule = App.module('blocks.button');
(new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
})).render();
},
showDividerSettings: function(event) {
var dividerModule = App.module('blocks.divider');
(new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
})).render();
},
changeReadMoreType: function(event) {
var value = jQuery(event.target).val();
if (value == 'link') {
this.$('.mailpoet_posts_read_more_text').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_select_button').addClass('mailpoet_hidden');
} else if (value == 'button') {
this.$('.mailpoet_posts_read_more_text').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_select_button').removeClass('mailpoet_hidden');
}
this.changeField('readMoreType', event);
},
changeDisplayType: function(event) {
var value = jQuery(event.target).val();
if (value == 'titleOnly') {
this.$('.mailpoet_posts_title_position_container').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden');
} else {
this.$('.mailpoet_posts_title_position_container').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_list').addClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_posts_title_format').val(['h1']);
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
}
this.changeField('displayType', event);
},
changeTitleFormat: function(event) {
var value = jQuery(event.target).val();
if (value == 'ul') {
this.$('.mailpoet_posts_non_title_list_options').addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
this.$('.mailpoet_posts_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_links').val(['true']);
} else {
this.$('.mailpoet_posts_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event);
},
});
Module.PostsWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.postsInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.PostsBlockModel({}, { parse: true });
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('posts', {
blockModel: Module.PostsBlockModel,
blockView: Module.PostsBlockView,
});
App.registerWidget({
name: 'posts',
widgetView: Module.PostsWidgetView,
priority: 96,
});
App.registerWidget({
name: 'posts',
widgetView: Module.PostsWidgetView,
priority: 96,
});
});
});
});

703
assets/js/src/newsletter_editor/blocks/social.js
View File

@ -9,366 +9,365 @@ define('newsletter_editor/blocks/social', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.social", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base'),
SocialBlockSettingsIconSelectorView, SocialBlockSettingsIconView, SocialBlockSettingsStylesView;
var base = App.module('blocks.base'),
SocialBlockSettingsIconSelectorView, SocialBlockSettingsIconView, SocialBlockSettingsStylesView;
Module.SocialIconModel = Backbone.SuperModel.extend({
defaults: function() {
var defaultValues = App.getConfig().get('socialIcons.custom');
return {
Module.SocialIconModel = Backbone.SuperModel.extend({
defaults: function() {
var defaultValues = App.getConfig().get('socialIcons.custom');
return {
type: 'socialIcon',
iconType: 'custom',
link: defaultValues.get('defaultLink'),
image: App.getAvailableStyles().get('socialIconSets.default.custom'),
height: '32px',
width: '32px',
text: defaultValues.get('title'),
};
},
initialize: function(options) {
var that = this;
// Make model swap to default values for that type when iconType changes
this.on('change:iconType', function() {
var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType')),
iconSet = that.collection.iconBlockModel.getIconSet();
this.set({
link: defaultValues.get('defaultLink'),
image: iconSet.get(that.get('iconType')),
text: defaultValues.get('title'),
});
}, this);
this.on('change', function() { App.getChannel().trigger('autoSave'); });
},
});
Module.SocialIconCollectionModel = Backbone.Collection.extend({
model: Module.SocialIconModel
});
Module.SocialBlockModel = base.BlockModel.extend({
name: 'iconBlockModel',
defaults: function() {
return this._getDefaults({
type: 'social',
iconSet: 'default',
icons: new Module.SocialIconCollectionModel(),
}, EditorApplication.getConfig().get('blockDefaults.social'));
},
relations: {
icons: Module.SocialIconCollectionModel,
},
initialize: function() {
this.get('icons').on('add remove change', this._iconsChanged, this);
this.on('change:iconSet', this.changeIconSet, this);
},
getIconSet: function() {
return App.getAvailableStyles().get('socialIconSets').get(this.get('iconSet'));
},
changeIconSet: function() {
var iconSet = this.getIconSet();
_.each(this.get('icons').models, function(model) {
model.set('image', iconSet.get(model.get('iconType')));
});
},
_iconsChanged: function() {
App.getChannel().trigger('autoSave');
},
});
var SocialIconView = Marionette.ItemView.extend({
tagName: 'span',
getTemplate: function() { return templates.socialIconBlock; },
modelEvents: {
'change': 'render',
},
templateHelpers: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
allIconSets: allIconSets.toJSON(),
};
},
});
Module.SocialBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
getTemplate: function() { return templates.socialBlock; },
childViewContainer: '.mailpoet_social',
modelEvents: {
'change': 'render'
},
events: {
"mouseover": "showTools",
"mouseout": "hideTools",
},
regions: {
toolsRegion: '> .mailpoet_tools',
},
ui: {
tools: '> .mailpoet_tools'
},
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
},
},
onDragSubstituteBy: function() { return Module.SocialWidgetView; },
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
// Determines which view type should be used for a child
childView: SocialIconView,
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
},
showTools: function(_event) {
this.$(this.ui.tools).show();
_event.stopPropagation();
},
hideTools: function(_event) {
this.$(this.ui.tools).hide();
_event.stopPropagation();
},
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
//that.model.destroy();
return newModel;
};
},
_buildRegions: function(regions) {
var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Backbone.Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
});
Module.SocialBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.SocialBlockSettingsView; },
});
// Sidebar view container
Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.socialBlockSettings; },
regions: {
iconRegion: '#mailpoet_social_icons_selection',
stylesRegion: '#mailpoet_social_icons_styles',
},
events: function() {
return {
"click .mailpoet_done_editing": "close",
};
},
initialize: function() {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
this._iconSelectorView = new SocialBlockSettingsIconSelectorView({ model: this.model });
this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
},
onRender: function() {
this.iconRegion.show(this._iconSelectorView);
this.stylesRegion.show(this._stylesView);
}
});
// Single icon settings view, used by the selector view
SocialBlockSettingsIconView = Marionette.ItemView.extend({
getTemplate: function() { return templates.socialSettingsIcon; },
events: function() {
return {
"click .mailpoet_delete_block": "deleteIcon",
"change .mailpoet_social_icon_field_type": _.partial(this.changeField, "iconType"),
"keyup .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
"keyup .mailpoet_social_icon_field_link": this.changeLink,
"keyup .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
};
},
modelEvents: {
'change:iconType': 'render',
'change:image': function() {
this.$('.mailpoet_social_icon_image').attr('src', this.model.get('image'));
},
'change:text': function() {
this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
},
},
templateHelpers: function() {
var icons = App.getConfig().get('socialIcons'),
// Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
iconTypes: availableIconTypes,
currentType: icons.get(this.model.get('iconType')).toJSON(),
allIconSets: allIconSets.toJSON(),
};
},
deleteIcon: function() {
this.model.destroy();
},
changeLink: function(event) {
if (this.model.get('iconType') === 'email') {
this.model.set('link', 'mailto:' + jQuery(event.target).val());
} else {
return this.changeField('link', event);
}
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
// Select icons section container view
SocialBlockSettingsIconSelectorView = Marionette.CompositeView.extend({
getTemplate: function() { return templates.socialSettingsIconSelector; },
childView: SocialBlockSettingsIconView,
childViewContainer: '#mailpoet_social_icon_selector_contents',
events: {
'click .mailpoet_add_social_icon': 'addSocialIcon',
},
modelEvents: {
'change:iconSet': 'render',
},
behaviors: {
SortableBehavior: {
items: '#mailpoet_social_icon_selector_contents > div',
},
},
constructor: function() {
// Set the icon collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
addSocialIcon: function() {
// Add a social icon with default values
this.collection.add({});
}
});
SocialBlockSettingsStylesView = Marionette.ItemView.extend({
getTemplate: function() { return templates.socialSettingsStyles; },
modelEvents: {
'change': 'render',
},
events: {
'click .mailpoet_social_icon_set': 'changeSocialIconSet',
},
initialize: function() {
this.listenTo(this.model.get('icons'), 'add remove change', this.render);
},
templateHelpers: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
activeSet: this.model.get('iconSet'),
socialIconSets: allIconSets.toJSON(),
availableSets: _.keys(allIconSets.toJSON()),
availableSocialIcons: this.model.get('icons').pluck('iconType'),
};
},
changeSocialIconSet: function(event) {
this.model.set('iconSet', jQuery(event.currentTarget).data('setname'));
},
onBeforeDestroy: function() {
this.model.get('icons').off('add remove', this.render, this);
},
});
Module.SocialWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.socialInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.SocialBlockModel({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: defaultValues.get('defaultLink'),
image: App.getAvailableStyles().get('socialIconSets.default.custom'),
iconType: 'facebook',
link: 'http://example.com',
image: App.getAvailableStyles().get('socialIconSets.default.facebook'),
height: '32px',
width: '32px',
text: defaultValues.get('title'),
};
},
initialize: function(options) {
var that = this;
// Make model swap to default values for that type when iconType changes
this.on('change:iconType', function() {
var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType')),
iconSet = that.collection.iconBlockModel.getIconSet();
this.set({
link: defaultValues.get('defaultLink'),
image: iconSet.get(that.get('iconType')),
text: defaultValues.get('title'),
});
}, this);
this.on('change', function() { App.getChannel().trigger('autoSave'); });
},
});
Module.SocialIconCollectionModel = Backbone.Collection.extend({
model: Module.SocialIconModel
});
Module.SocialBlockModel = base.BlockModel.extend({
name: 'iconBlockModel',
defaults: function() {
return this._getDefaults({
type: 'social',
iconSet: 'default',
icons: new Module.SocialIconCollectionModel(),
}, EditorApplication.getConfig().get('blockDefaults.social'));
},
relations: {
icons: Module.SocialIconCollectionModel,
},
initialize: function() {
this.get('icons').on('add remove change', this._iconsChanged, this);
this.on('change:iconSet', this.changeIconSet, this);
},
getIconSet: function() {
return App.getAvailableStyles().get('socialIconSets').get(this.get('iconSet'));
},
changeIconSet: function() {
var iconSet = this.getIconSet();
_.each(this.get('icons').models, function(model) {
model.set('image', iconSet.get(model.get('iconType')));
});
},
_iconsChanged: function() {
App.getChannel().trigger('autoSave');
},
});
var SocialIconView = Marionette.ItemView.extend({
tagName: 'span',
getTemplate: function() { return templates.socialIconBlock; },
modelEvents: {
'change': 'render',
},
templateHelpers: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
allIconSets: allIconSets.toJSON(),
};
},
});
Module.SocialBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
getTemplate: function() { return templates.socialBlock; },
childViewContainer: '.mailpoet_social',
modelEvents: {
'change': 'render'
},
events: {
"mouseover": "showTools",
"mouseout": "hideTools",
},
regions: {
toolsRegion: '> .mailpoet_tools',
},
ui: {
tools: '> .mailpoet_tools'
},
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
hideOriginal: true,
onDrop: function(options) {
// After a clone of model has been dropped, cleanup
// and destroy self
options.dragBehavior.view.model.destroy();
},
onDragSubstituteBy: function(behavior) {
var WidgetView, node;
// When block is being dragged, display the widget icon instead.
// This will create an instance of block's widget view and
// use it's rendered DOM element instead of the content block
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
WidgetView = new (behavior.view.onDragSubstituteBy())();
WidgetView.render();
node = WidgetView.$el.get(0).cloneNode(true);
WidgetView.destroy();
return node;
}
},
},
},
onDragSubstituteBy: function() { return Module.SocialWidgetView; },
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
// Determines which view type should be used for a child
childView: SocialIconView,
templateHelpers: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
},
showTools: function(_event) {
this.$(this.ui.tools).show();
_event.stopPropagation();
},
hideTools: function(_event) {
this.$(this.ui.tools).hide();
_event.stopPropagation();
},
getDropFunc: function() {
var that = this;
return function() {
var newModel = that.model.clone();
//that.model.destroy();
return newModel;
};
},
_buildRegions: function(regions) {
var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Backbone.Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
});
Module.SocialBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.SocialBlockSettingsView; },
});
// Sidebar view container
Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.socialBlockSettings; },
regions: {
iconRegion: '#mailpoet_social_icons_selection',
stylesRegion: '#mailpoet_social_icons_styles',
},
events: function() {
return {
"click .mailpoet_done_editing": "close",
};
},
initialize: function() {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
this._iconSelectorView = new SocialBlockSettingsIconSelectorView({ model: this.model });
this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
},
onRender: function() {
this.iconRegion.show(this._iconSelectorView);
this.stylesRegion.show(this._stylesView);
text: 'Facebook',
},
{
type: 'socialIcon',
iconType: 'twitter',
link: 'http://example.com',
image: App.getAvailableStyles().get('socialIconSets.default.twitter'),
height: '32px',
width: '32px',
text: 'Twitter',
},
],
}, { parse: true });
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('social', {
blockModel: Module.SocialBlockModel,
blockView: Module.SocialBlockView,
});
// Single icon settings view, used by the selector view
SocialBlockSettingsIconView = Marionette.ItemView.extend({
getTemplate: function() { return templates.socialSettingsIcon; },
events: function() {
return {
"click .mailpoet_delete_block": "deleteIcon",
"change .mailpoet_social_icon_field_type": _.partial(this.changeField, "iconType"),
"keyup .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
"keyup .mailpoet_social_icon_field_link": this.changeLink,
"keyup .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
};
},
modelEvents: {
'change:iconType': 'render',
'change:image': function() {
this.$('.mailpoet_social_icon_image').attr('src', this.model.get('image'));
},
'change:text': function() {
this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
},
},
templateHelpers: function() {
var icons = App.getConfig().get('socialIcons'),
// Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
iconTypes: availableIconTypes,
currentType: icons.get(this.model.get('iconType')).toJSON(),
allIconSets: allIconSets.toJSON(),
};
},
deleteIcon: function() {
this.model.destroy();
},
changeLink: function(event) {
if (this.model.get('iconType') === 'email') {
this.model.set('link', 'mailto:' + jQuery(event.target).val());
} else {
return this.changeField('link', event);
}
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
// Select icons section container view
SocialBlockSettingsIconSelectorView = Marionette.CompositeView.extend({
getTemplate: function() { return templates.socialSettingsIconSelector; },
childView: SocialBlockSettingsIconView,
childViewContainer: '#mailpoet_social_icon_selector_contents',
events: {
'click .mailpoet_add_social_icon': 'addSocialIcon',
},
modelEvents: {
'change:iconSet': 'render',
},
behaviors: {
SortableBehavior: {
items: '#mailpoet_social_icon_selector_contents > div',
},
},
constructor: function() {
// Set the icon collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
addSocialIcon: function() {
// Add a social icon with default values
this.collection.add({});
}
});
SocialBlockSettingsStylesView = Marionette.ItemView.extend({
getTemplate: function() { return templates.socialSettingsStyles; },
modelEvents: {
'change': 'render',
},
events: {
'click .mailpoet_social_icon_set': 'changeSocialIconSet',
},
initialize: function() {
this.listenTo(this.model.get('icons'), 'add remove change', this.render);
},
templateHelpers: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
activeSet: this.model.get('iconSet'),
socialIconSets: allIconSets.toJSON(),
availableSets: _.keys(allIconSets.toJSON()),
availableSocialIcons: this.model.get('icons').pluck('iconType'),
};
},
changeSocialIconSet: function(event) {
this.model.set('iconSet', jQuery(event.currentTarget).data('setname'));
},
onBeforeDestroy: function() {
this.model.get('icons').off('add remove', this.render, this);
},
});
Module.SocialWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.socialInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.SocialBlockModel({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'facebook',
link: 'http://example.com',
image: App.getAvailableStyles().get('socialIconSets.default.facebook'),
height: '32px',
width: '32px',
text: 'Facebook',
},
{
type: 'socialIcon',
iconType: 'twitter',
link: 'http://example.com',
image: App.getAvailableStyles().get('socialIconSets.default.twitter'),
height: '32px',
width: '32px',
text: 'Twitter',
},
],
}, { parse: true });
}
}
},
});
App.on('before:start', function() {
App.registerBlockType('social', {
blockModel: Module.SocialBlockModel,
blockView: Module.SocialBlockView,
});
App.registerWidget({
name: 'social',
widgetView: Module.SocialWidgetView,
priority: 95,
});
App.registerWidget({
name: 'social',
widgetView: Module.SocialWidgetView,
priority: 95,
});
});
});
});

171
assets/js/src/newsletter_editor/blocks/spacer.js
View File

@ -9,97 +9,96 @@ define('newsletter_editor/blocks/spacer', [
], function(EditorApplication, Backbone, Marionette, MailPoet) {
EditorApplication.module("blocks.spacer", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.SpacerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'spacer',
styles: {
block: {
backgroundColor: 'transparent',
height: '40px',
},
},
}, EditorApplication.getConfig().get('blockDefaults.spacer'));
Module.SpacerBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'spacer',
styles: {
block: {
backgroundColor: 'transparent',
height: '40px',
},
},
}, EditorApplication.getConfig().get('blockDefaults.spacer'));
},
});
Module.SpacerBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_spacer_block mailpoet_droppable_block",
getTemplate: function() { return templates.spacerBlock; },
behaviors: _.defaults({
ResizableBehavior: {
elementSelector: '.mailpoet_spacer',
resizeHandleSelector: '.mailpoet_resize_handle',
minLength: 20, // TODO: Move this number to editor configuration
modelField: 'styles.block.height',
},
}, base.BlockView.prototype.behaviors),
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
onDragSubstituteBy: function() { return Module.SpacerWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:styles.block.backgroundColor', this.render);
this.listenTo(this.model, 'change:styles.block.height', this.changeHeight);
},
onRender: function() {
this.toolsView = new Module.SpacerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
changeHeight: function() {
this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));
this.$('.mailpoet_resize_handle_text').text(this.model.get('styles.block.height'));
},
onBeforeDestroy: function() {
this.stopListening(this.model);
},
});
Module.SpacerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.SpacerBlockSettingsView; },
});
Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.spacerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
});
Module.SpacerWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.spacerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.SpacerBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('spacer', {
blockModel: Module.SpacerBlockModel,
blockView: Module.SpacerBlockView,
});
Module.SpacerBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_spacer_block mailpoet_droppable_block",
getTemplate: function() { return templates.spacerBlock; },
behaviors: _.defaults({
ResizableBehavior: {
elementSelector: '.mailpoet_spacer',
resizeHandleSelector: '.mailpoet_resize_handle',
minLength: 20, // TODO: Move this number to editor configuration
modelField: 'styles.block.height',
},
}, base.BlockView.prototype.behaviors),
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
onDragSubstituteBy: function() { return Module.SpacerWidgetView; },
initialize: function() {
base.BlockView.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:styles.block.backgroundColor', this.render);
this.listenTo(this.model, 'change:styles.block.height', this.changeHeight);
},
onRender: function() {
this.toolsView = new Module.SpacerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
changeHeight: function() {
this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));
this.$('.mailpoet_resize_handle_text').text(this.model.get('styles.block.height'));
},
onBeforeDestroy: function() {
this.stopListening(this.model);
},
});
Module.SpacerBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.SpacerBlockSettingsView; },
});
Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.spacerBlockSettings; },
events: function() {
return {
"change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
"click .mailpoet_done_editing": "close",
};
},
behaviors: {
ColorPickerBehavior: {},
},
});
Module.SpacerWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.spacerInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.SpacerBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('spacer', {
blockModel: Module.SpacerBlockModel,
blockView: Module.SpacerBlockView,
});
App.registerWidget({
name: 'spacer',
widgetView: Module.SpacerWidgetView,
priority: 94,
});
App.registerWidget({
name: 'spacer',
widgetView: Module.SpacerWidgetView,
priority: 94,
});
});
});
});

201
assets/js/src/newsletter_editor/blocks/text.js
View File

@ -10,117 +10,116 @@ define('newsletter_editor/blocks/text', [
], function(EditorApplication, Backbone, Marionette, MailPoet, jQuery) {
EditorApplication.module("blocks.text", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
var base = App.module('blocks.base');
var base = App.module('blocks.base');
Module.TextBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'text',
text: 'Edit this to insert text',
}, EditorApplication.getConfig().get('blockDefaults.text'));
Module.TextBlockModel = base.BlockModel.extend({
defaults: function() {
return this._getDefaults({
type: 'text',
text: 'Edit this to insert text',
}, EditorApplication.getConfig().get('blockDefaults.text'));
},
});
Module.TextBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_text_block mailpoet_droppable_block",
getTemplate: function() { return templates.textBlock; },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {
disableTextEditor: false,
});
},
onDragSubstituteBy: function() { return Module.TextWidgetView; },
onRender: function() {
this.toolsView = new Module.TextBlockToolsView({
model: this.model,
tools: {
settings: false,
},
});
});
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
if (!this.renderOptions.disableTextEditor) {
this.$('.mailpoet_content').tinymce({
inline: true,
Module.TextBlockView = base.BlockView.extend({
className: "mailpoet_block mailpoet_text_block mailpoet_droppable_block",
getTemplate: function() { return templates.textBlock; },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {
disableTextEditor: false,
menubar: false,
toolbar1: "styleselect bold italic forecolor | link unlink",
toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_custom_fields",
//forced_root_block: 'p',
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]",
invalid_elements: "script",
style_formats: [
{title: 'Heading 1', block: 'h1'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink code textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
},
onDragSubstituteBy: function() { return Module.TextWidgetView; },
onRender: function() {
this.toolsView = new Module.TextBlockToolsView({
model: this.model,
tools: {
settings: false,
},
editor.on('focus', function(e) {
that.disableShowingTools();
});
this.toolsRegion.show(this.toolsView);
},
onDomRefresh: function() {
this.attachTextEditor();
},
attachTextEditor: function() {
var that = this;
if (!this.renderOptions.disableTextEditor) {
this.$('.mailpoet_content').tinymce({
inline: true,
menubar: false,
toolbar1: "styleselect bold italic forecolor | link unlink",
toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_custom_fields",
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
//forced_root_block: 'p',
valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]",
invalid_elements: "script",
style_formats: [
{title: 'Heading 1', block: 'h1'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Paragraph', block: 'p'},
],
plugins: "wplink code textcolor mailpoet_custom_fields",
setup: function(editor) {
editor.on('change', function(e) {
that.model.set('text', editor.getContent());
});
editor.on('focus', function(e) {
that.disableShowingTools();
});
editor.on('blur', function(e) {
that.enableShowingTools();
});
},
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
}
},
});
Module.TextBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.TextBlockSettingsView; },
});
Module.TextBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.textBlockSettings; },
});
Module.TextWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.textInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.TextBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('text', {
blockModel: Module.TextBlockModel,
blockView: Module.TextBlockView,
mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
mailpoet_custom_fields_window_title: App.getConfig().get('translations.customFieldsWindowTitle'),
});
}
},
});
App.registerWidget({
name: 'text',
widgetView: Module.TextWidgetView,
priority: 90,
});
Module.TextBlockToolsView = base.BlockToolsView.extend({
getSettingsView: function() { return Module.TextBlockSettingsView; },
});
Module.TextBlockSettingsView = base.BlockSettingsView.extend({
getTemplate: function() { return templates.textBlockSettings; },
});
Module.TextWidgetView = base.WidgetView.extend({
getTemplate: function() { return templates.textInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function() {
return new Module.TextBlockModel();
},
}
},
});
App.on('before:start', function() {
App.registerBlockType('text', {
blockModel: Module.TextBlockModel,
blockView: Module.TextBlockView,
});
App.registerWidget({
name: 'text',
widgetView: Module.TextWidgetView,
priority: 90,
});
});
});
});

48
assets/js/src/newsletter_editor/components/config.js
View File

@ -4,32 +4,34 @@ define('newsletter_editor/components/config', [
], function(EditorApplication, Backbone) {
EditorApplication.module("components.config", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
Module.ConfigModel = Backbone.SuperModel.extend({
defaults: {
availableStyles: {},
socialIcons: {},
blockDefaults: {},
translations: {},
sidepanelWidth: '331px',
validation: {},
urls: {},
},
});
Module.ConfigModel = Backbone.SuperModel.extend({
defaults: {
availableStyles: {},
socialIcons: {},
blockDefaults: {},
translations: {},
sidepanelWidth: '331px',
validation: {},
urls: {},
},
});
// Global and available styles for access in blocks and their settings
Module._config = {};
Module.getConfig = function() { return Module._config; };
Module.setConfig = function(options) { Module._config = new Module.ConfigModel(options, { parse: true }); return Module._config; };
// Global and available styles for access in blocks and their settings
Module._config = {};
Module.getConfig = function() { return Module._config; };
Module.setConfig = function(options) {
Module._config = new Module.ConfigModel(options, { parse: true });
return Module._config;
};
App.on('before:start', function(options) {
// Expose config methods globally
App.getConfig = Module.getConfig;
App.setConfig = Module.setConfig;
App.on('before:start', function(options) {
// Expose config methods globally
App.getConfig = Module.getConfig;
App.setConfig = Module.setConfig;
App.setConfig(options.config);
});
App.setConfig(options.config);
});
});
});

135
assets/js/src/newsletter_editor/components/content.js
View File

@ -5,76 +5,75 @@ define('newsletter_editor/components/content', [
], function(EditorApplication, Backbone, Marionette) {
EditorApplication.module("components.content", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
// Holds newsletter entry fields, such as subject or creation datetime.
// Does not hold newsletter content nor newsletter styles, those are
// handled by other components.
Module.NewsletterModel = Backbone.SuperModel.extend({
stale: ['data', 'styles'],
initialize: function(options) {
this.on('change', function() {
App.getChannel().trigger('autoSave');
});
},
toJSON: function() {
// Remove stale attributes from resulting JSON object
return _.omit(Backbone.SuperModel.prototype.toJSON.call(this), this.stale);
},
// Holds newsletter entry fields, such as subject or creation datetime.
// Does not hold newsletter content nor newsletter styles, those are
// handled by other components.
Module.NewsletterModel = Backbone.SuperModel.extend({
stale: ['data', 'styles'],
initialize: function(options) {
this.on('change', function() {
App.getChannel().trigger('autoSave');
});
},
toJSON: function() {
// Remove stale attributes from resulting JSON object
return _.omit(Backbone.SuperModel.prototype.toJSON.call(this), this.stale);
},
});
// Content block view and model handlers for different content types
Module._blockTypes = {};
Module.registerBlockType = function(type, data) {
Module._blockTypes[type] = data;
};
Module.getBlockTypeModel = function(type) {
if (type in Module._blockTypes) {
return Module._blockTypes[type].blockModel;
} else {
throw "Block type not supported: " + type;
}
};
Module.getBlockTypeView = function(type) {
if (type in Module._blockTypes) {
return Module._blockTypes[type].blockView;
} else {
throw "Block type not supported: " + type;
}
};
Module.toJSON = function() {
return _.extend({
data: App._contentContainer.toJSON(),
styles: App.getGlobalStyles().toJSON(),
}, App.getNewsletter().toJSON());
};
Module.getNewsletter = function() {
return Module.newsletter;
};
App.on('before:start', function(options) {
// Expose block methods globally
App.registerBlockType = Module.registerBlockType;
App.getBlockTypeModel = Module.getBlockTypeModel;
App.getBlockTypeView = Module.getBlockTypeView;
App.toJSON = Module.toJSON;
App.getNewsletter = Module.getNewsletter;
Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['data', 'styles']));
});
App.on('start', function(options) {
// TODO: Other newsletter information will be needed as well.
App._contentContainer = new (this.getBlockTypeModel('container'))(options.newsletter.data, {parse: true});
App._contentContainerView = new (this.getBlockTypeView('container'))({
model: App._contentContainer,
renderOptions: { depth: 0 },
});
// Content block view and model handlers for different content types
Module._blockTypes = {};
Module.registerBlockType = function(type, data) {
Module._blockTypes[type] = data;
};
Module.getBlockTypeModel = function(type) {
if (type in Module._blockTypes) {
return Module._blockTypes[type].blockModel;
} else {
throw "Block type not supported: " + type;
}
};
Module.getBlockTypeView = function(type) {
if (type in Module._blockTypes) {
return Module._blockTypes[type].blockView;
} else {
throw "Block type not supported: " + type;
}
};
Module.toJSON = function() {
return _.extend({
data: App._contentContainer.toJSON(),
styles: App.getGlobalStyles().toJSON(),
}, App.getNewsletter().toJSON());
};
Module.getNewsletter = function() {
return Module.newsletter;
};
App.on('before:start', function(options) {
// Expose block methods globally
App.registerBlockType = Module.registerBlockType;
App.getBlockTypeModel = Module.getBlockTypeModel;
App.getBlockTypeView = Module.getBlockTypeView;
App.toJSON = Module.toJSON;
App.getNewsletter = Module.getNewsletter;
Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['data', 'styles']));
});
App.on('start', function(options) {
// TODO: Other newsletter information will be needed as well.
App._contentContainer = new (this.getBlockTypeModel('container'))(options.newsletter.data, {parse: true});
App._contentContainerView = new (this.getBlockTypeView('container'))({
model: App._contentContainer,
renderOptions: { depth: 0 },
});
App._appView.contentRegion.show(App._contentContainerView);
});
App._appView.contentRegion.show(App._contentContainerView);
});
});
});

43
assets/js/src/newsletter_editor/components/heading.js
View File

@ -5,29 +5,28 @@ define('newsletter_editor/components/heading', [
], function(EditorApplication, Backbone, Marionette) {
EditorApplication.module("components.heading", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
Module.HeadingView = Marionette.ItemView.extend({
getTemplate: function() { return templates.heading; },
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
events: function() {
return {
'keyup .mailpoet_input_title': _.partial(this.changeField, "newsletter_subject"),
'keyup .mailpoet_input_preheader': _.partial(this.changeField, "newsletter_preheader"),
};
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
Module.HeadingView = Marionette.ItemView.extend({
getTemplate: function() { return templates.heading; },
templateHelpers: function() {
return {
model: this.model.toJSON(),
};
},
events: function() {
return {
'keyup .mailpoet_input_title': _.partial(this.changeField, "newsletter_subject"),
'keyup .mailpoet_input_preheader': _.partial(this.changeField, "newsletter_preheader"),
};
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
});
App.on('start', function(options) {
App._appView.headingRegion.show(new Module.HeadingView({ model: App.getNewsletter() }));
});
App.on('start', function(options) {
App._appView.headingRegion.show(new Module.HeadingView({ model: App.getNewsletter() }));
});
});
});

297
assets/js/src/newsletter_editor/components/save.js
View File

@ -5,174 +5,173 @@ define('newsletter_editor/components/save', [
], function(EditorApplication, Backbone, Marionette) {
EditorApplication.module("components.save", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
var saveTimeout;
"use strict";
var saveTimeout;
// Save editor contents to server
Module.save = function() {
App.getChannel().trigger('beforeEditorSave');
// Save editor contents to server
Module.save = function() {
App.getChannel().trigger('beforeEditorSave');
var json = App.toJSON();
var json = App.toJSON();
// save newsletter
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_save.php', json, function(response) {
//if(response.success !== undefined && response.success === true) {
////MailPoet.Notice.success("<?php _e('Newsletter has been saved.'); ?>");
//} else if(response.error !== undefined) {
//if(response.error.length === 0) {
//// TODO: Handle translations
//MailPoet.Notice.error("<?php _e('An unknown error occurred, please check your settings.'); ?>");
//} else {
//$(response.error).each(function(i, error) {
//MailPoet.Notice.error(error);
//});
//}
//}
//App.getChannel().trigger('afterEditorSave', json, response);
//}, function(error) {
//// TODO: Handle saving errors
//App.getChannel().trigger('afterEditorSave', {}, error);
//});
};
// save newsletter
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_save.php', json, function(response) {
//if(response.success !== undefined && response.success === true) {
////MailPoet.Notice.success("<?php _e('Newsletter has been saved.'); ?>");
//} else if(response.error !== undefined) {
//if(response.error.length === 0) {
//// TODO: Handle translations
//MailPoet.Notice.error("<?php _e('An unknown error occurred, please check your settings.'); ?>");
//} else {
//$(response.error).each(function(i, error) {
//MailPoet.Notice.error(error);
//});
//}
//}
//App.getChannel().trigger('afterEditorSave', json, response);
//}, function(error) {
//// TODO: Handle saving errors
//App.getChannel().trigger('afterEditorSave', {}, error);
//});
};
Module.SaveView = Marionette.LayoutView.extend({
getTemplate: function() { return templates.save; },
events: {
'click .mailpoet_save_button': 'save',
'click .mailpoet_save_show_options': 'toggleSaveOptions',
'click .mailpoet_save_next': 'next',
/* Save as template */
'click .mailpoet_save_template': 'toggleSaveAsTemplate',
'click .mailpoet_save_as_template': 'saveAsTemplate',
/* Export template */
'click .mailpoet_save_export': 'exportTemplate',
},
initialize: function(options) {
App.getChannel().on('beforeEditorSave', this.beforeSave, this);
App.getChannel().on('afterEditorSave', this.afterSave, this);
Module.SaveView = Marionette.LayoutView.extend({
getTemplate: function() { return templates.save; },
events: {
'click .mailpoet_save_button': 'save',
'click .mailpoet_save_show_options': 'toggleSaveOptions',
'click .mailpoet_save_next': 'next',
/* Save as template */
'click .mailpoet_save_template': 'toggleSaveAsTemplate',
'click .mailpoet_save_as_template': 'saveAsTemplate',
/* Export template */
'click .mailpoet_save_export': 'exportTemplate',
},
initialize: function(options) {
App.getChannel().on('beforeEditorSave', this.beforeSave, this);
App.getChannel().on('afterEditorSave', this.afterSave, this);
this.validateNewsletter(App.toJSON());
},
save: function() {
this.hideOptionContents();
App.getChannel().trigger('save');
},
beforeSave: function() {
// TODO: Add a loading animation instead
this.$('.mailpoet_autosaved_at').text('Saving...');
},
afterSave: function(json, response) {
this.validateNewsletter(json);
// Update 'Last saved timer'
this.$('.mailpoet_editor_last_saved').removeClass('mailpoet_hidden');
this.$('.mailpoet_autosaved_at').text(response.time);
},
toggleSaveOptions: function() {
this.$('.mailpoet_save_options').toggleClass('mailpoet_hidden');
this.$('.mailpoet_save_show_options').toggleClass('mailpoet_save_show_options_active');
},
toggleSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').toggleClass('mailpoet_hidden');
this.toggleSaveOptions();
},
showSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').removeClass('mailpoet_hidden');
this.toggleSaveOptions();
},
hideSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
},
saveAsTemplate: function() {
var templateName = this.$('.mailpoet_save_as_template_name').val(),
templateDescription = this.$('.mailpoet_save_as_template_description').val();
this.validateNewsletter(App.toJSON());
},
save: function() {
this.hideOptionContents();
App.getChannel().trigger('save');
},
beforeSave: function() {
// TODO: Add a loading animation instead
this.$('.mailpoet_autosaved_at').text('Saving...');
},
afterSave: function(json, response) {
this.validateNewsletter(json);
// Update 'Last saved timer'
this.$('.mailpoet_editor_last_saved').removeClass('mailpoet_hidden');
this.$('.mailpoet_autosaved_at').text(response.time);
},
toggleSaveOptions: function() {
this.$('.mailpoet_save_options').toggleClass('mailpoet_hidden');
this.$('.mailpoet_save_show_options').toggleClass('mailpoet_save_show_options_active');
},
toggleSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').toggleClass('mailpoet_hidden');
this.toggleSaveOptions();
},
showSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').removeClass('mailpoet_hidden');
this.toggleSaveOptions();
},
hideSaveAsTemplate: function() {
this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
},
saveAsTemplate: function() {
var templateName = this.$('.mailpoet_save_as_template_name').val(),
templateDescription = this.$('.mailpoet_save_as_template_description').val();
console.log('Saving template with ', templateName, templateDescription);
console.log('Saving template with ', templateName, templateDescription);
this.hideOptionContents();
},
exportTemplate: function() {
console.log('Exporting template');
this.hideOptionContents();
},
hideOptionContents: function() {
this.hideSaveAsTemplate();
this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
},
next: function() {
this.hideOptionContents();
console.log('Next');
window.location.href = App.getConfig().get('urls.send');
},
validateNewsletter: function(jsonObject) {
if (!App._contentContainer.isValid()) {
this.showValidationError(App._contentContainer.validationError);
return;
}
this.hideOptionContents();
},
exportTemplate: function() {
console.log('Exporting template');
this.hideOptionContents();
},
hideOptionContents: function() {
this.hideSaveAsTemplate();
this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
},
next: function() {
this.hideOptionContents();
console.log('Next');
window.location.href = App.getConfig().get('urls.send');
},
validateNewsletter: function(jsonObject) {
if (!App._contentContainer.isValid()) {
this.showValidationError(App._contentContainer.validationError);
return;
}
if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
JSON.stringify(jsonObject).indexOf("[unsubscribeUrl]") < 0) {
this.showValidationError(App.getConfig().get('translations.unsubscribeLinkMissing'));
return;
}
if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
JSON.stringify(jsonObject).indexOf("[unsubscribeUrl]") < 0) {
this.showValidationError(App.getConfig().get('translations.unsubscribeLinkMissing'));
return;
}
this.hideValidationError();
},
showValidationError: function(message) {
var $el = this.$('.mailpoet_save_error');
$el.text(message);
$el.removeClass('mailpoet_hidden');
this.hideValidationError();
},
showValidationError: function(message) {
var $el = this.$('.mailpoet_save_error');
$el.text(message);
$el.removeClass('mailpoet_hidden');
this.$('.mailpoet_save_next').addClass('button-disabled');
},
hideValidationError: function() {
this.$('.mailpoet_save_error').addClass('mailpoet_hidden');
this.$('.mailpoet_save_next').removeClass('button-disabled');
},
});
this.$('.mailpoet_save_next').addClass('button-disabled');
},
hideValidationError: function() {
this.$('.mailpoet_save_error').addClass('mailpoet_hidden');
this.$('.mailpoet_save_next').removeClass('button-disabled');
},
});
Module.autoSave = function() {
// Delay in saving editor contents, during which a new autosave
// may be requested
var AUTOSAVE_DELAY_DURATION = 1000;
Module.autoSave = function() {
// Delay in saving editor contents, during which a new autosave
// may be requested
var AUTOSAVE_DELAY_DURATION = 1000;
// Cancel save timer if another change happens before it completes
if (saveTimeout) clearTimeout(saveTimeout);
saveTimeout = setTimeout(function() {
App.getChannel().trigger('save');
clearTimeout(saveTimeout);
saveTimeout = undefined;
}, AUTOSAVE_DELAY_DURATION);
};
// Cancel save timer if another change happens before it completes
if (saveTimeout) clearTimeout(saveTimeout);
saveTimeout = setTimeout(function() {
App.getChannel().trigger('save');
clearTimeout(saveTimeout);
saveTimeout = undefined;
}, AUTOSAVE_DELAY_DURATION);
};
Module.beforeExitWithUnsavedChanges = function(e) {
if (saveTimeout) {
// TODO: Translate this message
var message = "There are unsaved changes which will be lost if you leave this page.";
e = e || window.event;
Module.beforeExitWithUnsavedChanges = function(e) {
if (saveTimeout) {
// TODO: Translate this message
var message = "There are unsaved changes which will be lost if you leave this page.";
e = e || window.event;
if (e) {
e.returnValue = message;
}
if (e) {
e.returnValue = message;
}
return message;
}
};
return message;
}
};
App.on('before:start', function(options) {
App.save = Module.save;
App.getChannel().on('autoSave', Module.autoSave);
App.on('before:start', function(options) {
App.save = Module.save;
App.getChannel().on('autoSave', Module.autoSave);
window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
App.getChannel().on('save', function() { App.save(); });
});
App.getChannel().on('save', function() { App.save(); });
});
App.on('start', function(options) {
var saveView = new Module.SaveView();
App._appView.bottomRegion.show(saveView);
});
App.on('start', function(options) {
var saveView = new Module.SaveView();
App._appView.bottomRegion.show(saveView);
});
});
});

455
assets/js/src/newsletter_editor/components/sidebar.js
View File

@ -6,254 +6,253 @@ define('newsletter_editor/components/sidebar', [
], function(EditorApplication, Backbone, Marionette) {
EditorApplication.module("components.sidebar", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
// Widget handlers for use to create new content blocks via drag&drop
Module._contentWidgets = new (Backbone.Collection.extend({
model: Backbone.SuperModel.extend({
defaults: {
name: '',
priority: 100,
widgetView: undefined,
},
}),
comparator: 'priority',
}))();
Module.registerWidget = function(widget) { return Module._contentWidgets.add(widget); };
Module.getWidgets = function() { return Module._contentWidgets; };
// Widget handlers for use to create new content blocks via drag&drop
Module._contentWidgets = new (Backbone.Collection.extend({
model: Backbone.SuperModel.extend({
defaults: {
name: '',
priority: 100,
widgetView: undefined,
},
}),
comparator: 'priority',
}))();
Module.registerWidget = function(widget) { return Module._contentWidgets.add(widget); };
Module.getWidgets = function() { return Module._contentWidgets; };
// Layout widget handlers for use to create new layout blocks via drag&drop
Module._layoutWidgets = new (Backbone.Collection.extend({
model: Backbone.SuperModel.extend({
defaults: {
name: '',
priority: 100,
widgetView: undefined,
},
}),
comparator: 'priority',
}))();
Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
// Layout widget handlers for use to create new layout blocks via drag&drop
Module._layoutWidgets = new (Backbone.Collection.extend({
model: Backbone.SuperModel.extend({
defaults: {
name: '',
priority: 100,
widgetView: undefined,
},
}),
comparator: 'priority',
}))();
Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
var SidebarView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebar; },
regions: {
contentRegion: '.mailpoet_content_region',
layoutRegion: '.mailpoet_layout_region',
stylesRegion: '.mailpoet_styles_region',
previewRegion: '.mailpoet_preview_region',
},
events: {
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
this.$el.find('.mailpoet_sidebar_region').addClass('closed');
this.$el.find(event.target).parent().parent().removeClass('closed');
},
},
initialize: function(options) {
$(window)
.on('resize', this.updateHorizontalScroll.bind(this))
.on('scroll', this.updateHorizontalScroll.bind(this));
},
onRender: function() {
this.contentRegion.show(new Module.SidebarWidgetsView({
collection: App.getWidgets(),
}));
this.layoutRegion.show(new Module.SidebarLayoutWidgetsView({
collection: App.getLayoutWidgets(),
}));
this.stylesRegion.show(new Module.SidebarStylesView({
model: App.getGlobalStyles(),
availableStyles: App.getAvailableStyles(),
}));
this.previewRegion.show(new Module.SidebarPreviewView());
},
updateHorizontalScroll: function() {
// Fixes the sidebar so that on narrower screens the horizontal
// position of the sidebar would be scrollable and not fixed
// partially out of visible screen
this.$el.parent().each(function () {
var calculated_left, self;
var SidebarView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebar; },
regions: {
contentRegion: '.mailpoet_content_region',
layoutRegion: '.mailpoet_layout_region',
stylesRegion: '.mailpoet_styles_region',
previewRegion: '.mailpoet_preview_region',
},
events: {
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function(event) {
this.$el.find('.mailpoet_sidebar_region').addClass('closed');
this.$el.find(event.target).parent().parent().removeClass('closed');
},
},
initialize: function(options) {
$(window)
.on('resize', this.updateHorizontalScroll.bind(this))
.on('scroll', this.updateHorizontalScroll.bind(this));
},
onRender: function() {
this.contentRegion.show(new Module.SidebarWidgetsView({
collection: App.getWidgets(),
}));
this.layoutRegion.show(new Module.SidebarLayoutWidgetsView({
collection: App.getLayoutWidgets(),
}));
this.stylesRegion.show(new Module.SidebarStylesView({
model: App.getGlobalStyles(),
availableStyles: App.getAvailableStyles(),
}));
this.previewRegion.show(new Module.SidebarPreviewView());
},
updateHorizontalScroll: function() {
// Fixes the sidebar so that on narrower screens the horizontal
// position of the sidebar would be scrollable and not fixed
// partially out of visible screen
this.$el.parent().each(function () {
var calculated_left, self;
self = $(this);
self = $(this);
if (self.css('position') === 'fixed') {
calculated_left = self.parent().offset().left - $(window).scrollLeft();
self.css('left', calculated_left + 'px');
} else {
self.css('left', '');
}
});
},
onDomRefresh: function() {
var that = this;
this.$el.parent().stick_in_parent({
offset_top: 32,
});
this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
},
});
if (self.css('position') === 'fixed') {
calculated_left = self.parent().offset().left - $(window).scrollLeft();
self.css('left', calculated_left + 'px');
} else {
self.css('left', '');
}
});
},
onDomRefresh: function() {
var that = this;
this.$el.parent().stick_in_parent({
offset_top: 32,
});
this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
},
});
/**
* Responsible for rendering draggable content widgets
*/
Module.SidebarWidgetsView = Backbone.Marionette.CompositeView.extend({
getTemplate: function() { return templates.sidebarContent; },
getChildView: function(model) {
return model.get('widgetView');
},
childViewContainer: '.mailpoet_region_content',
});
/**
* Responsible for rendering draggable content widgets
*/
Module.SidebarWidgetsView = Backbone.Marionette.CompositeView.extend({
getTemplate: function() { return templates.sidebarContent; },
getChildView: function(model) {
return model.get('widgetView');
},
childViewContainer: '.mailpoet_region_content',
});
/**
* Responsible for rendering draggable layout widgets
*/
Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
getTemplate: function() { return templates.sidebarLayout; },
});
/**
* Responsible for managing global styles
*/
Module.SidebarStylesView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebarStyles; },
events: function() {
return {
"change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
"change #mailpoet_text_font_family": function(event) {
this.model.set('text.fontFamily', event.target.value);
},
"change #mailpoet_text_font_size": function(event) {
this.model.set('text.fontSize', event.target.value);
},
"change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
"change #mailpoet_h1_font_family": function(event) {
this.model.set('h1.fontFamily', event.target.value);
},
"change #mailpoet_h1_font_size": function(event) {
this.model.set('h1.fontSize', event.target.value);
},
"change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
"change #mailpoet_h2_font_family": function(event) {
this.model.set('h2.fontFamily', event.target.value);
},
"change #mailpoet_h2_font_size": function(event) {
this.model.set('h2.fontSize', event.target.value);
},
"change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
"change #mailpoet_h3_font_family": function(event) {
this.model.set('h3.fontFamily', event.target.value);
},
"change #mailpoet_h3_font_size": function(event) {
this.model.set('h3.fontSize', event.target.value);
},
"change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
"change #mailpoet_a_font_underline": function(event) {
this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'newsletter.backgroundColor'),
"change #mailpoet_background_color": _.partial(this.changeColorField, 'background.backgroundColor'),
};
/**
* Responsible for rendering draggable layout widgets
*/
Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
getTemplate: function() { return templates.sidebarLayout; },
});
/**
* Responsible for managing global styles
*/
Module.SidebarStylesView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebarStyles; },
events: function() {
return {
"change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
"change #mailpoet_text_font_family": function(event) {
this.model.set('text.fontFamily', event.target.value);
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: this.availableStyles.toJSON(),
};
"change #mailpoet_text_font_size": function(event) {
this.model.set('text.fontSize', event.target.value);
},
initialize: function(options) {
this.availableStyles = options.availableStyles;
var that = this;
"change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
"change #mailpoet_h1_font_family": function(event) {
this.model.set('h1.fontFamily', event.target.value);
},
onRender: function() {
var that = this;
this.$('.mailpoet_color').spectrum({
clickoutFiresChange: true,
showInput: true,
showInitial: true,
preferredFormat: "hex6",
allowEmpty: true,
});
"change #mailpoet_h1_font_size": function(event) {
this.model.set('h1.fontSize', event.target.value);
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
"change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
"change #mailpoet_h2_font_family": function(event) {
this.model.set('h2.fontFamily', event.target.value);
},
changeColorField: function(field, event) {
var value = jQuery(event.target).val();
if (value === '') {
value = 'transparent';
}
this.model.set(field, value);
"change #mailpoet_h2_font_size": function(event) {
this.model.set('h2.fontSize', event.target.value);
},
});
"change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
"change #mailpoet_h3_font_family": function(event) {
this.model.set('h3.fontFamily', event.target.value);
},
"change #mailpoet_h3_font_size": function(event) {
this.model.set('h3.fontSize', event.target.value);
},
"change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
"change #mailpoet_a_font_underline": function(event) {
this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
},
"change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'newsletter.backgroundColor'),
"change #mailpoet_background_color": _.partial(this.changeColorField, 'background.backgroundColor'),
};
},
templateHelpers: function() {
return {
model: this.model.toJSON(),
availableStyles: this.availableStyles.toJSON(),
};
},
initialize: function(options) {
this.availableStyles = options.availableStyles;
var that = this;
},
onRender: function() {
var that = this;
this.$('.mailpoet_color').spectrum({
clickoutFiresChange: true,
showInput: true,
showInitial: true,
preferredFormat: "hex6",
allowEmpty: true,
});
},
changeField: function(field, event) {
this.model.set(field, jQuery(event.target).val());
},
changeColorField: function(field, event) {
var value = jQuery(event.target).val();
if (value === '') {
value = 'transparent';
}
this.model.set(field, value);
},
});
Module.SidebarPreviewView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebarPreview; },
events: {
'click .mailpoet_show_preview': 'showPreview',
'click #mailpoet_send_preview': 'sendPreview',
},
showPreview: function() {
var json = App.toJSON();
Module.SidebarPreviewView = Backbone.Marionette.LayoutView.extend({
getTemplate: function() { return templates.sidebarPreview; },
events: {
'click .mailpoet_show_preview': 'showPreview',
'click #mailpoet_send_preview': 'sendPreview',
},
showPreview: function() {
var json = App.toJSON();
mailpoet_post_json('newsletter_render.php', { data: json }, function(response) {
console.log('Should open a new window');
window.open('data:text/html,' + encodeURIComponent(response), '_blank');
}, function(error) {
console.log('Preview error', json);
alert('Something went wrong, check console');
});
},
sendPreview: function() {
// testing sending method
console.log('trying to send a preview');
// get form data
var data = {
from_name: this.$('#mailpoet_preview_from_name').val(),
from_email: this.$('#mailpoet_preview_from_email').val(),
to_email: this.$('#mailpoet_preview_to_email').val(),
newsletter: App.newsletterId,
};
mailpoet_post_json('newsletter_render.php', { data: json }, function(response) {
console.log('Should open a new window');
window.open('data:text/html,' + encodeURIComponent(response), '_blank');
}, function(error) {
console.log('Preview error', json);
alert('Something went wrong, check console');
});
},
sendPreview: function() {
// testing sending method
console.log('trying to send a preview');
// get form data
var data = {
from_name: this.$('#mailpoet_preview_from_name').val(),
from_email: this.$('#mailpoet_preview_from_email').val(),
to_email: this.$('#mailpoet_preview_to_email').val(),
newsletter: App.newsletterId,
};
// send test email
MailPoet.Modal.loading(true);
// send test email
MailPoet.Modal.loading(true);
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_preview.php', data, function(response) {
//if(response.success !== undefined && response.success === true) {
//MailPoet.Notice.success(App.getConfig().get('translations.testEmailSent'));
//} else if(response.error !== undefined) {
//if(response.error.length === 0) {
//MailPoet.Notice.error(App.getConfig().get('translations.unknownErrorOccurred'));
//} else {
//$(response.error).each(function(i, error) {
//MailPoet.Notice.error(error);
//});
//}
//}
//MailPoet.Modal.loading(false);
//}, function(error) {
//// an error occurred
//MailPoet.Modal.loading(false);
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_preview.php', data, function(response) {
//if(response.success !== undefined && response.success === true) {
//MailPoet.Notice.success(App.getConfig().get('translations.testEmailSent'));
//} else if(response.error !== undefined) {
//if(response.error.length === 0) {
//MailPoet.Notice.error(App.getConfig().get('translations.unknownErrorOccurred'));
//} else {
//$(response.error).each(function(i, error) {
//MailPoet.Notice.error(error);
//});
},
});
//}
//}
//MailPoet.Modal.loading(false);
//}, function(error) {
//// an error occurred
//MailPoet.Modal.loading(false);
//});
},
});
App.on('before:start', function(options) {
App.registerWidget = Module.registerWidget;
App.getWidgets = Module.getWidgets;
App.registerLayoutWidget = Module.registerLayoutWidget;
App.getLayoutWidgets = Module.getLayoutWidgets;
});
App.on('before:start', function(options) {
App.registerWidget = Module.registerWidget;
App.getWidgets = Module.getWidgets;
App.registerLayoutWidget = Module.registerLayoutWidget;
App.getLayoutWidgets = Module.getLayoutWidgets;
});
App.on('start', function(options) {
var stylesModel = App.getGlobalStyles(),
sidebarView = new SidebarView();
App.on('start', function(options) {
var stylesModel = App.getGlobalStyles(),
sidebarView = new SidebarView();
App._appView.sidebarRegion.show(sidebarView);
});
App._appView.sidebarRegion.show(sidebarView);
});
});
});

133
assets/js/src/newsletter_editor/components/styles.js
View File

@ -5,79 +5,78 @@ define('newsletter_editor/components/styles', [
], function(EditorApplication, Backbone, Marionette) {
EditorApplication.module("components.styles", function(Module, App, Backbone, Marionette, $, _) {
"use strict";
"use strict";
Module.StylesModel = Backbone.SuperModel.extend({
defaults: {
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '16px',
},
h1: {
fontColor: '#111111',
fontFamily: 'Arial Black',
fontSize: '40px'
},
h2: {
fontColor: '#222222',
fontFamily: 'Tahoma',
fontSize: '32px',
},
h3: {
fontColor: '#333333',
fontFamily: 'Verdana',
fontSize: '24px',
},
link: {
fontColor: '#21759B',
textDecoration: 'underline',
},
newsletter: {
backgroundColor: '#ffffff',
},
background: {
backgroundColor: '#cccccc',
},
},
initialize: function() {
this.on('change', function() { App.getChannel().trigger('autoSave'); });
},
});
Module.StylesModel = Backbone.SuperModel.extend({
defaults: {
text: {
fontColor: '#000000',
fontFamily: 'Arial',
fontSize: '16px',
},
h1: {
fontColor: '#111111',
fontFamily: 'Arial Black',
fontSize: '40px'
},
h2: {
fontColor: '#222222',
fontFamily: 'Tahoma',
fontSize: '32px',
},
h3: {
fontColor: '#333333',
fontFamily: 'Verdana',
fontSize: '24px',
},
link: {
fontColor: '#21759B',
textDecoration: 'underline',
},
newsletter: {
backgroundColor: '#ffffff',
},
background: {
backgroundColor: '#cccccc',
},
},
initialize: function() {
this.on('change', function() { App.getChannel().trigger('autoSave'); });
},
});
Module.StylesView = Marionette.ItemView.extend({
getTemplate: function() { return templates.styles; },
modelEvents: {
'change': 'render',
},
});
Module.StylesView = Marionette.ItemView.extend({
getTemplate: function() { return templates.styles; },
modelEvents: {
'change': 'render',
},
});
Module._globalStyles = new Backbone.SuperModel();
Module.getGlobalStyles = function() {
return Module._globalStyles;
};
Module.setGlobalStyles = function(options) {
Module._globalStyles = new Module.StylesModel(options);
return Module._globalStyles;
};
Module.getAvailableStyles = function() {
return App.getConfig().get('availableStyles');
};
Module._globalStyles = new Backbone.SuperModel();
Module.getGlobalStyles = function() {
return Module._globalStyles;
};
Module.setGlobalStyles = function(options) {
Module._globalStyles = new Module.StylesModel(options);
return Module._globalStyles;
};
Module.getAvailableStyles = function() {
return App.getConfig().get('availableStyles');
};
App.on('before:start', function(options) {
// Expose style methods to global application
App.getGlobalStyles = Module.getGlobalStyles;
App.setGlobalStyles = Module.setGlobalStyles;
App.on('before:start', function(options) {
// Expose style methods to global application
App.getGlobalStyles = Module.getGlobalStyles;
App.setGlobalStyles = Module.setGlobalStyles;
App.getAvailableStyles = Module.getAvailableStyles;
App.getAvailableStyles = Module.getAvailableStyles;
this.setGlobalStyles(options.newsletter.styles);
});
this.setGlobalStyles(options.newsletter.styles);
});
App.on('start', function(options) {
var stylesView = new Module.StylesView({ model: App.getGlobalStyles() });
App._appView.stylesRegion.show(stylesView);
});
App.on('start', function(options) {
var stylesView = new Module.StylesView({ model: App.getGlobalStyles() });
App._appView.stylesRegion.show(stylesView);
});
});
});

80
assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js
View File

@ -11,48 +11,48 @@
/*jshint unused:false */
/*global tinymce:true */
tinymce.PluginManager.add('mailpoet_custom_fields', function(editor, url) {
var appendLabelAndClose = function(text) {
editor.insertContent('[' + text + ']');
editor.windowManager.close();
},
generateOnClickFunc = function(id) {
return function() {
appendLabelAndClose(id);
};
};
var appendLabelAndClose = function(text) {
editor.insertContent('[' + text + ']');
editor.windowManager.close();
},
generateOnClickFunc = function(id) {
return function() {
appendLabelAndClose(id);
};
};
editor.addButton('mailpoet_custom_fields', {
icon: 'mailpoet_custom_fields',
onclick: function() {
var customFields = [],
configCustomFields = editor.settings.mailpoet_custom_fields;
editor.addButton('mailpoet_custom_fields', {
icon: 'mailpoet_custom_fields',
onclick: function() {
var customFields = [],
configCustomFields = editor.settings.mailpoet_custom_fields;
for (var segment in configCustomFields) {
if (configCustomFields.hasOwnProperty(segment)) {
customFields.push({
type: 'label',
text: segment,
});
for (var segment in configCustomFields) {
if (configCustomFields.hasOwnProperty(segment)) {
customFields.push({
type: 'label',
text: segment,
});
for (var i = 0; i < configCustomFields[segment].length; i += 1) {
customFields.push({
type: 'button',
text: configCustomFields[segment][i].text,
onClick: generateOnClickFunc(configCustomFields[segment][i].shortcode)
});
}
}
}
// Open window
editor.windowManager.open({
height: parseInt(editor.getParam("plugin_mailpoet_custom_fields_height", 400)),
width: parseInt(editor.getParam("plugin_mailpoet_custom_fields_width", 450)),
autoScroll: true,
title: editor.settings.mailpoet_custom_fields_window_title,
body: customFields,
buttons: [],
for (var i = 0; i < configCustomFields[segment].length; i += 1) {
customFields.push({
type: 'button',
text: configCustomFields[segment][i].text,
onClick: generateOnClickFunc(configCustomFields[segment][i].shortcode)
});
},
});
}
}
}
// Open window
editor.windowManager.open({
height: parseInt(editor.getParam("plugin_mailpoet_custom_fields_height", 400)),
width: parseInt(editor.getParam("plugin_mailpoet_custom_fields_width", 450)),
autoScroll: true,
title: editor.settings.mailpoet_custom_fields_window_title,
body: customFields,
buttons: [],
});
},
});
});

40
assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js
View File

@ -3,25 +3,25 @@
* A draggable widget, on drop creates a container with (image|text) block.
*/
ImageAndTextTemplateWidgetView = EditorApplication.module('blocks.base').WidgetView.extend({
getTemplate: function() { return templates.imageAndTextInsertion; },
className: 'mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {
drop: function() {
return new (EditorApplication.getBlockTypeModel('container'))({
type: 'container',
orientation: 'horizontal',
blocks: [
{
type: 'image',
},
{
type: 'text',
text: 'Some random text',
},
],
}, {parse: true});
getTemplate: function() { return templates.imageAndTextInsertion; },
className: 'mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {
drop: function() {
return new (EditorApplication.getBlockTypeModel('container'))({
type: 'container',
orientation: 'horizontal',
blocks: [
{
type: 'image',
},
}
},
{
type: 'text',
text: 'Some random text',
},
],
}, {parse: true});
},
}
},
});

45
tests/javascript/loadHelpers.js
View File

@ -1,28 +1,27 @@
var fs = require('fs');
module.exports = {
loadFileToContainer: function (path, window, containerTagName, options) {
var contents = fs.readFileSync(path),
container = window.document.createElement(containerTagName);
options = options || {};
container.innerHTML = contents;
loadFileToContainer: function (path, window, containerTagName, options) {
var contents = fs.readFileSync(path),
container = window.document.createElement(containerTagName);
options = options || {};
container.innerHTML = contents;
if (options.type) {
container.type = options.type;
}
if (options.id) {
container.id = options.id;
}
global.window.document.body.appendChild(container);
},
loadScript: function (scriptPath, window, options) {
this.loadFileToContainer(scriptPath, window, 'script', options);
},
loadTemplate: function (path, window, options) {
var w = window || global.window;
options = options || {};
options.type = "text/x-handlebars-template";
if (options.type) {
container.type = options.type;
}
if (options.id) {
container.id = options.id;
}
global.window.document.body.appendChild(container);
},
loadScript: function (scriptPath, window, options) {
this.loadFileToContainer(scriptPath, window, 'script', options);
},
loadTemplate: function (path, window, options) {
var w = window || global.window;
options = options || {};
options.type = "text/x-handlebars-template";
this.loadScript("views/newsletter/templates/" + path, w, options);
},
this.loadScript("views/newsletter/templates/" + path, w, options);
},
};

60
tests/javascript/mochaTestHelper.js
View File

@ -10,21 +10,21 @@ global.expect = chai.expect;
global.sinon = sinon;
if (!global.document || !global.window) {
var jsdom = require('jsdom').jsdom;
var jsdom = require('jsdom').jsdom;
global.document = jsdom('<html><head><script></script></head><body></body></html>', {}, {
FetchExternalResources: ['script'],
ProcessExternalResources: ['script'],
MutationEvents: '2.0',
QuerySelector: false
});
global.document = jsdom('<html><head><script></script></head><body></body></html>', {}, {
FetchExternalResources: ['script'],
ProcessExternalResources: ['script'],
MutationEvents: '2.0',
QuerySelector: false
});
global.window = document.parentWindow;
global.navigator = global.window.navigator;
global.window = document.parentWindow;
global.navigator = global.window.navigator;
global.window.Node.prototype.contains = function (node) {
return this.compareDocumentPosition(node) & 16;
};
global.window.Node.prototype.contains = function (node) {
return this.compareDocumentPosition(node) & 16;
};
}
global.testHelpers = require('./loadHelpers.js');
@ -35,14 +35,14 @@ global.Handlebars = global.window.Handlebars;
// Stub out interact.js
global.interact = function () {
return {
draggable: global.interact,
restrict: global.interact,
resizable: global.interact,
on: global.interact,
dropzone: global.interact,
preventDefault: global.interact,
};
return {
draggable: global.interact,
restrict: global.interact,
resizable: global.interact,
on: global.interact,
dropzone: global.interact,
preventDefault: global.interact,
};
};
jQuery.fn.spectrum = global.spectrum = function() { return this; };
@ -51,20 +51,20 @@ jQuery.fn.stick_in_parent = function() { return this; };
// Add global stubs for convenience
// TODO: Extract those to a separate file
global.stubChannel = function (EditorApplication, returnObject) {
EditorApplication.getChannel = sinon.stub().returns(_.defaults(returnObject || {}, {
trigger: function () {
},
on: function () {
},
}));
EditorApplication.getChannel = sinon.stub().returns(_.defaults(returnObject || {}, {
trigger: function () {
},
on: function () {
},
}));
};
global.stubConfig = function (EditorApplication, config) {
config = config || {};
EditorApplication.getConfig = sinon.stub().returns(new Backbone.SuperModel(config));
config = config || {};
EditorApplication.getConfig = sinon.stub().returns(new Backbone.SuperModel(config));
};
global.stubAvailableStyles = function (EditorApplication, styles) {
styles = styles || {};
EditorApplication.getAvailableStyles = sinon.stub().returns(new Backbone.SuperModel(styles));
styles = styles || {};
EditorApplication.getAvailableStyles = sinon.stub().returns(new Backbone.SuperModel(styles));
};
testHelpers.loadTemplate('blocks/base/toolsGeneric.hbs', window, {id: 'newsletter_editor_template_tools_generic'});

707
tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js
View File

@ -4,398 +4,397 @@ define('test/newsletter_editor/blocks/automatedLatestContent', [
], function(EditorApplication) {
describe('Automated latest content', function () {
describe('model', function () {
var model;
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
global.mailpoet_post_wpi = sinon.stub();
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
global.mailpoet_post_wpi = sinon.stub();
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has automatedLatestContent type', function () {
expect(model.get('type')).to.equal('automatedLatestContent');
});
it('has automatedLatestContent type', function () {
expect(model.get('type')).to.equal('automatedLatestContent');
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has image width', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has image width', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
automatedLatestContent: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
automatedLatestContent: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
});
var model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
describe('block view', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockView)({model: model});
});
describe('block view', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockView)({model: model});
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('block settings view', function () {
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('block settings view', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
});
after(function () {
delete EditorApplication.getChannel;
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
});
it('changes the model if post amount changes', function () {
var newValue = '11';
view.$('.mailpoet_automated_latest_content_show_amount').val(newValue).keyup();
expect(model.get('amount')).to.equal(newValue);
});
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_automated_latest_content_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if inclusion type changes', function () {
var newValue = 'exclude';
view.$('.mailpoet_automated_latest_content_include_or_exclude').val(newValue).change();
expect(model.get('inclusionType')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_automated_latest_content_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_automated_latest_content_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_automated_latest_content_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_automated_latest_content_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_automated_latest_content_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_automated_latest_content_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_automated_latest_content_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_automated_latest_content_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_automated_latest_content_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('changes the model if sort by changes', function () {
var newValue = 'oldest';
view.$('.mailpoet_automated_latest_content_sort_by').val(newValue).change();
expect(model.get('sortBy')).to.equal(newValue);
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.have.$class('mailpoet_hidden');
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
after(function () {
delete EditorApplication.getChannel;
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
view.$('.mailpoet_automated_latest_content_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
});
it('changes the model if post amount changes', function () {
var newValue = '11';
view.$('.mailpoet_automated_latest_content_show_amount').val(newValue).keyup();
expect(model.get('amount')).to.equal(newValue);
});
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_automated_latest_content_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if inclusion type changes', function () {
var newValue = 'exclude';
view.$('.mailpoet_automated_latest_content_include_or_exclude').val(newValue).change();
expect(model.get('inclusionType')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_automated_latest_content_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_automated_latest_content_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_automated_latest_content_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_automated_latest_content_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_automated_latest_content_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_automated_latest_content_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_automated_latest_content_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_automated_latest_content_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_automated_latest_content_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('changes the model if sort by changes', function () {
var newValue = 'oldest';
view.$('.mailpoet_automated_latest_content_sort_by').val(newValue).change();
expect(model.get('sortBy')).to.equal(newValue);
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.have.$class('mailpoet_hidden');
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
view.$('.mailpoet_automated_latest_content_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

815
tests/javascript/newsletter_editor/blocks/button.spec.js
View File

@ -4,419 +4,418 @@ define('test/newsletter_editor/blocks/button', [
], function(EditorApplication) {
describe("Button", function () {
describe("model", function () {
var model;
describe("model", function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it("has a button type", function () {
expect(model.get('type')).to.equal('button');
});
it("has a label", function () {
expect(model.get('text')).to.be.a('string');
});
it("has a url", function () {
expect(model.get('url')).to.be.a('string');
});
it("has a block background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border color", function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border width", function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it("has block border radius", function () {
expect(model.get('styles.block.borderRadius')).to.match(/^\d+px$/);
});
it("has block border style", function () {
expect(model.get('styles.block.borderStyle')).to.equal('solid');
});
it("has a text color", function () {
expect(model.get('styles.block.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a text font family", function () {
expect(model.get('styles.block.fontFamily')).to.be.a('string');
});
it("has a text size", function () {
expect(model.get('styles.block.fontSize')).to.match(/^\d+px$/);
});
it("has width", function () {
expect(model.get('styles.block.width')).to.match(/^\d+px$/);
});
it("has line height", function () {
expect(model.get('styles.block.lineHeight')).to.match(/^\d+px$/);
});
it("changes attributes with set", function () {
var newText = 'Some new text';
model.set('text', newText);
expect(model.get('text')).to.equal(newText);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(11).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'some other text');
model.set('url', 'some url');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.block.borderColor', '#234567');
model.set('styles.block.borderWidth', '3px');
model.set('styles.block.borderRadius', '8px');
model.set('styles.block.width', '400px');
model.set('styles.block.lineHeight', '100px');
model.set('styles.block.fontColor', '#345678');
model.set('styles.block.fontFamily', 'Some other style');
model.set('styles.block.fontSize', '10px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
button: {
text: 'Some new text',
url: 'http://somenewurl.com',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '11px',
borderRadius: '13px',
borderStyle: 'solid',
width: '371px',
lineHeight: '107px',
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '30px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
expect(model.get('text')).to.equal('Some new text');
expect(model.get('url')).to.equal('http://somenewurl.com');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.borderColor')).to.equal('#234567');
expect(model.get('styles.block.borderWidth')).to.equal('11px');
expect(model.get('styles.block.borderRadius')).to.equal('13px');
expect(model.get('styles.block.borderStyle')).to.equal('solid');
expect(model.get('styles.block.width')).to.equal('371px');
expect(model.get('styles.block.lineHeight')).to.equal('107px');
expect(model.get('styles.block.fontColor')).to.equal('#345678');
expect(model.get('styles.block.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.block.fontSize')).to.equal('30px');
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_editor_button')).to.have.length(1);
});
it('rerenders when attributes change', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
model.set('text', 'Some new text');
expect(view.$('.mailpoet_editor_button').text()).to.equal('Some new text');
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
text: 'Some button',
url: 'http://example.org',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '7px',
borderRadius: '8px',
borderStyle: 'solid',
width: '123px',
lineHeight: '45px',
fontColor: '#345678',
fontFamily: 'Arial',
fontSize: '12px',
},
},
});
view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
});
it('has a specified text', function () {
expect(view.$('.mailpoet_editor_button').text()).to.equal(model.get('text'));
});
it('has a specified button url', function () {
expect(view.$('.mailpoet_editor_button').attr('href')).to.equal(model.get('url'));
});
it('has a specified background color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('background-color')).to.equal('rgb(18, 52, 86)');
});
it('has a specified border color', function () {
expect(view.$('.mailpoet_editor_button').css('border-color')).to.equal(model.get('styles.block.borderColor'));
});
it('has a specified border width', function () {
expect(view.$('.mailpoet_editor_button').css('border-width')).to.equal(model.get('styles.block.borderWidth'));
});
it('has a specified border radius', function () {
expect(view.$('.mailpoet_editor_button').css('border-radius')).to.equal(model.get('styles.block.borderRadius'));
});
it('has a specified border style', function () {
expect(view.$('.mailpoet_editor_button').css('border-style')).to.equal(model.get('styles.block.borderStyle'));
});
it('has a specified width', function () {
expect(view.$('.mailpoet_editor_button').css('width')).to.equal(model.get('styles.block.width'));
});
it('has a specified line height', function () {
expect(view.$('.mailpoet_editor_button').css('lineHeight')).to.equal(model.get('styles.block.lineHeight'));
});
it('has a specified font color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('color')).to.equal('rgb(52, 86, 120)');
});
it('has a specified font family', function () {
expect(view.$('.mailpoet_editor_button').css('font-family')).to.equal(model.get('styles.block.fontFamily'));
});
it('has a specified font size', function () {
expect(view.$('.mailpoet_editor_button').css('font-size')).to.equal(model.get('styles.block.fontSize'));
});
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text is changed', function () {
var newValue = 'something else';
view.$('.mailpoet_field_button_text').val(newValue).keyup();
expect(model.get('text')).to.equal(newValue);
});
it('updates the model when link is changed', function () {
var newValue = 'http://google.com/?q=123456';
view.$('.mailpoet_field_button_url').val(newValue).keyup();
expect(model.get('url')).to.equal(newValue);
});
it('updates the model when font color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_font_color').val(newValue).change();
expect(model.get('styles.block.fontColor')).to.equal(newValue);
});
it('updates the model when font family changes', function () {
var newValue = 'Tahoma';
view.$('.mailpoet_field_button_font_family').val(newValue).change();
expect(model.get('styles.block.fontFamily')).to.equal(newValue);
});
it('updates the model when font size changes', function () {
var newValue = '20px';
view.$('.mailpoet_field_button_font_size').val(newValue).change();
expect(model.get('styles.block.fontSize')).to.equal(newValue);
});
it('updates the model when background color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_background_color').val(newValue).change();
expect(model.get('styles.block.backgroundColor')).to.equal(newValue);
});
it('updates the model when border color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_border_color').val(newValue).change();
expect(model.get('styles.block.borderColor')).to.equal(newValue);
});
it('updates the model when border width changes', function () {
view.$('.mailpoet_field_button_border_width').val('3').change();
expect(model.get('styles.block.borderWidth')).to.equal('3px');
});
it('updates the range slider when border width input changes', function () {
view.$('.mailpoet_field_button_border_width_input').val('5').keyup();
expect(view.$('.mailpoet_field_button_border_width').val()).to.equal('5');
});
it('updates the input when border width range slider changes', function () {
view.$('.mailpoet_field_button_border_width').val('4').change();
expect(view.$('.mailpoet_field_button_border_width_input').val()).to.equal('4');
});
it('updates the model when border radius changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(model.get('styles.block.borderRadius')).to.equal('7px');
});
it('updates the range slider when border radius input changes', function () {
view.$('.mailpoet_field_button_border_radius_input').val('7').keyup();
expect(view.$('.mailpoet_field_button_border_radius').val()).to.equal('7');
});
it('updates the input when border radius range slider changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(view.$('.mailpoet_field_button_border_radius_input').val()).to.equal('7');
});
it('updates the model when width changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(model.get('styles.block.width')).to.equal('127px');
});
it('updates the range slider when width input changes', function () {
view.$('.mailpoet_field_button_width_input').val('127').keyup();
expect(view.$('.mailpoet_field_button_width').val()).to.equal('127');
});
it('updates the input when width range slider changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(view.$('.mailpoet_field_button_width_input').val()).to.equal('127');
});
it('updates the model when line height changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(model.get('styles.block.lineHeight')).to.equal('37px');
});
it('updates the range slider when line height input changes', function () {
view.$('.mailpoet_field_button_line_height_input').val('37').keyup();
expect(view.$('.mailpoet_field_button_line_height').val()).to.equal('37');
});
it('updates the input when line height range slider changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(view.$('.mailpoet_field_button_line_height_input').val()).to.equal('37');
});
it('does not display link option when `hideLink` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideLink: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_url').length).to.equal(0);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_replace_all_styles').length).to.equal(0);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it("has a button type", function () {
expect(model.get('type')).to.equal('button');
});
it("has a label", function () {
expect(model.get('text')).to.be.a('string');
});
it("has a url", function () {
expect(model.get('url')).to.be.a('string');
});
it("has a block background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border color", function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border width", function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it("has block border radius", function () {
expect(model.get('styles.block.borderRadius')).to.match(/^\d+px$/);
});
it("has block border style", function () {
expect(model.get('styles.block.borderStyle')).to.equal('solid');
});
it("has a text color", function () {
expect(model.get('styles.block.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a text font family", function () {
expect(model.get('styles.block.fontFamily')).to.be.a('string');
});
it("has a text size", function () {
expect(model.get('styles.block.fontSize')).to.match(/^\d+px$/);
});
it("has width", function () {
expect(model.get('styles.block.width')).to.match(/^\d+px$/);
});
it("has line height", function () {
expect(model.get('styles.block.lineHeight')).to.match(/^\d+px$/);
});
it("changes attributes with set", function () {
var newText = 'Some new text';
model.set('text', newText);
expect(model.get('text')).to.equal(newText);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(11).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'some other text');
model.set('url', 'some url');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.block.borderColor', '#234567');
model.set('styles.block.borderWidth', '3px');
model.set('styles.block.borderRadius', '8px');
model.set('styles.block.width', '400px');
model.set('styles.block.lineHeight', '100px');
model.set('styles.block.fontColor', '#345678');
model.set('styles.block.fontFamily', 'Some other style');
model.set('styles.block.fontSize', '10px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
button: {
text: 'Some new text',
url: 'http://somenewurl.com',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '11px',
borderRadius: '13px',
borderStyle: 'solid',
width: '371px',
lineHeight: '107px',
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '30px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
expect(model.get('text')).to.equal('Some new text');
expect(model.get('url')).to.equal('http://somenewurl.com');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.borderColor')).to.equal('#234567');
expect(model.get('styles.block.borderWidth')).to.equal('11px');
expect(model.get('styles.block.borderRadius')).to.equal('13px');
expect(model.get('styles.block.borderStyle')).to.equal('solid');
expect(model.get('styles.block.width')).to.equal('371px');
expect(model.get('styles.block.lineHeight')).to.equal('107px');
expect(model.get('styles.block.fontColor')).to.equal('#345678');
expect(model.get('styles.block.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.block.fontSize')).to.equal('30px');
});
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_editor_button')).to.have.length(1);
});
it('rerenders when attributes change', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
model.set('text', 'Some new text');
expect(view.$('.mailpoet_editor_button').text()).to.equal('Some new text');
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
text: 'Some button',
url: 'http://example.org',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '7px',
borderRadius: '8px',
borderStyle: 'solid',
width: '123px',
lineHeight: '45px',
fontColor: '#345678',
fontFamily: 'Arial',
fontSize: '12px',
},
},
});
view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
});
it('has a specified text', function () {
expect(view.$('.mailpoet_editor_button').text()).to.equal(model.get('text'));
});
it('has a specified button url', function () {
expect(view.$('.mailpoet_editor_button').attr('href')).to.equal(model.get('url'));
});
it('has a specified background color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('background-color')).to.equal('rgb(18, 52, 86)');
});
it('has a specified border color', function () {
expect(view.$('.mailpoet_editor_button').css('border-color')).to.equal(model.get('styles.block.borderColor'));
});
it('has a specified border width', function () {
expect(view.$('.mailpoet_editor_button').css('border-width')).to.equal(model.get('styles.block.borderWidth'));
});
it('has a specified border radius', function () {
expect(view.$('.mailpoet_editor_button').css('border-radius')).to.equal(model.get('styles.block.borderRadius'));
});
it('has a specified border style', function () {
expect(view.$('.mailpoet_editor_button').css('border-style')).to.equal(model.get('styles.block.borderStyle'));
});
it('has a specified width', function () {
expect(view.$('.mailpoet_editor_button').css('width')).to.equal(model.get('styles.block.width'));
});
it('has a specified line height', function () {
expect(view.$('.mailpoet_editor_button').css('lineHeight')).to.equal(model.get('styles.block.lineHeight'));
});
it('has a specified font color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('color')).to.equal('rgb(52, 86, 120)');
});
it('has a specified font family', function () {
expect(view.$('.mailpoet_editor_button').css('font-family')).to.equal(model.get('styles.block.fontFamily'));
});
it('has a specified font size', function () {
expect(view.$('.mailpoet_editor_button').css('font-size')).to.equal(model.get('styles.block.fontSize'));
});
});
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text is changed', function () {
var newValue = 'something else';
view.$('.mailpoet_field_button_text').val(newValue).keyup();
expect(model.get('text')).to.equal(newValue);
});
it('updates the model when link is changed', function () {
var newValue = 'http://google.com/?q=123456';
view.$('.mailpoet_field_button_url').val(newValue).keyup();
expect(model.get('url')).to.equal(newValue);
});
it('updates the model when font color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_font_color').val(newValue).change();
expect(model.get('styles.block.fontColor')).to.equal(newValue);
});
it('updates the model when font family changes', function () {
var newValue = 'Tahoma';
view.$('.mailpoet_field_button_font_family').val(newValue).change();
expect(model.get('styles.block.fontFamily')).to.equal(newValue);
});
it('updates the model when font size changes', function () {
var newValue = '20px';
view.$('.mailpoet_field_button_font_size').val(newValue).change();
expect(model.get('styles.block.fontSize')).to.equal(newValue);
});
it('updates the model when background color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_background_color').val(newValue).change();
expect(model.get('styles.block.backgroundColor')).to.equal(newValue);
});
it('updates the model when border color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_border_color').val(newValue).change();
expect(model.get('styles.block.borderColor')).to.equal(newValue);
});
it('updates the model when border width changes', function () {
view.$('.mailpoet_field_button_border_width').val('3').change();
expect(model.get('styles.block.borderWidth')).to.equal('3px');
});
it('updates the range slider when border width input changes', function () {
view.$('.mailpoet_field_button_border_width_input').val('5').keyup();
expect(view.$('.mailpoet_field_button_border_width').val()).to.equal('5');
});
it('updates the input when border width range slider changes', function () {
view.$('.mailpoet_field_button_border_width').val('4').change();
expect(view.$('.mailpoet_field_button_border_width_input').val()).to.equal('4');
});
it('updates the model when border radius changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(model.get('styles.block.borderRadius')).to.equal('7px');
});
it('updates the range slider when border radius input changes', function () {
view.$('.mailpoet_field_button_border_radius_input').val('7').keyup();
expect(view.$('.mailpoet_field_button_border_radius').val()).to.equal('7');
});
it('updates the input when border radius range slider changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(view.$('.mailpoet_field_button_border_radius_input').val()).to.equal('7');
});
it('updates the model when width changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(model.get('styles.block.width')).to.equal('127px');
});
it('updates the range slider when width input changes', function () {
view.$('.mailpoet_field_button_width_input').val('127').keyup();
expect(view.$('.mailpoet_field_button_width').val()).to.equal('127');
});
it('updates the input when width range slider changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(view.$('.mailpoet_field_button_width_input').val()).to.equal('127');
});
it('updates the model when line height changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(model.get('styles.block.lineHeight')).to.equal('37px');
});
it('updates the range slider when line height input changes', function () {
view.$('.mailpoet_field_button_line_height_input').val('37').keyup();
expect(view.$('.mailpoet_field_button_line_height').val()).to.equal('37');
});
it('updates the input when line height range slider changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(view.$('.mailpoet_field_button_line_height_input').val()).to.equal('37');
});
it('does not display link option when `hideLink` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideLink: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_url').length).to.equal(0);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_replace_all_styles').length).to.equal(0);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

349
tests/javascript/newsletter_editor/blocks/container.spec.js
View File

@ -4,204 +4,203 @@ define('test/newsletter_editor/blocks/container', [
], function(EditorApplication) {
describe('Container', function () {
var ModelClass = EditorApplication.module('blocks.container').ContainerBlockModel;
var ModelClass = EditorApplication.module('blocks.container').ContainerBlockModel;
describe('model', function () {
describe('by default', function () {
global.stubConfig(EditorApplication);
var model = new ModelClass();
describe('model', function () {
describe('by default', function () {
global.stubConfig(EditorApplication);
var model = new ModelClass();
it('has container type', function () {
expect(model.get('type')).to.equal('container');
});
it('has container type', function () {
expect(model.get('type')).to.equal('container');
});
it('has orientation', function () {
expect(model.get('orientation')).to.equal('vertical');
});
it('has orientation', function () {
expect(model.get('orientation')).to.equal('vertical');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a collection of blocks', function () {
expect(model.get('blocks')).to.be.instanceof(Backbone.Collection);
});
it('has a collection of blocks', function () {
expect(model.get('blocks')).to.be.instanceof(Backbone.Collection);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
container: {
styles: {
block: {
backgroundColor: '#123456',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
});
describe('when creating with children', function () {
var testModel = {
type: 'sampleType',
someField: 'Some Content',
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
container: {
styles: {
block: {
backgroundColor: '#123456',
},
model;
it('will recursively create children', function () {
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)({
type: 'container',
blocks: [testModel],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('type')).to.equal(testModel.type);
expect(model.get('blocks').at(0).get('someField')).to.equal(testModel.someField);
});
it('will create nested containers and their children', function () {
var stub = sinon.stub();
stub.withArgs('container').returns(ModelClass);
stub.withArgs('someType').returns(Backbone.Model);
EditorApplication.getBlockTypeModel = stub;
model = new ModelClass({
type: 'container',
blocks: [
{
type: 'container',
blocks: [
{
type: 'someType',
someField: 'some text',
},
{
type: 'someType',
someField: 'some text 2',
},
],
}
],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('blocks')).to.have.length(2);
expect(model.get('blocks').at(0).get('blocks').at(1).get('someField')).to.equal('some text 2');
});
},
},
},
});
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({model: model});
describe('when creating with children', function () {
var testModel = {
type: 'sampleType',
someField: 'Some Content',
},
model;
it('renders', function () {
expect(view.render).to.not.throw();
});
it('will recursively create children', function () {
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
describe('once rendered', function () {
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)({
type: 'container',
blocks: [testModel],
}, {parse: true});
describe('on root level', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('type')).to.equal(testModel.type);
expect(model.get('blocks').at(0).get('someField')).to.equal(testModel.someField);
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 0,
},
});
view.render();
});
it('does not have a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(0);
});
it('will create nested containers and their children', function () {
var stub = sinon.stub();
stub.withArgs('container').returns(ModelClass);
stub.withArgs('someType').returns(Backbone.Model);
EditorApplication.getBlockTypeModel = stub;
it('does not have a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
model = new ModelClass({
type: 'container',
blocks: [
{
type: 'container',
blocks: [
{
type: 'someType',
someField: 'some text',
},
{
type: 'someType',
someField: 'some text 2',
},
],
}
],
}, {parse: true});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('blocks')).to.have.length(2);
expect(model.get('blocks').at(0).get('blocks').at(1).get('someField')).to.equal('some text 2');
});
});
});
describe.skip('on non-root levels', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({model: model});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 1,
},
});
view.render();
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('has a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(1);
});
});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
describe('once rendered', function () {
describe('on root level', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
view;
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 0,
},
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_container_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
view.render();
});
it('does not have a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(0);
});
});
});
it('does not have a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
describe.skip('on non-root levels', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 1,
},
});
view.render();
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('has a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(1);
});
});
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_container_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

371
tests/javascript/newsletter_editor/blocks/divider.spec.js
View File

@ -4,203 +4,202 @@ define('test/newsletter_editor/blocks/divider', [
], function(EditorApplication) {
describe("Divider", function () {
describe("model", function () {
var model;
describe("model", function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it("has a divider type", function () {
expect(model.get('type')).to.equal('divider');
});
it("has a background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has padding", function () {
expect(model.get('styles.block.padding')).to.match(/^\d+px$/);
});
it('has border style', function () {
expect(model.get('styles.block.borderStyle')).to.match(/^(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/);
});
it('has border width', function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it('has border color', function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("changes attributes with set", function () {
var newValue = 'outset';
model.set('styles.block.borderStyle', newValue);
expect(model.get('styles.block.borderStyle')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(5).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.padding', '19px');
model.set('styles.block.borderStyle', 'double');
model.set('styles.block.borderWidth', '17px');
model.set('styles.block.borderColor', '#123456');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
divider: {
styles: {
block: {
backgroundColor: '#123456',
padding: '37px',
borderStyle: 'inset',
borderWidth: '7px',
borderColor: '#345678',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.padding')).to.equal('37px');
expect(model.get('styles.block.borderStyle')).to.equal('inset');
expect(model.get('styles.block.borderWidth')).to.equal('7px');
expect(model.get('styles.block.borderColor')).to.equal('#345678');
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.divider').DividerBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider')).to.have.length(1);
});
it('rerenders if model attributes change', function () {
view.render();
model.set('styles.block.borderStyle', 'inset');
expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('settings view', function () {
it("has a divider type", function () {
expect(model.get('type')).to.equal('divider');
});
it("has a background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has padding", function () {
expect(model.get('styles.block.padding')).to.match(/^\d+px$/);
});
it('has border style', function () {
expect(model.get('styles.block.borderStyle')).to.match(/^(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/);
});
it('has border width', function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it('has border color', function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("changes attributes with set", function () {
var newValue = 'outset';
model.set('styles.block.borderStyle', newValue);
expect(model.get('styles.block.borderStyle')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(5).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.padding', '19px');
model.set('styles.block.borderStyle', 'double');
model.set('styles.block.borderWidth', '17px');
model.set('styles.block.borderColor', '#123456');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
divider: {
styles: {
block: {
backgroundColor: '#123456',
padding: '37px',
borderStyle: 'inset',
borderWidth: '7px',
borderColor: '#345678',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.padding')).to.equal('37px');
expect(model.get('styles.block.borderStyle')).to.equal('inset');
expect(model.get('styles.block.borderWidth')).to.equal('7px');
expect(model.get('styles.block.borderColor')).to.equal('#345678');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.divider').DividerBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider')).to.have.length(1);
});
it('rerenders if model attributes change', function () {
view.render();
model.set('styles.block.borderStyle', 'inset');
expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset');
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider_selector')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
dividers: ['solid', 'inset'],
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider_selector')).to.have.length(1);
beforeEach(function () {
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
view.render();
});
it('updates the model when divider style changes', function () {
view.$('.mailpoet_field_divider_style').last().click();
expect(model.get('styles.block.borderStyle')).to.equal('inset');
});
it('updates the model when divider width changes', function () {
view.$('.mailpoet_field_divider_border_width').val('17').change();
expect(model.get('styles.block.borderWidth')).to.equal('17px');
});
it('updates the range slider when divider width input changes', function () {
view.$('.mailpoet_field_divider_border_width_input').val('19').keyup();
expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19');
});
it('updates the input when divider width range slider changes', function () {
view.$('.mailpoet_field_divider_border_width').val('19').change();
expect(view.$('.mailpoet_field_divider_border_width_input').val()).to.equal('19');
});
it('updates the model when divider color changes', function () {
view.$('.mailpoet_field_divider_border_color').val('#123457').change();
expect(model.get('styles.block.borderColor')).to.equal('#123457');
});
it('updates the model when divider background color changes', function () {
view.$('.mailpoet_field_divider_background_color').val('#cccccc').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#cccccc');
});
it ('changes color of available divider styles when actual divider color changes', function() {
var newColor = '#889912';
view.$('.mailpoet_field_divider_border_color').val(newColor).change();
expect(view.$('.mailpoet_field_divider_style div')).to.have.$css('border-top-color', newColor);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_button_divider_apply_to_all').length).to.equal(0);
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
});
});
beforeEach(function () {
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
view.render();
});
it('updates the model when divider style changes', function () {
view.$('.mailpoet_field_divider_style').last().click();
expect(model.get('styles.block.borderStyle')).to.equal('inset');
});
it('updates the model when divider width changes', function () {
view.$('.mailpoet_field_divider_border_width').val('17').change();
expect(model.get('styles.block.borderWidth')).to.equal('17px');
});
it('updates the range slider when divider width input changes', function () {
view.$('.mailpoet_field_divider_border_width_input').val('19').keyup();
expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19');
});
it('updates the input when divider width range slider changes', function () {
view.$('.mailpoet_field_divider_border_width').val('19').change();
expect(view.$('.mailpoet_field_divider_border_width_input').val()).to.equal('19');
});
it('updates the model when divider color changes', function () {
view.$('.mailpoet_field_divider_border_color').val('#123457').change();
expect(model.get('styles.block.borderColor')).to.equal('#123457');
});
it('updates the model when divider background color changes', function () {
view.$('.mailpoet_field_divider_background_color').val('#cccccc').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#cccccc');
});
it ('changes color of available divider styles when actual divider color changes', function() {
var newColor = '#889912';
view.$('.mailpoet_field_divider_border_color').val(newColor).change();
expect(view.$('.mailpoet_field_divider_style div')).to.have.$css('border-top-color', newColor);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_button_divider_apply_to_all').length).to.equal(0);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

373
tests/javascript/newsletter_editor/blocks/footer.spec.js
View File

@ -4,197 +4,196 @@ define('test/newsletter_editor/blocks/footer', [
], function(EditorApplication) {
describe('Footer', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
});
it('has a footer type', function () {
expect(model.get('type')).to.equal('footer');
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has text alignment', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has a link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has link decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it('changes attributes with set', function () {
var newValue = 'Some New Text';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'underline');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
footer: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.footer').FooterBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
it('has a footer type', function () {
expect(model.get('type')).to.equal('footer');
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_footer_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)({});
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_footer_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_footer_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_footer_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_footer_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_footer_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_footer_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has text alignment', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has a link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has link decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it('changes attributes with set', function () {
var newValue = 'Some New Text';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'underline');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
footer: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.footer').FooterBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_footer_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)({});
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_footer_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_footer_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_footer_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_footer_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_footer_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_footer_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

379
tests/javascript/newsletter_editor/blocks/header.spec.js
View File

@ -4,200 +4,199 @@ define('test/newsletter_editor/blocks/header', [
], function(EditorApplication) {
describe('Header', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global. stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
});
it('has a header type', function () {
expect(model.get('type')).to.equal('header');
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a text font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has text align', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has link text decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it("changes attributes with set", function () {
var newValue = 'Some random teeeext';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'none');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
header: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global. stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.header').HeaderBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
it('has a header type', function () {
expect(model.get('type')).to.equal('header');
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_header_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)({});
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_header_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_header_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_header_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_header_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_header_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when text alignment changes', function () {
view.$('.mailpoet_field_header_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a text font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has text align', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has link text decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it("changes attributes with set", function () {
var newValue = 'Some random teeeext';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'none');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
header: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.header').HeaderBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_header_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)({});
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_header_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_header_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_header_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_header_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_header_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when text alignment changes', function () {
view.$('.mailpoet_field_header_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

361
tests/javascript/newsletter_editor/blocks/image.spec.js
View File

@ -4,197 +4,196 @@ define('test/newsletter_editor/blocks/image', [
], function(EditorApplication) {
describe('Image', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
});
it('has an image type', function () {
expect(model.get('type')).to.equal('image');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
});
it('has an image src', function () {
expect(model.get('src')).to.be.a('string');
});
it('has alt text', function () {
expect(model.get('alt')).to.be.a('string');
});
it('can be padded', function () {
expect(model.get('padded')).to.be.a('boolean');
});
it('has a width', function () {
expect(model.get('width')).to.match(/^\d+px$/);
});
it('has a height', function () {
expect(model.get('height')).to.match(/^\d+px$/);
});
it('has alignment', function () {
expect(model.get('styles.block.textAlign')).to.match(/^(left|center|right)$/);
});
it('changes attributes with set', function () {
var newValue = 'someImage.png';
model.set('src', newValue);
expect(model.get('src')).to.equal(newValue);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(7).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('link', 'http://example.net');
model.set('src', 'someNewImage.png');
model.set('alt', 'Some alt text');
model.set('padded', false);
model.set('width', '63px');
model.set('height', '61px');
model.set('styles.block.textAlign', 'right');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
image: {
link: 'http://example.org/customConfigPage',
src: 'http://example.org/someCustomConfigImage.png',
alt: 'Custom config alt',
padded: false,
width: '1234px',
height: '2345px',
styles: {
block: {
textAlign: 'right',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
expect(model.get('link')).to.equal('http://example.org/customConfigPage');
expect(model.get('src')).to.equal('http://example.org/someCustomConfigImage.png');
expect(model.get('alt')).to.equal('Custom config alt');
expect(model.get('padded')).to.equal(false);
expect(model.get('width')).to.equal('1234px');
expect(model.get('height')).to.equal('2345px');
expect(model.get('styles.block.textAlign')).to.equal('right');
});
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
});
describe('block view', function () {
it('has an image type', function () {
expect(model.get('type')).to.equal('image');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
});
it('has an image src', function () {
expect(model.get('src')).to.be.a('string');
});
it('has alt text', function () {
expect(model.get('alt')).to.be.a('string');
});
it('can be padded', function () {
expect(model.get('padded')).to.be.a('boolean');
});
it('has a width', function () {
expect(model.get('width')).to.match(/^\d+px$/);
});
it('has a height', function () {
expect(model.get('height')).to.match(/^\d+px$/);
});
it('has alignment', function () {
expect(model.get('styles.block.textAlign')).to.match(/^(left|center|right)$/);
});
it('changes attributes with set', function () {
var newValue = 'someImage.png';
model.set('src', newValue);
expect(model.get('src')).to.equal(newValue);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(7).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('link', 'http://example.net');
model.set('src', 'someNewImage.png');
model.set('alt', 'Some alt text');
model.set('padded', false);
model.set('width', '63px');
model.set('height', '61px');
model.set('styles.block.textAlign', 'right');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
image: {
link: 'http://example.org/customConfigPage',
src: 'http://example.org/someCustomConfigImage.png',
alt: 'Custom config alt',
padded: false,
width: '1234px',
height: '2345px',
styles: {
block: {
textAlign: 'right',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
expect(model.get('link')).to.equal('http://example.org/customConfigPage');
expect(model.get('src')).to.equal('http://example.org/someCustomConfigImage.png');
expect(model.get('alt')).to.equal('Custom config alt');
expect(model.get('padded')).to.equal(false);
expect(model.get('width')).to.equal('1234px');
expect(model.get('height')).to.equal('2345px');
expect(model.get('styles.block.textAlign')).to.equal('right');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)(),
view;
beforeEach(function () {
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)({
link: 'http://example.org/somepath',
src: 'http://example.org/someimage.png',
alt: 'some alt',
}),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)(),
view;
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
view.render();
});
beforeEach(function () {
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
});
it('displays the image', function () {
expect(view.$('.mailpoet_content a').attr('href')).to.equal('http://example.org/somepath');
expect(view.$('.mailpoet_content img').attr('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_content img').attr('alt')).to.equal('some alt');
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
it('rerenders if attribute changes', function () {
var newValue = 'http://example.org/someNEWimage.png';
expect(view.$('.mailpoet_content img').attr('src')).to.not.equal(newValue);
model.set('src', newValue);
expect(view.$('.mailpoet_content img').attr('src')).to.equal(newValue);
});
});
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)({
link: 'http://example.org/somepath',
src: 'http://example.org/someimage.png',
alt: 'some alt',
}),
view;
describe('block settings view', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
view.render();
});
it('displays the image', function () {
expect(view.$('.mailpoet_content a').attr('href')).to.equal('http://example.org/somepath');
expect(view.$('.mailpoet_content img').attr('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_content img').attr('alt')).to.equal('some alt');
});
it('rerenders if attribute changes', function () {
var newValue = 'http://example.org/someNEWimage.png';
expect(view.$('.mailpoet_content img').attr('src')).to.not.equal(newValue);
model.set('src', newValue);
expect(view.$('.mailpoet_content img').attr('src')).to.equal(newValue);
});
});
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
view = new (EditorApplication.module('blocks.image').ImageBlockSettingsView)({model: model});
});
describe('block settings view', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
view = new (EditorApplication.module('blocks.image').ImageBlockSettingsView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
it('updates the model when link changes', function () {
var newValue = 'http://example.org/someNewLink';
view.$('.mailpoet_field_image_link').val(newValue).keyup();
expect(model.get('link')).to.equal(newValue);
});
it('updates the model when src changes', function () {
var newValue = 'http://example.org/someNewImage.png';
view.$('.mailpoet_field_image_address').val(newValue).keyup();
expect(model.get('src')).to.equal(newValue);
});
it('updates the model when alt changes', function () {
var newValue = 'Some new alt text';
view.$('.mailpoet_field_image_alt_text').val(newValue).keyup();
expect(model.get('alt')).to.equal(newValue);
});
it('updates the model when padding changes', function () {
var newValue = 'false';
view.$('.mailpoet_field_image_padded').val(newValue).change();
expect(model.get('padded')).to.equal(false);
});
it.skip('closes the sidepanel after "Done" is clicked', function() {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
it('updates the model when link changes', function () {
var newValue = 'http://example.org/someNewLink';
view.$('.mailpoet_field_image_link').val(newValue).keyup();
expect(model.get('link')).to.equal(newValue);
});
it('updates the model when src changes', function () {
var newValue = 'http://example.org/someNewImage.png';
view.$('.mailpoet_field_image_address').val(newValue).keyup();
expect(model.get('src')).to.equal(newValue);
});
it('updates the model when alt changes', function () {
var newValue = 'Some new alt text';
view.$('.mailpoet_field_image_alt_text').val(newValue).keyup();
expect(model.get('alt')).to.equal(newValue);
});
it('updates the model when padding changes', function () {
var newValue = 'false';
view.$('.mailpoet_field_image_padded').val(newValue).change();
expect(model.get('padded')).to.equal(false);
});
it.skip('closes the sidepanel after "Done" is clicked', function() {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

679
tests/javascript/newsletter_editor/blocks/posts.spec.js
View File

@ -4,385 +4,384 @@ define('test/newsletter_editor/blocks/posts', [
], function(EditorApplication) {
describe('Posts', function () {
Backbone.Radio = {
Requests: {
request: function () {
}, reply: function () {
},
},
};
describe('model', function () {
var model;
Backbone.Radio = {
Requests: {
request: function () {
}, reply: function () {
},
},
};
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has posts type', function () {
expect(model.get('type')).to.equal('posts');
});
it('has posts type', function () {
expect(model.get('type')).to.equal('posts');
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has image specific alignment', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has image specific alignment', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
posts: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
//imageAlignment: 'right', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
posts: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
//imageAlignment: 'right', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
});
var model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
describe('block view', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockView)({model: model});
// Disable auto-opening of settings view
view.off('showSettings');
});
describe('block view', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockView)({model: model});
// Disable auto-opening of settings view
view.off('showSettings');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('block settings view', function () {
var model, view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
describe('block settings view', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
});
it('renders', function () {
// Stub out block view requests
model.request = sinon.stub().returns({$el: {}});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_settings_posts_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if post status changes', function () {
var newValue = 'pending';
view.$('.mailpoet_posts_post_status').val(newValue).change();
expect(model.get('postStatus')).to.equal(newValue);
});
it('changes the model if search term changes', function () {
var newValue = 'some New search term';
view.$('.mailpoet_posts_search_term').val(newValue).keyup();
expect(model.get('search')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_posts_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_posts_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_posts_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_posts_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_posts_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_posts_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_posts_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_posts_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_posts_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_posts_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
});
it('renders', function () {
// Stub out block view requests
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_posts_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
view.$('.mailpoet_posts_title_format').val('ul').change();
});
expect(view.render).to.not.throw();
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.have.$class('mailpoet_hidden');
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('once rendered', function () {
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_settings_posts_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if post status changes', function () {
var newValue = 'pending';
view.$('.mailpoet_posts_post_status').val(newValue).change();
expect(model.get('postStatus')).to.equal(newValue);
});
it('changes the model if search term changes', function () {
var newValue = 'some New search term';
view.$('.mailpoet_posts_search_term').val(newValue).keyup();
expect(model.get('search')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_posts_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_posts_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_posts_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_posts_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_posts_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_posts_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_posts_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_posts_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_posts_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_posts_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_posts_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
view.$('.mailpoet_posts_title_format').val('ul').change();
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.have.$class('mailpoet_hidden');
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_posts_title_format').val('ul').change();
view.$('.mailpoet_posts_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_posts_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_posts_title_format').val('ul').change();
view.$('.mailpoet_posts_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_posts_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
});
});
});
});

529
tests/javascript/newsletter_editor/blocks/social.spec.js
View File

@ -4,277 +4,276 @@ define('test/newsletter_editor/blocks/social', [
], function(EditorApplication) {
describe('Social', function () {
describe('block model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
});
it('has a social type', function () {
expect(model.get('type')).to.equal('social');
});
it('has an icon set it uses', function () {
expect(model.get('iconSet')).to.be.a('string');
});
it('has icons', function () {
expect(model.get('icons')).to.be.an.instanceof(Backbone.Collection);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
social: {
iconSet: 'customConfigIconSet',
},
},
});
var model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
expect(model.get('iconSet')).to.equal('customConfigIconSet');
});
describe('block model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
});
describe('icon model', function () {
var model;
before(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
'socialIconSets.default.custom': 'someimage.jpg',
});
global.stubConfig(EditorApplication, {
socialIcons: {
custom: {
defaultLink: 'http://example.org',
title: 'sometitle',
}
},
});
model = new (EditorApplication.module('blocks.social').SocialIconModel)();
});
it('has a socialIcon type', function () {
expect(model.get('type')).to.equal('socialIcon');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
expect(model.get('link')).to.equal('http://example.org');
});
it('has an image', function () {
expect(model.get('image')).to.equal('someimage.jpg');
});
it('has height', function () {
expect(model.get('height')).to.equal('32px');
});
it('has width', function () {
expect(model.get('width')).to.equal('32px');
});
it('has text', function () {
expect(model.get('text')).to.equal('sometitle');
});
it('has a social type', function () {
expect(model.get('type')).to.equal('social');
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
text: 'some text',
}
],
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_social')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'http://example.org/',
image: 'http://example.org/someimage.png',
text: 'some text',
},
{
type: 'socialIcon',
iconType: 'facebook',
link: 'http://facebook.com/',
image: 'http://facebook.com/icon.png',
text: 'Facebook icon',
},
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
view.render();
});
it('shows multiple social icons', function () {
expect(view.$('.mailpoet_social a').eq(0).prop('href')).to.equal('http://example.org/');
expect(view.$('.mailpoet_social img').eq(0).prop('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_social img').eq(0).prop('alt')).to.equal('some text');
expect(view.$('.mailpoet_social a').eq(1).prop('href')).to.equal('http://facebook.com/');
expect(view.$('.mailpoet_social img').eq(1).prop('src')).to.equal('http://facebook.com/icon.png');
expect(view.$('.mailpoet_social img').eq(1).prop('alt')).to.equal('Facebook icon');
});
});
it('has an icon set it uses', function () {
expect(model.get('iconSet')).to.be.a('string');
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'someimage.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
view.render();
});
it('updates icons in settings if iconset changes', function() {
view.$('.mailpoet_social_icon_set').last().click();
expect(view.$('.mailpoet_social_icon_field_image').val()).to.equal(EditorApplication.getAvailableStyles().get('socialIconSets.light.custom'));
});
it('removes the icon when "remove" is clicked', function() {
view.$('.mailpoet_delete_block').click();
expect(model.get('icons').length).to.equal(0);
expect(view.$('.mailpoet_social_icon_settings').length).to.equal(0);
});
it('adds another icon when "Add another social network" is pressed', function() {
view.$('.mailpoet_add_social_icon').click();
expect(model.get('icons').length).to.equal(2);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it('has icons', function () {
expect(model.get('icons')).to.be.an.instanceof(Backbone.Collection);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
social: {
iconSet: 'customConfigIconSet',
},
},
});
var model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
expect(model.get('iconSet')).to.equal('customConfigIconSet');
});
});
describe('icon model', function () {
var model;
before(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
'socialIconSets.default.custom': 'someimage.jpg',
});
global.stubConfig(EditorApplication, {
socialIcons: {
custom: {
defaultLink: 'http://example.org',
title: 'sometitle',
}
},
});
model = new (EditorApplication.module('blocks.social').SocialIconModel)();
});
it('has a socialIcon type', function () {
expect(model.get('type')).to.equal('socialIcon');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
expect(model.get('link')).to.equal('http://example.org');
});
it('has an image', function () {
expect(model.get('image')).to.equal('someimage.jpg');
});
it('has height', function () {
expect(model.get('height')).to.equal('32px');
});
it('has width', function () {
expect(model.get('width')).to.equal('32px');
});
it('has text', function () {
expect(model.get('text')).to.equal('sometitle');
});
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
text: 'some text',
}
],
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_social')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'http://example.org/',
image: 'http://example.org/someimage.png',
text: 'some text',
},
{
type: 'socialIcon',
iconType: 'facebook',
link: 'http://facebook.com/',
image: 'http://facebook.com/icon.png',
text: 'Facebook icon',
},
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
view.render();
});
it('shows multiple social icons', function () {
expect(view.$('.mailpoet_social a').eq(0).prop('href')).to.equal('http://example.org/');
expect(view.$('.mailpoet_social img').eq(0).prop('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_social img').eq(0).prop('alt')).to.equal('some text');
expect(view.$('.mailpoet_social a').eq(1).prop('href')).to.equal('http://facebook.com/');
expect(view.$('.mailpoet_social img').eq(1).prop('src')).to.equal('http://facebook.com/icon.png');
expect(view.$('.mailpoet_social img').eq(1).prop('alt')).to.equal('Facebook icon');
});
});
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'someimage.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
view.render();
});
it('updates icons in settings if iconset changes', function() {
view.$('.mailpoet_social_icon_set').last().click();
expect(view.$('.mailpoet_social_icon_field_image').val()).to.equal(EditorApplication.getAvailableStyles().get('socialIconSets.light.custom'));
});
it('removes the icon when "remove" is clicked', function() {
view.$('.mailpoet_delete_block').click();
expect(model.get('icons').length).to.equal(0);
expect(view.$('.mailpoet_social_icon_settings').length).to.equal(0);
});
it('adds another icon when "Add another social network" is pressed', function() {
view.$('.mailpoet_add_social_icon').click();
expect(model.get('icons').length).to.equal(2);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

257
tests/javascript/newsletter_editor/blocks/spacer.spec.js
View File

@ -4,140 +4,139 @@ define('test/newsletter_editor/blocks/spacer', [
], function(EditorApplication) {
describe('Spacer', function () {
describe('model', function () {
var model;
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has spacer type', function () {
expect(model.get('type')).to.equal('spacer');
});
it('has height', function () {
expect(model.get('styles.block.height')).to.match(/\d+px/);
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("changes attributes with set", function () {
var newValue = '33px';
model.set('styles.block.height', newValue);
expect(model.get('styles.block.height')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(2).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.height', '77px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
spacer: {
styles: {
block: {
backgroundColor: '#567890',
height: '19px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#567890');
expect(model.get('styles.block.height')).to.equal('19px');
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_spacer')).to.have.length(1);
expect(view.$('.mailpoet_spacer').css('background-color')).to.equal(model.get('styles.block.backgroundColor'));
expect(view.$('.mailpoet_spacer').css('height')).to.equal(model.get('styles.block.height'));
});
it('rerenders if model attributes change', function () {
view.render();
model.set('styles.block.height', '71px');
expect(view.$('.mailpoet_spacer').css('height')).to.equal('71px');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var view, model;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
view.render();
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_spacer_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
it('has spacer type', function () {
expect(model.get('type')).to.equal('spacer');
});
it('has height', function () {
expect(model.get('styles.block.height')).to.match(/\d+px/);
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("changes attributes with set", function () {
var newValue = '33px';
model.set('styles.block.height', newValue);
expect(model.get('styles.block.height')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(2).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.height', '77px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
spacer: {
styles: {
block: {
backgroundColor: '#567890',
height: '19px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#567890');
expect(model.get('styles.block.height')).to.equal('19px');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_spacer')).to.have.length(1);
expect(view.$('.mailpoet_spacer').css('background-color')).to.equal(model.get('styles.block.backgroundColor'));
expect(view.$('.mailpoet_spacer').css('height')).to.equal(model.get('styles.block.height'));
});
it('rerenders if model attributes change', function () {
view.render();
model.set('styles.block.height', '71px');
expect(view.$('.mailpoet_spacer').css('height')).to.equal('71px');
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var view, model;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
view.render();
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_spacer_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

113
tests/javascript/newsletter_editor/blocks/text.spec.js
View File

@ -4,69 +4,68 @@ define('test/newsletter_editor/blocks/text', [
], function(EditorApplication) {
describe('Text', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.text').TextBlockModel)();
});
it('has a text type', function () {
expect(model.get('type')).to.equal('text');
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
text: {
text: 'some custom config text',
},
},
});
var model = new (EditorApplication.module('blocks.text').TextBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
});
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.text').TextBlockModel)();
});
describe('block view', function () {
it('has a text type', function () {
expect(model.get('type')).to.equal('text');
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
text: {
text: 'some custom config text',
},
},
});
var model = new (EditorApplication.module('blocks.text').TextBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
});
});
describe('block view', function () {
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view;
beforeEach(function () {
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
view.render();
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view;
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(1);
});
beforeEach(function () {
global.stubConfig(EditorApplication);
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
view.render();
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(1);
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
});
});
});

12
tests/javascript/newsletter_editor/components/config.spec.js
View File

@ -4,12 +4,12 @@ define('test/newsletter_editor/components/config', [
], function(EditorApplication) {
describe('Config', function () {
it('loads and stores configuration', function() {
EditorApplication.module('components.config').setConfig({
testConfig: 'testValue',
});
var model = EditorApplication.module('components.config').getConfig();
expect(model.get('testConfig')).to.equal('testValue');
it('loads and stores configuration', function() {
EditorApplication.module('components.config').setConfig({
testConfig: 'testValue',
});
var model = EditorApplication.module('components.config').getConfig();
expect(model.get('testConfig')).to.equal('testValue');
});
});
});

148
tests/javascript/newsletter_editor/components/content.spec.js
View File

@ -4,85 +4,85 @@ define('test/newsletter_editor/components/content', [
], function(EditorApplication) {
describe('Content', function() {
describe('newsletter model', function() {
var model;
describe('newsletter model', function() {
var model;
beforeEach(function() {
model = new (EditorApplication.module('components.content').NewsletterModel)({
styles: {
style1: 'style1Value',
style2: 'style2Value',
},
data: {
data1: 'data1Value',
data2: 'data2Value',
},
someField: 'someValue'
});
});
it('triggers autosave on change', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('autoSave');
global.stubChannel(EditorApplication, {
trigger: mock,
});
model.set('someField', 'anotherValue');
mock.verify();
});
it('does not include styles and data attributes in its JSON', function() {
var json = model.toJSON();
expect(json).to.deep.equal({someField: 'someValue'});
});
beforeEach(function() {
model = new (EditorApplication.module('components.content').NewsletterModel)({
styles: {
style1: 'style1Value',
style2: 'style2Value',
},
data: {
data1: 'data1Value',
data2: 'data2Value',
},
someField: 'someValue'
});
});
describe('block types', function() {
it('registers a block type view and model', function() {
var blockModel = new Backbone.SuperModel(),
blockView = new Backbone.View();
EditorApplication.module('components.content').registerBlockType('testType', {
blockModel: blockModel,
blockView: blockView,
});
expect(EditorApplication.module('components.content').getBlockTypeModel('testType')).to.deep.equal(blockModel);
expect(EditorApplication.module('components.content').getBlockTypeView('testType')).to.deep.equal(blockView);
});
it('triggers autosave on change', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('autoSave');
global.stubChannel(EditorApplication, {
trigger: mock,
});
model.set('someField', 'anotherValue');
mock.verify();
});
describe('transformation to json', function() {
it('includes data, styles and initial newsletter fields', function() {
var dataField = {
containerModelField: 'containerModelValue',
}, stylesField = {
globalStylesField: 'globalStylesValue',
}, newsletterFields = {
newsletter_subject: 'test newsletter subject',
};
EditorApplication._contentContainer = {
toJSON: function() {
return dataField;
}
};
EditorApplication.getGlobalStyles = function() {
return {
toJSON: function() {
return stylesField;
},
};
};
EditorApplication.getNewsletter = function() {
return {
toJSON: function() {
return newsletterFields;
},
};
};
var json = EditorApplication.module('components.content').toJSON();
expect(json).to.deep.equal(_.extend({
data: dataField,
styles: stylesField
}, newsletterFields));
});
it('does not include styles and data attributes in its JSON', function() {
var json = model.toJSON();
expect(json).to.deep.equal({someField: 'someValue'});
});
});
describe('block types', function() {
it('registers a block type view and model', function() {
var blockModel = new Backbone.SuperModel(),
blockView = new Backbone.View();
EditorApplication.module('components.content').registerBlockType('testType', {
blockModel: blockModel,
blockView: blockView,
});
expect(EditorApplication.module('components.content').getBlockTypeModel('testType')).to.deep.equal(blockModel);
expect(EditorApplication.module('components.content').getBlockTypeView('testType')).to.deep.equal(blockView);
});
});
describe('transformation to json', function() {
it('includes data, styles and initial newsletter fields', function() {
var dataField = {
containerModelField: 'containerModelValue',
}, stylesField = {
globalStylesField: 'globalStylesValue',
}, newsletterFields = {
newsletter_subject: 'test newsletter subject',
};
EditorApplication._contentContainer = {
toJSON: function() {
return dataField;
}
};
EditorApplication.getGlobalStyles = function() {
return {
toJSON: function() {
return stylesField;
},
};
};
EditorApplication.getNewsletter = function() {
return {
toJSON: function() {
return newsletterFields;
},
};
};
var json = EditorApplication.module('components.content').toJSON();
expect(json).to.deep.equal(_.extend({
data: dataField,
styles: stylesField
}, newsletterFields));
});
});
});
});

77
tests/javascript/newsletter_editor/components/heading.spec.js
View File

@ -4,45 +4,44 @@ define('test/newsletter_editor/components/heading', [
], function(EditorApplication) {
describe('Heading', function() {
describe('view', function() {
var view;
beforeEach(function() {
var model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var view, model;
beforeEach(function() {
model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
newsletter_preheader: 'a test preheader',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
view.render();
});
it('changes the model when subject field is changed', function() {
view.$('.mailpoet_input_title').val('a new testing subject').keyup();
expect(model.get('newsletter_subject')).to.equal('a new testing subject');
});
it('changes the model when preheader field is changed', function() {
view.$('.mailpoet_input_preheader').val('a new testing preheader').keyup();
expect(model.get('newsletter_preheader')).to.equal('a new testing preheader');
});
});
describe('view', function() {
var view;
beforeEach(function() {
var model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var view, model;
beforeEach(function() {
model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
newsletter_preheader: 'a test preheader',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
view.render();
});
it('changes the model when subject field is changed', function() {
view.$('.mailpoet_input_title').val('a new testing subject').keyup();
expect(model.get('newsletter_subject')).to.equal('a new testing subject');
});
it('changes the model when preheader field is changed', function() {
view.$('.mailpoet_input_preheader').val('a new testing preheader').keyup();
expect(model.get('newsletter_preheader')).to.equal('a new testing preheader');
});
});
});
});
});

139
tests/javascript/newsletter_editor/components/save.spec.js
View File

@ -4,78 +4,77 @@ define('test/newsletter_editor/components/save', [
], function(EditorApplication) {
describe('Save', function() {
describe('save method', function() {
it('triggers beforeEditorSave event', function() {
var spy = sinon.spy();
global.stubChannel(EditorApplication, {
trigger: spy,
});
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('beforeEditorSave').calledOnce).to.be.true;
});
it.skip('triggers afterEditorSave event', function() {
var stub = sinon.stub().callsArgWith(2, { success: true }),
spy = sinon.spy();
global.mailpoet_post_wpi = stub;
global.stubChannel(EditorApplication, {
trigger: spy,
});
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true;
});
it.skip('sends newsletter json to server for saving', function() {
var mock = sinon.mock({ mailpoet_post_wpi: function() {} }).expects('mailpoet_post_wpi').once();
global.stubChannel(EditorApplication);
global.mailpoet_post_wpi = mock;
EditorApplication.toJSON = sinon.stub().returns({});
EditorApplication.module("components.save").save();
mock.verify();
});
describe('save method', function() {
it('triggers beforeEditorSave event', function() {
var spy = sinon.spy();
global.stubChannel(EditorApplication, {
trigger: spy,
});
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('beforeEditorSave').calledOnce).to.be.true;
});
describe('view', function() {
var view;
before(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
global.stubConfig(EditorApplication);
view = new (EditorApplication.module('components.save').SaveView)();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var view;
beforeEach(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
view = new (EditorApplication.module('components.save').SaveView)();
view.render();
});
it('triggers newsletter saving when clicked on save button', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('save');
global.stubChannel(EditorApplication, {
trigger: mock,
});
view.$('.mailpoet_save_button').click();
mock.verify();
});
it('displays saving options when clicked on save options button', function() {
view.$('.mailpoet_save_show_options').click();
expect(view.$('.mailpoet_save_options')).to.not.have.$class('mailpoet_hidden');
});
});
it.skip('triggers afterEditorSave event', function() {
var stub = sinon.stub().callsArgWith(2, { success: true }),
spy = sinon.spy();
global.mailpoet_post_wpi = stub;
global.stubChannel(EditorApplication, {
trigger: spy,
});
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true;
});
it.skip('sends newsletter json to server for saving', function() {
var mock = sinon.mock({ mailpoet_post_wpi: function() {} }).expects('mailpoet_post_wpi').once();
global.stubChannel(EditorApplication);
global.mailpoet_post_wpi = mock;
EditorApplication.toJSON = sinon.stub().returns({});
EditorApplication.module("components.save").save();
mock.verify();
});
});
describe('view', function() {
var view;
before(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
global.stubConfig(EditorApplication);
view = new (EditorApplication.module('components.save').SaveView)();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var view;
beforeEach(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
view = new (EditorApplication.module('components.save').SaveView)();
view.render();
});
it('triggers newsletter saving when clicked on save button', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('save');
global.stubChannel(EditorApplication, {
trigger: mock,
});
view.$('.mailpoet_save_button').click();
mock.verify();
});
it('displays saving options when clicked on save options button', function() {
view.$('.mailpoet_save_show_options').click();
expect(view.$('.mailpoet_save_options')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
});

338
tests/javascript/newsletter_editor/components/sidebar.spec.js
View File

@ -4,186 +4,184 @@ define('test/newsletter_editor/components/sidebar', [
], function(EditorApplication) {
describe('Sidebar', function() {
describe('content view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarWidgetsView)({
collection: new Backbone.Collection([]),
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('content view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarWidgetsView)({
collection: new Backbone.Collection([]),
});
});
describe('layout view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarLayoutWidgetsView)({
collection: new Backbone.Collection([]),
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('layout view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarLayoutWidgetsView)({
collection: new Backbone.Collection([]),
});
});
describe('styles view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: new Backbone.SuperModel({}),
availableStyles: new Backbone.SuperModel({}),
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var model, availableStyles, view;
before(function() {
model = new Backbone.SuperModel({
text: {
fontColor: '#000000',
fontFamily: 'Arial',
},
h1: {
fontColor: '#000001',
fontFamily: 'Arial',
},
h2: {
fontColor: '#000002',
fontFamily: 'Arial',
},
h3: {
fontColor: '#000003',
fontFamily: 'Arial',
},
link: {
fontColor: '#000005',
textDecoration: 'none',
},
newsletter: {
backgroundColor: '#090909',
},
background: {
backgroundColor: '#020202',
},
});
availableStyles = new Backbone.SuperModel({
fonts: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
textSizes: [
'9px', '10px',
],
headingSizes: [
'10px', '12px', '14px', '16px', '18px',
],
});
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: model,
availableStyles: availableStyles,
});
view.render();
});
it('changes model if text font color field changes', function() {
view.$('#mailpoet_text_font_color').val('#123456').change();
expect(model.get('text.fontColor')).to.equal('#123456');
});
it('changes model if h1 font color field changes', function() {
view.$('#mailpoet_h1_font_color').val('#123457').change();
expect(model.get('h1.fontColor')).to.equal('#123457');
});
it('changes model if h2 font color field changes', function() {
view.$('#mailpoet_h2_font_color').val('#123458').change();
expect(model.get('h2.fontColor')).to.equal('#123458');
});
it('changes model if h3 font color field changes', function() {
view.$('#mailpoet_h3_font_color').val('#123426').change();
expect(model.get('h3.fontColor')).to.equal('#123426');
});
it('changes model if link font color field changes', function() {
view.$('#mailpoet_a_font_color').val('#323232').change();
expect(model.get('link.fontColor')).to.equal('#323232');
});
it('changes model if newsletter background color field changes', function() {
view.$('#mailpoet_newsletter_background_color').val('#636237').change();
expect(model.get('newsletter.backgroundColor')).to.equal('#636237');
});
it('changes model if background color field changes', function() {
view.$('#mailpoet_background_color').val('#878587').change();
expect(model.get('background.backgroundColor')).to.equal('#878587');
});
it('changes model if text font family field changes', function() {
view.$('#mailpoet_text_font_family').val('Times New Roman').change();
expect(model.get('text.fontFamily')).to.equal('Times New Roman');
});
it('changes model if h1 font family field changes', function() {
view.$('#mailpoet_h1_font_family').val('Comic Sans').change();
expect(model.get('h1.fontFamily')).to.equal('Comic Sans');
});
it('changes model if h2 font family field changes', function() {
view.$('#mailpoet_h2_font_family').val('Tahoma').change();
expect(model.get('h2.fontFamily')).to.equal('Tahoma');
});
it('changes model if h3 font family field changes', function() {
view.$('#mailpoet_h3_font_family').val('Lucida').change();
expect(model.get('h3.fontFamily')).to.equal('Lucida');
});
it('changes model if text font size field changes', function() {
view.$('#mailpoet_text_font_size').val('9px').change();
expect(model.get('text.fontSize')).to.equal('9px');
});
it('changes model if h1 font size field changes', function() {
view.$('#mailpoet_h1_font_size').val('12px').change();
expect(model.get('h1.fontSize')).to.equal('12px');
});
it('changes model if h2 font size field changes', function() {
view.$('#mailpoet_h2_font_size').val('14px').change();
expect(model.get('h2.fontSize')).to.equal('14px');
});
it('changes model if h3 font size field changes', function() {
view.$('#mailpoet_h3_font_size').val('16px').change();
expect(model.get('h3.fontSize')).to.equal('16px');
});
it('changes model if link underline field changes', function() {
view.$('#mailpoet_a_font_underline').prop('checked', true).change();
expect(model.get('link.textDecoration')).to.equal('underline');
});
});
describe('styles view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: new Backbone.SuperModel({}),
availableStyles: new Backbone.SuperModel({}),
});
});
describe('preview view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarPreviewView)();
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('once rendered', function() {
var model, availableStyles, view;
before(function() {
model = new Backbone.SuperModel({
text: {
fontColor: '#000000',
fontFamily: 'Arial',
},
h1: {
fontColor: '#000001',
fontFamily: 'Arial',
},
h2: {
fontColor: '#000002',
fontFamily: 'Arial',
},
h3: {
fontColor: '#000003',
fontFamily: 'Arial',
},
link: {
fontColor: '#000005',
textDecoration: 'none',
},
newsletter: {
backgroundColor: '#090909',
},
background: {
backgroundColor: '#020202',
},
});
availableStyles = new Backbone.SuperModel({
fonts: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
textSizes: [
'9px', '10px',
],
headingSizes: [
'10px', '12px', '14px', '16px', '18px',
],
});
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: model,
availableStyles: availableStyles,
});
it('renders', function() {
expect(view.render).to.not.throw();
});
view.render();
});
it('changes model if text font color field changes', function() {
view.$('#mailpoet_text_font_color').val('#123456').change();
expect(model.get('text.fontColor')).to.equal('#123456');
});
it('changes model if h1 font color field changes', function() {
view.$('#mailpoet_h1_font_color').val('#123457').change();
expect(model.get('h1.fontColor')).to.equal('#123457');
});
it('changes model if h2 font color field changes', function() {
view.$('#mailpoet_h2_font_color').val('#123458').change();
expect(model.get('h2.fontColor')).to.equal('#123458');
});
it('changes model if h3 font color field changes', function() {
view.$('#mailpoet_h3_font_color').val('#123426').change();
expect(model.get('h3.fontColor')).to.equal('#123426');
});
it('changes model if link font color field changes', function() {
view.$('#mailpoet_a_font_color').val('#323232').change();
expect(model.get('link.fontColor')).to.equal('#323232');
});
it('changes model if newsletter background color field changes', function() {
view.$('#mailpoet_newsletter_background_color').val('#636237').change();
expect(model.get('newsletter.backgroundColor')).to.equal('#636237');
});
it('changes model if background color field changes', function() {
view.$('#mailpoet_background_color').val('#878587').change();
expect(model.get('background.backgroundColor')).to.equal('#878587');
});
it('changes model if text font family field changes', function() {
view.$('#mailpoet_text_font_family').val('Times New Roman').change();
expect(model.get('text.fontFamily')).to.equal('Times New Roman');
});
it('changes model if h1 font family field changes', function() {
view.$('#mailpoet_h1_font_family').val('Comic Sans').change();
expect(model.get('h1.fontFamily')).to.equal('Comic Sans');
});
it('changes model if h2 font family field changes', function() {
view.$('#mailpoet_h2_font_family').val('Tahoma').change();
expect(model.get('h2.fontFamily')).to.equal('Tahoma');
});
it('changes model if h3 font family field changes', function() {
view.$('#mailpoet_h3_font_family').val('Lucida').change();
expect(model.get('h3.fontFamily')).to.equal('Lucida');
});
it('changes model if text font size field changes', function() {
view.$('#mailpoet_text_font_size').val('9px').change();
expect(model.get('text.fontSize')).to.equal('9px');
});
it('changes model if h1 font size field changes', function() {
view.$('#mailpoet_h1_font_size').val('12px').change();
expect(model.get('h1.fontSize')).to.equal('12px');
});
it('changes model if h2 font size field changes', function() {
view.$('#mailpoet_h2_font_size').val('14px').change();
expect(model.get('h2.fontSize')).to.equal('14px');
});
it('changes model if h3 font size field changes', function() {
view.$('#mailpoet_h3_font_size').val('16px').change();
expect(model.get('h3.fontSize')).to.equal('16px');
});
it('changes model if link underline field changes', function() {
view.$('#mailpoet_a_font_underline').prop('checked', true).change();
expect(model.get('link.textDecoration')).to.equal('underline');
});
});
});
describe('preview view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarPreviewView)();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});
});

63
tests/javascript/newsletter_editor/components/styles.spec.js
View File

@ -4,43 +4,42 @@ define('test/newsletter_editor/components/config', [
], function(EditorApplication) {
describe('Styles', function () {
it('loads and stores globally available styles', function() {
EditorApplication.module('components.styles').setGlobalStyles({
testStyle: 'testValue',
});
var model = EditorApplication.module('components.styles').getGlobalStyles();
expect(model.get('testStyle')).to.equal('testValue');
it('loads and stores globally available styles', function() {
EditorApplication.module('components.styles').setGlobalStyles({
testStyle: 'testValue',
});
var model = EditorApplication.module('components.styles').getGlobalStyles();
expect(model.get('testStyle')).to.equal('testValue');
});
describe('model', function() {
var model;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
});
describe('model', function() {
var model;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
});
it('triggers autoSave when changed', function() {
var mock = sinon.mock({ trigger: function(){}}).expects('trigger').once().withExactArgs('autoSave');
EditorApplication.getChannel = function() {
return {
trigger: mock,
};
};
model.set('text.fontColor', '#123456');
mock.verify();
});
});
it('triggers autoSave when changed', function() {
var mock = sinon.mock({ trigger: function(){}}).expects('trigger').once().withExactArgs('autoSave');
EditorApplication.getChannel = function() {
return {
trigger: mock,
};
};
model.set('text.fontColor', '#123456');
mock.verify();
});
describe('view', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
view = new (EditorApplication.module('components.styles').StylesView)({ model: model });
});
describe('view', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
view = new (EditorApplication.module('components.styles').StylesView)({ model: model });
});
it('renders', function() {
expect(view.render).to.not.throw();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});
});