ipi-jquery/js/ws-forms.js

"use strict";
(function($) {
  $(document).ready(function() {


  // var $addRepoBtn = $('#add-repo-btn');


  // var $addExampleBtn = $('#add-example-btn');
  // var $exampleForm   = $('#add-example-form');
  // var $exampleFormIn = $exampleForm.find('input');
  // var $exampleSave   = $('#add-example-save');
  // var $exampleCancel = $('#add-example-cancel');


  // /**
  //  * Add new example
  //  */
  // function addExample(e) {
  //   e.preventDefault();
  //   var repoSlug = $detailsRepo.data('slug');
  //   var title = $(this).find('input[name="title"]').val();
  //   rp.post('/' + repoSlug + '/examples', { title: title })
  //   .then(function(example) {
  //     clearAndCloseEditor();
  //     // $fileSelect.append(makeFileSelectOption(example));
  //     // $fileSelect.val(example.slug);
      
  //     // var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
  //     // .appendTo( $('#cat-' + example.category) );
  //     notify('success', "Exemple créé !");
  //     // navigateTo('/'+ repoSlug + '/' + example.slug);
  //   })
  //   .catch(errText => notify('error', 'Erreur: ' + errText));
  // }

  // function clearAndCloseEditor() {
  //   $exampleFormIn.val('');
  //   toggleEditor();
  // }

  // function toggleEditor() {
  //   $addExampleBtn.toggle();
  //   $exampleForm.toggleClass("hidden");
  // }


  function makeFormView(elemId, onSubmitPromise, options) {

    // Fallback options & options.events
    options = options || {};
    options.events = options.events || {};

    // Define events and optionally extend them with those
    // provided in options.events
    var events = Object.assign({
      'click .add-btn': function() {
        this.render();
      },

      'click .icon-cross': function() {
        this.$form.removeClass('in');
        this.$btn.addClass('in');
      },

      'submit form': function(e) {
        e.preventDefault();
        if(this.cantSubmit) {
          this.$input
          .removeClass('input-success input-warning')
          .addClass('input-error');
          _ws.notify('error', this.cantSubmit);
          return;
        }
        var title = this.$input.val();
        // rp.post('/collections', { title: title })
        onSubmitPromise(title)
        .then(function(c) {
          _ws.notify('success', 'Collection créée: ' + c.title);
        })
        .catch(function(err) {
          console.error(err);
          _ws.notify('error', 'Impossible de créer la collection: ' + err.message);
        });
      }
    }, options.events);

    _ws.makeView(elemId, {

      init: function() {
        this.$btn   = this.$elem.find('.add-btn');
        this.$form  = this.$elem.find('form');
        this.$input = this.$form.find('input[name="title"]');
        console.log('init add repo form', this.$elem.prop('id'))
      },

      render: function() {
        console.log('render form add ', this.$elem.prop('id'));
        this.$btn.removeClass('in');
        this.$form.addClass('in');
        this.$input.focus();
      },

      events: events

    });
  }

  makeFormView('add-repo', function(title) {
    return rp.post('/repos', { title: title });
  });

  makeFormView('add-example', function(title) {
    return rp.post('/' + _ws.repo.path + '/examples', { title: title });
  });


  makeFormView(
    'add-file',
    function(name) {
      return rp.post('/' + _ws.repo.path + '/examples/file', { name: name });
    },
    {
      events: {
        'keyup input[name="title"]': function(e) {
          var filename = this.$input.val();
          // console.log('filename', filename);
          var bits = filename.split('.');
          var lastIdx = bits.length - 1;
          console.log(bits, bits.length, lastIdx, bits[lastIdx], typeof bits[lastIdx]);
          if(bits.length < 2) {
            this.$input
            .removeClass('input-success input-error')
            .addClass('input-warning');
            this.cantSubmit = 'Impossible de valider: extension (.html/.js/.css) manquante';
            return;
          }
          else {
            var ext = (bits[lastIdx]).toLowerCase();
            console.log(ext);
            if( ['html', 'js', 'css'].indexOf( ext ) === -1 ) {
              this.$input
              .removeClass('input-success input-warning')
              .addClass('input-error');
              this.cantSubmit = 'Impossible de valider: extension ' + ext + ' invalide (autorisées: .html/.js/.css)';
              return;
            }
          }
          this.$input.addClass('input-success');
          this.cantSubmit = undefined;
        }
      }
    }
  );



  console.log(_ws.ui);

  // _ws.ui.addRepoForm.$btn.click(_ws.ui.addRepoForm.render);


  // console.log($addExampleBtn);
  // $addExampleBtn.click(toggleEditor);
  // $exampleCancel.click(clearAndCloseEditor);
  // $exampleForm.submit(addExample);

  });
})(jQuery);