Geonetwork Anchor Switcher

anchorSwitcher.html

<div class="">
  <!-- The hidden field with the value. -->
  <input type="hidden" class="form-control"
         name="{{snippetRef}}" value="{{xmlSnippet}}"/>


  <div class="gn-characterString gn-value"
       data-ng-show="mode === 'characterString'">
    <div class="input-group">
      <input class="form-control"
             data-ng-model="textValue"
             data-ng-attr-id="{{'gn-' + elementRef + '-charStringValue'}}"/>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" data-ng-click="setMode('anchor')">
          <i class="fa fa-link">&nbsp;</i>
        </button>
      </span>
    </div>
  </div>

  <div class="gn-anchor gn-value" data-ng-show="mode === 'anchor'">
    <div class="col-sm-6 gn-nopadding-left">
      <input class="form-control"
             data-ng-model="textValue"
             data-ng-attr-id="{{'gn-' + elementRef + '-anchorValue'}}"/>
    </div>
    <div class="col-sm-6 gn-nopadding-right">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input class="form-control"
               data-ng-model="linkValue"
               data-ng-attr-id="{{'gn-' + elementRef + '-anchorLink'}}"/>
        <span class="input-group-btn">
          <button class="btn btn-default" data-ng-click="setMode('characterString')">
            <i class="fa fa-remove"></i>
          </button>
        </span>
      </div>
    </div>

  </div>
  <div class="gn-debug">
    <textarea>{{xmlSnippet}}</textarea>
  </div>
</div>

AnchorSwitcher.js

/*
 * Copyright (C) 2001-2016 Food and Agriculture Organization of the
 * United Nations (FAO-UN), United Nations World Food Programme (WFP)
 * and United Nations Environment Programme (UNEP)
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or (at
 * your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA
 *
 * Contact: Jeroen Ticheler - FAO - Viale delle Terme di Caracalla 2,
 * Rome - Italy. email: [email protected]
 */

(function() {
  goog.provide('gn_anchor_switcher_directive');

  var module = angular.module('gn_anchor_switcher_directive', []);

  module.directive('gnAnchorSwitcher',
      [function() {

        return {
          restrict: 'A',
          replace: true,
          transclude: true,
          scope: {
            id: '@',
            required: '@',
            textValue: '@',
            linkValue: '@',
            elementRef: '@name'
          },
          templateUrl: '../../catalog/components/edit/anchorswitcher/' +
          'anchorswitcher.html',
          link: function(scope, element, attrs) {
            var characterStringTemplate = _.template('<gco:CharacterString><%= textValue %></gco:CharacterString>');
            var anchorTemplate = _.template('<gmx:Anchor xlink:href=\"<%= linkValue %>"><%= textValue %></gmx:Anchor>');

            scope.checkMode = function() {
              if (scope.linkValue !== undefined) {
                scope.mode = 'anchor';
              } else {
                scope.mode = 'characterString';
              }
            };

            scope.setMode = function(newMode) {
              scope.mode = newMode;
            };


            scope.$watch('mode', function(newValue, oldValue) {
              if (newValue === 'characterString') {
                scope.linkValue = null;
              } else {
                scope.linkValue = '';
              }
            });


            scope.updateXmlSnippet = function(text, link) {
              if (scope.mode === 'anchor') {
                scope.xmlSnippet = anchorTemplate({textValue: text, linkValue: link});
              } else {
                scope.xmlSnippet = characterStringTemplate({textValue: text});
              }
            };

            scope.$watch('textValue', function(newValue) {
              scope.updateXmlSnippet(newValue, scope.linkValue);
            });

            scope.$watch('linkValue', function(newValue) {
              scope.updateXmlSnippet(scope.textValue, newValue);
            });

            element.removeClass('form-control');
            scope.snippetRef = '_X' + scope.elementRef;
            scope.checkMode();
          }

        };
      }]);

})();