PageRenderTime 48ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/js/shortcode-ui.js

https://gitlab.com/level-level/gravityforms
JavaScript | 762 lines | 525 code | 156 blank | 81 comment | 73 complexity | 1bfd7e1195bb13a50ccc10ddfc23f13a MD5 | raw file
  1. //Props: https://github.com/fusioneng/Shortcake/
  2. var GformShortcodeUI;
  3. ( function (gfShortCodeUI, $) {
  4. var sui = window.GformShortcodeUI = {
  5. models: {},
  6. collections: {},
  7. views: {},
  8. utils: {},
  9. strings: {}
  10. };
  11. /**
  12. * Shortcode Attribute Model.
  13. */
  14. sui.models.ShortcodeAttribute = Backbone.Model.extend({
  15. defaults: {
  16. attr: '',
  17. label: '',
  18. type: '',
  19. section: '',
  20. description: '',
  21. default: '',
  22. value: ''
  23. }
  24. });
  25. /**
  26. * Shortcode Attributes collection.
  27. */
  28. sui.models.ShortcodeAttributes = Backbone.Collection.extend({
  29. model: sui.models.ShortcodeAttribute,
  30. // Deep Clone.
  31. clone: function () {
  32. return new this.constructor(_.map(this.models, function (m) {
  33. return m.clone();
  34. }));
  35. }
  36. });
  37. /**
  38. * Shortcode Model
  39. */
  40. sui.models.Shortcode = Backbone.Model.extend({
  41. defaults: {
  42. label: '',
  43. shortcode_tag: '',
  44. action_tag: '',
  45. attrs: sui.models.ShortcodeAttributes,
  46. },
  47. /**
  48. * Custom set method.
  49. * Handles setting the attribute collection.
  50. */
  51. set: function (attributes, options) {
  52. if (attributes.attrs !== undefined && !( attributes.attrs instanceof sui.models.ShortcodeAttributes )) {
  53. _.each(attributes.attrs, function (attr) {
  54. if (attr.default != undefined) {
  55. attr.value = attr.default
  56. }
  57. });
  58. attributes.attrs = new sui.models.ShortcodeAttributes(attributes.attrs);
  59. }
  60. return Backbone.Model.prototype.set.call(this, attributes, options);
  61. },
  62. /**
  63. * Custom toJSON.
  64. * Handles converting the attribute collection to JSON.
  65. */
  66. toJSON: function (options) {
  67. options = Backbone.Model.prototype.toJSON.call(this, options);
  68. if (options.attrs !== undefined && ( options.attrs instanceof sui.models.ShortcodeAttributes )) {
  69. options.attrs = options.attrs.toJSON();
  70. }
  71. return options;
  72. },
  73. /**
  74. * Custom clone
  75. * Make sure we don't clone a reference to attributes.
  76. */
  77. clone: function () {
  78. var clone = Backbone.Model.prototype.clone.call(this);
  79. clone.set('attrs', clone.get('attrs').clone());
  80. return clone;
  81. },
  82. /**
  83. * Get the shortcode as... a shortcode!
  84. *
  85. * @return string eg [shortcode attr1=value]
  86. */
  87. formatShortcode: function () {
  88. var template, shortcodeAttributes, attrs = [], content, action = '', actions = [];
  89. this.get('attrs').each(function (attr) {
  90. var val = attr.get('value');
  91. var type = attr.get('type');
  92. var def = attr.get('default');
  93. // Skip empty attributes.
  94. // Skip unchecked checkboxes that have don't have default='true'.
  95. if (( ( !val || val.length < 1 ) && type != 'checkbox') || ( type == 'checkbox' && def != 'true' && !val )) {
  96. return;
  97. }
  98. // Handle content attribute as a special case.
  99. if (attr.get('attr') === 'content') {
  100. content = attr.get('value');
  101. } else {
  102. attrs.push(attr.get('attr') + '="' + val + '"');
  103. }
  104. });
  105. template = "[{{ shortcode }} {{ attributes }}]"
  106. if (content && content.length > 0) {
  107. template += "{{ content }}[/{{ shortcode }}]"
  108. }
  109. template = template.replace(/{{ shortcode }}/g, this.get('shortcode_tag'));
  110. template = template.replace(/{{ attributes }}/g, attrs.join(' '));
  111. template = template.replace(/{{ content }}/g, content);
  112. return template;
  113. },
  114. validate: function (shortcode) {
  115. var errors = [];
  116. var id = shortcode.attrs.findWhere({attr: 'id'});
  117. if (!id.get('value')) {
  118. errors.push({'id': sui.strings.pleaseSelectAForm});
  119. }
  120. return errors.length ? errors : null;
  121. }
  122. });
  123. // Shortcode Collection
  124. sui.collections.Shortcodes = Backbone.Collection.extend({
  125. model: sui.models.Shortcode
  126. });
  127. /**
  128. * Single edit shortcode content view.
  129. */
  130. sui.views.editShortcodeForm = wp.Backbone.View.extend({
  131. el: '#gform-shortcode-ui-container',
  132. template: wp.template('gf-shortcode-default-edit-form'),
  133. hasAdvancedValue: false,
  134. events: {
  135. 'click #gform-update-shortcode': 'insertShortcode',
  136. 'click #gform-insert-shortcode': 'insertShortcode',
  137. 'click #gform-cancel-shortcode': 'cancelShortcode'
  138. },
  139. initialize: function () {
  140. _.bindAll(this, 'beforeRender', 'render', 'afterRender');
  141. var t = this;
  142. this.render = _.wrap(this.render, function (render) {
  143. t.beforeRender();
  144. render();
  145. t.afterRender();
  146. return t;
  147. });
  148. this.model.get('attrs').each(function (attr) {
  149. switch (attr.get('section')) {
  150. case 'required':
  151. t.views.add(
  152. '.gf-edit-shortcode-form-required-attrs',
  153. new sui.views.editAttributeField({model: attr, parent: t})
  154. );
  155. break;
  156. case 'standard':
  157. t.views.add(
  158. '.gf-edit-shortcode-form-standard-attrs',
  159. new sui.views.editAttributeField({model: attr, parent: t})
  160. );
  161. break;
  162. default:
  163. t.views.add(
  164. '.gf-edit-shortcode-form-advanced-attrs',
  165. new sui.views.editAttributeField({model: attr, parent: t})
  166. );
  167. if (!t.hasAdvancedVal) {
  168. t.hasAdvancedVal = attr.get('value') !== '';
  169. }
  170. }
  171. });
  172. this.listenTo(this.model, 'change', this.render);
  173. },
  174. beforeRender: function () {
  175. //
  176. },
  177. afterRender: function () {
  178. gform_initialize_tooltips();
  179. $('#gform-insert-shortcode').toggle(this.options.viewMode == 'insert');
  180. $('#gform-update-shortcode').toggle(this.options.viewMode != 'insert');
  181. $('#gf-edit-shortcode-form-advanced-attrs').toggle(this.hasAdvancedVal);
  182. },
  183. insertShortcode: function (e) {
  184. var isValid = this.model.isValid({validate: true});
  185. if (isValid) {
  186. send_to_editor(this.model.formatShortcode());
  187. tb_remove();
  188. this.dispose();
  189. } else {
  190. _.each(this.model.validationError, function (error) {
  191. _.each(error, function (message, attr) {
  192. alert(message);
  193. });
  194. });
  195. }
  196. },
  197. cancelShortcode: function (e) {
  198. tb_remove();
  199. this.dispose();
  200. },
  201. dispose: function () {
  202. this.remove();
  203. $('#gform-shortcode-ui-wrap').append('<div id="gform-shortcode-ui-container"></div>');
  204. }
  205. });
  206. sui.views.editAttributeField = Backbone.View.extend({
  207. tagName: "div",
  208. initialize: function (options) {
  209. this.parent = options.parent;
  210. },
  211. events: {
  212. 'keyup input[type="text"]': 'updateValue',
  213. 'keyup textarea': 'updateValue',
  214. 'change select': 'updateValue',
  215. 'change #gf-shortcode-attr-action': 'updateAction',
  216. 'change input[type=checkbox]': 'updateCheckbox',
  217. 'change input[type=radio]': 'updateValue',
  218. 'change input[type=email]': 'updateValue',
  219. 'change input[type=number]': 'updateValue',
  220. 'change input[type=date]': 'updateValue',
  221. 'change input[type=url]': 'updateValue',
  222. },
  223. render: function () {
  224. this.template = wp.media.template('gf-shortcode-ui-field-' + this.model.get('type'));
  225. return this.$el.html(this.template(this.model.toJSON()));
  226. },
  227. /**
  228. * Input Changed Update Callback.
  229. *
  230. * If the input field that has changed is for content or a valid attribute,
  231. * then it should update the model.
  232. */
  233. updateValue: function (e) {
  234. var $el = $(e.target);
  235. this.model.set('value', $el.val());
  236. },
  237. updateCheckbox: function (e) {
  238. var $el = $(e.target);
  239. var val = $el.prop('checked');
  240. this.model.set('value', val);
  241. },
  242. updateAction: function (e) {
  243. var $el = $(e.target),
  244. val = $el.val();
  245. this.model.set('value', val);
  246. var m = this.parent.model;
  247. var newShortcodeModel = sui.shortcodes.findWhere({shortcode_tag: 'gravityform', action_tag: val});
  248. // copy over values to new shortcode model
  249. var currentAttrs = m.get('attrs');
  250. newShortcodeModel.get('attrs').each(function (attr) {
  251. var newAt = attr.get('attr');
  252. var currentAtModel = currentAttrs.findWhere({attr: newAt});
  253. if (typeof currentAtModel != 'undefined') {
  254. var currentAt = currentAtModel.get('attr');
  255. if (newAt == currentAt) {
  256. var currentVal = currentAtModel.get('value');
  257. attr.set('value', String(currentVal));
  258. }
  259. }
  260. });
  261. $(this.parent.el).empty();
  262. var viewMode = this.parent.options.viewMode;
  263. this.parent.dispose();
  264. this.parent.model.set(newShortcodeModel);
  265. GformShortcodeUI = new sui.views.editShortcodeForm({model: newShortcodeModel, viewMode: viewMode});
  266. GformShortcodeUI.render();
  267. }
  268. });
  269. sui.utils.shortcodeViewConstructor = {
  270. initialize: function( options ) {
  271. this.shortcodeModel = this.getShortcodeModel( this.shortcode );
  272. },
  273. /**
  274. * Get the shortcode model given the view shortcode options.
  275. * Must be a registered shortcode (see sui.shortcodes)
  276. */
  277. getShortcodeModel: function( options ) {
  278. var actionTag = typeof options.attrs.named.action != 'undefined' ? options.attrs.named.action : '';
  279. var shortcodeModel = sui.shortcodes.findWhere({action_tag: actionTag});
  280. if ( ! shortcodeModel ) {
  281. return;
  282. }
  283. var shortcode = shortcodeModel.clone();
  284. shortcode.get('attrs').each(function (attr) {
  285. if (attr.get('attr') in options.attrs.named) {
  286. attr.set('value', options.attrs.named[attr.get('attr')]);
  287. }
  288. if (attr.get('attr') === 'content' && ( 'content' in options )) {
  289. attr.set('value', options.content);
  290. }
  291. });
  292. return shortcode;
  293. },
  294. /**
  295. * Return the preview HTML.
  296. * If empty, fetches data.
  297. *
  298. * @return string
  299. */
  300. getContent : function() {
  301. if ( ! this.content ) {
  302. this.fetch();
  303. }
  304. return this.content;
  305. },
  306. /**
  307. * Fetch preview.
  308. * Async. Sets this.content and calls this.render.
  309. *
  310. * @return undefined
  311. */
  312. fetch : function() {
  313. var self = this;
  314. if ( ! this.fetching ) {
  315. this.fetching = true;
  316. var attr = this.shortcodeModel.get('attrs').findWhere({attr: 'id'});
  317. var formId = attr.get('value');
  318. var data;
  319. data = {
  320. action: 'gf_do_shortcode',
  321. post_id: $('#post_ID').val(),
  322. form_id: formId,
  323. shortcode: this.shortcodeModel.formatShortcode(),
  324. nonce: gfShortcodeUIData.previewNonce
  325. };
  326. $.post(ajaxurl, data).done(function(response) {
  327. self.content = response;
  328. }).fail(function () {
  329. self.content = '<span class="gf_shortcode_ui_error">' + gfShortcodeUIData.strings.errorLoadingPreview + '</span>';
  330. }).always(function () {
  331. delete self.fetching;
  332. self.render();
  333. });
  334. }
  335. },
  336. setLoader: function() {
  337. this.setContent(
  338. '<div class="loading-placeholder">' +
  339. '<div class="dashicons dashicons-feedback"></div>' +
  340. '<div class="wpview-loading"><ins></ins></div>' +
  341. '</div>'
  342. );
  343. },
  344. // Backwards compatability for WP pre-4.2
  345. View: {
  346. overlay: true,
  347. shortcodeHTML: false,
  348. setContent: function (html, option) {
  349. this.getNodes(function (editor, node, content) {
  350. var el = ( option === 'wrap' || option === 'replace' ) ? node : content,
  351. insert = html;
  352. if (_.isString(insert)) {
  353. insert = editor.dom.createFragment(insert);
  354. }
  355. if (option === 'replace') {
  356. editor.dom.replace(insert, el);
  357. } else if (option === 'remove') {
  358. node.parentNode.insertBefore(insert, node.nextSibling);
  359. $(node).remove();
  360. } else {
  361. el.innerHTML = '';
  362. el.appendChild(insert);
  363. }
  364. });
  365. },
  366. initialize: function (options) {
  367. var actionTag = typeof options.shortcode.attrs.named.action != 'undefined' ? options.shortcode.attrs.named.action : '';
  368. var shortcodeModel = sui.shortcodes.findWhere({action_tag: actionTag});
  369. if (!shortcodeModel) {
  370. this.shortcodeHTML = decodeURIComponent(options.encodedText);
  371. this.shortcode = false;
  372. return;
  373. }
  374. var shortcode = shortcodeModel.clone();
  375. shortcode.get('attrs').each(function (attr) {
  376. if (attr.get('attr') in options.shortcode.attrs.named) {
  377. attr.set(
  378. 'value',
  379. options.shortcode.attrs.named[attr.get('attr')]
  380. );
  381. }
  382. if (attr.get('attr') === 'content' && ( 'content' in options.shortcode )) {
  383. attr.set('value', options.shortcode.content);
  384. }
  385. });
  386. this.shortcode = shortcode;
  387. },
  388. loadingPlaceholder: function () {
  389. return '' +
  390. '<div class="loading-placeholder">' +
  391. '<div class="dashicons dashicons-feedback"></div>' +
  392. '<div class="wpview-loading"><ins></ins></div>' +
  393. '</div>';
  394. },
  395. /**
  396. * @see wp.mce.View.getEditors
  397. */
  398. getEditors: function (callback) {
  399. var editors = [];
  400. _.each(tinymce.editors, function (editor) {
  401. if (editor.plugins.wpview) {
  402. if (callback) {
  403. callback(editor);
  404. }
  405. editors.push(editor);
  406. }
  407. }, this);
  408. return editors;
  409. },
  410. /**
  411. * @see wp.mce.View.getNodes
  412. */
  413. getNodes: function (callback) {
  414. var nodes = [],
  415. self = this;
  416. this.getEditors(function (editor) {
  417. $(editor.getBody())
  418. .find('[data-wpview-text="' + self.encodedText + '"]')
  419. .each(function (i, node) {
  420. if (callback) {
  421. callback(editor, node, $(node).find('.wpview-content').get(0));
  422. }
  423. nodes.push(node);
  424. });
  425. });
  426. return nodes;
  427. },
  428. /**
  429. * Set the HTML. Modeled after wp.mce.View.setIframes
  430. *
  431. */
  432. setIframes: function (body) {
  433. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  434. if (body.indexOf('<script') === -1) {
  435. this.shortcodeHTML = body;
  436. this.render();
  437. return;
  438. }
  439. this.getNodes(function (editor, node, content) {
  440. var dom = editor.dom,
  441. styles = '',
  442. bodyClasses = editor.getBody().className || '',
  443. iframe, iframeDoc, i, resize;
  444. content.innerHTML = '';
  445. var head = '';
  446. if (!wp.mce.views.sandboxStyles) {
  447. tinymce.each(dom.$('link[rel="stylesheet"]', editor.getDoc().head), function (link) {
  448. if (link.href && link.href.indexOf('skins/lightgray/content.min.css') === -1 &&
  449. link.href.indexOf('skins/wordpress/wp-content.css') === -1) {
  450. styles += dom.getOuterHTML(link) + '\n';
  451. }
  452. });
  453. wp.mce.views.sandboxStyles = styles;
  454. } else {
  455. styles = wp.mce.views.sandboxStyles;
  456. }
  457. // Seems Firefox needs a bit of time to insert/set the view nodes, or the iframe will fail
  458. // especially when switching Text => Visual.
  459. setTimeout(function () {
  460. iframe = dom.add(content, 'iframe', {
  461. src: tinymce.Env.ie ? 'javascript:""' : '',
  462. frameBorder: '0',
  463. id: 'gf-shortcode-preview-' + new Date().getTime(),
  464. allowTransparency: 'true',
  465. scrolling: 'no',
  466. 'class': 'wpview-sandbox',
  467. style: {
  468. width: '100%',
  469. display: 'block'
  470. }
  471. });
  472. iframeDoc = iframe.contentWindow.document;
  473. iframeDoc.open();
  474. iframeDoc.write(
  475. '<!DOCTYPE html>' +
  476. '<html>' +
  477. '<head>' +
  478. '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
  479. head +
  480. styles +
  481. '<style>' +
  482. 'html {' +
  483. 'background: transparent;' +
  484. 'padding: 0;' +
  485. 'margin: 0;' +
  486. '}' +
  487. 'body#wpview-iframe-sandbox {' +
  488. 'background: transparent;' +
  489. 'padding: 1px 0 !important;' +
  490. 'margin: -1px 0 0 !important;' +
  491. '}' +
  492. 'body#wpview-iframe-sandbox:before,' +
  493. 'body#wpview-iframe-sandbox:after {' +
  494. 'display: none;' +
  495. 'content: "";' +
  496. '}' +
  497. '</style>' +
  498. '</head>' +
  499. '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +
  500. body +
  501. '</body>' +
  502. '</html>'
  503. );
  504. iframeDoc.close();
  505. resize = function () {
  506. // Make sure the iframe still exists.
  507. iframe.contentWindow && $(iframe).height($(iframeDoc.body).height());
  508. };
  509. if (MutationObserver) {
  510. new MutationObserver(_.debounce(function () {
  511. resize();
  512. }, 100))
  513. .observe(iframeDoc.body, {
  514. attributes: true,
  515. childList: true,
  516. subtree: true
  517. });
  518. } else {
  519. for (i = 1; i < 6; i++) {
  520. setTimeout(resize, i * 700);
  521. }
  522. }
  523. resize();
  524. editor.on('wp-body-class-change', function () {
  525. iframeDoc.body.className = editor.getBody().className;
  526. });
  527. }, 50);
  528. });
  529. },
  530. /**
  531. * Render the shortcode
  532. *
  533. * To ensure consistent rendering - this makes an ajax request to the admin and displays.
  534. * @return string html
  535. */
  536. getHtml: function () {
  537. if (!this.shortcode) {
  538. this.setContent(this.shortcodeHTML, 'remove');
  539. return;
  540. }
  541. var data;
  542. if (false === this.shortcodeHTML) {
  543. var attr = this.shortcode.get('attrs').findWhere({attr: 'id'});
  544. var formId = attr.get('value');
  545. data = {
  546. action: 'gf_do_shortcode',
  547. post_id: $('#post_ID').val(),
  548. form_id: formId,
  549. shortcode: this.shortcode.formatShortcode(),
  550. nonce: gfShortcodeUIData.previewNonce
  551. };
  552. $.post(ajaxurl, data, $.proxy(this.setIframes, this));
  553. }
  554. return this.shortcodeHTML;
  555. },
  556. },
  557. edit : function( shortcodeString ) {
  558. var currentShortcode;
  559. // Backwards compatability for WP pre-4.2
  560. if ( 'object' === typeof( shortcodeString ) ) {
  561. shortcodeString = decodeURIComponent( jQuery(shortcodeString).attr('data-wpview-text') );
  562. }
  563. currentShortcode = wp.shortcode.next('gravityform', shortcodeString);
  564. if ( currentShortcode ) {
  565. var action = currentShortcode.shortcode.attrs.named.action ? currentShortcode.shortcode.attrs.named.action : '';
  566. var defaultShortcode = sui.shortcodes.findWhere({
  567. shortcode_tag: currentShortcode.shortcode.tag,
  568. action_tag: action
  569. });
  570. if (!defaultShortcode) {
  571. return;
  572. }
  573. var currentShortcodeModel = defaultShortcode.clone();
  574. // convert attribute strings to object.
  575. _.each(currentShortcode.shortcode.attrs.named, function (val, key) {
  576. attr = currentShortcodeModel.get('attrs').findWhere({attr: key});
  577. if (attr) {
  578. attr.set('value', val);
  579. }
  580. });
  581. var idAttr = currentShortcodeModel.get('attrs').findWhere({attr: 'id'});
  582. var formId = idAttr.get('value');
  583. $('#add_form_id').val(formId);
  584. GformShortcodeUI = new sui.views.editShortcodeForm({model: currentShortcodeModel, viewMode: 'update'});
  585. GformShortcodeUI.render();
  586. $('#gform-insert-shortcode').hide();
  587. $('#gform-update-shortcode').show();
  588. tb_show("Edit Gravity Form", "#TB_inline?inlineId=select_gravity_form&width=753&height=686", "");
  589. }
  590. },
  591. };
  592. $(document).ready(function () {
  593. sui.strings = gfShortcodeUIData.strings;
  594. sui.shortcodes = new sui.collections.Shortcodes( gfShortcodeUIData.shortcodes );
  595. if( ! gfShortcodeUIData.previewDisabled && typeof wp.mce != 'undefined'){
  596. wp.mce.views.register( 'gravityform', $.extend(true, {}, sui.utils.shortcodeViewConstructor) );
  597. }
  598. $(document).on('click', '.gform_media_link', function () {
  599. sui.shortcodes = new sui.collections.Shortcodes(gfShortcodeUIData.shortcodes);
  600. var shortcode = sui.shortcodes.findWhere({shortcode_tag: 'gravityform', action_tag: ''});
  601. GformShortcodeUI = new sui.views.editShortcodeForm({model: shortcode, viewMode: 'insert'});
  602. GformShortcodeUI.render();
  603. tb_show("Insert Gravity Form", "#TB_inline?inlineId=select_gravity_form&width=753&height=686", "");
  604. });
  605. });
  606. }(window.gfShortcodeUI = window.gfShortcodeUI || {}, jQuery));