client/templates/nodeeditor.html
author ymh <ymh.work@gmail.com>
Wed, 11 Jan 2017 10:13:49 +0100
changeset 650 b2e22052e9d6
parent 649 2b9c120dba55
permissions -rw-r--r--
improve node title style control display
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
459
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
     1
<% //TODO: change class to id %>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
     2
<h2>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
     3
    <span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
     4
</h2>
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
     5
<p>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
     6
    <label><%-renkan.translate("Title:")%></label>
530
9823b527c3a1 add rich text editor on title
rougeronj
parents: 482
diff changeset
     7
    <% if (options.show_node_editor_title_richtext) { %>
600
e12243191095 correct jquery dependency in renkan renderer + problem with CKEditor + version
ymh <ymh.work@gmail.com>
parents: 530
diff changeset
     8
        <div class="Rk-Edit-Title" contenteditable="true" id="Rk-Edit-Title-<%-node._id%>" ><%=node.title%></div>
530
9823b527c3a1 add rich text editor on title
rougeronj
parents: 482
diff changeset
     9
    <% } else { %>
9823b527c3a1 add rich text editor on title
rougeronj
parents: 482
diff changeset
    10
        <input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
600
e12243191095 correct jquery dependency in renkan renderer + problem with CKEditor + version
ymh <ymh.work@gmail.com>
parents: 530
diff changeset
    11
    <% } %>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
    12
</p>
649
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    13
<% if (options.show_node_title_style) { %>
650
b2e22052e9d6 improve node title style control display
ymh <ymh.work@gmail.com>
parents: 649
diff changeset
    14
    <div class="Rk-Editor-p-title-style Rk-Editor-p">
649
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    15
        <div class="Rk-Editor-p-title-color">
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    16
            <span class="Rk-Editor-Label"><%-renkan.translate("Title color:")%></span>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    17
            <span class="Rk-Edit-Color" style="background: <%-node.title_color%>;">
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    18
                <span class="Rk-Edit-ColorTip"></span>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    19
            </span>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    20
            <%= renkan.colorPicker('Rk-Editor-ColorPicker-Title') %>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    21
        </div>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    22
        <div class="Rk-Editor-p-title-size">
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    23
            <span class="Rk-Editor-Label"><%-renkan.translate("Title size:")%></span>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    24
            <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Title-Size-Down">-</a>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    25
            <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Title-Size-Value"><%-node.title_size.toFixed(1)%></span>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    26
            <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Title-Size-Up">+</a>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    27
        </div>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    28
    </div>
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    29
<% } %> <% if (options.show_node_editor_uri) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    30
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    31
        <label><%-renkan.translate("URI:")%></label>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    32
        <input class="Rk-Edit-URI" type="text" value="<%-node.uri%>" />
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    33
        <a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    34
    </p>
482
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    35
<% } %> <% if (options.change_types) { %>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    36
    <p>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    37
        <label><%-renkan.translate("Types available")%>:</label>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    38
        <select class="Rk-Edit-Type">
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    39
          <% _.each(types, function(type) { %>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    40
            <option class="Rk-Edit-Vocabulary-Property" value="<%- type %>"<% if (node.type === type) { %> selected<% } %>>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    41
                <%- renkan.translate(type.charAt(0).toUpperCase() + type.substring(1)) %>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    42
            </option>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    43
          <% }); %>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    44
        </select>
a55c33989404 add type selector in the node editor
rougeronj
parents: 468
diff changeset
    45
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
    46
<% } %> <% if (options.show_node_editor_description) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    47
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    48
        <label><%-renkan.translate("Description:")%></label>
468
364c367df7fc add rich text editor for description
ymh <ymh.work@gmail.com>
parents: 459
diff changeset
    49
        <% if (options.show_node_editor_description_richtext) { %>
600
e12243191095 correct jquery dependency in renkan renderer + problem with CKEditor + version
ymh <ymh.work@gmail.com>
parents: 530
diff changeset
    50
            <div class="Rk-Edit-Description" contenteditable="true" id="Rk-Edit-Description-<%-node._id%>"><%=node.description%></div>
468
364c367df7fc add rich text editor for description
ymh <ymh.work@gmail.com>
parents: 459
diff changeset
    51
        <% } else { %>
364c367df7fc add rich text editor for description
ymh <ymh.work@gmail.com>
parents: 459
diff changeset
    52
            <textarea class="Rk-Edit-Description"><%=node.description%></textarea>
364c367df7fc add rich text editor for description
ymh <ymh.work@gmail.com>
parents: 459
diff changeset
    53
        <% } %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    54
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
    55
