GPQAPP

1
(function(factory) {
2
  if (typeof define === 'function' && define.amd) {
3
    // AMD. Register as an anonymous module.
4
    define(['jquery'], factory);
5
  } else if (typeof module === 'object' && module.exports) {
6
    // Node/CommonJS
7
    module.exports = factory(require('jquery'));
8
  } else {
9
    // Browser globals
10
    factory(window.jQuery);
11
  }
12
}(function($) {
13
  // pull in some summernote core functions
14
  var ui = $.summernote.ui;
15
  var dom = $.summernote.dom;
16

17
  // define the popover plugin
18
  var DataBasicPlugin = function(context) {
19
    var self = this;
20
    var options = context.options;
21
    var lang = options.langInfo;
22

23
    self.icon = '<i class="fa fa-object-group"></i>';
24

25
    // add context menu button for dialog
26
    context.memo('button.databasic', function() {
27
      return ui.button({
28
        contents: self.icon,
29
        tooltip: lang.databasic.insert,
30
        click: context.createInvokeHandler('databasic.showDialog'),
31
      }).render();
32
    });
33

34
    // add popover edit button
35
    context.memo('button.databasicDialog', function() {
36
      return ui.button({
37
        contents: self.icon,
38
        tooltip: lang.databasic.edit,
39
        click: context.createInvokeHandler('databasic.showDialog'),
40
      }).render();
41
    });
42

43
    //  add popover size buttons
44
    context.memo('button.databasicSize100', function() {
45
      return ui.button({
46
        contents: '<span class="note-fontsize-10">100%</span>',
47
        tooltip: lang.image.resizeFull,
48
        click: context.createInvokeHandler('editor.resize', '1'),
49
      }).render();
50
    });
51
    context.memo('button.databasicSize50', function() {
52
      return ui.button({
53
        contents: '<span class="note-fontsize-10">50%</span>',
54
        tooltip: lang.image.resizeHalf,
55
        click: context.createInvokeHandler('editor.resize', '0.5'),
56
      }).render();
57
    });
58
    context.memo('button.databasicSize25', function() {
59
      return ui.button({
60
        contents: '<span class="note-fontsize-10">25%</span>',
61
        tooltip: lang.image.resizeQuarter,
62
        click: context.createInvokeHandler('editor.resize', '0.25'),
63
      }).render();
64
    });
65

66
    self.events = {
67
      'summernote.init': function(we, e) {
68
        // update existing containers
69
        $('data.ext-databasic', e.editable).each(function() { self.setContent($(this)); });
70
        // TODO: make this an undo snapshot...
71
      },
72
      'summernote.keyup summernote.mouseup summernote.change summernote.scroll': function() {
73
        self.update();
74
      },
75
      'summernote.dialog.shown': function() {
76
        self.hidePopover();
77
      },
78
    };
79

80
    self.initialize = function() {
81
      // create dialog markup
82
      var $container = options.dialogsInBody ? $(document.body) : context.layoutInfo.editor;
83

84
      var body = '<div class="form-group row-fluid">' +
85
          '<label>' + lang.databasic.testLabel + '</label>' +
86
          '<input class="ext-databasic-test form-control" type="text" />' +
87
          '</div>';
88
      var footer = '<button href="#" class="btn btn-primary ext-databasic-save">' + lang.databasic.insert + '</button>';
89

90
      self.$dialog = ui.dialog({
91
        title: lang.databasic.name,
92
        fade: options.dialogsFade,
93
        body: body,
94
        footer: footer,
95
      }).render().appendTo($container);
96

97
      // create popover
98
      self.$popover = ui.popover({
99
        className: 'ext-databasic-popover',
100
      }).render().appendTo('body');
101
      var $content = self.$popover.find('.popover-content');
102

103
      context.invoke('buttons.build', $content, options.popover.databasic);
104
    };
105

106
    self.destroy = function() {
107
      self.$popover.remove();
108
      self.$popover = null;
109
      self.$dialog.remove();
110
      self.$dialog = null;
111
    };
112

113
    self.update = function() {
114
      // Prevent focusing on editable when invoke('code') is executed
115
      if (!context.invoke('editor.hasFocus')) {
116
        self.hidePopover();
117
        return;
118
      }
119

120
      var rng = context.invoke('editor.createRange');
121
      var visible = false;
122

123
      if (rng.isOnData()) {
124
        var $data = $(rng.sc).closest('data.ext-databasic');
125

126
        if ($data.length) {
127
          var pos = dom.posFromPlaceholder($data[0]);
128

129
          self.$popover.css({
130
            display: 'block',
131
            left: pos.left,
132
            top: pos.top,
133
          });
134

135
          // save editor target to let size buttons resize the container
136
          context.invoke('editor.saveTarget', $data[0]);
137

138
          visible = true;
139
        }
140
      }
141

142
      // hide if not visible
143
      if (!visible) {
144
        self.hidePopover();
145
      }
146
    };
147

148
    self.hidePopover = function() {
149
      self.$popover.hide();
150
    };
151

152
    // define plugin dialog
153
    self.getInfo = function() {
154
      var rng = context.invoke('editor.createRange');
155

156
      if (rng.isOnData()) {
157
        var $data = $(rng.sc).closest('data.ext-databasic');
158

159
        if ($data.length) {
160
          // Get the first node on range(for edit).
161
          return {
162
            node: $data,
163
            test: $data.attr('data-test'),
164
          };
165
        }
166
      }
167

168
      return {};
169
    };
170

171
    self.setContent = function($node) {
172
      $node.html('<p contenteditable="false">' + self.icon + ' ' + lang.databasic.name + ': ' +
173
        $node.attr('data-test') + '</p>');
174
    };
175

176
    self.updateNode = function(info) {
177
      self.setContent(info.node
178
        .attr('data-test', info.test));
179
    };
180

181
    self.createNode = function(info) {
182
      var $node = $('<data class="ext-databasic"></data>');
183

184
      if ($node) {
185
        // save node to info structure
186
        info.node = $node;
187
        // insert node into editor dom
188
        context.invoke('editor.insertNode', $node[0]);
189
      }
190

191
      return $node;
192
    };
193

194
    self.showDialog = function() {
195
      var info = self.getInfo();
196
      var newNode = !info.node;
197
      context.invoke('editor.saveRange');
198

199
      self
200
        .openDialog(info)
201
        .then(function(dialogInfo) {
202
          // [workaround] hide dialog before restore range for IE range focus
203
          ui.hideDialog(self.$dialog);
204
          context.invoke('editor.restoreRange');
205

206
          // insert a new node
207
          if (newNode) {
208
            self.createNode(info);
209
          }
210

211
          // update info with dialog info
212
          $.extend(info, dialogInfo);
213

214
          self.updateNode(info);
215
        })
216
        .fail(function() {
217
          context.invoke('editor.restoreRange');
218
        });
219
    };
220

221
    self.openDialog = function(info) {
222
      return $.Deferred(function(deferred) {
223
        var $inpTest = self.$dialog.find('.ext-databasic-test');
224
        var $saveBtn = self.$dialog.find('.ext-databasic-save');
225
        var onKeyup = function(event) {
226
          if (event.keyCode === 13) {
227
            $saveBtn.trigger('click');
228
          }
229
        };
230

231
        ui.onDialogShown(self.$dialog, function() {
232
          context.triggerEvent('dialog.shown');
233

234
          $inpTest.val(info.test).on('input', function() {
235
            ui.toggleBtn($saveBtn, $inpTest.val());
236
          }).trigger('focus').on('keyup', onKeyup);
237

238
          $saveBtn
239
            .text(info.node ? lang.databasic.edit : lang.databasic.insert)
240
            .click(function(event) {
241
              event.preventDefault();
242

243
              deferred.resolve({ test: $inpTest.val() });
244
            });
245

246
          // init save button
247
          ui.toggleBtn($saveBtn, $inpTest.val());
248
        });
249

250
        ui.onDialogHidden(self.$dialog, function() {
251
          $inpTest.off('input keyup');
252
          $saveBtn.off('click');
253

254
          if (deferred.state() === 'pending') {
255
            deferred.reject();
256
          }
257
        });
258

259
        ui.showDialog(self.$dialog);
260
      });
261
    };
262
  };
263

264
  // Extends summernote
265
  $.extend(true, $.summernote, {
266
    plugins: {
267
      databasic: DataBasicPlugin,
268
    },
269

270
    options: {
271
      popover: {
272
        databasic: [
273
          ['databasic', ['databasicDialog', 'databasicSize100', 'databasicSize50', 'databasicSize25']],
274
        ],
275
      },
276
    },
277

278
    // add localization texts
279
    lang: {
280
      'en-US': {
281
        databasic: {
282
          name: 'Basic Data Container',
283
          insert: 'insert basic data container',
284
          edit: 'edit basic data container',
285
          testLabel: 'test input',
286
        },
287
      },
288
    },
289

290
  });
291
}));
292