[PE] Add recent shapes into shape menu in toolbar (bug 43485)

apps/common/main/lib/component/DataView.js

@@ -1089,6 +1089,8 @@ define([
                 if (data.keyCode==Common.UI.Keys.RETURN) {
                     if (this.selectedBeforeHideRec) // only for ComboDataView menuPicker
                         rec = this.selectedBeforeHideRec;
+                    if (this.canAddRecents) // only for DaraViewShape
+                        this.addRecentItem(rec);
                     this.trigger('item:click', this, this, rec, e);
                     if (this.parentMenu)
                         this.parentMenu.hide();
@@ -1262,14 +1264,14 @@ define([
     Common.UI.DataViewShape = Common.UI.DataViewSimple.extend(_.extend({
         template: _.template([
             '<div class="dataview inner" style="<%= style %>">',
-                '<% _.each(options.groups, function(group) { %>',
+                '<% _.each(options.groups, function(group, index) { %>',
-                    '<div class="grouped-data <% if (!_.isEmpty(group.groupName)) { %> margin <% } %>" id="<%= group.id %>">',
+                    '<div class="grouped-data <% if (index === 0) { %> recent-group <% } %> " id="<%= group.id %>" <% if (!options.recentShapes && index === 0) { %> style="display: none;" <% } %>>',
                         '<% if (!_.isEmpty(group.groupName)) { %>',
                             '<div class="group-description">',
                                 '<span><%= group.groupName %></span>',
                             '</div>',
                         '<% } %>',
-                        '<div class="group-items-container">',
+                        '<div class="group-items-container <% if (index === 0) { %> recent-items <% } %>">',
                             '<% _.each(group.groupStore.toJSON(), function(item) { %>',
                                 '<% if (!item.id) item.id = Common.UI.getId(); %>',
                                     '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
@@ -1279,12 +1281,42 @@ define([
                 '<% }); %>',
             '</div>'
         ].join('')),
+        initialize : function(options) {
+            var me = this;
+            this.canAddRecents = true;
+
+            me.groups = options.groups;
+
+            // add recent shapes to store
+            var recentStore = new Backbone.Collection([], {model: PE.Models.ShapeModel}),
+                recentArr = options.recentShapes || [],
+                cols = (recentArr.length) > 18 ? 7 : 6,
+                height = Math.ceil(recentArr.length/cols) * 35 + 3,
+                width = 30 * cols;
+
+            me.recentShapes = recentArr;
+
+            recentStore.add(recentArr);
+            me.groups.unshift({
+                groupName   : options.textRecentlyUsed,
+                groupStore  : recentStore,
+                groupWidth  : width,
+                groupHeight : height
+            });
+
+            var store = new Common.UI.DataViewStore();
+
+            _.each(me.groups, function (group) {
+                store.add(group.groupStore.models);
+            });
+
+            options.store = store;
+
+            Common.UI.DataViewSimple.prototype.initialize.call(this, options);
+        },
         onAfterShowMenu: function(e) {
             if (!this.dataViewItems) {
                 var me = this;
-                _.each(me.options.groups, function (group) {
-                    me.store.models = me.store.models.concat(group.groupStore.models);
-                });
                 this.dataViewItems = [];
                 _.each(me.cmpEl.find('div.grouped-data'), function (group, indexGroup) {
                     _.each($(group).find('div.item'), function (item, index) {
@@ -1302,6 +1334,7 @@ define([
                 });
             }
         },
+
         onClickItem: function(e) {
             if ( this.disabled ) return;
 
@@ -1323,6 +1356,76 @@ define([
             if (!this.isSuspendEvents) {
                 this.trigger('item:click', this, view.el, record, e);
             }
+
+            this.addRecentItem(record);
+        },
+        addRecentItem: function (rec) {
+            var me = this;
+            var len = me.recentShapes.length;
+
+            var item = rec.toJSON(),
+                model = {
+                    data: item.data,
+                    tip: item.tip,
+                    allowSelected: item.allowSelected,
+                    selected: false
+                };
+            me.recentShapes.unshift(model);
+            if (me.recentShapes.length > 12) {
+                me.recentShapes.splice(12, 1);
+            }
+
+            me.groups.at(0).groupStore.reset(me.recentShapes);
+
+            var store = new Common.UI.DataViewStore();
+            _.each(me.groups, function (group) {
+                store.add(group.groupStore.models);
+            });
+            me.store = store;
+
+            // add recent item in dataViewItems
+            for (var i = 0; i < len; i++) {
+                var tip = me.dataViewItems[i].el.data('bs.tooltip');
+                if (tip) {
+                    if (tip.dontShow===undefined)
+                        tip.dontShow = true;
+                    (tip.tip()).remove();
+                }
+            }
+            me.dataViewItems = me.dataViewItems.slice(len);
+
+            var template = _.template([
+                '<% _.each(items, function(item) { %>',
+                '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                    '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
+                '<% }) %>'
+            ].join(''));
+            this.cmpEl && this.cmpEl.find('.recent-items').html(template({
+                items: me.recentShapes,
+                itemTemplate: this.itemTemplate,
+                style : this.style
+            }));
+            var recentViewItems = [];
+            _.each($('.recent-group').find('div.item'), function (item, index) {
+                var $item = $(item),
+                    rec = me.recentShapes[index];
+                recentViewItems.push({el: $item, groupIndex: 0, index: index});
+                if (rec.tip) {
+                    $item.tooltip({
+                        title: rec.tip,
+                        placement: 'cursor',
+                        zIndex: me.tipZIndex
+                    });
+                }
+            });
+            me.dataViewItems = recentViewItems.concat(me.dataViewItems);
+            me.fillIndexesArray();
+
+            // add recent item in local storage
+            if (me.recentShapes.length === 1) {
+              $('.recent-group').show();
+            }
+            Common.localStorage.setItem('pe-recent-shapes', JSON.stringify(me.recentShapes));
         }
     }));
 

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

@@ -1694,12 +1694,16 @@ define([
                 });
                 menuShape.addItem(menuitem);
 
+                var recents = Common.localStorage.getItem('pe-recent-shapes');
+
                 var shapePicker = new Common.UI.DataViewShape({
                     el: $('#id-toolbar-menu-insertshape'),
                     itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
                     groups: collection.toJSON(),
                     parentMenu: menuShape,
-                    restoreHeight: true
+                    restoreHeight: true,
+                    textRecentlyUsed: me.textRecentlyUsed,
+                    recentShapes: recents ? JSON.parse(recents) : null
                 });
                 shapePicker.on('item:click', function(picker, item, record, e) {
                     if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
@@ -1912,7 +1916,8 @@ define([
             strMenuNoFill: 'No Fill',
             tipHighlightColor: 'Highlight color',
             txtScheme22: 'New Office',
-            textTabTransitions: 'Transitions'
+            textTabTransitions: 'Transitions',
+            textRecentlyUsed: 'Recently Used'
         }
     }()), PE.Views.Toolbar || {}));
 });