dgbuilder/nodes/dge/dgemain/comment.html

   1 <!--
   2   Copyright 2013 IBM Corp.
   3
   4   Licensed under the Apache License, Version 2.0 (the "License");
   5   you may not use this file except in compliance with the License.
   6   You may obtain a copy of the License at
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  10   Unless required by applicable law or agreed to in writing, software
  11   distributed under the License is distributed on an "AS IS" BASIS,
  12   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   See the License for the specific language governing permissions and
  14   limitations under the License.
  15 -->
  16
  17 <script type="text/x-red" data-template-name="comment">
  18     <div class="form-row">
  19         <label for="node-input-name"><i class="fa fa-comment"></i> Comment</label>
  20         <input type="text" id="node-input-name" placeholder="Comment">
  21     </div>
  22     <div class="form-row">
  23         <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> More</label>
  24         <input type="hidden" id="node-input-info" autofocus="autofocus">
  25         <div class="form-row node-text-editor-row">
  26         <div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
  27         <input type="hidden" id="node-input-comments">
  28     </div>
  29     <div class="form-tips">Tip: this isn't meant for "War and Peace" - but useful notes can be kept here.</div>
  30 </script>
  31
  32 <script type="text/x-red" data-help-name="comment">
  33     <p>Simple comment block.</p>
  34 </script>
  35
  36 <script type="text/javascript">
  37     RED.nodes.registerType('comment',{
  38         category: 'DGEmain',
  39         color:"#ffffff",
  40         defaults: {
  41             name: {value:""},
  42             info: {value:""},
  43             comments:{value:""}
  44         },
  45         inputs:0,
  46         outputs:0,
  47         icon: "comment.png",
  48         label: function() {
  49             return this.name||"";
  50         },
  51         labelStyle: function() {
  52             return this.name?"node_label_italic":"";
  53         },
  54         oneditprepare: function() {
  55             var that = this;
  56             $( "#node-input-outputs" ).spinner({
  57                 min:1
  58             });
  59              var comments = $( "#node-input-comments").val();
  60              if(comments != null){
  61                 comments = comments.trim();
  62                 if(comments != ''){
  63                         $("#node-input-btnComments").html("<span style='color:blue;'><b>View Comments</b></span>");
  64                 }
  65              }
  66             function functionDialogResize() {
  67                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
  68                 var height = $("#dialog-form").height();
  69                 for (var i=0;i<rows.size();i++) {
  70                     height -= $(rows[i]).outerHeight(true);
  71                 }
  72                 var editorRow = $("#dialog-form>div.node-text-editor-row");
  73                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
  74                 $(".node-text-editor").css("height",height+"px");
  75                 that.editor.resize();
  76             };
  77             $( "#dialog" ).on("dialogresize", functionDialogResize);
  78             $( "#dialog" ).one("dialogopen", function(ev) {
  79                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
  80                 if (size) {
  81                     $("#dialog").dialog('option','width',size.width);
  82                     $("#dialog").dialog('option','height',size.height);
  83                     functionDialogResize();
  84                 }
  85             });
  86             $( "#dialog" ).one("dialogclose", function(ev,ui) {
  87                 var height = $( "#dialog" ).dialog('option','height');
  88                 $( "#dialog" ).off("dialogresize",functionDialogResize);
  89             });
  90             this.editor = RED.editor.createEditor({
  91                 id: 'node-input-info-editor',
  92                 mode: 'ace/mode/markdown',
  93                 fontSize: "15pt"
  94             });
  95         console.dir(this.editor);
  96            this.editor.setValue($("#node-input-info").val(),-1);
  97            this.editor.focus();
  98         },
  99 /*
 100         oneditprepare: function() {
 101             $( "#node-input-outputs" ).spinner({
 102                 min:1
 103             });
 104
 105              var comments = $( "#node-input-comments").val();
 106              if(comments != null){
 107                 comments = comments.trim();
 108                 if(comments != ''){
 109                         $("#node-input-btnComments").html("<span style='color:blue;'><b>View Comments</b></span>");
 110                 }
 111              }
 112
 113             function functionDialogResize(ev,ui) {
 114                 $("#node-input-info-editor").css("height",(ui.size.height-235)+"px");
 115             };
 116             $( "#dialog" ).on("dialogresize", functionDialogResize);
 117             $( "#dialog" ).one("dialogopen", function(ev) {
 118                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
 119                 if (size) {
 120                     functionDialogResize(null,{size:size});
 121                 }
 122             });
 123             $( "#dialog" ).one("dialogclose", function(ev,ui) {
 124                 var height = $( "#dialog" ).dialog('option','height');
 125                 $( "#dialog" ).off("dialogresize",functionDialogResize);
 126             });
 127             var that = this;
 128             require(["orion/editor/edit"], function(edit) {
 129                 that.editor = edit({
 130                     parent:document.getElementById('node-input-info-editor'),
 131                     lang:"text",
 132                     showLinesRuler:false,
 133                     showFoldingRuler:false,
 134                     contents: $("#node-input-info").val()
 135                 });
 136                 $("#node-input-name").focus();
 137             });
 138             this.editor = RED.editor.createEditor({
 139                         id: 'node-input-info-editor',
 140                         mode: 'ace/mode/markdown',
 141                         options: {
 142                                 showLineNumbers : false,
 143                                 enableBasicAutocompletion : true,
 144                                 enableSnippets:true,
 145                                 fontSize: "14px"
 146                         }
 147                 });
 148             console.dir(this.editor);
 149             this.editor.setValue($("#node-input-info").val(),-1);
 150             this.editor.focus();
 151
 152         },
 153         */
 154         oneditsave: function() {
 155             $("#node-input-info").val(this.editor.getValue());
 156             delete this.editor;
 157         }
 158     });
 159 </script>