<% } %> <% if (options.show_node_editor_size) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    56
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    57
        <span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span>
459
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    58
        <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Size-Down">-</a>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    59
        <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Size-Value"><%-node.size%></span>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    60
        <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Size-Up">+</a>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    61
    </p>
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    62
<% } %> <% if (options.show_node_editor_style) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    63
    <div class="Rk-Editor-p">
459
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    64
      <% if (options.show_node_editor_style_color) { %>
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    65
      <div id="Rk-Editor-p-color">
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    66
        <span class="Rk-Editor-Label">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    67
        <%-renkan.translate("Node color:")%></span>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    68
        <div class="Rk-Edit-ColorPicker-Wrapper">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    69
            <span class="Rk-Edit-Color" style="background: <%-node.color%>;">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    70
                <span class="Rk-Edit-ColorTip"></span>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    71
            </span>
649
2b9c120dba55 first implementation of node title size and color
ymh <ymh.work@gmail.com>
parents: 600
diff changeset
    72
            <%= renkan.colorPicker('Rk-Editor-ColorPicker-Node') %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    73
            <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    74
        </div>
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    75
      </div>
459
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    76
      <% } %>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    77
      <% if (options.show_node_editor_style_dash) { %>
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    78
      <div id="Rk-Editor-p-dash">
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    79
        <span class="Rk-Editor-Label"><%-renkan.translate("Dash:")%></span>
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    80
        <input type="checkbox" name="Rk-Edit-Dash" class="Rk-Edit-Dash" <%- node.dash %> />
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
    81
      </div>
459
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    82
      <% } %>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    83
      <% if (options.show_node_editor_style_thickness) { %>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    84
      <div id="Rk-Editor-p-thickness">
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    85
          <span class="Rk-Editor-Label"><%-renkan.translate("Thickness:")%></span>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    86
          <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Down">-</a>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    87
          <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Thickness-Value"><%-node.thickness%></span>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    88
          <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Up">+</a>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    89
      </div>
98cae534083d add node and edge stroke width + adjust text + arrow placement + conrol arrow visibility
ymh <ymh.work@gmail.com>
parents: 458
diff changeset
    90
      <% } %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    91
    </div>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
    92
<% } %> <% if (options.show_node_editor_image) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    93
    <div class="Rk-Edit-ImgWrap">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    94
        <div class="Rk-Edit-ImgPreview">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    95
            <img src="<%-node.image || node.image_placeholder%>" />
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    96
            <% if (node.clip_path) { %>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    97
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    98
                    <path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>" />
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
    99
                </svg>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   100
            <% }%>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   101
        </div>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   102
    </div>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   103
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   104
        <label><%-renkan.translate("Image URL:")%></label>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   105
        <div>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   106
            <a class="Rk-Edit-Image-Del" href="#"></a>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   107
            <input class="Rk-Edit-Image" type="text" value='<%-node.image%>' />
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   108
        </div>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   109
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
   110
<% if (options.allow_image_upload) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   111
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   112
        <label><%-renkan.translate("Choose Image File:")%></label>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   113
        <input class="Rk-Edit-Image-File" type="file" accept="image/*" />
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   114
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
   115
<% }%><% } %> <% if (options.show_node_editor_creator && node.has_creator) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   116
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   117
        <span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   118
        <span class="Rk-UserColor" style="background: <%-node.created_by_color%>;"></span>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   119
        <%- shortenText(node.created_by_title, 25) %>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   120
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
   121
<% } %> <% if (options.change_shapes) { %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   122
    <p>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   123
        <label><%-renkan.translate("Shapes available")%>:</label>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   124
        <select class="Rk-Edit-Shape">
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
   125
          <% _.each(shapes, function(shape) { %>
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
   126
            <option class="Rk-Edit-Vocabulary-Property" value="<%- shape %>"<% if (node.shape === shape) { %> selected<% } %>>
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
   127
                <%- renkan.translate(shape.charAt(0).toUpperCase() + shape.substring(1)) %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   128
            </option>
458
423bdf56d103 migrated to style, added dash style to client + small refactoring for shapes + triangle
ymh <ymh.work@gmail.com>
parents: 441
diff changeset
   129
          <% }); %>
434
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   130
        </select>
0d5998b32a7c clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents: 420
diff changeset
   131
    </p>
420
22393cbf4467 export the templates of nodeeditor to html files
rougeronj
parents:
diff changeset
   132
<% } %>