- Fixed conflic with backbone router in settings and import

- WIP on step 1

assets/js/src/import/import.js

@@ -70,9 +70,192 @@ define(
 
        // start step 1
        show_current_step();
+
+       /*
+        *  Paste
+        */
+
+       // display placeholder with multilines. there is no CSS solution that would make this possible.
+       subscribers_paste_input.attr('value', subscribers_paste_input_placeholder).css('color', "#999");
+       subscribers_paste_input.focus(function () {
+         if (jQuery(this).val() == subscribers_paste_input_placeholder) {
+           // reset the value only if it equals the initial one
+           jQuery(this).attr('value', '').css('color', '#222');
+         }
+       });
+       subscribers_paste_input.blur(function () {
+         if (jQuery(this).val() == '') {
+           jQuery(this).attr('value', subscribers_paste_input_placeholder).css('color', "#999");
+
+         }
+       });
+
+       // monitor textarea changes
+       subscribers_paste_input.keyup(function () {
+         if (this.value.trim() !== '') {
+           subscribers_paste_process.closest('table').show();
+         }
+         else {
+           subscribers_paste_process.closest('table').hide();
+         }
+       });
+
+       // process paste input
+       subscribers_paste_process.click(function () {
+         MailPoet.Notice.hide();
+         // get size of textarea paste in bytes (approximate)
+         var paste_size = encodeURI(subscribers_paste_input.val()).split(/%..|./).length - 1;
+         if (paste_size > maximum_parse_size) {
+           MailPoet.Notice.error(maximum_parse_notice, {static: true});
+           return;
+         }
+         // show loading indicator and give it 20ms to execute before parsing data
+         MailPoet.Modal.loading(true);
+         setTimeout(function () {
+           Papa.parse(subscribers_paste_input.val(), csvParse());
+         }, 10);
+       });
+
+       /*
+        *  CSV file
+        */
+
+       subscribers_file_local.change(function () {
+         MailPoet.Notice.hide();
+         if (this.value.trim() !== '') {
+           subscribers_file_process.closest('table').show();
+         }
+         else {
+           subscribers_file_process.closest('table').hide();
+         }
+       })
+
+       subscribers_file_process.click(function () {
+
+         if (subscribers_file_local.val().trim() !== '') {
+           // show loading indicator and give it 20ms to execute before parsing data
+           MailPoet.Modal.loading(true);
+           setTimeout(function () {
+             subscribers_file_local.parse({
+               config: csvParse()
+             })
+           }, 10);
+         }
+       })
+
+       /*
+        *  MailChimp
+        */
+
+       subscribers_mailchimp_key.keyup(function () {
+         if (this.value.trim() === '' || !/[a-zA-Z0-9]{32}-/.exec(this.value.trim())) {
+           // was the key previously verified and the list block is visible?
+           if (subscribers_mailchimp_lists.is(':visible')) {
+             subscribers_mailchimp_lists.hide();
+             subscribers_mailchimp_process.closest('table').hide();
+           }
+           // remove any leftover errors from previous verification, if any
+           jQuery('.mailpoet_mailchimp-key-status').html('').removeClass('mailpoet_mailchimp-ok mailpoet_mailchimp-error');
+           subscribers_mailchimp_key_verify.prop('disabled', true);
+         }
+         else {
+           subscribers_mailchimp_key_verify.prop('disabled', false);
+         }
+       });
+
+       subscribers_mailchimp_key_verify.click(function () {
+
+         // show loading indicator
+         MailPoet.Modal.loading(true);
+
+ /*        mailpoet_get_json(
+          'subscribers_import_mailchimp.php',
+          {
+            'api_key': subscribers_mailchimp_key.val(), 'action': 'get_lists'
+          },
+          function (result) {
+            if (result.status === 'success') {
+              jQuery('.mailpoet_mailchimp-key-status').html('').removeClass().addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-ok');
+              if (result.data) {
+                subscribers_mailchimp_lists.find('input')
+                 .select2({
+                   data: result.data,
+                   width: '20em',
+                   dropdownCssClass: 'mailpoet_no-search',
+                   placeholder: MailPoetI18n.select,
+                   formatSelection: function (item) {
+                     return item.name;
+                   },
+                   formatResult: function (item) {
+                     return item.name;
+                   },
+                   multiple: true
+                 })
+                 .change(function () {
+                   subscribers_mailchimp_process.closest('table').toggle((jQuery(this).select2('val').length) ? true : false);
+                 })
+                 .trigger('change');
+                subscribers_mailchimp_lists.show();
+              }
+              else {
+                jQuery('.mailpoet_mailchimp-key-status').html(MailPoetI18n.noMailChimpLists);
+                subscribers_mailchimp_lists.hide();
+                subscribers_mailchimp_process.closest('table').hide();
+              }
+            }
+            else {
+              MailPoet.Notice.hide();
+              MailPoet.Notice.error(interpret_server_message(result.message));
+              jQuery('.mailpoet_mailchimp-key-status').removeClass().addClass('mailpoet_mailchimp-key-status mailpoet_mailchimp-error');
+              subscribers_mailchimp_lists.hide();
+              subscribers_mailchimp_process.closest('table').hide();
+            }
+            // hide loading indicator
+            MailPoet.Modal.loading(false);
+          },
+          function (result) {
+            // hide loading indicator
+            MailPoet.Modal.loading(false);
+            MailPoet.Notice.error(MailPoetI18n.serverError + result.statusText.toLowerCase() + '.');
+          }
+         );*/
+       });
+
+       subscribers_mailchimp_process.click(function () {
+         // show loading indicator
+         MailPoet.Modal.loading(true);
+
+ /*        mailpoet_get_json(
+          'subscribers_import_mailchimp.php',
+          {
+            'api_key': subscribers_mailchimp_key.val(),
+            'lists': jQuery('#mailchimp_lists_select').select2('val'),
+            'action': 'process'
+          },
+          function (result) {
+            if (result.status === 'success') {
+              data_container.step_1 = result;
+              router.navigate('step_2', {trigger: true});
+            }
+            else {
+              MailPoet.Notice.hide();
+              MailPoet.Notice.error(interpret_server_message(result.message));
+            }
+            // hide loading indicator
+            MailPoet.Modal.loading(false);
+          },
+          function (result) {
+            MailPoet.Modal.loading(false);
+            MailPoet.Notice.error(MailPoetI18n.serverError + result.statusText.toLowerCase() + '.');
+          }
+         );
+         subscribers_mailchimp_process.prop('disabled', false);*/
+
+       });       
+       
      });
 
-     Backbone.history.start();
+     if (!Backbone.History.started) Backbone.history.start();
    });
  }
 );

assets/js/src/settings/tabs.js

@@ -73,7 +73,7 @@ define(
     }));
 
     jQuery(document).ready(function() {
-      Backbone.history.start();
+      if (!Backbone.History.started) Backbone.history.start();
     });
   }
 );

views/import.html

@@ -8,12 +8,18 @@
   <!-- STEP 2: subscriber manipulation -->
 
   <!-- STEP 3: results -->
-
 </div>
 
 <%= stylesheet('import.css') %>
+
+<%= localize({
+'noMailChimpLists': __('No active lists found.'),
+'serverError': __('Server error:'),
+'select': __('Select')
+}) %>
+
 <script type="text/javascript">
   var maximum_parse_size = <%= maximumParseSize %>,
-   maximum_parse_notice = "<%= __('Your CSV is over %s, and too big to process. Please split the file in two, or more.')|replace({'%s': maximumParseSize}) %>";
+      maximum_parse_notice = "<%= __('Your CSV is over %s, and too big to process. Please split the file in two, or more.')|replace({'%s': maximumParseSize}) %>";
 </script>
 <% endblock %>