projects / civicrm-core.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
CRM-17416 - Wait for wysiwyg to be ready
[civicrm-core.git] / ang / crmUi.js
diff --git a/ang/crmUi.js b/ang/crmUi.js
index 23579fccbd0dc3aa442658273cd0734088bff7ac..ed24630f391980df9672bbfe209a19bf3c19bfc0 100644 (file)
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -64,7 +64,7 @@
 
     // Simple wrapper around $.crmDatepicker.
     // example with no time input: <input crm-ui-datepicker="{time: false}" ng-model="myobj.datefield"/>
-    // example with custom date format: <input crm-ui-datepicker="{dateFormat: 'm/d/y'}" ng-model="myobj.datefield"/>
+    // example with custom date format: <input crm-ui-datepicker="{date: 'm/d/y'}" ng-model="myobj.datefield"/>
     .directive('crmUiDatepicker', function () {
       return {
         restrict: 'AE',
@@ -314,10 +314,12 @@
 
     // Display an HTML blurb inside an IFRAME.
     // example: <iframe crm-ui-iframe="getHtmlContent()"></iframe>
+    // example:  <iframe crm-ui-iframe crm-ui-iframe-src="getUrl()"></iframe>
     .directive('crmUiIframe', function ($parse) {
       return {
         scope: {
-          crmUiIframe: '@' // expression which evalutes to HTML content
+          crmUiIframeSrc: '@', // expression which evaluates to a URL
+          crmUiIframe: '@' // expression which evaluates to HTML content
         },
         link: function (scope, elm, attrs) {
           var iframe = $(elm)[0];
@@ -325,20 +327,24 @@
           iframe.setAttribute('frameborder', '0');
 
           var refresh = function () {
-            // var iframeHtml = '<html><head><base target="_blank"></head><body onload="parent.document.getElementById(\'' + iframe.id + '\').style.height=document.body.scrollHeight + \'px\'"><scr' + 'ipt type="text/javascript" src="https://gist.github.com/' + iframeId + '.js"></sc' + 'ript></body></html>';
-            var iframeHtml = scope.$parent.$eval(attrs.crmUiIframe);
-
-            var doc = iframe.document;
-            if (iframe.contentDocument) {
-              doc = iframe.contentDocument;
-            }
-            else if (iframe.contentWindow) {
-              doc = iframe.contentWindow.document;
+            if (attrs.crmUiIframeSrc) {
+              iframe.setAttribute('src', scope.$parent.$eval(attrs.crmUiIframeSrc));
             }
+            else {
+              var iframeHtml = scope.$parent.$eval(attrs.crmUiIframe);
 
-            doc.open();
-            doc.writeln(iframeHtml);
-            doc.close();
+              var doc = iframe.document;
+              if (iframe.contentDocument) {
+                doc = iframe.contentDocument;
+              }
+              else if (iframe.contentWindow) {
+                doc = iframe.contentWindow.document;
+              }
+
+              doc.open();
+              doc.writeln(iframeHtml);
+              doc.close();
+            }
           };
 
           // If the iframe is in a dialog, respond to resize events
@@ -387,23 +393,10 @@
             });
           }
 
-          // CRM-16445 - When one inserts an image, none of these events seem to fire at the right time:
-          // afterCommandExec, afterInsertHtml, afterPaste, afterSetData, change, insertElement,
-          // insertHtml, insertText, pasteState. It seems that 'pasteState' is the general equivalent of
-          // what 'change' should be, except (in the case of image insertion) it fires too soon.
-          // The 'key' event is needed to detect changes in "Source" mode.
-          var debounce = null;
-          angular.forEach(['key', 'pasteState'], function(evName){
-            ck.on(evName, function(evt) {
-              $timeout.cancel(debounce);
-              debounce = $timeout(function() {
-                ngModel.$setViewValue(ck.getData());
-              }, 50);
-            });
-          });
-
           ngModel.$render = function(value) {
-            CRM.wysiwyg.setVal(elm, ngModel.$viewValue);
+            editor.done(function() {
+              CRM.wysiwyg.setVal(elm, ngModel.$viewValue);
+            });
           };
         }
       };
@@ -438,20 +431,20 @@
           var titleLocked = parse(attrs.titleLocked, ts('Locked'));
           var titleUnlocked = parse(attrs.titleUnlocked, ts('Unlocked'));
 
-          $(element).addClass('ui-icon lock-button');
+          $(element).addClass('crm-i lock-button');
           var refresh = function () {
             var locked = binding(scope);
             if (locked) {
               $(element)
-                .removeClass('ui-icon-unlocked')
-                .addClass('ui-icon-locked')
+                .removeClass('fa-unlock')
+                .addClass('fa-lock')
                 .prop('title', titleLocked(scope))
               ;
             }
             else {
               $(element)
-                .removeClass('ui-icon-locked')
-                .addClass('ui-icon-unlocked')
+                .removeClass('fa-lock')
+                .addClass('fa-unlock')
                 .prop('title', titleUnlocked(scope))
               ;
             }
@@ -846,13 +839,19 @@
       };
     })
 
-    // Example: <button crm-icon="check">Save</button>
+    // Example for Font Awesome: <button crm-icon="fa-check">Save</button>
+    // Example for jQuery UI (deprecated): <button crm-icon="check">Save</button>
     .directive('crmIcon', function() {
       return {
         restrict: 'EA',
         scope: {},
         link: function (scope, element, attrs) {
-          $(element).prepend('<span class="icon ui-icon-' + attrs.crmIcon + '"></span> ');
+          if (attrs.crmIcon.substring(0,3) == 'fa-') {
+            $(element).prepend('<i class="crm-i ' + attrs.crmIcon + '"></i> ');
+          }
+          else {
+            $(element).prepend('<span class="icon ui-icon-' + attrs.crmIcon + '"></span> ');
+          }
           if ($(element).is('button')) {
             $(element).addClass('crm-button');
           }