[DE] Add smartarts

apps/common/main/lib/util/define.js

@@ -1355,4 +1355,36 @@ define(function(){ 'use strict';
         }
     })(), Common.define.effectData || {});
 
+    Common.define.smartArt = _.extend( new(function() {
+        return {
+            textList: 'List',
+            textProcess: 'Process',
+            textCycle: 'Cycle',
+            textHierarchy: 'Hierarchy',
+            textRelationship: 'Relationship',
+            textMatrix: 'Matrix',
+            textPyramid: 'Pyramid',
+
+            getSmartArtGroupData: function(headername) {
+                return [
+                    {id: 'menu-smart-art-group-list', caption: this.textList},
+                    {id: 'menu-smart-art-group-process', caption: this.textProcess},
+                    {id: 'menu-smart-art-group-cycle', caption: this.textCycle},
+                    {id: 'menu-smart-art-group-hierarchy', caption: this.textHierarchy},
+                    {id: 'menu-smart-art-group-relationship', caption: this.textRelationship},
+                    {id: 'menu-smart-art-group-matrix', caption: this.textMatrix},
+                    {id: 'menu-smart-art-group-pyramid', caption: this.textPyramid}
+                ];
+            },
+
+            getSmartArtData: function() {
+                return [
+                    { group: 'menu-smart-art-group-list', type: Asc.c_oAscChartTypeSettings.barNormal, /*tip: this.*/},
+
+
+                ];
+            },
+        }
+    })(), Common.define.smartArt || {});
+
 });

apps/documenteditor/main/app/controller/Toolbar.js

@@ -118,7 +118,8 @@ define([
                     'change:compact'    : this.onClickChangeCompact,
                     'home:open'         : this.onHomeOpen,
                     'add:chart'         : this.onSelectChart,
-                    'insert:textart'    : this.onInsertTextart
+                    'insert:textart'    : this.onInsertTextart,
+                    'generate:smartart' : this.generateSmartArt,
                 },
                 'FileMenu': {
                     'menu:hide': this.onFileMenu.bind(this, 'hide'),
@@ -425,6 +426,8 @@ define([
                 Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this));
                 Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
                 Common.NotificationCenter.on('dropcap:settings', _.bind(this.onDropCapAdvancedClick, this));
+                this.api.asc_registerCallback('asc_onAddSmartArtPreview', _.bind(this.onApiAddSmartArtPreview, this));
+                this.api.asc_registerCallback('asc_onEndSmartArtPreview', _.bind(this.onApiEndSmartArtPreview, this));
             } else if (this.mode.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObjectRestrictedEdit, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
@@ -3315,6 +3318,38 @@ define([
             })).show();
         },
 
+        generateSmartArt: function () {
+            this.api.asc_generateSmartArtPreviews();
+        },
+
+        onApiAddSmartArtPreview: function (previews) {
+            if (!this.smartArtPreviewStore) {
+                this.smartArtPreviewStore = [];
+            }
+            previews.forEach(_.bind(function (preview) {
+                var name = preview.asc_getName();
+                this.smartArtPreviewStore.push({
+                    name: name,
+                    imageUrl: preview.asc_getImage(),
+                    tip: name
+                });
+            }, this));
+        },
+
+        onApiEndSmartArtPreview: function () {
+            //console.log('_____________');
+            //console.log('Asc.c_oAscSmartArtTypes', Asc.c_oAscSmartArtTypes);
+            //console.log('Asc.c_oAscSmartArtNameTypes', Asc.c_oAscSmartArtNameTypes);
+
+            var menuPicker = this.toolbar.btnInsertSmartArt.menu.items[0].menuPicker;
+            menuPicker.setStore(new Common.UI.DataViewStore(this.smartArtPreviewStore));
+            menuPicker.onResetItems();
+
+            console.log(this.smartArtPreviewStore);
+
+            console.log('end');
+        },
+
         textEmptyImgUrl                            : 'You need to specify image URL.',
         textWarning                                : 'Warning',
         textFontSizeErr                            : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 300',

apps/documenteditor/main/app/template/Toolbar.template

@@ -103,6 +103,7 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insimage"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-inschart"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-insshape"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>
                 </div>
                 <div class="separator long"></div>
                 <div class="group">

apps/documenteditor/main/app/view/Toolbar.js

@@ -780,6 +780,21 @@ define([
                     });
                     this.paragraphControls.push(this.btnInsertShape);
 
