<commit_before>/**
 * This file is part of Superdesk.
 *
 * Copyright 2013, 2014 Sourcefabric z.u. and contributors.
 *
 * For the full copyright and license information, please see the
 * AUTHORS and LICENSE files distributed with this source code, or
 * at https://www.sourcefabric.org/superdesk/license
 */

define([
    'angular',
    'ng-sir-trevor'
], function(angular) {
    'use strict';
    angular
    .module('SirTrevorBlocks', [])
        .config(['SirTrevorProvider', function(SirTrevor) {
            // Add toMeta method to all blocks.
            SirTrevor.Block.prototype.toMeta = function(){return;};
            SirTrevor.Block.prototype.getOptions = function(){return SirTrevor.$get().getInstance(this.instanceID).options;};

            SirTrevor.Blocks.Link =  SirTrevor.Block.extend({
                type: 'link',
                title: function(){ return 'Link'; },
                icon_name: 'link',
                editorHTML: function() {
                    return [
                        '<div class="st-required st-link-block link-input"',
                        ' placeholder="url" contenteditable="true"></div>'
                    ].join('\n');
                },
                onBlockRender: function() {
                    var that = this;
                    // create and trigger a 'change' event for the $editor which is a contenteditable
                    this.$editor.filter('[contenteditable]').on('focus', function(ev) {
                        var $this = $(this);
                        $this.data('before', $this.html());
                    });
                    this.$editor.filter('[contenteditable]').on('blur keyup paste input', function(ev) {
                        var $this = $(this);
                        if ($this.data('before') !== $this.html()) {
                            $this.data('before', $this.html());
                            $this.trigger('change');
                        }
                    });
                    // when the link field changes
                    this.$editor.on('change', function() {
                        var url = $(this).text().trim();
                        // exit if the url is empty. Not needed to disturb the service
                        if (url === '') {
                            return false;
                        }
                        that.getOptions().embedService.get(url)
                            .then(function saveAndLoadData(data) {
                                that.data = data;
                                that.loadData(that.data);
                            }, function errorCallback(error) {
                                that.addMessage('an error occured: ' + error);
                            });
                    });
                },
                isEmpty: function() {
                    return _.isEmpty(this.retrieveData().url);
                },
                retrieveData: function() {
                    // retrieve new data from editor
                    var data = {
                        html: this.$('.embed-preview').html(),
                        title: this.$('.title-preview').text(),
                        description: this.$('.description-preview').text(),
                        url: this.$('.link-preview').attr('href')
                    };
                    if (this.$('.cover-preview-handler').hasClass('hidden')) {
                        delete data.thumbnail_url;
                    }
                    // remove empty string
                    _.forEach(data, function(value, key) {
                        if (typeof(value) === 'string' && value.trim() === '') {
                            delete data[key];
                        }
                    });
                    // add data which are not in the editor but has been saved before (like thumbnail_width)
                    _.merge(this.data, data);
                    return this.data;
                },
                renderCard: function(data) {
                    var card_class = 'liveblog--card';
                    var html = $([
                        '<div class="'+card_class+' hidden">',
                        '  <div class="hidden st-link-block embed-preview"></div>',
                        '  <div class="hidden st-link-block cover-preview-handler">',
                        '    <div class="st-link-block cover-preview"></div>',
                        '  </div>',
                        '  <div class="hidden st-link-block title-preview" contenteditable="true"></div>',
                        '  <div class="hidden st-link-block description-preview" contenteditable="true"></div>',
                        '  <a class="hidden st-link-block link-preview"></a>',
                        '</div>'
                    ].join('\n'));
                    // but this html to the DOM (neeeded to use jquery)
                    $('body > .'+card_class).remove();
                    $('body').append(html);
                    html = $('body > .'+card_class);
                    // hide everything
                    html.find(
                        ['.embed-preview',
                        '.cover-preview-handler',
                        '.title-preview',
                        '.description-preview'].join(', ')
                    ).addClass('hidden');
                    // set the link
                    html.find('.link-preview')
                        .attr('href', data.url)
                        .html(data.url)
                        .removeClass('hidden');
                    // set the embed code
                    if (data.html !== undefined) {
                        html.find('.embed-preview')
                            .html(data.html).removeClass('hidden');
                    }
                    // set the cover illustration
                    if (data.html === undefined && data.thumbnail_url !== undefined) {
                        var ratio = data.thumbnail_width / data.thumbnail_height;
                        var cover_width = Math.min(447, data.thumbnail_width);
                        var cover_height = cover_width / ratio;
                        html.find('.cover-preview').css({
                            'background-image': 'url('+data.thumbnail_url+')',
                            width: cover_width,
                            height: cover_height
                        });
                        html.find('.cover-preview-handler').removeClass('hidden');
                    }
                    // set the title
                    if (data.title !== undefined) {
                        html.find('.title-preview')
                            .html(data.title).removeClass('hidden');
                    }
                    // set the description
                    if (data.description !== undefined) {
                        html.find('.description-preview')
                            .html(data.description).removeClass('hidden');
                    }
                    // retrieve the final html code
                    var html_to_return = '';
                    html_to_return = '<div class="'+card_class+'">';
                    html_to_return += html.get(0).innerHTML;
                    html_to_return += '</div>';
                    // remove html from the DOM
                    html.remove();
                    return html_to_return;
                },
                loadData: function(data) {
                    this.$('.link-input')
                        .addClass('hidden')
                        .after(this.renderCard(data));
                },
                focus: function() {<commit_msg>SirTrevor-embed-block: renderCard with or without contenteditable<commit_after>/**
 * This file is part of Superdesk.
 *
 * Copyright 2013, 2014 Sourcefabric z.u. and contributors.
 *
 * For the full copyright and license information, please see the
 * AUTHORS and LICENSE files distributed with this source code, or
 * at https://www.sourcefabric.org/superdesk/license
 */

define([
    'angular',
    'ng-sir-trevor'
], function(angular) {
    'use strict';
    angular
    .module('SirTrevorBlocks', [])
        .config(['SirTrevorProvider', function(SirTrevor) {
            // Add toMeta method to all blocks.
            SirTrevor.Block.prototype.toMeta = function(){return;};
            SirTrevor.Block.prototype.getOptions = function(){return SirTrevor.$get().getInstance(this.instanceID).options;};

            SirTrevor.Blocks.Link =  SirTrevor.Block.extend({
                type: 'link',
                title: function(){ return 'Link'; },
                icon_name: 'link',
                editorHTML: function() {
                    return [
                        '<div class="st-required st-link-block link-input"',
                        ' placeholder="url" contenteditable="true"></div>'
                    ].join('\n');
                },
                onBlockRender: function() {
                    var that = this;
                    // create and trigger a 'change' event for the $editor which is a contenteditable
                    this.$editor.filter('[contenteditable]').on('focus', function(ev) {
                        var $this = $(this);
                        $this.data('before', $this.html());
                    });
                    this.$editor.filter('[contenteditable]').on('blur keyup paste input', function(ev) {
                        var $this = $(this);
                        if ($this.data('before') !== $this.html()) {
                            $this.data('before', $this.html());
                            $this.trigger('change');
                        }
                    });
                    // when the link field changes
                    this.$editor.on('change', function() {
                        var url = $(this).text().trim();
                        // exit if the url is empty. Not needed to disturb the service
                        if (url === '') {
                            return false;
                        }
                        that.getOptions().embedService.get(url)
                            .then(function saveAndLoadData(data) {
                                that.data = data;
                                that.loadData(that.data);
                            }, function errorCallback(error) {
                                that.addMessage('an error occured: ' + error);
                            });
                    });
                },
                isEmpty: function() {
                    return _.isEmpty(this.retrieveData().url);
                },
                retrieveData: function() {
                    // retrieve new data from editor
                    var data = {
                        html: this.$('.embed-preview').html(),
                        title: this.$('.title-preview').text(),
                        description: this.$('.description-preview').text(),
                        url: this.$('.link-preview').attr('href')
                    };
                    if (this.$('.cover-preview-handler').hasClass('hidden')) {
                        delete data.thumbnail_url;
                    }
                    // remove empty string
                    _.forEach(data, function(value, key) {
                        if (typeof(value) === 'string' && value.trim() === '') {
                            delete data[key];
                        }
                    });
                    // add data which are not in the editor but has been saved before (like thumbnail_width)
                    _.merge(this.data, data);
                    return this.data;
                },
                renderCard: function(data, editable) {
                    if (editable === undefined) {editable = false;}
                    var card_class = 'liveblog--card';
                    var html = $([
                        '<div class="'+card_class+' hidden">',
                        '  <div class="hidden st-link-block embed-preview"></div>',
                        '  <div class="hidden st-link-block cover-preview-handler">',
                        '    <div class="st-link-block cover-preview"></div>',
                        '  </div>',
                        '  <div class="st-link-block title-preview"></div>',
                        '  <div class="st-link-block description-preview"></div>',
                        '  <a class="st-link-block link-preview"></a>',
                        '</div>'
                    ].join('\n'));
                    // but this html to the DOM (neeeded to use jquery)
                    $('body > .'+card_class).remove();
                    $('body').append(html);
                    html = $('body > .'+card_class);
                    // hide everything
                    html.find(
                        ['.embed-preview',
                        '.cover-preview-handler'].join(', ')
                    ).addClass('hidden');
                    // set the link
                    html.find('.link-preview')
                        .attr('href', data.url)
                        .html(data.url);
                    // set the embed code
                    if (data.html !== undefined) {
                        html.find('.embed-preview')
                            .html(data.html).removeClass('hidden');
                    }
                    // set the cover illustration
                    if (data.html === undefined && data.thumbnail_url !== undefined) {
                        var ratio = data.thumbnail_width / data.thumbnail_height;
                        var cover_width = Math.min(447, data.thumbnail_width);
                        var cover_height = cover_width / ratio;
                        html.find('.cover-preview').css({
                            'background-image': 'url('+data.thumbnail_url+')',
                            width: cover_width,
                            height: cover_height
                        });
                        html.find('.cover-preview-handler').removeClass('hidden');
                    }
                    // set the title
                    if (data.title !== undefined) {
                        html.find('.title-preview')
                            .html(data.title);
                    }
                    // set the description
                    if (data.description !== undefined) {
                        html.find('.description-preview')
                            .html(data.description);
                    }
                    // set editable if needed
                    if (editable) {
                        html.find('.title-preview').attr({
                            contenteditable: true,
                            placeholder: 'title'
                        });
                        html.find('.description-preview').attr({
                            contenteditable: true,
                            placeholder: 'description'
                        });
                    }
                    // retrieve the final html code
                    var html_to_return = '';
                    html_to_return = '<div class="'+card_class+'">';
                    html_to_return += html.get(0).innerHTML;
                    html_to_return += '</div>';
                    // remove html from the DOM
                    html.remove();
                    return html_to_return;
                },
                loadData: function(data) {
                    this.$('.link-input')
                        .addClass('hidden')
                        .after(this.renderCard(data, true));
                },
                focus: function() {
{'fraction_non_alphanumeric': 0.12245285406910518, 'fraction_numerical': 0.0015187950892292116, 'mean_word_length': 1.0388336988775642, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 43, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5431447', 'n_tokens_mistral': 3649, 'n_tokens_neox': 3398, 'n_words': 746}