diff --git a/RoboFile.php b/RoboFile.php index d7559b6f27..b49bcf5ad6 100644 --- a/RoboFile.php +++ b/RoboFile.php @@ -22,6 +22,13 @@ class RoboFile extends \Robo\Tasks { $this->_exec(join(' ', $command)); } + function makepot() { + $this->_exec('grunt makepot'. + ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'. + ' --base_path '.__DIR__ + ); + } + function testUnit() { $this->loadEnv(); $this->_exec('vendor/bin/codecept run unit'); diff --git a/assets/css/admin.css b/assets/css/admin.css index f4cd3f3d34..7b23b053e2 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -9,6 +9,9 @@ .clearfix:after { clear: both; } +a:focus { + outline: 0 none !important; +} body.mailpoet_modal_opened { overflow: hidden; } @@ -454,3 +457,562 @@ body.rtl .formError .formErrorArrow { border: none; background: #fff; } +#mailpoet_form_history { + display: none; +} +#mailpoet_form_editor { + padding: 20px; + width: 300px; + border: 1px solid #ccc; + position: relative; + background-color: #fff; + -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2) inset 0 0 20px rgba(0,0,0,0.1); + box-shadow: 0 0 5px rgba(0,0,0,0.2) inset 0 0 20px rgba(0,0,0,0.1); +} +#mailpoet_form_editor:before, +#mailpoet_form_editor:after { + position: absolute; + width: 40%; + height: 10px; + content: ' '; + left: 12px; + bottom: 12px; + background: transparent; + -webkit-transform: skew(-5deg) rotate(-5deg); + -moz-transform: skew(-5deg) rotate(-5deg); + -ms-transform: skew(-5deg) rotate(-5deg); + -o-transform: skew(-5deg) rotate(-5deg); + -webkit-transform: skew(-5deg) rotate(-5deg); + -moz-transform: skew(-5deg) rotate(-5deg); + -o-transform: skew(-5deg) rotate(-5deg); + -ms-transform: skew(-5deg) rotate(-5deg); + transform: skew(-5deg) rotate(-5deg); +rgba(0,0,0,0.3) +rgba(0,0,0,0.3) + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.3); + box-shadow: 0 6px 12px rgba(0,0,0,0.3); + z-index: -1; +} +#mailpoet_form_editor:after { + left: auto; + right: 12px; + -webkit-transform: skew(5deg) rotate(5deg); + -moz-transform: skew(5deg) rotate(5deg); + -ms-transform: skew(5deg) rotate(5deg); + -o-transform: skew(5deg) rotate(5deg); + -webkit-transform: skew(5deg) rotate(5deg); + -moz-transform: skew(5deg) rotate(5deg); + -o-transform: skew(5deg) rotate(5deg); + -ms-transform: skew(5deg) rotate(5deg); + transform: skew(5deg) rotate(5deg); +} +.mailpoet_warning { + font-weight: bold; + color: #900; +} +.block_placeholder { + font-weight: bold; + height: 0; + overflow: hidden; + line-height: 30px; + text-align: center; + border: 0 none; + width: 298px; + z-index: 9500; + margin: 0 auto; + text-indent: -9999px; +} +.block_placeholder.active { + text-indent: 0; +/*border:1px dashed #dfdfdf;*/ +/*background-color:#f5f5f5;*/ + background-color: #4cb7e1; + display: block; + overflow: auto; + height: 30px; +} +.block_placeholder.hover { + background-color: #0074a2; + border-color: #0074a2; + color: #fff; +} +.mailpoet_form_block { + background-color: #fff; + height: 20px; + border: 0 none; +} +.mailpoet_form_block.highlighted { + border: 1px solid #5897fb; + padding: 9px 17px; +} +.mailpoet_form_block img { + max-width: 100%; +} +.mailpoet_form_block p { + margin: 5px 0; + word-wrap: break-word; +} +.mailpoet_radio, +.mailpoet_checkbox { + margin: -2px 5px 0 0; +} +#mailpoet_form_wrapper { + position: relative; +} +#mailpoet_form_container { + width: 340px; + margin: 0; +} +#mailpoet_form_editor.loading, +#mailpoet_form_toolbar.loading { + background: url("loading.gif") no-repeat center center #fcfcfc; +} +#mailpoet_form_toolbar.loading { + border: 1px solid #dfdfdf; +} +#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields { + visibility: hidden; + z-index: 1; +} +#wysija-add-field { + float: none; +} +#mailpoet_form_toolbar { + position: absolute; + width: 400px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs { + border-bottom: 1px solid #dfdfdf; + line-height: 0; +} +#mailpoet_form_toolbar .add_custom_field { + text-align: center; + padding: 15px 0 5px 0; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + margin: 0; + height: 30px; + line-height: 30px; + padding: 0; + display: -moz-inline-box; + display: inline-block; + *display: inline; + *float: left; + outline: 0 none; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + outline: 0 none; + text-decoration: none; + color: #a6a6a6; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li { + margin: 0 0 1px 0; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; + background-color: #f5f5f5; + background: -webkit-linear-gradient(center top, #f9f9f9, #f5f5f5); + background: -moz-linear-gradient(center top, #f9f9f9, #f5f5f5); + background: -o-linear-gradient(center top, #f9f9f9, #f5f5f5); + background: -ms-linear-gradient(center top, #f9f9f9, #f5f5f5); + background: linear-gradient(center top, #f9f9f9, #f5f5f5); + border: 1px solid #dfdfdf; + -webkit-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + padding: 0 7px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover { + background-color: #eee; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected { + color: #000; + border-bottom: 0 none; + background: #fcfcfc; + filter: none; + padding-bottom: 1px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a, +.wysija_params { + display: none !important; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, +#mailpoet_form_toolbar #mailpoet_toolbar_fields { + position: relative; + z-index: 9998; + margin: 0; +} +h2.title { + margin: 0 0 15px 0; +} +#mailpoet_form_name_input { + vertical-align: bottom; +} +.mailpoet_form_widget { + width: 298px; + height: 25px; + line-height: 25px; + z-index: 9999 !important; +} +.mailpoet_toolbar_section { + margin-bottom: 0; + background: none repeat scroll 0 0 #fff; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); + box-shadow: 0 1px 1px rgba(0,0,0,0.04); + min-width: 255px; + position: relative; + cursor: pointer; + max-height: auto; +} +.mailpoet_toolbar_section > div { + padding: 10px 20px 20px 20px; +} +.mailpoet_toolbar_section h3 { + margin: 10px; + position: relative; +} +.mailpoet_toolbar_section.closed { + max-height: 38px; + overflow: hidden; +} +.mailpoet_toolbar_section .mailpoet_toggle { + position: absolute; + top: 0; + right: 0; + height: 38px; + width: 27px; +} +.mailpoet_toolbar_section .mailpoet_toggle:focus { + outline: 0 none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.mailpoet_toolbar_section .mailpoet_toggle:before { + right: 12px; + font: 400 20px/1 dashicons; + speak: none; + display: inline-block; + padding: 8px 10px; + top: 0; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + content: '\f142'; +} +.mailpoet_toolbar_section.closed .mailpoet_toggle:before { + content: '\f140'; +} +#mailpoet_form_styles { + margin: 10px; + max-width: 318px; + width: 318px; + min-height: 300px; + resize: vertical; +} +#mailpoet_form_toolbar a.mailpoet_form_field, +.mailpoet_form_widget { + height: 25px; + line-height: 25px; + background-color: #f5f5f5; + background: -webkit-linear-gradient(center top, #f9f9f9, #ececec); + background: -moz-linear-gradient(center top, #f9f9f9, #ececec); + background: -o-linear-gradient(center top, #f9f9f9, #ececec); + background: -ms-linear-gradient(center top, #f9f9f9, #ececec); + background: linear-gradient(center top, #f9f9f9, #ececec); + border: 1px solid #dfdfdf; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + display: block; + font-size: 12px; + font-weight: bold; + padding: 0 7px; + cursor: move; + color: #222; + text-shadow: 0 1px 0 #fff; +} +#mailpoet_form_toolbar a.mailpoet_form_field.disabled { + cursor: pointer; + color: #ccc; + pointer-events: none; +} +.mailpoet_form_field_edit { + position: absolute; + right: 27px; + bottom: 13px; +} +.mailpoet_form_field_delete { + position: absolute; + right: 7px; + bottom: 13px; +} +#mailpoet_toolbar_fields li { + padding: 0 0 10px 0; + position: relative; +} +#mailpoet_toolbar_fields li.notice { + font-style: italic; + font-size: 11px; + margin: 0 !important; + border: 0 none !important; + background: none !important; +} +.mailpoet_form_block { + position: relative; + margin: 0; + padding: 10px 18px 10px 18px; + display: inline-table; + display: block; + height: 1%; + margin: 0; + z-index: 98; +} +.mailpoet_form_block.dragging { + z-index: 99000; + pointer-events: none; +} +.mailpoet_form_block:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.mailpoet_form_block.hover { + border: 1px dashed #bbb; + margin: 0 0 0 0; + padding: 9px 17px 9px 17px; +} +.mailpoet_form_block.static { +/*padding:0; + margin:0;*/ + background-color: #999; +} +.mailpoet_form_block .wysija_controls { + background-color: #dfdfdf; + background: -webkit-linear-gradient(center top, #bbb, #eee); + background: -moz-linear-gradient(center top, #bbb, #eee); + background: -o-linear-gradient(center top, #bbb, #eee); + background: -ms-linear-gradient(center top, #bbb, #eee); + background: linear-gradient(center top, #bbb, #eee); + -webkit-border-radius: 2px; + border-radius: 2px; + border: 1px solid #ccc; + position: absolute; + margin: 0; + padding: 0; + width: 298px; + height: 20px; + left: -1px; + right: 0; + top: -22px; +} +.mailpoet_form_block .wysija_controls li { + float: left; + width: 20px; + height: 20px; +} +.mailpoet_form_block .wysija_controls a { + cursor: pointer; + float: left; + font-size: 120%; + font-weight: bold; + height: 20px; + line-height: 20px; + text-align: center; + width: 20px; + color: #000; +} +.mailpoet_form_block .wysija_controls a.remove { + margin: 0 0 0 1px; +} +.mailpoet_form_block .handle_container, +.mailpoet_form_block .handle_container a { + float: none; + width: 40px !important; +} +.mailpoet_form_block .handle_container { + left: 140px; + top: 0; + position: absolute; +} +.wysija_controls a span, +.wysija_gallery .wysija_tools a span, +.wysija_image .wysija_tools a span, +.wysija_text .wysija_tools a span, +#mailpoet_toolbar_fields a span { + display: block; + height: 20px; + width: 20px; +} +.wysija_controls span input { + margin: 2px 0 0 0; + padding: 0; + color: transparent; +} +.alignment-left span { + background: url("form_editor_icons.png") no-repeat 0 0; +} +.alignment-left.active span, +.alignment-left:hover span { + background: url("form_editor_icons.png") no-repeat 0 -20px; +} +.alignment-center span { + background: url("form_editor_icons.png") no-repeat -20px 0; +} +.alignment-center.active span, +.alignment-center:hover span { + background: url("form_editor_icons.png") no-repeat -20px -20px; +} +.alignment-right span { + background: url("form_editor_icons.png") no-repeat -40px 0; +} +.alignment-right.active span, +.alignment-right:hover span { + background: url("form_editor_icons.png") no-repeat -40px -20px; +} +.add-link span { + background: url("form_editor_icons.png") no-repeat -60px 0; +} +.add-link.active span, +.add-link:hover span { + background: url("form_editor_icons.png") no-repeat -60px -20px; +} +.remove-link span { + background: url("form_editor_icons.png") no-repeat -80px 0; +} +.remove-link.active span, +.remove-link:hover span { + background: url("form_editor_icons.png") no-repeat -80px -20px; +} +.remove span, +.delete span { + background: url("form_editor_icons.png") no-repeat -100px 0; +} +.remove.active span, +.remove:hover span, +.delete.active span, +.delete:hover span { + background: url("form_editor_icons.png") no-repeat -100px -20px; +} +.handle span { + background: url("handle.png") no-repeat; + cursor: move; + width: 40px !important; +} +.duplicate span { + background: url("form_editor_icons.png") no-repeat -140px 0; +} +.duplicate.active span, +.duplicate:hover span { + background: url("form_editor_icons.png") no-repeat -140px -20px; +} +.settings span { + background: url("form_editor_icons.png") no-repeat -160px 0; +} +.settings.active span, +.settings:hover span { + background: url("form_editor_icons.png") no-repeat -160px -20px; +} +.icon-plus span { + background: url("form_editor_icons.png") no-repeat -200px 0; +} +.icon-plus.active span, +.icon-plus:hover span { + background: url("form_editor_icons.png") no-repeat -200px -20px; +} +.icon-minus span { + background: url("form_editor_icons.png") no-repeat -220px 0; +} +.icon-minus.active span, +.icon-minus:hover span { + background: url("form_editor_icons.png") no-repeat -220px -20px; +} +.wysija_options { + display: none; +} +.wysija_settings { + position: absolute; + z-index: 1000; +} +.wysija_settings a { + background-color: #f5f5f5; + background: -webkit-linear-gradient(center top, #f9f9f9, #ececec); + background: -moz-linear-gradient(center top, #f9f9f9, #ececec); + background: -o-linear-gradient(center top, #f9f9f9, #ececec); + background: -ms-linear-gradient(center top, #f9f9f9, #ececec); + background: linear-gradient(center top, #f9f9f9, #ececec); + border: 1px solid #dfdfdf; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + font-size: 12px; + font-weight: normal; + cursor: pointer; + color: #222; + text-shadow: 0 1px 0 #fff; + text-decoration: none; + display: block; + padding: 5px 5px 3px 27px; +} +.wysija_settings a span { + width: 20px; + height: 20px; + position: absolute; + top: 3px; + left: 5px; +} +.mailpoet_form_block label { + margin: 0 5px 0 0; + display: block; +} +#mailpoet_on_success textarea, +#mailpoet_on_success select { + width: 100%; +} +#mailpoet_on_success textarea { + height: 50px; + min-height: 50px; + resize: vertical; +} +.mailpoet_form_block textarea { + resize: none; +} +.mailpoet_form_block input, +.mailpoet_form_block textarea { + pointer-events: none; +} +#mailpoet_form_export textarea { + width: 340px; + height: 150px; + min-height: 150px; + resize: vertical; + font-size: 85%; + display: none; +} +.mailpoet_form_field_edit, +.mailpoet_form_field_delete { + text-decoration: none; +} +.mailpoet_form_field_edit:hover .dashicons-admin-generic:before, +.mailpoet_form_field_delete:hover .dashicons-dismiss:before, +.settings:hover .dashicons-admin-generic:before { + color: #2ea2cc; +} +.mailpoet_form_field_edit span, +.mailpoet_form_field_delete span { + background: none !important; + color: #999; +} +.mailpoet_form_field_delete span:before { + font-size: 21px; +} +.CodeMirror { + border: 1px solid #eee; +} diff --git a/assets/css/form_editor.css b/assets/css/form_editor.css new file mode 100644 index 0000000000..bda49f4f9d --- /dev/null +++ b/assets/css/form_editor.css @@ -0,0 +1,629 @@ +a:focus { + outline: 0 none !important; +} +#mailpoet_form_history { + display:none; +} +#mailpoet_form_editor { + padding:20px; + width:300px; + border:1px solid #ccc; + position: relative; + background-color: #fff; + -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); +} + +#mailpoet_form_editor:before, #mailpoet_form_editor:after { + position: absolute; + width: 40%; + height: 10px; + content: ' '; + left: 12px; + bottom: 12px; + background: transparent; + -webkit-transform: skew(-5deg) rotate(-5deg); + -moz-transform: skew(-5deg) rotate(-5deg); + -ms-transform: skew(-5deg) rotate(-5deg); + -o-transform: skew(-5deg) rotate(-5deg); + transform: skew(-5deg) rotate(-5deg); + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + z-index: -1; +} +#mailpoet_form_editor:after +{ + left: auto; + right: 12px; + -webkit-transform: skew(5deg) rotate(5deg); + -moz-transform: skew(5deg) rotate(5deg); + -ms-transform: skew(5deg) rotate(5deg); + -o-transform: skew(5deg) rotate(5deg); + transform: skew(5deg) rotate(5deg); +} + + +/* Warnings in blocks*/ +.mailpoet_warning { + font-weight:bold; + color:#900; +} + +.block_placeholder { + font-weight: bold; + height: 0; + overflow: hidden; + line-height: 30px; + text-align: center; + border: 0 none; + width:298px; + z-index: 9500; + margin:0 auto; + text-indent: -9999px; + +} +.block_placeholder.active { + text-indent: 0; + /*border:1px dashed #dfdfdf;*/ + /*background-color:#f5f5f5;*/ + background-color: #4cb7e1; + display:block; + overflow: auto; + height: 30px; +} +.block_placeholder.hover { + background-color: #0074a2; + border-color:#0074a2; + color: #fff; +} + +.mailpoet_form_block { + background-color:#fff; + height:20px; + border:0 none; +} +.mailpoet_form_block.highlighted { + border:1px solid #5897FB; + padding:9px 17px; +} + +.mailpoet_form_block img { + max-width: 100%; +} + +/* Widget styles */ +.mailpoet_form_block p { + margin:5px 0; + word-wrap: break-word; +} + +/* Widget: checkbox, radio */ +.mailpoet_radio, +.mailpoet_checkbox { + margin:-2px 5px 0 0; +} + +/* MailPoet Form wrapper */ +#mailpoet_form_wrapper { + position: relative; +} + +/* MailPoet Form container */ +#mailpoet_form_container { + width:340px; + margin:0; +} +#mailpoet_form_editor.loading, +#mailpoet_form_toolbar.loading { + background: url(loading.gif) no-repeat center center #fcfcfc; +} +#mailpoet_form_toolbar.loading { + border:1px solid #dfdfdf; +} +#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields { + visibility: hidden; + z-index:1; +} + +/* Tabs : content/images/styles/themes */ +#wysija-add-field { + float: none; +} + +#mailpoet_form_toolbar { + position: absolute; + width: 400px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs { + border-bottom:1px solid #dfdfdf; + line-height:0; +} +#mailpoet_form_toolbar .add_custom_field { + text-align:center; + padding:15px 0 5px 0; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + margin:0; + height:30px; + line-height:30px; + padding:0; + display:-moz-inline-box; + display:inline-block; + *display:inline; + *float:left; + outline:0 none; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + outline:0 none; text-decoration:none; color:#a6a6a6; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li { + margin:0 0 1px 0; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + font-family:Georgia,"Times New Roman","Bitstream Charter",Times,serif; + background-color: #F5F5F5; + background-image: -moz-linear-gradient(center top , #F9F9F9, #F5F5F5); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9'); + background: -webkit-gradient(linear, left top,left bottom, from(#F9F9F9), to(#F5F5F5)); + border:1px solid #DFDFDF; + -moz-border-radius: 3px 3px 0 0; + -webkit-border-radius: 3px 3px 0 0; + -khtml-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; + box-shadow: 0 1px 0 #FFFFFF inset; + padding:0 7px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover { + background-color:#eee; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected { + color:#000; + border-bottom:0 none; + background:#fcfcfc; + filter:none; + padding-bottom:1px; +} +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a { } + +.wysija_params { + display:none !important; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, +#mailpoet_form_toolbar #mailpoet_toolbar_fields { + position:relative; + z-index:9998; + margin:0; +} + +/* edit form name */ +h2.title { + margin:0 0 15px 0; +} + +#mailpoet_form_name_input { + vertical-align: bottom; +} + +/* wysija widgets */ +.mailpoet_form_widget { + width:298px; + height:25px; + line-height:25px; + z-index:9999 !important; +} + +.mailpoet_toolbar_section { + margin-bottom: 0; + + background: none repeat scroll 0 0 #fff; + border: 1px solid #e5e5e5; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + min-width: 255px; + position: relative; + + cursor: pointer; + max-height: auto; +} + +.mailpoet_toolbar_section > div { + padding:10px 20px 20px 20px; +} + +.mailpoet_toolbar_section h3 { + margin: 10px; + position: relative; +} + +.mailpoet_toolbar_section.closed { + max-height:38px; + overflow: hidden; +} + +.mailpoet_toolbar_section .mailpoet_toggle { + position: absolute; + top:0; + right: 0; + height: 38px; + width: 27px; +} +.mailpoet_toolbar_section .mailpoet_toggle:focus { + outline: 0 none !important; + box-shadow: none !important; +} + +.mailpoet_toolbar_section .mailpoet_toggle:before { + right: 12px; + font: 400 20px/1 dashicons; + speak: none; + display: inline-block; + padding: 8px 10px; + top: 0; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none!important; + content: '\f142'; +} +.mailpoet_toolbar_section.closed .mailpoet_toggle:before { + content: '\f140'; +} + +#mailpoet_form_styles { + margin:10px; + max-width: 318px; + width: 318px; + min-height: 300px; + resize:vertical; +} + +#mailpoet_form_toolbar a.mailpoet_form_field, +.mailpoet_form_widget { + height:25px; + line-height:25px; + background-color: #F5F5F5; + background-image: -moz-linear-gradient(center top , #f9f9f9, #ececec); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ececec'); + background: -webkit-gradient(linear, left top,left bottom, from(#f9f9f9), to(#ececec)); + border:1px solid #DFDFDF; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + box-shadow: 0 1px 0 #FFFFFF inset; + display:block; + font-size: 12px; + font-weight: bold; + padding:0 7px; + cursor:move; + color:#222; + text-shadow: 0 1px 0 #FFFFFF; +} +#mailpoet_form_toolbar a.mailpoet_form_field.disabled { + cursor:pointer; + color:#cccccc; + pointer-events:none; +} +.mailpoet_form_field_edit { + position:absolute; + right:27px; + bottom:13px; +} +.mailpoet_form_field_delete { + position: absolute; + right:7px; + bottom:13px; +} + +/* toolbar: fields */ +#mailpoet_toolbar_fields li { + padding:0 0 10px 0; + position:relative; +} + +#mailpoet_toolbar_fields li.notice { + font-style:italic; + font-size:11px; + margin: 0 !important; + border: 0 none !important; + background: none !important; +} + +/* blocks */ +.mailpoet_form_block { + position:relative; + margin:0; + padding:10px 18px 10px 18px; + display: inline-table; + display: block; + height: 1%; + margin:0; + z-index:98; +} + +.mailpoet_form_block.dragging { + z-index:99000; + pointer-events:none; +} + +.mailpoet_form_block:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.mailpoet_form_block.hover { + border:1px dashed #bbb; + margin:0 0 0 0; + padding:9px 17px 9px 17px; +} +.mailpoet_form_block.static { + /*padding:0; + margin:0;*/ + background-color:#999; +} + +/* controls*/ +.mailpoet_form_block .wysija_controls { + background-color:#dfdfdf; + background-image: -moz-linear-gradient(center bottom , #bbb, #eee); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#bbbbbb'); + background: -webkit-gradient(linear, left bottom,left top, from(#bbb), to(#eee)); + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; + border:1px solid #ccc; + position:absolute; + margin:0; + padding:0; + width:298px; + height:20px; + left:-1px; + right:0; + top:-22px; +} +.mailpoet_form_block .wysija_controls li { + float:left; + width:20px; + height:20px; +} +.mailpoet_form_block .wysija_controls a { + cursor: pointer; + float: left; + font-size: 120%; + font-weight: bold; + height: 20px; + line-height: 20px; + text-align: center; + width: 20px; + color:#000; +} + +.mailpoet_form_block .wysija_controls a.remove { + margin:0 0 0 1px; +} +.mailpoet_form_block .handle_container, +.mailpoet_form_block .handle_container a { + float:none; + width:40px !important; +} + +.mailpoet_form_block .handle_container { + left: 140px; + top: 0; + position: absolute; +} + +/* controls & icons */ +.wysija_controls a span, +.wysija_gallery .wysija_tools a span, +.wysija_image .wysija_tools a span, +.wysija_text .wysija_tools a span, +#mailpoet_toolbar_fields a span { + display: block; + height:20px; + width:20px; +} + +/* toolbar: full width button */ + +/* color picker in control bars */ +.wysija_controls span input { + margin:2px 0 0 0; + padding: 0; + color: transparent; +} + +/* left alignment button */ +.alignment-left span { + background:url(form_editor_icons.png) no-repeat 0 0; +} +.alignment-left.active span, .alignment-left:hover span { + background:url(form_editor_icons.png) no-repeat 0 -20px; +} + +/* center alignment button */ +.alignment-center span { + background:url(form_editor_icons.png) no-repeat -20px 0; +} +.alignment-center.active span, .alignment-center:hover span { + background:url(form_editor_icons.png) no-repeat -20px -20px; +} + +/* right alignment button */ +.alignment-right span { + background:url(form_editor_icons.png) no-repeat -40px 0; +} +.alignment-right.active span, .alignment-right:hover span { + background:url(form_editor_icons.png) no-repeat -40px -20px; +} + +/* linking */ +.add-link span { + background:url(form_editor_icons.png) no-repeat -60px 0; +} +.add-link.active span, .add-link:hover span { + background:url(form_editor_icons.png) no-repeat -60px -20px; +} + +.remove-link span { + background:url(form_editor_icons.png) no-repeat -80px 0; +} + +.remove-link.active span, .remove-link:hover span { + background:url(form_editor_icons.png) no-repeat -80px -20px; +} + +/* block controls */ +.remove span, .delete span { + background:url(form_editor_icons.png) no-repeat -100px 0; +} +.remove.active span, .remove:hover span, +.delete.active span, .delete:hover span { + background:url(form_editor_icons.png) no-repeat -100px -20px; +} + +.handle span { + background: url(handle.png) no-repeat; + cursor:move; + width: 40px !important; +} + +.duplicate span { + background:url(form_editor_icons.png) no-repeat -140px 0; +} + +.duplicate.active span, .duplicate:hover span { + background:url(form_editor_icons.png) no-repeat -140px -20px; +} + +.settings span { + background:url(form_editor_icons.png) no-repeat -160px 0; +} +.settings.active span, .settings:hover span { + background:url(form_editor_icons.png) no-repeat -160px -20px; +} + +.icon-plus span { + background:url(form_editor_icons.png) no-repeat -200px 0; +} + +.icon-plus.active span, .icon-plus:hover span { + background:url(form_editor_icons.png) no-repeat -200px -20px; +} + +.icon-minus span { + background:url(form_editor_icons.png) no-repeat -220px 0; +} + +.icon-minus.active span, .icon-minus:hover span { + background:url(form_editor_icons.png) no-repeat -220px -20px; +} + +/* wysija options */ +.wysija_options { + display:none; +} + +/* wysija block settings */ +.wysija_settings { + position: absolute; + z-index:1000; +} +.wysija_settings a { + background-color: #F5F5F5; + background-image: -moz-linear-gradient(center top , #f9f9f9, #ececec); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ececec'); + background: -webkit-gradient(linear, left top,left bottom, from(#f9f9f9), to(#ececec)); + border:1px solid #DFDFDF; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + box-shadow: 0 1px 0 #FFFFFF inset; + font-size: 12px; + font-weight: normal; + cursor:pointer; + color:#222; + text-shadow: 0 1px 0 #FFFFFF; + text-decoration: none; + display:block; + padding:5px 5px 3px 27px; +} + +.wysija_settings a span { + width: 20px; + height: 20px; + position: absolute; + top: 3px; + left: 5px; +} + +/* labels */ +.mailpoet_form_block label { + margin:0 5px 0 0; + display:block; +} + +/* form settings: success message */ +#mailpoet_on_success textarea, +#mailpoet_on_success select { + width:100%; +} + +#mailpoet_on_success textarea { + height:50px; + min-height: 50px; + resize:vertical; +} + +/* make sure textareas within the form editor are not resizeable */ +.mailpoet_form_block textarea { + resize:none; +} +/* remove click events from inputs within form editor */ +.mailpoet_form_block input, +.mailpoet_form_block textarea { + pointer-events:none; +} + +/* form export */ +#mailpoet_form_export textarea { + width:340px; + height:150px; + min-height: 150px; + resize:vertical; + font-size:85%; + display:none; +} + +/** Styling for WP 3.8 and higher */ +.mailpoet_form_field_edit, +.mailpoet_form_field_delete { + text-decoration: none; +} +.mailpoet_form_field_edit:hover .dashicons-admin-generic:before, +.mailpoet_form_field_delete:hover .dashicons-dismiss:before, +.settings:hover .dashicons-admin-generic:before { + color: #2ea2cc; +} +.mailpoet_form_field_edit span, +.mailpoet_form_field_delete span { + background: none !important; + color: #999; +} +.mailpoet_form_field_delete span:before { + font-size: 21px; +} + + +/* Code Mirror */ +.CodeMirror { + border: 1px solid #eee; +} \ No newline at end of file diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index d1b129dc6f..31d828986f 100644 --- a/assets/css/src/admin.styl +++ b/assets/css/src/admin.styl @@ -3,4 +3,6 @@ @require 'common' @require 'modal' @require 'notice' -@require 'validation_engine' \ No newline at end of file +@require 'validation_engine' + +@require 'form_editor' \ No newline at end of file diff --git a/assets/css/src/common.styl b/assets/css/src/common.styl index 82441eb5a8..f0d4eba833 100644 --- a/assets/css/src/common.styl +++ b/assets/css/src/common.styl @@ -2,3 +2,7 @@ .clearfix { clearfix() } + +// disable outline on link focus +a:focus + outline: 0 none !important diff --git a/assets/css/src/form_editor.styl b/assets/css/src/form_editor.styl new file mode 100644 index 0000000000..9a022e224e --- /dev/null +++ b/assets/css/src/form_editor.styl @@ -0,0 +1,553 @@ +#mailpoet_form_history + display: none + +#mailpoet_form_editor + padding: 20px + width: 300px + border: 1px solid #ccc + position: relative + background-color: #fff + box-shadow(0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1)); + +#mailpoet_form_editor:before, +#mailpoet_form_editor:after + position: absolute + width: 40% + height: 10px + content: ' ' + left: 12px + bottom: 12px + background: transparent + -webkit-transform: skew(-5deg) rotate(-5deg) + -moz-transform: skew(-5deg) rotate(-5deg) + -ms-transform: skew(-5deg) rotate(-5deg) + -o-transform: skew(-5deg) rotate(-5deg) + transform: skew(-5deg) rotate(-5deg) + -webkit-box-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) + -moz-box-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) + box-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) + z-index: -1 + +#mailpoet_form_editor:after + left: auto + right: 12px + -webkit-transform: skew(5deg) rotate(5deg) + -moz-transform: skew(5deg) rotate(5deg) + -ms-transform: skew(5deg) rotate(5deg) + -o-transform: skew(5deg) rotate(5deg) + transform: skew(5deg) rotate(5deg) + +/* Warnings in blocks*/ +.mailpoet_warning + font-weight: bold + color: #900 + +.block_placeholder + font-weight: bold + height: 0 + overflow: hidden + line-height: 30px + text-align: center + border: 0 none + width: 298px + z-index: 9500 + margin: 0 auto + text-indent: -9999px + +.block_placeholder.active + text-indent: 0 + /*border:1px dashed #dfdfdf;*/ + /*background-color:#f5f5f5;*/ + background-color: #4cb7e1 + display: block + overflow: auto + height: 30px + +.block_placeholder.hover + background-color: #0074a2 + border-color: #0074a2 + color: #fff + +.mailpoet_form_block + background-color: #fff + height: 20px + border: 0 none + +.mailpoet_form_block.highlighted + border: 1px solid #5897FB + padding: 9px 17px + +.mailpoet_form_block img + max-width: 100% + +/* Widget styles */ +.mailpoet_form_block p + margin: 5px 0 + word-wrap: break-word + +/* Widget: checkbox, radio */ +.mailpoet_radio, +.mailpoet_checkbox + margin: -2px 5px 0 0 + +/* MailPoet Form wrapper */ +#mailpoet_form_wrapper + position: relative + +/* MailPoet Form container */ +#mailpoet_form_container + width: 340px + margin: 0 + +#mailpoet_form_editor.loading, +#mailpoet_form_toolbar.loading + background: url(loading.gif) no-repeat center center #fcfcfc + +#mailpoet_form_toolbar.loading + border: 1px solid #dfdfdf + +#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields + visibility: hidden + z-index: 1 + +/* Tabs : content/images/styles/themes */ +#wysija-add-field + float: none + +#mailpoet_form_toolbar + position: absolute + width: 400px + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs + border-bottom: 1px solid #dfdfdf + line-height: 0 + +#mailpoet_form_toolbar .add_custom_field + text-align: center + padding: 15px 0 5px 0 + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a + margin: 0 + height: 30px + line-height: 30px + padding: 0 + display: -moz-inline-box + display: inline-block + *display: inline + *float: left + outline: 0 none + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a + outline: 0 none + text-decoration: none + color: #a6a6a6 + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li + margin: 0 0 1px 0 + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a + font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif + background-color: #F5F5F5 + background linear-gradient(center top, #F9F9F9, #F5F5F5) + border: 1px solid #DFDFDF + border-radius(3px 3px 0 0) + box-shadow(0 1px 0 #FFFFFF inset) + padding: 0 7px + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover + background-color: #eee + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected + color: #000 + border-bottom: 0 none + background: #fcfcfc + filter: none + padding-bottom: 1px + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a + +.wysija_params + display: none !important + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, +#mailpoet_form_toolbar #mailpoet_toolbar_fields + position: relative + z-index: 9998 + margin: 0 + +/* edit form name */ +h2.title + margin: 0 0 15px 0 + +#mailpoet_form_name_input + vertical-align: bottom + +/* wysija widgets */ +.mailpoet_form_widget + width: 298px + height: 25px + line-height: 25px + z-index: 9999 !important + +.mailpoet_toolbar_section + margin-bottom: 0 + background: none repeat scroll 0 0 #fff + border: 1px solid #e5e5e5 + box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)) + min-width: 255px + position: relative + cursor: pointer + max-height: auto + +.mailpoet_toolbar_section > div + padding: 10px 20px 20px 20px + +.mailpoet_toolbar_section h3 + margin: 10px + position: relative + +.mailpoet_toolbar_section.closed + max-height: 38px + overflow: hidden + +.mailpoet_toolbar_section .mailpoet_toggle + position: absolute + top: 0 + right: 0 + height: 38px + width: 27px + +.mailpoet_toolbar_section .mailpoet_toggle:focus + outline: 0 none !important + box-shadow(none !important) + +.mailpoet_toolbar_section .mailpoet_toggle:before + right: 12px + font: 400 20px/1 dashicons + speak: none + display: inline-block + padding: 8px 10px + top: 0 + position: relative + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + text-decoration: none!important + content: '\f142' + +.mailpoet_toolbar_section.closed .mailpoet_toggle:before + content: '\f140' + +#mailpoet_form_styles + margin: 10px + max-width: 318px + width: 318px + min-height: 300px + resize: vertical + +#mailpoet_form_toolbar a.mailpoet_form_field, +.mailpoet_form_widget + height: 25px + line-height: 25px + background-color: #F5F5F5 + background linear-gradient(center top, #F9F9F9, #ececec) + border: 1px solid #DFDFDF + border-radius(3px) + box-shadow(0 1px 0 #FFFFFF inset) + display: block + font-size: 12px + font-weight: bold + padding: 0 7px + cursor: move + color: #222 + text-shadow: 0 1px 0 #FFFFFF + +#mailpoet_form_toolbar a.mailpoet_form_field.disabled + cursor: pointer + color: #cccccc + pointer-events: none + +.mailpoet_form_field_edit + position: absolute + right: 27px + bottom: 13px + +.mailpoet_form_field_delete + position: absolute + right: 7px + bottom: 13px + +/* toolbar: fields */ +#mailpoet_toolbar_fields li + padding: 0 0 10px 0 + position: relative + +#mailpoet_toolbar_fields li.notice + font-style: italic + font-size: 11px + margin: 0 !important + border: 0 none !important + background: none !important + +/* blocks */ +.mailpoet_form_block + position: relative + margin: 0 + padding: 10px 18px 10px 18px + display: inline-table + display: block + height: 1% + margin: 0 + z-index: 98 + +.mailpoet_form_block.dragging + z-index: 99000 + pointer-events: none + +.mailpoet_form_block:after + content: "." + display: block + height: 0 + clear: both + visibility: hidden + +.mailpoet_form_block.hover + border: 1px dashed #bbb + margin: 0 0 0 0 + padding: 9px 17px 9px 17px + +.mailpoet_form_block.static + /*padding:0; + margin:0;*/ + background-color: #999 + +/* controls*/ +.mailpoet_form_block .wysija_controls + background-color: #dfdfdf + background linear-gradient(center top, #bbb, #eee) + border-radius(2px) + border: 1px solid #ccc + position: absolute + margin: 0 + padding: 0 + width: 298px + height: 20px + left: -1px + right: 0 + top: -22px + +.mailpoet_form_block .wysija_controls li + float: left + width: 20px + height: 20px + +.mailpoet_form_block .wysija_controls a + cursor: pointer + float: left + font-size: 120% + font-weight: bold + height: 20px + line-height: 20px + text-align: center + width: 20px + color: #000 + +.mailpoet_form_block .wysija_controls a.remove + margin: 0 0 0 1px + +.mailpoet_form_block .handle_container, +.mailpoet_form_block .handle_container a + float: none + width: 40px !important + +.mailpoet_form_block .handle_container + left: 140px + top: 0 + position: absolute + +/* controls & icons */ +.wysija_controls a span, +.wysija_gallery .wysija_tools a span, +.wysija_image .wysija_tools a span, +.wysija_text .wysija_tools a span, +#mailpoet_toolbar_fields a span + display: block + height: 20px + width: 20px + +/* toolbar: full width button */ +/* color picker in control bars */ +.wysija_controls span input + margin: 2px 0 0 0 + padding: 0 + color: transparent + +/* left alignment button */ +.alignment-left span + background: url(form_editor_icons.png) no-repeat 0 0 + +.alignment-left.active span, +.alignment-left:hover span + background: url(form_editor_icons.png) no-repeat 0 -20px + +/* center alignment button */ +.alignment-center span + background: url(form_editor_icons.png) no-repeat -20px 0 + +.alignment-center.active span, +.alignment-center:hover span + background: url(form_editor_icons.png) no-repeat -20px -20px + +/* right alignment button */ +.alignment-right span + background: url(form_editor_icons.png) no-repeat -40px 0 + +.alignment-right.active span, +.alignment-right:hover span + background: url(form_editor_icons.png) no-repeat -40px -20px + +/* linking */ +.add-link span + background: url(form_editor_icons.png) no-repeat -60px 0 + +.add-link.active span, +.add-link:hover span + background: url(form_editor_icons.png) no-repeat -60px -20px + +.remove-link span + background: url(form_editor_icons.png) no-repeat -80px 0 + +.remove-link.active span, +.remove-link:hover span + background: url(form_editor_icons.png) no-repeat -80px -20px + +/* block controls */ +.remove span, +.delete span + background: url(form_editor_icons.png) no-repeat -100px 0 + +.remove.active span, +.remove:hover span, +.delete.active span, +.delete:hover span + background: url(form_editor_icons.png) no-repeat -100px -20px + +.handle span + background: url(handle.png) no-repeat + cursor: move + width: 40px !important + +.duplicate span + background: url(form_editor_icons.png) no-repeat -140px 0 + +.duplicate.active span, +.duplicate:hover span + background: url(form_editor_icons.png) no-repeat -140px -20px + +.settings span + background: url(form_editor_icons.png) no-repeat -160px 0 + +.settings.active span, +.settings:hover span + background: url(form_editor_icons.png) no-repeat -160px -20px + +.icon-plus span + background: url(form_editor_icons.png) no-repeat -200px 0 + +.icon-plus.active span, +.icon-plus:hover span + background: url(form_editor_icons.png) no-repeat -200px -20px + +.icon-minus span + background: url(form_editor_icons.png) no-repeat -220px 0 + +.icon-minus.active span, +.icon-minus:hover span + background: url(form_editor_icons.png) no-repeat -220px -20px + +/* wysija options */ +.wysija_options + display: none + +/* wysija block settings */ +.wysija_settings + position: absolute + z-index: 1000 + +.wysija_settings a + background-color: #F5F5F5 + background linear-gradient(center top, #F9F9F9, #ececec) + border: 1px solid #DFDFDF + border-radius(3px) + box-shadow(0 1px 0 #FFFFFF inset) + font-size: 12px + font-weight: normal + cursor: pointer + color: #222 + text-shadow: 0 1px 0 #FFFFFF + text-decoration: none + display: block + padding: 5px 5px 3px 27px + +.wysija_settings a span + width: 20px + height: 20px + position: absolute + top: 3px + left: 5px + +/* labels */ +.mailpoet_form_block label + margin: 0 5px 0 0 + display: block + +/* form settings: success message */ +#mailpoet_on_success textarea, +#mailpoet_on_success select + width: 100% + +#mailpoet_on_success textarea + height: 50px + min-height: 50px + resize: vertical + +/* make sure textareas within the form editor are not resizeable */ +.mailpoet_form_block textarea + resize: none + +/* remove click events from inputs within form editor */ +.mailpoet_form_block input, +.mailpoet_form_block textarea + pointer-events: none + +/* form export */ +#mailpoet_form_export textarea + width: 340px + height: 150px + min-height: 150px + resize: vertical + font-size: 85% + display: none + +/** Styling for WP 3.8 and higher */ +.mailpoet_form_field_edit, +.mailpoet_form_field_delete + text-decoration: none + +.mailpoet_form_field_edit:hover .dashicons-admin-generic:before, +.mailpoet_form_field_delete:hover .dashicons-dismiss:before, +.settings:hover .dashicons-admin-generic:before + color: #2ea2cc + +.mailpoet_form_field_edit span, +.mailpoet_form_field_delete span + background: none !important + color: #999 + +.mailpoet_form_field_delete span:before + font-size: 21px + +/* Code Mirror */ +.CodeMirror + border: 1px solid #eee + diff --git a/assets/img/form_editor_icons.png b/assets/img/form_editor_icons.png new file mode 100644 index 0000000000..bb53b033f0 Binary files /dev/null and b/assets/img/form_editor_icons.png differ diff --git a/assets/img/handle.png b/assets/img/handle.png new file mode 100644 index 0000000000..186b1d59fa Binary files /dev/null and b/assets/img/handle.png differ diff --git a/assets/js/form_editor.js b/assets/js/form_editor.js new file mode 100644 index 0000000000..832590d956 --- /dev/null +++ b/assets/js/form_editor.js @@ -0,0 +1,994 @@ +/* + * name: MailPoet Form Editor + * author: Jonathan Labreuille + * company: Wysija + * framework: prototype 1.7.2 +*/ + +'use strict'; + +Event.cacheDelegated = {}; +Object.extend(document, (function () { + var cache = Event.cacheDelegated; + + function getCacheForSelector(selector) { + return cache[selector] = cache[selector] || {}; + } + + function getWrappersForSelector(selector, eventName) { + var c = getCacheForSelector(selector); + return c[eventName] = c[eventName] || []; + } + + function findWrapper(selector, eventName, handler) { + var c = getWrappersForSelector(selector, eventName); + return c.find(function (wrapper) { + return wrapper.handler === handler + }); + } + + function destroyWrapper(selector, eventName, handler) { + var c = getCacheForSelector(selector); + if (!c[eventName]) return false; + var wrapper = findWrapper(selector, eventName, handler) + c[eventName] = c[eventName].without(wrapper); + return wrapper; + } + + function createWrapper(selector, eventName, handler, context) { + var wrapper, c = getWrappersForSelector(selector, eventName); + if (c.pluck('handler').include(handler)) return false; + wrapper = function (event) { + var element = event.findElement(selector); + if (element) handler.call(context || element, event, element); + }; + wrapper.handler = handler; + c.push(wrapper); + return wrapper; + } + return { + delegate: function (selector, eventName, handler, context) { + var wrapper = createWrapper.apply(null, arguments); + if (wrapper) document.observe(eventName, wrapper); + return document; + }, + stopDelegating: function (selector, eventName, handler) { + var length = arguments.length; + switch (length) { + case 2: + getWrappersForSelector(selector, eventName).each(function (wrapper) { + document.stopDelegating(selector, eventName, wrapper.handler); + }); + break; + case 1: + Object.keys(getCacheForSelector(selector)).each(function (eventName) { + document.stopDelegating(selector, eventName); + }); + break; + case 0: + Object.keys(cache).each(function (selector) { + document.stopDelegating(selector); + }); + break; + default: + var wrapper = destroyWrapper.apply(null, arguments); + if (wrapper) document.stopObserving(eventName, wrapper); + } + return document; + } + } +})()); + +var Observable = (function () { + function getEventName(name, namespace) { + name = name.substring(2); + if (namespace) name = namespace + ':' + name; + return name.underscore().split('_').join(':'); + } + + function getHandlers(klass) { + var proto = klass.prototype, + namespace = proto.namespace; + return Object.keys(proto).grep(/^on/).inject($H(), function (handlers, name) { + if (name === 'onDomLoaded') return handlers; + handlers.set(getEventName(name, namespace), getWrapper(proto[name], klass)); + return handlers; + }); + } + + function getWrapper(handler, klass) { + return function (event) { + return handler.call(new klass(this), event, event.memo); + } + } + + function onDomLoad(selector, klass) { + $$(selector).each(function (element) { + new klass(element).onDomLoaded(); + }); + } + return { + observe: function (selector) { + if (!this.handlers) this.handlers = {}; + if (this.handlers[selector]) return; + var klass = this; + if (this.prototype.onDomLoaded) document.loaded ? onDomLoad(selector, klass) : document.observe('dom:loaded', onDomLoad.curry(selector, klass)); + this.handlers[selector] = getHandlers(klass).each(function (handler) { + document.delegate(selector, handler.key, handler.value); + }); + }, + stopObserving: function (selector) { + if (!this.handlers || !this.handlers[selector]) return; + this.handlers[selector].each(function (handler) { + document.stopDelegating(selector, handler.key, handler.value); + }); + delete this.handlers[selector]; + } + } +})(); + +// override droppables +Object.extend(Droppables, { + deactivate: Droppables.deactivate.wrap(function (proceed, drop, draggable) { + if (drop.onLeave) drop.onLeave(draggable, drop.element); + return proceed(drop); + }), + activate: Droppables.activate.wrap(function (proceed, drop, draggable) { + if (drop.onEnter) drop.onEnter(draggable, drop.element); + return proceed(drop); + }), + show: function (point, element) { + if (!this.drops.length) return; + var drop, affected = []; + this.drops.each(function (drop) { + if (Droppables.isAffected(point, element, drop)) affected.push(drop); + }); + if (affected.length > 0) drop = Droppables.findDeepestChild(affected); + if (this.last_active && this.last_active !== drop) this.deactivate(this.last_active, element); + if (drop) { + Position.within(drop.element, point[0], point[1]); + if (drop.onHover) drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element)); + if (drop !== this.last_active) Droppables.activate(drop, element); + } + }, + displayArea: function(draggable) { + if(!this.drops.length) return; + + // hide controls when displaying drop areas. + WysijaForm.hideBlockControls(); + + this.drops.each(function (drop, iterator) { + if(drop.element.hasClassName('block_placeholder')) { + drop.element.addClassName('active'); + } + }); + }, + hideArea: function() { + if (!this.drops.length) return; + this.drops.each(function (drop, iterator) { + if(drop.element.hasClassName('block_placeholder')) { + drop.element.removeClassName('active'); + } else if(drop.element.hasClassName('image_placeholder')) { + drop.element.removeClassName('active'); + drop.element.up().removeClassName('active'); + } else if(drop.element.hasClassName('text_placeholder')) { + drop.element.removeClassName('active'); + } + }); + }, + reset: function (draggable) { + if (this.last_active) this.deactivate(this.last_active, draggable); + } +}); + +/* + Wysija History handling + POTENTIAL FEATURES: + - set a maximum number of items to be stored + +*/ +var WysijaHistory = { + container: 'mailpoet_form_history', + size: 30, + enqueue: function(element) { + // create deep clone (includes child elements) of passed element + var clone = element.clone(true); + + // check if the field is unique + if(parseInt(clone.readAttribute('wysija_unique'), 10) === 1) { + // check if the field is already in the queue + $(WysijaHistory.container).select('[wysija_field="'+clone.readAttribute('wysija_field')+'"]').invoke('remove'); + } + + // check history size + if($(WysijaHistory.container).select('> div').length >= WysijaHistory.size) { + // remove oldest element (last in the list) + $(WysijaHistory.container).select('> div').last().remove(); + } + + // store block in history + $(WysijaHistory.container).insert({ top: clone }); + }, + dequeue: function() { + // pop last block off the history + var block = $(WysijaHistory.container).select('div').first(); + + if(block !== undefined) { + // insert block back into the editor + $(WysijaForm.options.body).insert({top: block}); + } + }, + clear: function() { + $(WysijaHistory.container).innerHTML = ''; + }, + remove: function(field) { + $(WysijaHistory.container).select('[wysija_field="'+field+'"]').invoke('remove'); + } +}; + +/* MailPoet Form */ +var WysijaForm = { + version: '0.6', + options: { + container: 'mailpoet_form_container', + editor: 'mailpoet_form_editor', + body: 'mailpoet_form_body', + toolbar: 'mailpoet_form_toolbar', + templates: 'wysija_widget_templates', + debug: false + }, + toolbar: { + effect: null, + x: null, + y: null, + top: null, + left: null + }, + scroll: { + top: 0, + left: 0 + }, + flags: { + doSave: false + }, + locks: { + dragging: false, + selectingColor: false, + showingTools: false + }, + encodeHtmlValue: function(str) { + return str.replace(/&/g, '&').replace(/>/g, '>').replace(/').replace(/</g, '<').replace(/"/g, '"'); + // ": fix for FileMerge because the previous line fucks up its syntax coloring + }, + loading: function(is_loading) { + if(is_loading) { + $(WysijaForm.options.editor).addClassName('loading'); + $(WysijaForm.options.toolbar).addClassName('loading'); + } else { + $(WysijaForm.options.editor).removeClassName('loading'); + $(WysijaForm.options.toolbar).removeClassName('loading'); + } + }, + loadStatic: function(blocks) { + $A(blocks).each(function(block) { + // create block + WysijaForm.Block.create(block, $('block_placeholder')); + }); + }, + load: function(form) { + if(form.data === undefined) return; + + // load body + if(form.data.body !== undefined) { + $A(form.data.body).each(function(block) { + // create block + WysijaForm.Block.create(block, $('block_placeholder')); + }); + + // load settings + var settings_elements = $('mailpoet_form_settings').getElements(); + settings_elements.each(function(setting) { + // skip lists + if(setting.name === 'lists') { + return true; + } else if(setting.name === 'on_success') { + // if the input value is equal to the one stored in the settings + if(setting.value === form.data.settings[setting.name]) { + // check selected value + $(setting).checked = true; + } + } else if(form.data.settings[setting.name] !== undefined) { + if(typeof form.data.settings[setting.name] === 'string') { + setting.setValue(WysijaForm.decodeHtmlValue(form.data.settings[setting.name])); + } else { + setting.setValue(form.data.settings[setting.name]); + } + } + }); + } + }, + save: function() { + var position = 1, + data = { + 'version': WysijaForm.version, + 'settings': $('mailpoet_form_settings').serialize(true), + 'body': [], + 'styles': (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null + }; + // body + WysijaForm.getBlocks().each(function(b) { + var block_data = (typeof(b.block['save']) === 'function') ? b.block.save() : null; + + if(block_data !== null) { + // set block position + block_data['position'] = position; + + // increment position + position++; + + // add block data to body + data['body'].push(block_data); + } + }); + + return data; + }, + init: function() { + // set document scroll + info('init -> set scroll offsets'); + WysijaForm.setScrollOffsets(); + + // position toolbar + info('init -> set toolbar position'); + WysijaForm.setToolbarPosition(); + + // enable droppable targets + info('init -> make droppable'); + WysijaForm.makeDroppable(); + + // enable sortable + info('init -> make sortable'); + WysijaForm.makeSortable(); + + // hide controls + info('init -> hide controls'); + WysijaForm.hideControls(); + + // hide settings + info('init -> hide settings'); + WysijaForm.hideSettings(); + + // set settings buttons position + info('init -> init settings'); + WysijaForm.setSettingsPosition(); + + // toggle widgets + info('init -> toggle widgets'); + WysijaForm.toggleWidgets(); + }, + getFieldData: function(element) { + // get basic field data + var data = { + type: element.readAttribute('wysija_type'), + field: element.readAttribute('wysija_field'), + name: element.readAttribute('wysija_name'), + unique: parseInt(element.readAttribute('wysija_unique') || 0, 10), + static: parseInt(element.readAttribute('wysija_static') || 0, 10), + element: element, + params: '' + }; + + // get params (may be empty) + if(element.readAttribute('wysija_params') !== null && element.readAttribute('wysija_params').length > 0) { + data.params = JSON.parse(element.readAttribute('wysija_params')); + } + return data; + }, + toggleWidgets: function() { + return; + $$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled'); + + // loop through each unique field already inserted in the editor and disable its toolbar equivalent + $$('#'+WysijaForm.options.editor+' [wysija_unique="1"]').each(function(element) { + var field = $$('#'+WysijaForm.options.toolbar+' [wysija_field="'+element.readAttribute('wysija_field')+'"]').first(); + if(field !== undefined) { + field.addClassName('disabled'); + } + }); + + // hide list selection if a list widget has been dragged into the editor + $('mailpoet_list_selection')[(($$('#'+WysijaForm.options.editor+' [wysija_field="list"]').length > 0) === true) ? 'hide': 'show'](); + }, + setBlockPositions: function(event, target) { + // release dragging lock + WysijaForm.locks.dragging = false; + + var index = 1; + WysijaForm.getBlocks().each(function (container) { + container.setPosition(index++); + // remove z-index value to avoid issues when resizing images + if(container['block'] !== undefined) { + container.block.element.setStyle({zIndex: ''}); + } + }); + + if(target !== undefined) { + // get placeholders (previous placeholder matches the placeholder linked to the next block) + var block_placeholder = $(target.element.readAttribute('wysija_placeholder')), + previous_placeholder = target.element.previous('.block_placeholder'); + + if(block_placeholder !== null) { + // put block placeholder before the current block + target.element.insert({before: block_placeholder}); + + // if the next block is a wysija_block, insert previous placeholder + if(target.element.next() !== undefined && target.element.next().hasClassName('mailpoet_form_block') && previous_placeholder !== undefined) { + target.element.insert({after: previous_placeholder}); + } + } + } + }, + setScrollOffsets: function() { + WysijaForm.scroll = document.viewport.getScrollOffsets(); + }, + hideSettings: function() { + $(WysijaForm.options.container).select('.wysija_settings').invoke('hide'); + }, + setSettingsPosition: function() { + // get viewport offsets and dimensions + var viewportHeight = document.viewport.getHeight(), + blockPadding = 5; + + $(WysijaForm.options.container).select('.wysija_settings').each(function(element) { + // get parent dimensions and position + var parentDim = element.up('.mailpoet_form_block').getDimensions(), + parentPos = element.up('.mailpoet_form_block').cumulativeOffset(), + is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight)) ? true : false, + buttonMargin = 5, + relativeTop = buttonMargin; + + if(is_visible) { + // desired position is set to center of viewport + var absoluteTop = parseInt(WysijaForm.scroll.top + ((viewportHeight / 2) - (element.getHeight() / 2)), 10), + parentTop = parseInt(parentPos.top - blockPadding, 10), + parentBottom = parseInt(parentPos.top + parentDim.height - blockPadding, 10); + + // always center + relativeTop = parseInt((parentDim.height / 2) - (element.getHeight() / 2), 10); + } + // set position for button + $(element).setStyle({ + left: parseInt((parentDim.width / 2) - (element.getWidth() / 2)) + 'px', + top: relativeTop + 'px' + }); + }); + }, + initToolbarPosition: function() { + if(WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt($(WysijaForm.options.container).positionedOffset().top); + if(WysijaForm.toolbar.y === null) WysijaForm.toolbar.y = parseInt(WysijaForm.toolbar.top); + + if(isRtl) { + if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = 0; + } else { + if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt($(WysijaForm.options.container).positionedOffset().left); + } + if(WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + $(WysijaForm.options.container).getDimensions().width + 15); + + }, + setToolbarPosition: function() { + WysijaForm.initToolbarPosition(); + + var position = { top: WysijaForm.toolbar.y + 'px', visibility: 'visible' }; + + if(isRtl) { + position.right = WysijaForm.toolbar.x + 'px'; + } else { + position.left = WysijaForm.toolbar.x + 'px'; + } + + $(WysijaForm.options.toolbar).setStyle(position); + }, + updateToolbarPosition: function() { + // init toolbar position (updates scroll and toolbar y) + WysijaForm.initToolbarPosition(); + + // cancel previous effect + if(WysijaForm.toolbar.effect !== null) WysijaForm.toolbar.effect.cancel(); + + if(WysijaForm.scroll.top >= (WysijaForm.toolbar.top - 20)) { + WysijaForm.toolbar.y = parseInt(20 + WysijaForm.scroll.top); + // start effect + WysijaForm.toolbar.effect = new Effect.Move(WysijaForm.options.toolbar, { + x: WysijaForm.toolbar.x, + y: WysijaForm.toolbar.y, + mode: 'absolute', + duration: 0.2 + }); + } else { + $(WysijaForm.options.toolbar).setStyle({ + left: WysijaForm.toolbar.x + 'px', + top: WysijaForm.toolbar.top + 'px' + }); + } + }, + blockDropOptions: { + accept: $w('mailpoet_form_field'), // acceptable items (classes array) + onEnter: function (draggable, droppable) { + $(droppable).addClassName('hover'); + }, + onLeave: function (draggable, droppable) { + $(droppable).removeClassName('hover'); + }, + onDrop: function (draggable, droppable) { + // custom data for images + droppable.fire('wjfe:item:drop', WysijaForm.getFieldData(draggable)); + $(droppable).removeClassName('hover'); + } + }, + hideControls: function() { + try { + return WysijaForm.getBlocks().invoke('hideControls'); + } catch(e) { return; } + }, + hideTools: function() { + $$('.wysija_tools').invoke('hide'); + WysijaForm.locks.showingTools = false; + }, + instances: {}, + get: function (element, type) { + if(type === undefined) type = 'block'; + // identify element + var id = element.identify(); + var instance = WysijaForm.instances[id] || new WysijaForm[type.capitalize().camelize()](id); + + WysijaForm.instances[id] = instance; + return instance; + }, + makeDroppable: function() { + Droppables.add('block_placeholder', WysijaForm.blockDropOptions); + }, + makeSortable: function () { + var body = $(WysijaForm.options.body); + Sortable.create(body, { + tag: 'div', + only: 'mailpoet_form_block', + scroll: window, + handle: 'handle', + constraint: 'vertical' + + }); + Draggables.removeObserver(body); + Draggables.addObserver({ + element: body, + onStart: WysijaForm.startBlockPositions, + onEnd: WysijaForm.setBlockPositions + }); + }, + hideBlockControls: function() { + $$('.wysija_controls').invoke('hide'); + this.getBlockElements().invoke('removeClassName', 'hover'); + }, + getBlocks: function () { + return WysijaForm.getBlockElements().map(function (element) { + return WysijaForm.get(element); + }); + }, + getBlockElements: function () { + return $(WysijaForm.options.container).select('.mailpoet_form_block'); + }, + startBlockPositions: function(event, target) { + if(target.element.hasClassName('mailpoet_form_block')) { + // store block placeholder id for the block that is being repositionned + if(target.element.previous('.block_placeholder') !== undefined) { + target.element.writeAttribute('wysija_placeholder', target.element.previous('.block_placeholder').identify()); + } + } + WysijaForm.locks.dragging = true; + }, + encodeURIComponent: function(str) { + // check if it's a url and if so, prevent encoding of protocol + var regexp = new RegExp(/^http[s]?:\/\//), + protocol = regexp.exec(str); + + if(protocol === null) { + // this is not a url so encode the whole thing + return encodeURIComponent(str).replace(/[!'()*]/g, escape); + } else if(protocol.length === 1) { + // this is a url, so do not encode the protocol + return encodeURI(str).replace(/[!'()*]/g, escape); + } + } +}; + +WysijaForm.DraggableItem = Class.create({ + initialize: function (element) { + this.elementType = $(element).readAttribute('wysija_type'); + this.element = $(element).down() || $(element); + this.clone = this.cloneElement(); + this.insert(); + }, + STYLES: new Template('position: absolute; top: #{top}px; left: #{left}px;'), + cloneElement: function () { + var clone = this.element.clone(), + offset = this.element.cumulativeOffset(), + list = this.getList(), + styles = this.STYLES.evaluate({ + top: offset.top - list.scrollTop, + left: offset.left - list.scrollLeft + }); + clone.setStyle(styles); + + clone.addClassName('mailpoet_form_widget'); + clone.addClassName(this.elementType); + clone.innerHTML = this.element.innerHTML; + return clone; + }, + getOffset: function () { + return this.element.offsetTop - this.getList().scrollTop; + }, + getList: function () { + return this.element.up('ul'); + }, + insert: function () { + $$("body")[0].insert(this.clone); + }, + onMousedown: function (event) { + var draggable = new Draggable(this.clone, { + scroll: window, + onStart: function () { + Droppables.displayArea(draggable); + }, + onEnd: function (drag) { + drag.destroy(); + drag.element.remove(); + Droppables.hideArea(); + }, + starteffect: function (element) { + new Effect.Opacity(element, { + duration: 0.2, + from: element.getOpacity(), + to: 0.7 + }); + }, + endeffect: Prototype.emptyFunction + }); + draggable.initDrag(event); + draggable.startDrag(event); + return draggable; + } +}); +Object.extend(WysijaForm.DraggableItem, Observable).observe('a[class="mailpoet_form_field"]'); + + +WysijaForm.Block = Class.create({ + /* Invoked on load */ + initialize: function(element) { + info('block -> init'); + + this.element = $(element); + this.block = new WysijaForm.Widget(this.element); + + // enable block placeholder + this.block.makeBlockDroppable(); + + // setup events + if(this.block['setup'] !== undefined) { + this.block.setup(); + } + return this; + }, + setPosition: function(position) { + this.element.writeAttribute('wysija_position', position); + }, + hideControls: function() { + if(this['getControls']) { + this.element.removeClassName('hover'); + this.getControls().hide(); + } + }, + showControls: function() { + if(this['getControls']) { + this.element.addClassName('hover'); + try { + this.getControls().show(); + } catch(e) { + ; + } + } + }, + makeBlockDroppable: function() { + if(this.isBlockDroppableEnabled() === false) { + var block_placeholder = this.getBlockDroppable(); + Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions); + block_placeholder.addClassName('enabled'); + } + }, + removeBlockDroppable: function() { + if(this.isBlockDroppableEnabled()) { + var block_placeholder = this.getBlockDroppable(); + Droppables.remove(block_placeholder.identify()); + block_placeholder.removeClassName('enabled'); + } + }, + isBlockDroppableEnabled: function() { + // if the block_placeholder does not exist, create it + var block_placeholder = this.getBlockDroppable(); + if(block_placeholder === null) { + return this.createBlockDroppable().hasClassName('enabled'); + } else { + return block_placeholder.hasClassName('enabled'); + } + }, + createBlockDroppable: function() { + info('block -> createBlockDroppable'); + this.element.insert({before: '
'+$('block_placeholder').innerHTML+'
'}); + return this.element.previous('.block_placeholder'); + }, + getBlockDroppable: function() { + if(this.element.previous() === undefined || this.element.previous().hasClassName('block_placeholder') === false) { + return null; + } else { + return this.element.previous(); + } + }, + getControls: function() { + return this.element.down('.wysija_controls'); + }, + setupControls: function() { + // enable controls + this.controls = this.getControls(); + + if(this.controls) { + // setup events for block controls + this.element.observe('mouseover', function() { + // special cases where controls shouldn't be displayed + if(WysijaForm.locks.dragging === true || WysijaForm.locks.selectingColor === true || WysijaForm.locks.showingTools === true) return; + + // set block flag + this.element.addClassName('hover'); + + // show controls + this.showControls(); + + // show settings if present + if(this.element.down('.wysija_settings') !== undefined) { + this.element.down('.wysija_settings').show(); + } + }.bind(this)); + + this.element.observe('mouseout', function() { + // special cases where controls shouldn't hide + if(WysijaForm.locks.dragging === true || WysijaForm.locks.selectingColor === true) return; + + // hide controls + this.hideControls(); + + // hide settings if present + if(this.element.down('.wysija_settings') !== undefined) { + this.element.down('.wysija_settings').hide(); + } + }.bind(this)); + + + // setup click event for remove button + this.removeButton = this.controls.down('.remove') || null; + if(this.removeButton !== null) { + this.removeButton.observe('click', function() { + this.removeBlock(); + this.removeButton.stopObserving('click'); + }.bind(this)); + } + + // setup click event for settings button + this.settingsButton = this.element.down('.settings') || null; + + if(this.settingsButton !== null) { + this.settingsButton.observe('click', function(event) { + // TODO: refactor + var block = $(event.target).up('.mailpoet_form_block') || null; + if(block !== null) { + var field = WysijaForm.getFieldData(block); + this.editSettings(); + } + }.bind(this)); + } + } + return this; + }, + removeBlock: function(callback) { + info('block -> removeBlock'); + + // save block in history + WysijaHistory.enqueue(this.element); + + Effect.Fade(this.element.identify(), { + duration: 0.2, + afterFinish: function(effect) { + if(effect.element.next('.mailpoet_form_block') !== undefined && callback !== false) { + // show controls of next block to allow mass delete + WysijaForm.get(effect.element.next('.mailpoet_form_block')).block.showControls(); + } + // remove placeholder + if(effect.element.previous('.block_placeholder') !== undefined) { + effect.element.previous('.block_placeholder').remove(); + } + + // remove element from the DOM + this.element.remove(); + + // reset block positions + WysijaForm.setBlockPositions(); + + // toggle widgets + WysijaForm.toggleWidgets(); + + // optional callback execution after completely removing block + if(callback !== undefined && typeof(callback) === 'function') { + callback(); + } + + // remove block instance + delete WysijaForm.instances[this.element.identify()]; + }.bind(this) + }); + } +}); + +/* Invoked on item dropped */ +WysijaForm.Block.create = function(block, target) { + if($('form_template_'+block.type) === null) { + return false; + } + + var body = $(WysijaForm.options.body), + block_template = Handlebars.compile($('form_template_block').innerHTML), + template = Handlebars.compile($('form_template_'+block.type).innerHTML), + output = ''; + + // set block template (depending on the block type) + block.template = template(block); + output = block_template(block); + + // check if the new block is unique and if there's already an instance + // of it in the history. If so, remove its former instance from the history + if(block.unique === 1) { + WysijaHistory.remove(block.field); + } + + // if the drop target was the bottom placeholder + if(target.identify() === 'block_placeholder') { + // insert block at the bottom + body.insert(output); + //block = body.childElements().last(); + } else { + // insert block before the drop target + target.insert({before: output }); + //block = target.previous('.mailpoet_form_block'); + } + // refresh sortable items + WysijaForm.makeSortable(); + + // refresh block positions + WysijaForm.setBlockPositions(); + + // position settings + WysijaForm.setSettingsPosition(); + + // toggle widgets + setTimeout(function() { + WysijaForm.toggleWidgets(); + }, 1); +}; + +document.observe('wjfe:item:drop', function(event) { + info('create block'); + WysijaForm.Block.create(event.memo, event.target); + + // hide block controls + info('hide controls'); + WysijaForm.hideBlockControls(); +}); + +/* Form Widget */ +WysijaForm.Widget = Class.create(WysijaForm.Block, { + initialize: function(element) { + info('widget -> init'); + this.element = $(element); + return this; + }, + setup: function() { + info('widget -> setup'); + this.setupControls(); + }, + save: function() { + info('widget -> save'); + var data = this.getData(); + + if(data.element !== undefined) { + delete data.element; + } + + return data; + }, + setData: function(data) { + var current_data = this.getData(), + params = $H(current_data.params).merge(data.params).toObject(); + + // update type if it changed + if(data.type !== undefined && data.type !== current_data.type) { + this.element.writeAttribute('wysija_type', data.type); + } + + // update params + this.element.writeAttribute('wysija_params', JSON.stringify(params)); + }, + getData: function() { + var data = WysijaForm.getFieldData(this.element); + + // decode params + if(data.params.length > 0) { + data.params = JSON.parse(data.params); + } + + return data; + }, + getControls: function() { + return this.element.down('.wysija_controls'); + }, + remove: function() { + this.removeBlock(); + }, + redraw: function(data) { + // set parameters + this.setData(data); + var options = this.getData(); + // redraw block + var block_template = Handlebars.compile($('form_template_block').innerHTML), + template = Handlebars.compile($('form_template_'+options.type).innerHTML), + data = $H(options).merge({ template: template(options) }).toObject(); + this.element.replace(block_template(data)); + + WysijaForm.init(); + }, + editSettings: function() { + MailPoet.Modal.popup({ + title: 'Edit field settings', // TODO: translate! + template: jQuery('#form_template_field_settings').html(), + data: this.getData(), + onSuccess: function() { + var data = jQuery('#form_field_settings').serializeObject(); + this.redraw(data); + }.bind(this) + }); + }, + getSettings: function() { + return this.element.down('.wysija_settings'); + } +}); + +/* When dom is loaded, initialize WysijaForm */ +document.observe('dom:loaded', WysijaForm.init); + +/* LOGGING */ +function info(value) { + if(WysijaForm.options.debug === false) return; + + if(!(window.console && console.log)) { + (function() { + var noop = function() {}; + var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn']; + var length = methods.length; + var console = window.console = {}; + while(length--) { + console[methods[length]] = noop; + } + }()); + } + try { + console.log('[DEBUG] '+value); + } catch(e) {} +} diff --git a/composer.json b/composer.json index 4a6e3f4332..1c7ec6ddae 100644 --- a/composer.json +++ b/composer.json @@ -1,27 +1,19 @@ { - "repositories": [ - { - "type": "pear", - "url": "http://pear.php.net/" - } - ], "require": { "php": ">=5.3.3", "twig/twig": "1.*", "phpmailer/phpmailer": "~5.2", "cerdic/css-tidy": "*", "sunra/php-simple-html-dom-parser": "*", - "tburry/pquery": "*", - "pear-pear.php.net/PEAR" : "*", - "pear-pear.php.net/Net_POP3" : "*", - "pear-pear.php.net/Net_Socket" : "*" + "tburry/pquery": "*" }, "require-dev": { "codeception/codeception": "*", "codeception/specify": "*", "codeception/verify": "*", "codegyre/robo": "*", - "vlucas/phpdotenv": "*" + "vlucas/phpdotenv": "*", + "umpirsky/twig-gettext-extractor": "1.1.*" }, "autoload": { "psr-4": { diff --git a/lang/mailpoet.pot b/lang/mailpoet.pot deleted file mode 100644 index bb6e486ce1..0000000000 --- a/lang/mailpoet.pot +++ /dev/null @@ -1,13 +0,0 @@ -# Copyright (C) 2014 WordPress Plugin Template -# This file is distributed under the same license as the WordPress Plugin Template package. -msgid "" -msgstr "" -"Project-Id-Version: MailPoet\n" -"Report-Msgid-Bugs-To: http://mailpoet.com\n" -"POT-Creation-Date: 2014-04-07 11:28:06+00:00\n" -"MIME-Version: 1.0\n" -"Content-Type: text/plain; charset=UTF-8\n" -"Content-Transfer-Encoding: 8bit\n" -"PO-Revision-Date: 2014-MO-DA HO:MI+ZONE\n" -"Last-Translator: MAILPOET \n" -"Language-Team: MAILPOET \n" diff --git a/lang/wysija-newsletters.pot b/lang/wysija-newsletters.pot new file mode 100644 index 0000000000..b3a41d02ab --- /dev/null +++ b/lang/wysija-newsletters.pot @@ -0,0 +1,216 @@ +# Copyright (C) 2015 +# This file is distributed under the same license as the package. +msgid "" +msgstr "" +"Project-Id-Version: \n" +"Report-Msgid-Bugs-To: http://support.mailpoet.com/\n" +"POT-Creation-Date: 2015-07-29 14:52:45+00:00\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"PO-Revision-Date: 2015-MO-DA HO:MI+ZONE\n" +"Last-Translator: MailPoet i18n " +"(https://www.transifex.com/organization/wysija)\n" +"Language-Team: MailPoet i18n " +"\n" +"X-Generator: grunt-wp-i18n 0.5.2\n" +"X-Poedit-KeywordsList: " +"__;_e;_x:1,2c;_ex:1,2c;_n:1,2;_nx:1,2,4c;_n_noop:1,2;_nx_noop:1,2,3c;esc_" +"attr__;esc_html__;esc_attr_e;esc_html_e;esc_attr_x:1,2c;esc_html_x:1,2c;\n" +"Language: en_US\n" +"Plural-Forms: nplurals=2; plural=(n != 1);\n" +"X-Poedit-Country: United States\n" +"X-Poedit-SourceCharset: UTF-8\n" +"X-Poedit-Basepath: ../\n" +"X-Poedit-SearchPath-0: .\n" +"X-Poedit-Bookmarks: \n" +"X-Textdomain-Support: yes\n" + +#: lib/config/initializer.php:13 views/form/editor.html:5 +msgid "" +"super long string\n" +" that takes multiple lines\n" +" and takes 3 lines" +msgstr "" + +#: lib/form/renderer.php:91 +msgid "Year, month, day" +msgstr "" + +#: lib/form/renderer.php:92 +msgid "Year, month" +msgstr "" + +#: lib/form/renderer.php:93 +msgid "Month (January, February,...)" +msgstr "" + +#: lib/form/renderer.php:94 lib/form/renderer.php:519 +msgid "Year" +msgstr "" + +#: lib/form/renderer.php:108 +msgid "January" +msgstr "" + +#: lib/form/renderer.php:109 +msgid "February" +msgstr "" + +#: lib/form/renderer.php:110 +msgid "March" +msgstr "" + +#: lib/form/renderer.php:111 +msgid "April" +msgstr "" + +#: lib/form/renderer.php:112 +msgid "May" +msgstr "" + +#: lib/form/renderer.php:113 +msgid "June" +msgstr "" + +#: lib/form/renderer.php:114 +msgid "July" +msgstr "" + +#: lib/form/renderer.php:115 +msgid "August" +msgstr "" + +#: lib/form/renderer.php:116 +msgid "September" +msgstr "" + +#: lib/form/renderer.php:117 +msgid "October" +msgstr "" + +#: lib/form/renderer.php:118 +msgid "November" +msgstr "" + +#: lib/form/renderer.php:119 +msgid "December" +msgstr "" + +#: lib/form/renderer.php:509 +msgid "Day" +msgstr "" + +#: lib/form/renderer.php:514 +msgid "Month" +msgstr "" + +#: lib/form/widget.php:11 +msgid "MailPoet Subscription Form" +msgstr "" + +#: lib/form/widget.php:13 +msgid "Newsletter subscription form" +msgstr "" + +#: lib/form/widget.php:36 +msgid "Subscribe to our Newsletter" +msgstr "" + +#: lib/form/widget.php:56 +msgid "Title:" +msgstr "" + +#: lib/form/widget.php:76 +msgid "Create a new form" +msgstr "" + +#: lib/form/widget.php:109 +msgid "Newsletter" +msgstr "" + +#: mailpoet.php:34 +msgid "" +"super loeng string\n" +" that takes multiple lines\n" +" and takes 3 lines" +msgstr "" + +#: views/form/editor.html:4 +msgid "Translatable string with a link %shere%s" +msgstr "" + +#: views/form/editor.html:27 +msgid "Save" +msgstr "" + +#: views/form/editor.html:35 +msgid "Settings" +msgstr "" + +#: views/form/editor.html:43 +msgid "This form adds subscribers to these lists:" +msgstr "" + +#: views/form/editor.html:45 +msgid "Choose a list" +msgstr "" + +#: views/form/editor.html:58 +msgid "You have to select at least 1 list" +msgstr "" + +#: views/form/editor.html:64 +msgid "After submit..." +msgstr "" + +#: views/form/editor.html:66 +msgid "Show message" +msgstr "" + +#: views/form/editor.html:70 +msgid "Go to page" +msgstr "" + +#: views/form/editor.html:77 +msgid "Check your inbox now to confirm your subscription." +msgstr "" + +#: views/form/editor.html:99 +msgid "Shortcodes" +msgstr "" + +#: views/form/editor.html:104 +msgid "You can easily add this form to your theme's in the" +msgstr "" + +#: views/form/editor.html:104 +msgid "Widgets areas" +msgstr "" + +#: views/form/editor.html:127 +msgid "" +"[link_html]HTML[/link_html], [link_php]PHP[/link_php], " +"[link_iframe]iframe[/link_iframe] and " +"[link_shortcode]shortcode[/link_shortcode] versions are also available." +msgstr "" + +#: views/form/editor.html:139 +msgid "Fields" +msgstr "" + +#: views/form/editor.html:145 +msgid "Add New Field" +msgstr "" + +#: views/form/editor.html:154 +msgid "Styles" +msgstr "" + +#: views/form/editor.html:158 +msgid "Preview" +msgstr "" + +#: views/index.html:4 +msgid "monvier" +msgstr "" \ No newline at end of file diff --git a/lib/config/initializer.php b/lib/config/initializer.php index e14077c8b2..1b8728908e 100644 --- a/lib/config/initializer.php +++ b/lib/config/initializer.php @@ -6,6 +6,14 @@ use MailPoet\WP; if(!defined('ABSPATH')) exit; +/* + this is a comment +*/ + // another comment +$var = __('super long string + that takes multiple lines + and takes 3 lines'); + class Initializer { public $version; @@ -23,7 +31,7 @@ class Initializer { $this->data = array(); $this->version = $params['version']; - $this->shortname = 'mailpoet'; + $this->shortname = 'wysija-newsletters'; $this->file = $params['file']; $this->path =(dirname($this->file)); $this->views_path = $this->path . '/views'; @@ -44,6 +52,8 @@ class Initializer { ) ); + // renderer: i18n + $this->renderer->addExtension(new Renderer\i18n()); // renderer: global variables $this->renderer->addExtension(new Renderer\Assets(array( 'assets_url' => $this->assets_url, @@ -206,7 +216,7 @@ class Initializer { } public function setup_textdomain() { - $domain = 'mailpoet'; + $domain = 'wysija-newsletters'; $locale = apply_filters( 'plugin_locale', get_locale(), @@ -241,7 +251,6 @@ class Initializer { $option->set('option_name', 'option value'); $this->data = array( - 'title' => __('Twig Sample page'), 'text' => 'Lorem ipsum dolor sit amet', 'unsafe_string' => '', 'users' => array( @@ -255,6 +264,10 @@ class Initializer { echo $this->renderer->render('index.html', $this->data); } + public function admin_page_form() { + echo $this->renderer->render('form/editor.html', $this->data); + } + public function admin_menu() { // main menu add_menu_page( @@ -285,16 +298,16 @@ class Initializer { 'mailpoet-subscribers', 'mailpoet_subscribers' ); - +*/ // forms add_submenu_page('mailpoet-newsletters', 'Forms', 'Forms', 'manage_options', 'mailpoet-forms', - 'mailpoet_forms' + array($this, 'admin_page_form') ); - +/* // settings add_submenu_page('mailpoet-newsletters', 'Settings', diff --git a/lib/renderer/assets.php b/lib/renderer/assets.php index 4d6b63bb2f..b340011576 100644 --- a/lib/renderer/assets.php +++ b/lib/renderer/assets.php @@ -37,11 +37,8 @@ class Assets extends \Twig_Extension { $output = array(); foreach($stylesheets as $stylesheet) { - $output[] = ''; + $output[] = ''; } return join("\n", $output); @@ -52,10 +49,9 @@ class Assets extends \Twig_Extension { $output = array(); foreach($scripts as $script) { - $output[] = ''; + $output[] = ''; } return join("\n", $output); diff --git a/lib/renderer/i18n.php b/lib/renderer/i18n.php new file mode 100644 index 0000000000..8e7029e515 --- /dev/null +++ b/lib/renderer/i18n.php @@ -0,0 +1,22 @@ + array('all')) + ) + ); + } +} \ No newline at end of file diff --git a/mailpoet.php b/mailpoet.php index e3714a4a0c..cf700363c0 100644 --- a/mailpoet.php +++ b/mailpoet.php @@ -31,5 +31,7 @@ function mailpoet() { 'version' => MAILPOET_VERSION )); } - +$var = __('super loeng string + that takes multiple lines + and takes 3 lines'); mailpoet(); diff --git a/package.json b/package.json index 477adf8dd3..b55a7191d3 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "devDependencies": { "chai": "2.2.0", "chai-jq": "0.0.8", + "grunt": "^0.4.5", "jsdom": "3.1.2", "mocha": "2.2.1", "napa": "^1.2.0", diff --git a/tasks/makepot/makepot.js b/tasks/makepot/makepot.js new file mode 100644 index 0000000000..dbfc173524 --- /dev/null +++ b/tasks/makepot/makepot.js @@ -0,0 +1,80 @@ +/* + MailPoet: MakePot + - creates .pot file for translations + - push to Transifex + */ +module.exports = function (grunt) { + 'use strict'; + + // load multiple grunt tasks using globbing patterns + require('load-grunt-tasks')(grunt); + + // get plugin path from options + var base_path = grunt.option('base_path'); + + if (base_path === undefined || grunt.file.exists(base_path) === false) { + grunt.fail.fatal("Missing --base_path argument"); + } else { + // configuration. + grunt.initConfig({ + makepot: { + target: { + options: { + cwd: '.', // base path where to look for translatable strings + domainPath: 'lang', // where to save the .pot + exclude: [ + 'build/.*', + 'tests/.*', + 'vendor/.*', + 'tasks/.*' + ], + mainFile: 'index.php', // Main project file. + potFilename: 'wysija-newsletters.pot', // Name of the POT file. + potHeaders: { + poedit: true, // Includes common Poedit headers. + 'x-poedit-keywordslist': true // Include a list of all possible gettext functions. + }, + type: 'wp-plugin', // Type of project (wp-plugin or wp-theme). + updateTimestamp: true, // Whether the POT-Creation-Date should be updated without other changes. + processPot: function (pot, options) { + pot.headers['report-msgid-bugs-to'] = 'http://support.mailpoet.com/'; + pot.headers['last-translator'] = 'MailPoet i18n (https://www.transifex.com/organization/wysija)'; + pot.headers['language-team'] = 'MailPoet i18n '; + pot.headers['language'] = 'en_US'; + return pot; + } + } + } + }, + shell: { + options: { + stdout: true, + stderr: true + }, + txpush: { + command: 'tx push -s' // push the resources (requires an initial resource set on TX website) + }, + txpull: { + command: 'tx pull -a -f' // pull the .po files + } + } + }); + + // set base + grunt.file.setBase(base_path); + + // Register tasks + grunt.registerTask('default', function () { + grunt.log.writeln(" x-----------------------------x"); + grunt.log.writeln(" | MailPoet i18n |"); + grunt.log.writeln(" x-----------------------------x"); + grunt.log.writeln(" \n Commands: \n"); + grunt.log.writeln(" grunt makepot = Generates the .pot file"); + grunt.log.writeln(" grunt pushpot = Pushes the .pot file to Transifex"); + grunt.log.writeln(" grunt update = Runs 'makepot' then 'pushpot'"); + }); + + grunt.registerTask('pushpot', ['shell:txpush']); + grunt.registerTask('update', ['makepot', 'shell:txpush']); + } +}; \ No newline at end of file diff --git a/tasks/makepot/package.json b/tasks/makepot/package.json new file mode 100644 index 0000000000..b4c930771b --- /dev/null +++ b/tasks/makepot/package.json @@ -0,0 +1,13 @@ +{ + "name": "mailpoet-makepot", + "version": "1.0.0", + "title": "MailPoet POT generator", + "private": true, + "main": "makepot.js", + "devDependencies": { + "grunt": "latest", + "grunt-wp-i18n": "latest", + "load-grunt-tasks": "latest", + "grunt-shell": "latest" + } +} \ No newline at end of file diff --git a/tests/_support/_generated/AcceptanceTesterActions.php b/tests/_support/_generated/AcceptanceTesterActions.php index e2ce0de6af..59bd1f1b96 100644 --- a/tests/_support/_generated/AcceptanceTesterActions.php +++ b/tests/_support/_generated/AcceptanceTesterActions.php @@ -1,4 +1,4 @@ -{{ __('Translatable string with a link %shere%s') }}

+

{{ __('super long string + that takes multiple lines + and takes 3 lines') | nl2br }}

+

{{ title }}

+ {{ form.form_name }} + + + {{ form_edit_name }} + +{% endblock %} + +{% block content %} +
+ +
+ +
+
+

+
+ +

+ {{ __('Save') }} +

+
+ + + + + +
+
+ + {{ javascript( + 'lib/prototype.min.js', + 'lib/scriptaculous.min.js', + 'form_editor.js' + )}} +{% endblock %} \ No newline at end of file diff --git a/views/index.html b/views/index.html index b029405054..5424e458db 100644 --- a/views/index.html +++ b/views/index.html @@ -1,6 +1,7 @@ {% extends 'layout.html' %} {% block content %} +

{{ __('monvier') }}

{{ text }}

diff --git a/views/layout.html b/views/layout.html index 90055cc945..e173d0e50c 100644 --- a/views/layout.html +++ b/views/layout.html @@ -2,10 +2,7 @@
- {% if title %} -

{{ title }}

- {% endif %} - + {% block title %}{% endblock %} {% block content %}{% endblock %}