Completed
Pull Request — develop (#179)
by Wachter
14:46
created

main.js ➔ ... ➔ .orderPages   B

Complexity

Conditions 3
Paths 3

Size

Total Lines 32

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 3
c 0
b 0
f 0
nc 3
nop 0
dl 0
loc 32
rs 8.8571
1
/*
2
 * This file is part of Sulu.
3
 *
4
 * (c) MASSIVE ART WebServices GmbH
5
 *
6
 * This source file is subject to the MIT license that is bundled
7
 * with this source code in the file LICENSE.
8
 */
9
10
define([
11
    'jquery',
12
    'underscore',
13
    'config',
14
    'services/husky/util',
15
    'services/suluarticle/article-manager',
16
    'services/suluarticle/article-router',
17
    'sulusecurity/services/user-manager',
18
    'sulusecurity/services/security-checker',
19
    'sulucontent/components/copy-locale-overlay/main',
20
    'sulucontent/components/open-ghost-overlay/main',
21
    'services/sulucontent/smart-content-manager',
22
    './adapter/article',
23
    './adapter/article-page'
24
], function($, _, config, Util, ArticleManager, ArticleRouter, UserManager, SecurityChecker, CopyLocale, OpenGhost, SmartContentManager, Article, ArticlePage) {
25
26
    'use strict';
27
28
    var constants = {
29
            headerRightSelector: '.right-container'
30
        },
31
        errorCodes = {
0 ignored issues
show
Unused Code introduced by
The variable errorCodes seems to be never used. Consider removing it.
Loading history...
32
            resourceLocatorAlreadyExists: 1103
33
        };
34
35
    return {
36
37
        defaults: {
38
            options: {
39
                page: 1,
40
                config: {}
41
            },
42
43
            templates: {
44
                url: '/admin/api/articles<% if (!!id) { %>/<%= id %><% } %>?locale=<%= locale %>',
45
                pageSwitcher: [
46
                    '<div class="page-changer">',
47
                    '   <span class="title"><%= label %></span>',
48
                    '   <span class="dropdown-toggle"></span>',
49
                    '</div>'
50
                ].join('')
51
            },
52
53
            translations: {
54
                headline: 'sulu_article.edit.title',
55
                draftLabel: 'sulu-document-manager.draft-label',
56
                removeDraft: 'sulu-content.delete-draft',
57
                unpublish: 'sulu-document-manager.unpublish',
58
                unpublishConfirmTextNoDraft: 'sulu-content.unpublish-confirm-text-no-draft',
59
                unpublishConfirmTextWithDraft: 'sulu-content.unpublish-confirm-text-with-draft',
60
                unpublishConfirmTitle: 'sulu-content.unpublish-confirm-title',
61
                deleteDraftConfirmTitle: 'sulu-content.delete-draft-confirm-title',
62
                deleteDraftConfirmText: 'sulu-content.delete-draft-confirm-text',
63
                copy: 'sulu_article.edit.copy',
64
                deletePage: 'sulu_article.edit.delete_page',
65
                pageOf: 'sulu_article.edit.page-of',
66
                newPage: 'sulu_article.edit.new-page',
67
                orderPage: 'sulu_article.edit.order-page',
68
                page: 'sulu_article.edit.page',
69
                openGhostOverlay: {
70
                    info: 'sulu_article.settings.open-ghost-overlay.info',
71
                    new: 'sulu_article.settings.open-ghost-overlay.new',
72
                    copy: 'sulu_article.settings.open-ghost-overlay.copy',
73
                    ok: 'sulu_article.settings.open-ghost-overlay.ok'
74
                },
75
                copyLocaleOverlay: {
76
                    info: 'sulu_article.settings.copy-locale-overlay.info'
77
                }
78
            }
79
        },
80
81
        layout: function(){
82
            return {
83
                navigation: {
84
                    collapsed: true
85
                },
86
                content: {
87
                    shrinkable: !!this.options.id
88
                },
89
                sidebar: (!!this.options.id) ? 'max' : false
90
            };
91
        },
92
93
        header: function() {
94
            var buttons = {}, editDropdown = {}, saveDropdown = {};
95
96
            if (SecurityChecker.hasPermission(this.data, 'edit')) {
97
                saveDropdown.saveDraft = {};
98
99
                if (SecurityChecker.hasPermission(this.data, 'live')) {
100
                    saveDropdown.savePublish = {};
101
                    saveDropdown.publish = {};
102
                }
103
104
                if (!!config.has('sulu_automation.enabled')) {
105
                    saveDropdown.automationInfo = {
106
                        options: {
107
                            entityId: this.options.id,
108
                            entityClass: 'Sulu\\Bundle\\ArticleBundle\\Document\\ArticleDocument',
109
                            handlerClass: [
110
                                'Sulu\\Bundle\\ContentBundle\\Automation\\DocumentPublishHandler',
111
                                'Sulu\\Bundle\\ContentBundle\\Automation\\DocumentUnpublishHandler'
112
                            ]
113
                        }
114
                    };
115
                }
116
117
                buttons.save = {
118
                    parent: 'saveWithDraft',
119
                    options: {
120
                        callback: function() {
121
                            this.sandbox.emit('sulu.toolbar.save', 'publish');
122
                        }.bind(this),
123
                        dropdownItems: saveDropdown
124
                    }
125
                };
126
127
                buttons.template = {
128
                    options: {
129
                        dropdownOptions: {
130
                            url: '/admin/articles/templates?type=' + (this.options.type || this.data.articleType),
131
                            callback: function(item) {
132
                                this.template = item.template;
133
                                this.sandbox.emit('sulu.tab.template-change', item);
134
                                this.setHeaderBar();
135
                            }.bind(this)
136
                        }
137
                    }
138
                };
139
            }
140
141
            if (SecurityChecker.hasPermission(this.data, 'live')) {
142
                editDropdown.unpublish = {
143
                    options: {
144
                        title: this.translations.unpublish,
145
                        disabled: !this.data.published,
146
                        callback: this.unpublish.bind(this)
147
                    }
148
                };
149
150
                editDropdown.divider = {
151
                    options: {
152
                        divider: true
153
                    }
154
                };
155
            }
156
157
            if (SecurityChecker.hasPermission(this.data, 'delete')) {
158
                editDropdown.delete = {
159
                    options: {
160
                        disabled: !this.options.id,
161
                        callback: this.deleteArticle.bind(this)
162
                    }
163
                };
164
165
                editDropdown.deletePage = {
166
                    options: {
167
                        title: this.translations.deletePage,
168
                        disabled: (!this.options.page || this.options.page === 1),
169
                        callback: this.deleteArticlePage.bind(this)
170
                    }
171
                };
172
            }
173
174
            editDropdown.copyLocale = {
175
                options: {
176
                    title: this.sandbox.translate('toolbar.copy-locale'),
177
                        callback: function() {
178
                        CopyLocale.startCopyLocalesOverlay.call(
179
                            this,
180
                            this.translations.copyLocaleOverlay
181
                        ).then(function(newLocales) {
182
                            // reload form when the current locale is in newLocales
183
                            if (_.contains(newLocales, this.options.locale)) {
184
                                this.toEdit(this.options.locale);
185
186
                                return;
187
                            }
188
189
                            // save new created locales to data and show success label
190
                            this.data.concreteLanguages = _.uniq(this.data.concreteLanguages.concat(newLocales));
191
                            this.sandbox.emit('sulu.labels.success.show', 'labels.success.copy-locale-desc', 'labels.success');
192
                        }.bind(this));
193
                    }.bind(this)
194
                }
195
            };
196
197
            if (SecurityChecker.hasPermission(this.data, 'edit')) {
198
                editDropdown.copy = {
199
                    options: {
200
                        title: this.translations.copy,
201
                        callback: this.copy.bind(this)
202
                    }
203
                };
204
            }
205
206
            if (!this.sandbox.util.isEmpty(editDropdown)) {
207
                buttons.edit = {
208
                    options: {
209
                        dropdownItems: editDropdown
210
                    }
211
                };
212
            }
213
214
            buttons.statePublished = {};
215
            buttons.stateTest = {};
216
217
            return {
218
                tabs: {
219
                    url: '/admin/content-navigations?alias=article&id=' + this.options.id + '&locale=' + this.options.locale + (this.options.page ? '&page=' + this.options.page : ''),
220
                    options: {
221
                        data: function() {
222
                            return this.sandbox.util.deepCopy(this.data);
223
                        }.bind(this),
224
                        url: function() {
225
                            return this.templates.url({id: this.options.id, locale: this.options.locale});
226
                        }.bind(this),
227
                        config: this.options.config,
228
                        preview: this.preview,
229
                        adapter: this.getAdapter(),
230
                        page: this.options.page,
231
                        id: this.options.id
232
                    },
233
                    componentOptions: {
234
                        values: _.defaults(this.data, {type: null})
235
                    }
236
                },
237
238
                toolbar: {
239
                    buttons: buttons,
240
                    languageChanger: {
241
                        data: this.options.config.languageChanger,
242
                        preSelected: this.options.locale
243
                    }
244
                }
245
            };
246
        },
247
248
        initialize: function() {
249
            this.$el.addClass('article-form');
250
            SmartContentManager.initialize();
251
252
            this.startPageSwitcher();
253
254
            this.bindCustomEvents();
255
            this.showDraftLabel();
256
            this.setHeaderBar(true);
257
            this.loadLocalizations();
258
259
            // the open ghost overlay component needs the current locale in `this.options.language`
260
            this.options.language = this.options.locale;
261
        },
262
263
        bindCustomEvents: function() {
264
            this.sandbox.on('sulu.header.back', this.toList.bind(this));
265
            this.sandbox.on('sulu.tab.dirty', this.setHeaderBar.bind(this));
266
            this.sandbox.on('sulu.toolbar.save', this.save.bind(this));
267
            this.sandbox.on('sulu.tab.data-changed', this.setData.bind(this));
268
            this.sandbox.on('sulu.article.error', this.handleError.bind(this));
269
            this.sandbox.on('husky.tabs.header.item.select', this.tabChanged.bind(this));
270
            this.sandbox.on('sulu.header.language-changed', this.languageChanged.bind(this));
271
        },
272
273
        /**
274
         * Language changed event.
275
         *
276
         * @param {Object} item
277
         */
278
        languageChanged: function(item) {
279
            if (item.id === this.options.locale) {
280
                return;
281
            }
282
283
            this.sandbox.sulu.saveUserSetting(this.options.config.settingsKey, item.id);
284
285
            var data = this.getAdapter().prepareData(this.data, this);
286
            if (-1 === _(data.concreteLanguages).indexOf(item.id)) {
287
                OpenGhost.openGhost.call(this, data, this.translations.openGhostOverlay).then(function(copy, src) {
288
                    if (!!copy) {
289
                        CopyLocale.copyLocale.call(
290
                            this,
291
                            data.id,
292
                            src,
293
                            [item.id],
294
                            function() {
295
                                this.toEdit(item.id);
296
                            }.bind(this)
297
                        );
298
                    } else {
299
                        // new article will be created
300
                        this.toEdit(item.id);
301
                    }
302
                }.bind(this)).fail(function() {
303
                    // the open-ghost page got canceled, so reset the language changer
304
                    this.sandbox.emit('sulu.header.change-language', this.options.language);
305
                }.bind(this));
306
            } else {
307
                this.toEdit(item.id);
308
            }
309
        },
310
311
        /**
312
         * Tab changed event, save the new tab id to `this.options.content`.
313
         * Can be removed when issue #72 is solved: https://github.com/sulu/SuluArticleBundle/issues/72
314
         *
315
         * @param {Object} item
316
         */
317
        tabChanged: function(item) {
318
            this.options.content = item.id;
319
        },
320
321
        /**
322
         * Handles the error based on its error code.
323
         *
324
         * @param {Number} statusCode
325
         * @param {Number} errorCode
326
         * @param {Object} data
327
         * @param {string} action
328
         */
329
        handleError: function(statusCode, errorCode, data, action) {
0 ignored issues
show
Unused Code introduced by
The parameter data is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
Unused Code introduced by
The parameter action is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
330
            switch (errorCode) {
331
                case errorCodes.resourceLocatorAlreadyExists:
0 ignored issues
show
Bug introduced by
The variable errorCodes seems to be never declared. If this is a global, consider adding a /** global: errorCodes */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
332
                    this.sandbox.emit(
333
                        'sulu.labels.error.show',
334
                        'labels.error.content-save-resource-locator',
335
                        'labels.error'
336
                    );
337
                    this.sandbox.emit('sulu.header.toolbar.item.enable', 'save');
338
                    break;
339
                default:
340
                    this.sandbox.emit('sulu.labels.error.show', 'labels.error.content-save-desc', 'labels.error');
341
                    this.sandbox.emit('sulu.header.toolbar.item.enable', 'save');
342
            }
343
        },
344
345
        deleteArticle: function() {
346
            this.sandbox.sulu.showDeleteDialog(function(wasConfirmed) {
347
                if (!wasConfirmed) {
348
                    return;
349
                }
350
351
                ArticleManager.remove(this.options.id, this.options.locale).then(function() {
352
                    this.toList();
353
                }.bind(this));
354
            }.bind(this));
355
        },
356
357
        deleteArticlePage: function() {
358
            this.sandbox.sulu.showDeleteDialog(function(wasConfirmed) {
359
                if (!wasConfirmed) {
360
                    return;
361
                }
362
363
                var pageData = this.getAdapter().prepareData(this.data, this);
364
                ArticleManager.removePage(this.options.id, pageData.id, this.options.locale).then(function() {
365
                    ArticleRouter.toEditForce(this.options.id, this.options.locale);
366
                }.bind(this));
367
            }.bind(this));
368
        },
369
370
        toEdit: function(locale, id) {
371
            if (!!this.options.page && this.options.page !== 1) {
372
                return ArticleRouter.toPageEdit((id || this.options.id), this.options.page, (locale || this.options.locale))
373
            }
374
375
            ArticleRouter.toEdit((id || this.options.id), (locale || this.options.locale), this.options.content);
0 ignored issues
show
Best Practice introduced by
There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.
Loading history...
376
        },
377
378
        toList: function(locale) {
379
            ArticleRouter.toList((locale || this.options.locale), (this.options.type || this.data.articleType));
380
        },
381
382
        toAdd: function(locale) {
383
            ArticleRouter.toAdd((locale || this.options.locale), (this.options.type || this.data.articleType));
384
        },
385
386
        save: function(action) {
387
            this.loadingSave();
388
389
            this.saveTab(action).then(function(data) {
390
                this.saved(data.id, data, action);
391
            }.bind(this));
392
        },
393
394
        setData: function(data) {
395
            this.data = data;
396
        },
397
398
        saveTab: function(action) {
399
            var promise = $.Deferred();
400
401
            // Display loading animation.
402
            this.sandbox.emit('sulu.header.toolbar.item.loading', 'save');
403
404
            this.sandbox.once('sulu.tab.saved', function(id, data) {
405
                promise.resolve(_.defaults(data, {type: null}));
406
            }.bind(this));
0 ignored issues
show
unused-code introduced by
The call to bind does not seem necessary since the function does not use this. Consider calling it directly.
Loading history...
407
408
            this.sandbox.emit('sulu.tab.save', action);
409
410
            return promise;
411
        },
412
413
        setHeaderBar: function(saved) {
414
            var saveDraft = !saved,
415
                savePublish = !saved,
416
                publish = !!saved && !this.data.publishedState;
417
418
            this.setSaveToolbarItems.call(this, 'saveDraft', saveDraft);
419
            this.setSaveToolbarItems.call(this, 'savePublish', savePublish);
420
            this.setSaveToolbarItems.call(this, 'publish', publish);
421
            this.setSaveToolbarItems.call(this, 'unpublish', !!this.data.published);
422
423
            if (!!saveDraft || !!savePublish || !!publish) {
424
                this.sandbox.emit('sulu.header.toolbar.item.enable', 'save', false);
425
            } else {
426
                this.sandbox.emit('sulu.header.toolbar.item.disable', 'save', false);
427
            }
428
429
            this.showState(!!this.data.published);
430
        },
431
432
        setSaveToolbarItems: function(item, value) {
433
            this.sandbox.emit('sulu.header.toolbar.item.' + (!!value ? 'enable' : 'disable'), item, false);
434
        },
435
436
        loadingSave: function() {
437
            this.sandbox.emit('sulu.header.toolbar.item.loading', 'save');
438
        },
439
440
        /**
441
         * Routes either to the list, article-add or article-edit, depending on the passed parameter.
442
         *
443
         * @param action {String} 'new', 'add' or null
444
         */
445
        afterSaveAction: function(action) {
446
            if (action === 'back') {
447
                this.toList();
448
            } else if (action === 'new') {
449
                this.toAdd();
450
            } else if (!this.options.id) {
451
                this.toEdit(this.options.locale, this.data.id);
452
            } else if (!this.options.page) {
453
                ArticleRouter.toPageEdit(this.data.id, this.data._embedded.pages.length + 1, this.options.locale);
454
            }
455
        },
456
457
        showDraftLabel: function() {
458
            this.sandbox.emit('sulu.header.tabs.label.hide');
459
460
            if (this.hasDraft(this.data)) {
461
                return;
462
            }
463
464
            UserManager.find(this.data.changer).then(function(response) {
465
                this.sandbox.emit(
466
                    'sulu.header.tabs.label.show',
467
                    this.sandbox.util.sprintf(
468
                        this.translations.draftLabel,
469
                        {
470
                            changed: this.sandbox.date.format(this.data.changed, true),
471
                            user: response.username
472
                        }
473
                    ),
474
                    [
475
                        {
476
                            id: 'delete-draft',
477
                            title: this.translations.removeDraft,
478
                            skin: 'critical',
479
                            onClick: this.deleteDraft.bind(this)
480
                        }
481
                    ]
482
                );
483
            }.bind(this));
484
        },
485
486
        deleteDraft: function() {
487
            this.sandbox.sulu.showDeleteDialog(
488
                function(wasConfirmed) {
489
                    if (!wasConfirmed) {
490
                        return;
491
                    }
492
493
                    this.sandbox.emit('husky.label.header.loading');
494
495
                    ArticleManager.removeDraft(this.data.id, this.options.locale).always(function() {
496
                        this.sandbox.emit('sulu.header.toolbar.item.enable', 'edit');
497
                    }.bind(this)).then(function(response) {
498
                        ArticleRouter.toEdit(this.options.id, this.options.locale);
499
                        this.saved(response.id, response);
500
                    }.bind(this)).fail(function() {
501
                        this.sandbox.emit('husky.label.header.reset');
502
                        this.sandbox.emit(
503
                            'sulu.labels.error.show',
504
                            'labels.error.remove-draft-desc',
505
                            'labels.error'
506
                        );
507
                    }.bind(this));
508
                }.bind(this),
509
                this.translations.deleteDraftConfirmTitle,
510
                this.translations.deleteDraftConfirmText
511
            )
512
        },
513
514
        hasDraft: function(data) {
515
            return !data.id || !!data.publishedState || !data.published;
516
        },
517
518
        getUrl: function(action) {
519
            var url = _.template(this.defaults.templates.url, {
520
                id: this.options.id,
521
                locale: this.options.locale
522
            });
523
524
            if (action) {
525
                url += '&action=' + action;
526
            }
527
528
            return url;
529
        },
530
531
        loadComponentData: function() {
532
            if (!this.options.id) {
533
                return {_embedded: {pages: []}};
534
            }
535
536
            var promise = $.Deferred();
537
            this.sandbox.util.load(this.getUrl()).done(function(data) {
538
                this.preview = this.getAdapter().startPreview(this, data);
539
540
                promise.resolve(data);
541
            }.bind(this));
542
543
            return promise;
544
        },
545
546
        getAdapter: function() {
547
            if (this.adapter) {
548
                return this.adapter;
549
            }
550
551
            return this.adapter = (this.options.page === 1 ? Article : ArticlePage);
552
        },
553
554
        destroy: function() {
555
            if (!!this.preview) {
556
                this.getAdapter().destroyPreview(this.preview);
557
            }
558
559
            if (!!this.$dropdownElement) {
560
                this.sandbox.stop(this.$dropdownElement);
561
            }
562
        },
563
564
        showState: function(published) {
565
            if (!!published && !this.data.type) {
566
                this.sandbox.emit('sulu.header.toolbar.item.hide', 'stateTest');
567
                this.sandbox.emit('sulu.header.toolbar.item.show', 'statePublished');
568
            } else {
569
                this.sandbox.emit('sulu.header.toolbar.item.hide', 'statePublished');
570
                this.sandbox.emit('sulu.header.toolbar.item.show', 'stateTest');
571
            }
572
        },
573
574
        unpublish: function() {
575
            this.sandbox.sulu.showConfirmationDialog({
576
                callback: function(wasConfirmed) {
577
                    if (!wasConfirmed) {
578
                        return;
579
                    }
580
581
                    this.sandbox.emit('sulu.header.toolbar.item.loading', 'edit');
582
583
                    ArticleManager.unpublish(this.data.id, this.options.locale).always(function() {
584
                        this.sandbox.emit('sulu.header.toolbar.item.enable', 'edit');
585
                    }.bind(this)).then(function(response) {
586
                        this.sandbox.emit(
587
                            'sulu.labels.success.show',
588
                            'labels.success.content-unpublish-desc',
589
                            'labels.success'
590
                        );
591
                        this.saved(response.id, response);
592
                    }.bind(this)).fail(function() {
593
                        this.sandbox.emit(
594
                            'sulu.labels.error.show',
595
                            'labels.error.content-unpublish-desc',
596
                            'labels.error'
597
                        );
598
                    }.bind(this));
599
                }.bind(this),
600
                title: this.translations.unpublishConfirmTitle,
601
                description: !!this.hasDraft(this.data) ?
602
                    this.translations.unpublishConfirmTextNoDraft :
603
                    this.translations.unpublishConfirmTextWithDraft
604
            });
605
        },
606
607
        copy: function() {
608
            ArticleManager.copy(this.data.id, this.options.locale).done(function(data) {
609
                ArticleRouter.toEdit(data.id, this.options.locale);
610
            }.bind(this));
611
        },
612
613
        saved: function(id, data, action) {
614
            this.setData(data);
615
616
            if (!this.options.id) {
617
                this.sandbox.sulu.viewStates.justSaved = true;
618
            } else {
619
                this.setHeaderBar(true);
620
                this.showDraftLabel();
621
622
                this.sandbox.emit('sulu.header.saved', data);
623
                this.sandbox.emit('sulu.labels.success.show', 'labels.success.content-save-desc', 'labels.success');
624
            }
625
626
            this.afterSaveAction(action);
627
        },
628
629
        loadLocalizations: function() {
630
            this.sandbox.util.load('/admin/api/localizations').then(function(data) {
631
                this.localizations = data._embedded.localizations.map(function(localization) {
632
                    return {
633
                        id: localization.localization,
634
                        title: localization.localization
635
                    };
636
                });
637
            }.bind(this));
638
        },
639
640
        /**
641
         * Returns copy article from a given locale to a array of other locales url.
642
         *
643
         * @param {string} id
644
         * @param {string} src
645
         * @param {string[]} dest
646
         *
647
         * @returns {string}
648
         */
649
        getCopyLocaleUrl: function(id, src, dest) {
650
            return ArticleManager.getCopyLocaleUrl(id, src, dest);
651
        },
652
653
        startPageSwitcher: function() {
654
            var page = this.options.page,
655
                pages = this.data._embedded.pages || [],
656
                max = pages.length + 1,
657
                data = [];
658
659
            if (!page) {
660
                page = ++max;
661
            }
662
663
            for (var i = 1; i <= max; i++) {
664
                data.push({id: i, title: Util.sprintf(this.translations.pageOf, i, max)});
665
            }
666
667
            // new page is only available for existing articles
668
            if (this.options.id) {
669
                data = data.concat([
670
                    {divider: true},
671
                    {id: 'add', title: this.translations.newPage}
672
                ]);
673
            }
674
675
            // ordering is only available if more than one page exists
676
            if (pages.length > 1) {
677
                data.push({id: 'order', title: this.translations.orderPage});
678
            }
679
680
            this.$dropdownElement = $(this.templates.pageSwitcher({label: Util.sprintf(this.translations.pageOf, page, max)}));
681
682
            var $rightContainer = $(constants.headerRightSelector);
683
            $rightContainer.prepend(this.$dropdownElement);
684
            $rightContainer.addClass('wide');
685
686
            this.sandbox.start([{
687
                name: 'dropdown@husky',
688
                options: {
689
                    el: this.$dropdownElement,
690
                    instanceName: 'header-pages',
691
                    alignment: 'right',
692
                    valueName: 'title',
693
                    data: data,
694
                    clickCallback: function(item) {
695
                        if (item.id === 'add') {
696
                            return ArticleRouter.toPageAdd(this.options.id, this.options.locale);
697
                        } else if (item.id === 'order') {
698
                            return this.orderPages();
699
                        } else if (item.id === 1) {
700
                            return ArticleRouter.toEdit(this.options.id, this.options.locale);
701
                        }
702
703
                        return ArticleRouter.toPageEdit(this.options.id, item.id, this.options.locale);
704
                    }.bind(this)
705
                }
706
            }]);
707
        },
708
709
        orderPages: function() {
710
            var $container = $('<div/>'),
711
                pages = (this.data._embedded.pages || []),
712
                pageTitleProperty = this.data._pageTitlePropertyName,
713
                data = [];
714
715
            this.$el.append($container);
716
717
            for (var i = 0, length = pages.length; i < length; i++) {
718
                var title = this.translations.page + ' ' + pages[i].pageNumber;
719
                if (pageTitleProperty) {
720
                    title = pages[i][pageTitleProperty];
721
                }
722
723
                data.push({id: pages[i].id, title: title});
724
            }
725
726
            this.sandbox.start([{
727
                name: 'articles/edit/page-order@suluarticle',
728
                options: {
729
                    el: $container,
730
                    pages: data,
731
                    saveCallback: function(pages) {
732
                        return ArticleManager.orderPages(this.options.id, pages, this.options.locale).done(function() {
733
                            ArticleRouter.toEditForce(this.options.id, this.options.locale, this.options.content);
734
                        }.bind(this)).fail(function() {
735
                            this.sandbox.emit('sulu.labels.error.show', 'labels.error.content-save-desc', 'labels.error');
736
                        }.bind(this));
737
                    }.bind(this)
738
                }
739
            }]);
740
        }
741
    }
742
});
743