super-productivity/app-src/scripts/inline-markdown/inline-markdown-d.js

/**
 * @ngdoc directive
 * @name superProductivity.directive:inlineMarkdown
 * @description
 * # inlineMarkdown
 */

(function() {
  'use strict';

  angular
    .module('superProductivity')
    .directive('inlineMarkdown', inlineMarkdown);

  /* @ngInject */
  function inlineMarkdown() {
    return {
      templateUrl: 'scripts/inline-markdown/inline-markdown-d.html',
      bindToController: true,
      controller: InlineMarkdownCtrl,
      controllerAs: 'vm',
      restrict: 'E',
      scope: {
        ngModel: '=',
        onEditFinished: '&'
      }
    };
  }

  /* @ngInject */
  function InlineMarkdownCtrl($timeout, $element, IS_ELECTRON, $scope) {
    let vm = this;
    let waitForMarkedTimeOut;
    let textareaEl;
    let ngModelCopy;
    let textareaTimeout;
    const wrapperEl = $element.children();

    const keypressHandler = ($event) => {
      if ($event.keyCode === 10 && $event.ctrlKey) {
        vm.untoggleShowEdit();
      }
    };

    function makeLinksWorkForElectron() {
      if (IS_ELECTRON) {
        const shell = require('electron').shell;
        const links = $element.find('a');

        links.on('click', (event) => {
          let url = angular.element(event.target).attr('href');

          if (!/^https?:\/\//i.test(url)) {
            url = 'http://' + url;
          }
          event.preventDefault();
          shell.openExternal(url);
        });
      }
    }

    function stopPropagation(ev) {
      console.log('STOP');

      ev.stopPropagation();
    }

    if (IS_ELECTRON) {
      waitForMarkedTimeOut = $timeout(() => {
        makeLinksWorkForElectron();
      });
    }

    vm.toggleShowEdit = ($event) => {
      // check if anchor link was clicked
      if ($event.target.tagName !== 'A') {
        vm.showEdit = true;
        ngModelCopy = vm.ngModel || '';

        textareaTimeout = $timeout(function() {
          textareaEl = angular.element($element.find('textarea'));
          textareaEl[0].value = ngModelCopy;
          textareaEl[0].focus();
          textareaEl.on('keypress', keypressHandler);

          // prevent keyboard shortcuts from firing when here
          textareaEl.on('keydown', stopPropagation);

          textareaEl.on('$destroy', () => {
            textareaEl.off('keypress', keypressHandler);
            textareaEl.off('keydown', stopPropagation);
          });
        });
      }

      wrapperEl.addClass('is-editing');

    };

    vm.untoggleShowEdit = () => {
      ngModelCopy = textareaEl[0].value;
      vm.showEdit = false;
      makeLinksWorkForElectron();
      vm.resizeToFit();
      const isChanged = (ngModelCopy !== vm.ngModel);

      if (isChanged) {
        vm.ngModel = ngModelCopy;
      }

      if (angular.isFunction(vm.onEditFinished)) {
        vm.onEditFinished({
          newVal: vm.ngModel,
          isChanged: isChanged
        });
      }

      wrapperEl.removeClass('is-editing');
    };

    vm.resizeToFit = () => {
      $timeout(() => {
        const previewEl = angular.element($element.find('marked-preview'));
        const wrapperEl = angular.element($element.find('div')[0]);

        previewEl.css('height', 'auto');
        wrapperEl.css('height', previewEl[0].offsetHeight + 'px');
        previewEl.css('height', '');
      });
    };

    vm.resizeToFit();

    $scope.$on('$destroy', () => {
      if (waitForMarkedTimeOut) {
        $timeout.cancel(waitForMarkedTimeOut);
      }
      if (textareaTimeout) {
        $timeout.cancel(textareaTimeout);
      }
    });
  }

})();