diff --git a/assets/css/src/newsletter_editor/common.styl b/assets/css/src/newsletter_editor/common.styl
index 3a1f7e856f..18d5e3fd88 100644
--- a/assets/css/src/newsletter_editor/common.styl
+++ b/assets/css/src/newsletter_editor/common.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/blockTools.styl b/assets/css/src/newsletter_editor/components/blockTools.styl
index ff07a4a873..897dadd0a7 100644
--- a/assets/css/src/newsletter_editor/components/blockTools.styl
+++ b/assets/css/src/newsletter_editor/components/blockTools.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/dragAndDrop.styl b/assets/css/src/newsletter_editor/components/dragAndDrop.styl
index 9e494671c1..c55c234de6 100644
--- a/assets/css/src/newsletter_editor/components/dragAndDrop.styl
+++ b/assets/css/src/newsletter_editor/components/dragAndDrop.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/forms.styl b/assets/css/src/newsletter_editor/components/forms.styl
index 919bd05c6b..fa2cdc175e 100644
--- a/assets/css/src/newsletter_editor/components/forms.styl
+++ b/assets/css/src/newsletter_editor/components/forms.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/heading.styl b/assets/css/src/newsletter_editor/components/heading.styl
index d1147a3b96..63fee97236 100644
--- a/assets/css/src/newsletter_editor/components/heading.styl
+++ b/assets/css/src/newsletter_editor/components/heading.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/layers.styl b/assets/css/src/newsletter_editor/components/layers.styl
index a156a86ce7..51eeaa1a92 100644
--- a/assets/css/src/newsletter_editor/components/layers.styl
+++ b/assets/css/src/newsletter_editor/components/layers.styl
@@ -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;
diff --git a/assets/css/src/newsletter_editor/components/resize.styl b/assets/css/src/newsletter_editor/components/resize.styl
index 8147c18d73..4e893aa1eb 100644
--- a/assets/css/src/newsletter_editor/components/resize.styl
+++ b/assets/css/src/newsletter_editor/components/resize.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/save.styl b/assets/css/src/newsletter_editor/components/save.styl
index 67a51e2882..c82914da54 100644
--- a/assets/css/src/newsletter_editor/components/save.styl
+++ b/assets/css/src/newsletter_editor/components/save.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl
index 12c5ba55c1..392cb7ccbf 100644
--- a/assets/css/src/newsletter_editor/components/sidebar.styl
+++ b/assets/css/src/newsletter_editor/components/sidebar.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/components/sidepanel.styl b/assets/css/src/newsletter_editor/components/sidepanel.styl
index b895450e57..375c05ae27 100644
--- a/assets/css/src/newsletter_editor/components/sidepanel.styl
+++ b/assets/css/src/newsletter_editor/components/sidepanel.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl b/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
index 8b081e826c..dba0beb38a 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
@@ -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%
diff --git a/assets/css/src/newsletter_editor/contentBlocks/base.styl b/assets/css/src/newsletter_editor/contentBlocks/base.styl
index 8d1ad6727a..2ead16df83 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/base.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/base.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/button.styl b/assets/css/src/newsletter_editor/contentBlocks/button.styl
index f48d2d498d..1f4f7321c8 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/button.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/button.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/container.styl b/assets/css/src/newsletter_editor/contentBlocks/container.styl
index 3d5c3d6882..47117ab5ed 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/container.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/container.styl
@@ -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)
diff --git a/assets/css/src/newsletter_editor/contentBlocks/divider.styl b/assets/css/src/newsletter_editor/contentBlocks/divider.styl
index a1b99a8de7..138a54b842 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/divider.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/divider.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/footer.styl b/assets/css/src/newsletter_editor/contentBlocks/footer.styl
index 8c3b83e1e5..c66a095d93 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/footer.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/footer.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/header.styl b/assets/css/src/newsletter_editor/contentBlocks/header.styl
index 19064b58fe..62a12591ad 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/header.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/header.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/image.styl b/assets/css/src/newsletter_editor/contentBlocks/image.styl
index b752b9fbac..606ff2f045 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/image.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/image.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/posts.styl b/assets/css/src/newsletter_editor/contentBlocks/posts.styl
index edaf481af0..4f60ff8e5a 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/posts.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/posts.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/social.styl b/assets/css/src/newsletter_editor/contentBlocks/social.styl
index e06475aee0..358f7d2e40 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/social.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/social.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/spacer.styl b/assets/css/src/newsletter_editor/contentBlocks/spacer.styl
index 3c8249b347..42c58b3a7f 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/spacer.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/spacer.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/contentBlocks/text.styl b/assets/css/src/newsletter_editor/contentBlocks/text.styl
index 7993c75dcd..613750520c 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/text.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/text.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/layout.styl b/assets/css/src/newsletter_editor/layout.styl
index e30e9eddc9..f86a92a15d 100644
--- a/assets/css/src/newsletter_editor/layout.styl
+++ b/assets/css/src/newsletter_editor/layout.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl
index 003016ebba..0b5fe17162 100644
--- a/assets/css/src/newsletter_editor/libraryOverrides.styl
+++ b/assets/css/src/newsletter_editor/libraryOverrides.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/mixins/border-radius.styl b/assets/css/src/newsletter_editor/mixins/border-radius.styl
index f81b129469..ab6971a0e5 100644
--- a/assets/css/src/newsletter_editor/mixins/border-radius.styl
+++ b/assets/css/src/newsletter_editor/mixins/border-radius.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/mixins/box-shadow.styl b/assets/css/src/newsletter_editor/mixins/box-shadow.styl
index 69ffdfff5a..8aeeeb83f1 100644
--- a/assets/css/src/newsletter_editor/mixins/box-shadow.styl
+++ b/assets/css/src/newsletter_editor/mixins/box-shadow.styl
@@ -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
diff --git a/assets/css/src/newsletter_editor/mixins/filter-shadow.styl b/assets/css/src/newsletter_editor/mixins/filter-shadow.styl
index 48a5e85956..837c8f7c80 100644
--- a/assets/css/src/newsletter_editor/mixins/filter-shadow.styl
+++ b/assets/css/src/newsletter_editor/mixins/filter-shadow.styl
@@ -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)
diff --git a/assets/css/src/newsletter_editor/variables.styl b/assets/css/src/newsletter_editor/variables.styl
index 70d20a7b48..09210b01dc 100644
--- a/assets/css/src/newsletter_editor/variables.styl
+++ b/assets/css/src/newsletter_editor/variables.styl
@@ -23,5 +23,4 @@ $warning-alternate-text-color = #f4c6c8
$error-text-color = #d54e21
// Dimensions
-
$newsletter-width = 600px
diff --git a/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js b/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
index 70f3618619..6e605a68a9 100644
--- a/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
@@ -20,5 +20,4 @@ define('newsletter_editor/behaviors/ColorPickerBehavior', [
});
},
});
-
});
diff --git a/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js b/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
index d9533adb0e..daee9311f5 100644
--- a/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
@@ -424,5 +424,4 @@ define('newsletter_editor/behaviors/ContainerDropZoneBehavior', [
return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
},
});
-
});
diff --git a/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js b/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
index a599b8429f..368a32d6cd 100644
--- a/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
@@ -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]);
+ };
+ },
+ });
});
diff --git a/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js b/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
index 2f39f9f0e9..2e721e29d0 100644
--- a/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
@@ -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');
+ }
+ },
});
-
});
diff --git a/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js b/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
index 42d795e6a0..f3b9d0a940 100644
--- a/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/SortableBehavior.js
@@ -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,
+ });
}
+ }
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js b/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
index 7440c45459..7273e3ba40 100644
--- a/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
+++ b/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/base.js b/assets/js/src/newsletter_editor/blocks/base.js
index 15198a1b89..eac5780def 100644
--- a/assets/js/src/newsletter_editor/blocks/base.js
+++ b/assets/js/src/newsletter_editor/blocks/base.js
@@ -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";
- }
- }
- },
- });
+ }
+ },
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/button.js b/assets/js/src/newsletter_editor/blocks/button.js
index 24529f0f0a..e5ad187bf5 100644
--- a/assets/js/src/newsletter_editor/blocks/button.js
+++ b/assets/js/src/newsletter_editor/blocks/button.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/container.js b/assets/js/src/newsletter_editor/blocks/container.js
index 9a58665505..553739e596 100644
--- a/assets/js/src/newsletter_editor/blocks/container.js
+++ b/assets/js/src/newsletter_editor/blocks/container.js
@@ -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,
+ });
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/divider.js b/assets/js/src/newsletter_editor/blocks/divider.js
index 9c578bb920..b2626da29b 100644
--- a/assets/js/src/newsletter_editor/blocks/divider.js
+++ b/assets/js/src/newsletter_editor/blocks/divider.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/footer.js b/assets/js/src/newsletter_editor/blocks/footer.js
index 709ea38df2..b204773cfa 100644
--- a/assets/js/src/newsletter_editor/blocks/footer.js
+++ b/assets/js/src/newsletter_editor/blocks/footer.js
@@ -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: 'Unsubscribe | Manage subscription
Add your postal address here!',
- 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: 'Unsubscribe | Manage subscription
Add your postal address here!',
+ 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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/header.js b/assets/js/src/newsletter_editor/blocks/header.js
index f5dbad4f45..c7e291a1a6 100644
--- a/assets/js/src/newsletter_editor/blocks/header.js
+++ b/assets/js/src/newsletter_editor/blocks/header.js
@@ -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? View it in your browser',
- 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? View it in your browser',
+ 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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js
index 5006ec06c0..d9e112069d 100644
--- a/assets/js/src/newsletter_editor/blocks/image.js
+++ b/assets/js/src/newsletter_editor/blocks/image.js
@@ -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,
+ });
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/posts.js b/assets/js/src/newsletter_editor/blocks/posts.js
index d973e4c2c8..070f32b162 100644
--- a/assets/js/src/newsletter_editor/blocks/posts.js
+++ b/assets/js/src/newsletter_editor/blocks/posts.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/social.js b/assets/js/src/newsletter_editor/blocks/social.js
index a4eeb8c982..4bc8b6f546 100644
--- a/assets/js/src/newsletter_editor/blocks/social.js
+++ b/assets/js/src/newsletter_editor/blocks/social.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/spacer.js b/assets/js/src/newsletter_editor/blocks/spacer.js
index 45eefd1930..582a31b61a 100644
--- a/assets/js/src/newsletter_editor/blocks/spacer.js
+++ b/assets/js/src/newsletter_editor/blocks/spacer.js
@@ -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,
});
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/blocks/text.js b/assets/js/src/newsletter_editor/blocks/text.js
index 27592bc753..b3505d3b56 100644
--- a/assets/js/src/newsletter_editor/blocks/text.js
+++ b/assets/js/src/newsletter_editor/blocks/text.js
@@ -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,
+ });
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/config.js b/assets/js/src/newsletter_editor/components/config.js
index d59e22c004..89f2acdf8a 100644
--- a/assets/js/src/newsletter_editor/components/config.js
+++ b/assets/js/src/newsletter_editor/components/config.js
@@ -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);
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/content.js b/assets/js/src/newsletter_editor/components/content.js
index f7caa3f66e..b72391686c 100644
--- a/assets/js/src/newsletter_editor/components/content.js
+++ b/assets/js/src/newsletter_editor/components/content.js
@@ -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);
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/heading.js b/assets/js/src/newsletter_editor/components/heading.js
index 58e392531a..27800e80dc 100644
--- a/assets/js/src/newsletter_editor/components/heading.js
+++ b/assets/js/src/newsletter_editor/components/heading.js
@@ -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() }));
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/save.js b/assets/js/src/newsletter_editor/components/save.js
index 3f3fb337d8..78aa617c67 100644
--- a/assets/js/src/newsletter_editor/components/save.js
+++ b/assets/js/src/newsletter_editor/components/save.js
@@ -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("");
- //} else if(response.error !== undefined) {
- //if(response.error.length === 0) {
- //// TODO: Handle translations
- //MailPoet.Notice.error("");
- //} 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("");
+ //} else if(response.error !== undefined) {
+ //if(response.error.length === 0) {
+ //// TODO: Handle translations
+ //MailPoet.Notice.error("");
+ //} 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);
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js
index abf527b212..8b9f16ecbb 100644
--- a/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/assets/js/src/newsletter_editor/components/sidebar.js
@@ -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);
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/components/styles.js b/assets/js/src/newsletter_editor/components/styles.js
index 0501a2d52c..0c803c25db 100644
--- a/assets/js/src/newsletter_editor/components/styles.js
+++ b/assets/js/src/newsletter_editor/components/styles.js
@@ -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);
+ });
});
-
});
diff --git a/assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js b/assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js
index 8e813bb732..ca7e5fe434 100644
--- a/assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js
+++ b/assets/js/src/newsletter_editor/tinymce/mailpoet_custom_fields/plugin.js
@@ -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: [],
+ });
+ },
+ });
});
diff --git a/assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js b/assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js
index 146650c741..1d09e4a5a0 100644
--- a/assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js
+++ b/assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js
@@ -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});
+ },
+ }
+ },
});
diff --git a/tests/javascript/loadHelpers.js b/tests/javascript/loadHelpers.js
index 40d17d6274..a852c3b2fb 100644
--- a/tests/javascript/loadHelpers.js
+++ b/tests/javascript/loadHelpers.js
@@ -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);
+ },
};
-
diff --git a/tests/javascript/mochaTestHelper.js b/tests/javascript/mochaTestHelper.js
index 6887c5289f..bc636da119 100644
--- a/tests/javascript/mochaTestHelper.js
+++ b/tests/javascript/mochaTestHelper.js
@@ -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('', {}, {
- FetchExternalResources: ['script'],
- ProcessExternalResources: ['script'],
- MutationEvents: '2.0',
- QuerySelector: false
- });
+ global.document = jsdom('', {}, {
+ 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'});
diff --git a/tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js b/tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js
index 15d5d90285..6eddf856fa 100644
--- a/tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js
@@ -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);
+ });
});
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/button.spec.js b/tests/javascript/newsletter_editor/blocks/button.spec.js
index 2d6e1399c7..ce5e7f323b 100644
--- a/tests/javascript/newsletter_editor/blocks/button.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/button.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/container.spec.js b/tests/javascript/newsletter_editor/blocks/container.spec.js
index 69b78938dc..ef345ca148 100644
--- a/tests/javascript/newsletter_editor/blocks/container.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/container.spec.js
@@ -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);
+ });
+ });
+ });
+ });
});
diff --git a/tests/javascript/newsletter_editor/blocks/divider.spec.js b/tests/javascript/newsletter_editor/blocks/divider.spec.js
index db868c8195..ef86e95044 100644
--- a/tests/javascript/newsletter_editor/blocks/divider.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/divider.spec.js
@@ -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);
+ });
});
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/footer.spec.js b/tests/javascript/newsletter_editor/blocks/footer.spec.js
index d794e99105..7f79442487 100644
--- a/tests/javascript/newsletter_editor/blocks/footer.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/footer.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/header.spec.js b/tests/javascript/newsletter_editor/blocks/header.spec.js
index 6d5792d817..9faa9c6959 100644
--- a/tests/javascript/newsletter_editor/blocks/header.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/header.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/image.spec.js b/tests/javascript/newsletter_editor/blocks/image.spec.js
index b0c442f115..9d89f068e6 100644
--- a/tests/javascript/newsletter_editor/blocks/image.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/image.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/posts.spec.js b/tests/javascript/newsletter_editor/blocks/posts.spec.js
index a418ac580f..523814f4f9 100644
--- a/tests/javascript/newsletter_editor/blocks/posts.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/posts.spec.js
@@ -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);
+ });
});
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/social.spec.js b/tests/javascript/newsletter_editor/blocks/social.spec.js
index 1b6ee1591e..6052fc15a2 100644
--- a/tests/javascript/newsletter_editor/blocks/social.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/social.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/spacer.spec.js b/tests/javascript/newsletter_editor/blocks/spacer.spec.js
index c520337825..0b5da42847 100644
--- a/tests/javascript/newsletter_editor/blocks/spacer.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/spacer.spec.js
@@ -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);
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/blocks/text.spec.js b/tests/javascript/newsletter_editor/blocks/text.spec.js
index d53d8e916d..062bc32e54 100644
--- a/tests/javascript/newsletter_editor/blocks/text.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/text.spec.js
@@ -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);
+ });
});
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/components/config.spec.js b/tests/javascript/newsletter_editor/components/config.spec.js
index 10e459f85c..e3e8428e85 100644
--- a/tests/javascript/newsletter_editor/components/config.spec.js
+++ b/tests/javascript/newsletter_editor/components/config.spec.js
@@ -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');
+ });
});
});
diff --git a/tests/javascript/newsletter_editor/components/content.spec.js b/tests/javascript/newsletter_editor/components/content.spec.js
index 276af57c1f..4c344a38a8 100644
--- a/tests/javascript/newsletter_editor/components/content.spec.js
+++ b/tests/javascript/newsletter_editor/components/content.spec.js
@@ -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));
+ });
+ });
});
});
diff --git a/tests/javascript/newsletter_editor/components/heading.spec.js b/tests/javascript/newsletter_editor/components/heading.spec.js
index 7f9d9dceba..d13d138461 100644
--- a/tests/javascript/newsletter_editor/components/heading.spec.js
+++ b/tests/javascript/newsletter_editor/components/heading.spec.js
@@ -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');
+ });
+ });
+ });
+ });
});
diff --git a/tests/javascript/newsletter_editor/components/save.spec.js b/tests/javascript/newsletter_editor/components/save.spec.js
index 08a09b4bac..74e5a6ba63 100644
--- a/tests/javascript/newsletter_editor/components/save.spec.js
+++ b/tests/javascript/newsletter_editor/components/save.spec.js
@@ -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');
+ });
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/components/sidebar.spec.js b/tests/javascript/newsletter_editor/components/sidebar.spec.js
index 9bfd6ea6b6..efb5e0139f 100644
--- a/tests/javascript/newsletter_editor/components/sidebar.spec.js
+++ b/tests/javascript/newsletter_editor/components/sidebar.spec.js
@@ -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();
+ });
+ });
});
-
});
diff --git a/tests/javascript/newsletter_editor/components/styles.spec.js b/tests/javascript/newsletter_editor/components/styles.spec.js
index 863bccba13..de403f3559 100644
--- a/tests/javascript/newsletter_editor/components/styles.spec.js
+++ b/tests/javascript/newsletter_editor/components/styles.spec.js
@@ -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();
});
+ });
});
-
});