+                    this.btnInsertSmartArt = new Common.UI.Button({
+                        id: 'tlbtn-insertsmartart',
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon',
+                        lock: [_set.paragraphLock, _set.headerLock, _set.inEquation, _set.controlPlain,  _set.contentLock,  _set.inFootnote, _set.previewReviewMode, _set.viewFormMode,
+                            _set.lostConnect, _set.disableOnStart],
+                        caption: me.capBtnInsSmartArt,
+                        enableToggle: true,
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnInsertSmartArt);
+
                     this.btnInsertEquation = new Common.UI.Button({
                         id: 'tlbtn-insertequation',
                         cls: 'btn-toolbar x-huge icon-top',
@@ -1716,6 +1731,7 @@ define([
                 _injectComponent('#slot-btn-datetime', this.btnInsDateTime);
                 _injectComponent('#slot-btn-blankpage', this.btnBlankPage);
                 _injectComponent('#slot-btn-insshape', this.btnInsertShape);
+                _injectComponent('#slot-btn-inssmartart', this.btnInsertSmartArt);
                 _injectComponent('#slot-btn-insequation', this.btnInsertEquation);
                 _injectComponent('#slot-btn-inssymbol', this.btnInsertSymbol);
                 _injectComponent('#slot-btn-pageorient', this.btnPageOrient);
@@ -2015,6 +2031,7 @@ define([
                 this.btnInsDateTime.updateHint(this.tipDateTime);
                 this.btnBlankPage.updateHint(this.tipBlankPage);
                 this.btnInsertShape.updateHint(this.tipInsertShape);
+                this.btnInsertSmartArt.updateHint(this.tipInsertSmartArt);
                 this.btnInsertEquation.updateHint(this.tipInsertEquation);
                 this.btnInsertSymbol.updateHint(this.tipInsertSymbol);
                 this.btnDropCap.updateHint(this.tipDropCap);
@@ -2199,6 +2216,43 @@ define([
                 };
                 this.btnInsertChart.menu.on('show:before', onShowBefore);
 
+                this.btnInsertSmartArt.setMenu(new Common.UI.Menu({
+                    items: []
+                }));
+
+                var smartArtGroups = Common.define.smartArt.getSmartArtGroupData();
+                smartArtGroups.forEach(_.bind(function (item, index) {
+                    this.btnInsertSmartArt.menu.addItem({
+                        caption: item.caption,
+                        value: item.id,
+                        menu: new Common.UI.Menu({
+                            items: [
+                                {template: _.template('<div id="' + item.id + '" class="menu-add-smart-art" style="width: 300px; height: 500px;"></div>')}
+                            ],
+                            menuAlign: 'tl-tr',
+                        })});
+                    console.log(this.btnInsertSmartArt.menu.items[index]);
+                    this.btnInsertSmartArt.menu.items[index].menuPicker = new Common.UI.DataViewSimple({
+                        el: $('#' + item.id),
+                        parentMenu: this.btnInsertSmartArt.menu.items[index].menu,
+                        itemTemplate: _.template([
+                            '<div>',
+                            '<img src="<%= imageUrl %>" width="' + 50 + '" height="' + 50 + '" + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
+                            '</div>'
+                        ].join('')),
+                        //store: new Common.UI.DataViewStore(),
+                        delayRenderTips: true,
+                        scrollAlwaysVisible: true
+                    });
+                    this.btnInsertSmartArt.menu.items[index].menuPicker.on('item:click', _.bind(function (picker, item, record, e) {
+                        console.log(record.name);
+                    }, this));
+                }, this));
+
+                $('#menu-smart-art-group-list').css('height', '700px');
+
+                this.fireEvent('generate:smartart');
+
                 var onShowBeforeTextArt = function (menu) {
                     var collection = DE.getCollection('Common.Collections.TextArt');
                     if (collection.length<1)
@@ -2688,6 +2742,7 @@ define([
             tipBack: 'Back',
             tipInsertShape: 'Insert Autoshape',
             tipInsertEquation: 'Insert Equation',
+            tipInsertSmartArt: 'Insert SmartArt',
             mniImageFromFile: 'Image from File',
             mniImageFromUrl: 'Image from URL',
             mniCustomTable: 'Insert Custom Table',
@@ -2789,6 +2844,7 @@ define([
             capBtnPageOrient: 'Orientation',
             capBtnMargins: 'Margins',
             capBtnPageSize: 'Size',
+            capBtnInsSmartArt: 'SmartArt',
             tipImgAlign: 'Align objects',
             tipImgGroup: 'Group objects',
             tipImgWrapping: 'Wrap text',