-4

Ive been playing around with this for a while.

I am not a javascript wizard which you will tell lol...

Anyway ive been trying to get my code compliant whilst still working correctly.

I can get it compliant but then the script stops working which is pointless making it compliant if you ask me.

Anyway here is the code snippet:

(function() {

    'use strict';

    tinymce.create('tinymce.plugins.Shortcodes', {

        init : function(ed, url) {
        },
        createControl : function(n, cm) {

            if(n=='Shortcodes'){
                var msb = cm.createListBox('Shortcodes', {
                     title : 'Shortcodes',
                     onselect : function(p) {

                        if(p == 'Accordions'){

                            content =  "[accordion_wrap]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[/accordion_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Accordions With Icons'){

                            content =  "[accordion_wrap]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[/accordion_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Toggles'){

                            content = "[toggle_wrap]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[/toggle_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Tabs'){

                            content =  "[tab_wrap]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[/tab_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Tabs With Icons'){

                            content =  "[tab_wrap]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[/tab_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Latest Portfolio Items'){

                            var portfoliohowmany = prompt("How many?", 4);

                            content =  '[latest_portfolio howmany="'+portfoliohowmany+'"]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Testimonial Slider'){

                            content =  "[testimonial_wrap]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[/testimonial_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Pricing Tables Wrapper'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){

                            content =  '[pricingtable_wrap]'+selected+'[/pricingtable_wrap]';

                            }else{

                            content =  '[pricingtable_wrap][/pricingtable_wrap]';

                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Pricing Tables'){

                            var sellingcolumns = prompt("How Many Columns (Choices are: 3 or 4)", 3);
                            var sellingtitle = prompt("Package", "");
                            var sellingprice = prompt("Price", "$29");
                            var sellingunderprice = prompt("Pre Month/Per Year", "Per Month");
                            var sellingbuttonname = prompt("Buttons Name", "More Info");
                            var sellingbuttonurl = prompt("Buttons Url", "#");
                            var sellingbuttoncolor = prompt("Button Colour... (Your Choices are: green, blue, lightblue, orange, red, black)", "green");
                            var sellingfeatured = prompt("Make This Featured (Type yes to make it featured)", "no");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[pricing_table columns="'+sellingcolumns+'" title="'+sellingtitle+'" price="'+sellingprice+'" underprice="'+sellingunderprice+'" buttonname="'+sellingbuttonname+'" buttonurl="'+sellingbuttonurl+'" buttoncolor="'+sellingbuttoncolor+'" featured="'+sellingfeatured+'"]'+selected+'[/pricing_table]';
                            }else{
                                content =  '[pricing_table columns="'+sellingcolumns+'" title="'+sellingtitle+'" price="'+sellingprice+'" underprice="'+sellingunderprice+'" buttonname="'+sellingbuttonname+'" buttonurl="'+sellingbuttonurl+'" buttoncolor="'+sellingbuttoncolor+'" featured="'+sellingfeatured+'"][/pricing_table]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Team Member'){

                            var teamhowmany = prompt("How Many In A Row: (Choices: 3,4)", 3);
                            var teamname = prompt("Team Members Name", "");
                            var teamposition = prompt("Team Members Company Position (Example: Web Developer)", "");
                            var teamcontent = prompt("Very Small Paragraph About Team Member", "");
                            var teamtwitter = prompt("Twitter Url (Including http://) ... Leave blank to not show", "");
                            var teamdribbble = prompt("Dribbble Url (Including http://) ... Leave blank to not show", "");
                            var teamfacebook = prompt("Facebook Url (Including http://) ... Leave blank to not show", "");
                            var teamlinkedin = prompt("Linked In Url (Including http://) ... Leave blank to not show", "");
                            var teamgoogle = prompt("Google Plus Url (Including http://) ... Leave blank to not show", "");
                            var teaminstagram = prompt("Instagram Url (Including http://) ... Leave blank to not show", "");
                            var teamwindows = prompt("Windows Url (Including http://) ... Leave blank to not show", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){

                            content =  '[teammember howmany="'+teamhowmany+'" name="'+teamname+'" position="'+teamposition+'" smallcontent="'+teamcontent+'" twitter="'+teamtwitter+'" dribbble="'+teamdribbble+'" facebook="'+teamfacebook+'" linkedin="'+teamlinkedin+'" google="'+teamgoogle+'" instagram="'+teaminstagram+'" windows="'+teamwindows+'"]'+selected+'[/teammember]';

                            } else {

                            content =  '[teammember howmany="'+teamhowmany+'" name="'+teamname+'" position="'+teamposition+'" smallcontent="'+teamcontent+'" twitter="'+teamtwitter+'" dribbble="'+teamdribbble+'" facebook="'+teamfacebook+'" linkedin="'+teamlinkedin+'" google="'+teamgoogle+'" instagram="'+teaminstagram+'" windows="'+teamwindows+'"][/teammember]';

                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Clients Show'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[clients]'+selected+'[/clients]';

                            } else {

                                content =  '[clients][/clients]';

                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Intro Boxes'){

                            var introboxeshowmany = prompt("How Many In A Row (Choices are: 3 or 4)", 4);
                            var introboxescolor = prompt("Box Colour (Choices are: inverse, blue, red, orane, yellow)... Inverse means sites colours!", "");
                            var introboxesicon = prompt("Icon Code, Please see Font Awesome Website For Each And Every Code", "");
                            var introboxestitle = prompt("Title", "");
                            var introboxescontent = prompt("Small Content", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[intro_icons howmany="'+introboxeshowmany+'" color="'+introboxescolor+'" icon="'+introboxesicon+'" title="'+introboxestitle+'" content="'+introboxescontent+'"]';
                            }else{
                                content =  '[intro_icons howmany="'+introboxeshowmany+'" color="'+introboxescolor+'" icon="'+introboxesicon+'" title="'+introboxestitle+'" content="'+introboxescontent+'"]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Progessive Bars'){

                            var progressivename = prompt("Name Of Bar", "");
                            var progressivepercentage = prompt("Percentage)", 100);
                            var progressivecolor = prompt("Bar Colour (Choices are: inverse, blue, green, orange, red)... Inverse is sites colours!", "green");
                            var progressivestriped = prompt("Stiped Effect (Choices: yes, no)", "no");
                            var progressiveactive = prompt("Moving Stripes (Choices: yes, no)... If you want moving stipes, the striped effect needs a yes!", "no");

                            content =  '[progress_bar name="'+progressivename+'" percentage="'+progressivepercentage+'" color="'+progressivecolor+'" striped="'+progressivestriped+'" active="'+progressiveactive+'"]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Slider'){

                            content =  "[slider_wrap]<br>[slide]Image Goes Here...[/slide]<br>[slide]Image Goes Here...[/slide]<br>[slide]Image Goes Here...[/slide]<br>[/slider_wrap]";

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Featured Link'){

                            var featuredclass = prompt("Do you want to add another css class?", "");
                            var featuredbuttonurl = prompt("Button Url", "#");
                            var featuredbuttonname = prompt("Button Name", "Buy Now");
                            var featuredbackgroundcolor = prompt("Background Colour (Choices are: white, grey, light grey, dark grey, very dark grey, blue, theme color)", "blue");
                            var featuredcontent = prompt("Content", "");
                            var featuredbuttoncolor = prompt("Button Colour (Choices are: grey, blue, lightblue, green, orange, red, black)", "");

                            content =  '[featuredlink backgroundcolor='+featuredbackgroundcolor+' class="'+featuredclass+'" buttonurl="'+featuredbuttonurl+'" buttonname="'+featuredbuttonname+'" content="'+featuredcontent+'" buttoncolor="'+featuredbuttoncolor+'"]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Buttons'){

                            var buttonlinkurl = prompt("Button Url", "#");
                            var buttoncolor = prompt("Button Colour (Choices are: grey, blue, aqua, green, orange, red, black)... Inverse means sites colours!", "");
                            var buttonsize = prompt("Button Size (Choices are: mini, small, normal, large)", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[button linkurl="'+buttonlinkurl+'" color="'+buttoncolor+'" size="'+buttonsize+'"]'+selected+'[/button]';
                            }else{
                                content =  '[button linkurl="'+buttonlinkurl+'" color="'+buttoncolor+'" size="'+buttonsize+'"][/button]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Icons'){

                            var iconicon = prompt("Icon Code, Please see Font Awesome Website For Each And Every Code", "");
                            var iconsize = prompt("Icon Size (Choices are: small, normal, large, supersize)", "normal");
                            var iconposition = prompt("Icon Position (Choices: left, right)", "left");

                            content =  '[icon icon="'+iconicon+'" size="'+iconsize+'" position="'+iconposition+'"]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Tool Tips'){

                            var tooltipposition = prompt("Position (Choices are: top, bottom, left, right)", "right");
                            var tooltiplink = prompt("Tool tip link url", "#");
                            var tooltiptooltip = prompt("Tooltip Content", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[tooltip position="'+tooltipposition+'" link="'+tooltiplink+'" tooltip="'+tooltiptooltip+'"]'+selected+'[/tooltip]';
                            }else{
                                content =  '[tooltip position="'+tooltipposition+'" link="'+tooltiplink+'" tooltip="'+tooltiptooltip+'"][/tooltip]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Alerts'){

                            var alerttype = prompt("Type (Choices are: alert-success, alert-yellow, alert-info, alert-danger, alert-warning)", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[alert type="'+alerttype+'"]'+selected+'[/alert]';
                            }else{
                                content =  '[alert type="'+alerttype+'"][/alert]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Labels'){

                            var labeltype = prompt("Type (Choices are: grey, green, orange, red, blue, black)", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[label type="'+labeltype+'"]'+selected+'[/label]';
                            }else{
                                content =  '[label type="'+labeltype+'"][/label]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Badges'){

                            var badgetype = prompt("Type (Choices are: grey, green, orange, red, blue, black)", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[badge type="'+badgetype+'"]'+selected+'[/badge]';
                            }else{
                                content =  '[badge type="'+badgetype+'"][/badge]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Text Highlight'){

                            var heightlightcolor = prompt("Text Colour (Please use the hex colour charts!)", "#ffffff");
                            var heightlightbgcolor = prompt("Background Colour (Please use the hex colour charts!)", "#4aaaa5");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[highlight color="'+heightlightcolor+'" bgcolor="'+heightlightbgcolor+'"]'+selected+'[/highlight]';
                            }else{
                                content =  '[highlight color="'+heightlightcolor+'" bgcolor="'+heightlightbgcolor+'"][/highlight]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Small Text'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[small]'+selected+'[/small]';
                            }else{
                                content =  '[small][/small]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Code Tags'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[code]'+selected+'[/code]';
                            }else{
                                content =  '[code][/code]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Pre Tags'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[pre]'+selected+'[/pre]';
                            }else{
                                content =  '[pre][/pre]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'HR Tag'){

                            content =  '[hr]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                        if(p == 'Clear Fix'){

                            content =  '[clear]';

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // end of shortcode

                     }
                });


                // Add some menu items
                var my_shortcodes = ['Accordions','Accordions With Icons','Toggles','Tabs','Tabs With Icons','Latest Portfolio Items','Testimonial Slider','Pricing Tables Wrapper','Pricing Tables','Team Member','Clients Show','Intro Boxes','Progessive Bars','Slider','Featured Link','Buttons','Icons','Tool Tips','Alerts','Labels','Badges','Text Highlight','Small Text','Code Tags','Pre Tags','HR Tag','Clear Fix'];

                for(var i in my_shortcodes){
                    msb.add(my_shortcodes[i],my_shortcodes[i]);
                }

                return msb;
            }
            return null;
        }


    });
    tinymce.PluginManager.add('Shortcodes', tinymce.plugins.Shortcodes);
})();

The biggest issues look like the == should be === but when I do this, they stop working.

The other big issue says content is not defined, but when i put var before it, it then states that content is already defined so cant win lol.

I dont think its taking into account the if statements.

The other is spacing, which i find totally stupid, I code like this because its easy for me to read, I was always told spacing does not effect the code.

Anyway any help would be greatful

Thanks

Robert
  • 907
  • 4
  • 13
  • 32
  • 1
    You should rewrite all those `if`-statements` into a `switch-case`-statement. – Broxzier Aug 06 '13 at 07:50
  • @Broxzier - I was told switch and if statements are just a styling of coding because they do the same thing (Just what ive been told, not saying its true), using a switch would not correct the issues given would it? – Robert Aug 06 '13 at 07:58
  • What exactly is the question again? When you run this through jshint it tells you exactly, line by line, what is wrong and you can knock those out. Rather than write an answer that would just summarize what jshint is telling you, I instead recommend you take some serious time and make it a great learning experience for yourself. Dont know about you but I learn best by doing. Sure, if you've done everything JSHint suggests, and still get errors, then turn here for specific help. Just a thought. – Alex Aug 06 '13 at 07:58
  • One tip though would be choose more descriptive variable names. You'd be amazed what descriptive and clear variable naming will do for you. – Alex Aug 06 '13 at 08:06
  • @cept0 I said I was new and not very good at coding javascript so really un professional of you! – Robert Aug 06 '13 at 08:21
  • @Alex I have everywhere I can, But for the content, in TinyMCE you cant use anything but content. The jshint gives examples, but the examples do not help :( For instance the hints are: use === instead of ==, but if I do this, the code stops working – Robert Aug 06 '13 at 08:23
  • @Broxzier I just changed to switch and the code broke, it no longer works. – Robert Aug 06 '13 at 08:24
  • @Robert See my answer. It may help you get going in the right direction. – Alex Aug 06 '13 at 09:01

2 Answers2

1

Here's your onselect method using a switch-case:

onselect: function (p) {
    switch (p) {
    case 'Accordions':
        content = "[accordion_wrap]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[/accordion_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Accordions With Icons':
        content = "[accordion_wrap]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions accordionicon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[/accordion_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Toggles':
        content = "[toggle_wrap]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[toggles title=\"Title Goes Here\"]This is where some content goes...[/toggles]<br>[/toggle_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Tabs':
        content = "[tab_wrap]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[/tab_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Tabs With Icons':
        content = "[tab_wrap]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[tab icon=\"icon-globe\" title=\"Title Goes Here\"]This is where some content goes...[/tab]<br>[/tab_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Latest Portfolio Items':
        var portfoliohowmany = prompt("How many?", 4);
        content = '[latest_portfolio howmany="' + portfoliohowmany + '"]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Testimonial Slider':
        content = "[testimonial_wrap]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[testimonial name=\"Testimonial Name Here\" company=\"Testimonial Company Name\" testimonial=\"Testimonial goes here\"]Image Goes Here...[/testimonial]<br>[/testimonial_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Pricing Tables Wrapper':
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            content = '[pricingtable_wrap]' + selected + '[/pricingtable_wrap]';
        } else {
            content = '[pricingtable_wrap][/pricingtable_wrap]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Pricing Tables':
        var sellingcolumns = prompt("How Many Columns (Choices are: 3 or 4)", 3);
        var sellingtitle = prompt("Package", "");
        var sellingprice = prompt("Price", "$29");
        var sellingunderprice = prompt("Pre Month/Per Year", "Per Month");
        var sellingbuttonname = prompt("Buttons Name", "More Info");
        var sellingbuttonurl = prompt("Buttons Url", "#");
        var sellingbuttoncolor = prompt("Button Colour... (Your Choices are: green, blue, lightblue, orange, red, black)", "green");
        var sellingfeatured = prompt("Make This Featured (Type yes to make it featured)", "no");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[pricing_table columns="' + sellingcolumns + '" title="' + sellingtitle + '" price="' + sellingprice + '" underprice="' + sellingunderprice + '" buttonname="' + sellingbuttonname + '" buttonurl="' + sellingbuttonurl + '" buttoncolor="' + sellingbuttoncolor + '" featured="' + sellingfeatured + '"]' + selected + '[/pricing_table]';
        } else {
            content = '[pricing_table columns="' + sellingcolumns + '" title="' + sellingtitle + '" price="' + sellingprice + '" underprice="' + sellingunderprice + '" buttonname="' + sellingbuttonname + '" buttonurl="' + sellingbuttonurl + '" buttoncolor="' + sellingbuttoncolor + '" featured="' + sellingfeatured + '"][/pricing_table]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Team Member':
        var teamhowmany = prompt("How Many In A Row: (Choices: 3,4)", 3);
        var teamname = prompt("Team Members Name", "");
        var teamposition = prompt("Team Members Company Position (Example: Web Developer)", "");
        var teamcontent = prompt("Very Small Paragraph About Team Member", "");
        var teamtwitter = prompt("Twitter Url (Including http://) ... Leave blank to not show", "");
        var teamdribbble = prompt("Dribbble Url (Including http://) ... Leave blank to not show", "");
        var teamfacebook = prompt("Facebook Url (Including http://) ... Leave blank to not show", "");
        var teamlinkedin = prompt("Linked In Url (Including http://) ... Leave blank to not show", "");
        var teamgoogle = prompt("Google Plus Url (Including http://) ... Leave blank to not show", "");
        var teaminstagram = prompt("Instagram Url (Including http://) ... Leave blank to not show", "");
        var teamwindows = prompt("Windows Url (Including http://) ... Leave blank to not show", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            content = '[teammember howmany="' + teamhowmany + '" name="' + teamname + '" position="' + teamposition + '" smallcontent="' + teamcontent + '" twitter="' + teamtwitter + '" dribbble="' + teamdribbble + '" facebook="' + teamfacebook + '" linkedin="' + teamlinkedin + '" google="' + teamgoogle + '" instagram="' + teaminstagram + '" windows="' + teamwindows + '"]' + selected + '[/teammember]';
        } else {
            content = '[teammember howmany="' + teamhowmany + '" name="' + teamname + '" position="' + teamposition + '" smallcontent="' + teamcontent + '" twitter="' + teamtwitter + '" dribbble="' + teamdribbble + '" facebook="' + teamfacebook + '" linkedin="' + teamlinkedin + '" google="' + teamgoogle + '" instagram="' + teaminstagram + '" windows="' + teamwindows + '"][/teammember]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Clients Show':
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[clients]' + selected + '[/clients]';
        } else {
            content = '[clients][/clients]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Intro Boxes':
        var introboxeshowmany = prompt("How Many In A Row (Choices are: 3 or 4)", 4);
        var introboxescolor = prompt("Box Colour (Choices are: inverse, blue, red, orane, yellow)... Inverse means sites colours!", "");
        var introboxesicon = prompt("Icon Code, Please see Font Awesome Website For Each And Every Code", "");
        var introboxestitle = prompt("Title", "");
        var introboxescontent = prompt("Small Content", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[intro_icons howmany="' + introboxeshowmany + '" color="' + introboxescolor + '" icon="' + introboxesicon + '" title="' + introboxestitle + '" content="' + introboxescontent + '"]';
        } else {
            content = '[intro_icons howmany="' + introboxeshowmany + '" color="' + introboxescolor + '" icon="' + introboxesicon + '" title="' + introboxestitle + '" content="' + introboxescontent + '"]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Progessive Bars':
        var progressivename = prompt("Name Of Bar", "");
        var progressivepercentage = prompt("Percentage)", 100);
        var progressivecolor = prompt("Bar Colour (Choices are: inverse, blue, green, orange, red)... Inverse is sites colours!", "green");
        var progressivestriped = prompt("Stiped Effect (Choices: yes, no)", "no");
        var progressiveactive = prompt("Moving Stripes (Choices: yes, no)... If you want moving stipes, the striped effect needs a yes!", "no");
        content = '[progress_bar name="' + progressivename + '" percentage="' + progressivepercentage + '" color="' + progressivecolor + '" striped="' + progressivestriped + '" active="' + progressiveactive + '"]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Slider':
        content = "[slider_wrap]<br>[slide]Image Goes Here...[/slide]<br>[slide]Image Goes Here...[/slide]<br>[slide]Image Goes Here...[/slide]<br>[/slider_wrap]";
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Featured Link':
        var featuredclass = prompt("Do you want to add another css class?", "");
        var featuredbuttonurl = prompt("Button Url", "#");
        var featuredbuttonname = prompt("Button Name", "Buy Now");
        var featuredbackgroundcolor = prompt("Background Colour (Choices are: white, grey, light grey, dark grey, very dark grey, blue, theme color)", "blue");
        var featuredcontent = prompt("Content", "");
        var featuredbuttoncolor = prompt("Button Colour (Choices are: grey, blue, lightblue, green, orange, red, black)", "");
        content = '[featuredlink backgroundcolor=' + featuredbackgroundcolor + ' class="' + featuredclass + '" buttonurl="' + featuredbuttonurl + '" buttonname="' + featuredbuttonname + '" content="' + featuredcontent + '" buttoncolor="' + featuredbuttoncolor + '"]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Buttons':
        var buttonlinkurl = prompt("Button Url", "#");
        var buttoncolor = prompt("Button Colour (Choices are: grey, blue, aqua, green, orange, red, black)... Inverse means sites colours!", "");
        var buttonsize = prompt("Button Size (Choices are: mini, small, normal, large)", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[button linkurl="' + buttonlinkurl + '" color="' + buttoncolor + '" size="' + buttonsize + '"]' + selected + '[/button]';
        } else {
            content = '[button linkurl="' + buttonlinkurl + '" color="' + buttoncolor + '" size="' + buttonsize + '"][/button]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Icons':
        var iconicon = prompt("Icon Code, Please see Font Awesome Website For Each And Every Code", "");
        var iconsize = prompt("Icon Size (Choices are: small, normal, large, supersize)", "normal");
        var iconposition = prompt("Icon Position (Choices: left, right)", "left");
        content = '[icon icon="' + iconicon + '" size="' + iconsize + '" position="' + iconposition + '"]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Tool Tips':
        var tooltipposition = prompt("Position (Choices are: top, bottom, left, right)", "right");
        var tooltiplink = prompt("Tool tip link url", "#");
        var tooltiptooltip = prompt("Tooltip Content", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[tooltip position="' + tooltipposition + '" link="' + tooltiplink + '" tooltip="' + tooltiptooltip + '"]' + selected + '[/tooltip]';
        } else {
            content = '[tooltip position="' + tooltipposition + '" link="' + tooltiplink + '" tooltip="' + tooltiptooltip + '"][/tooltip]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Alerts':
        var alerttype = prompt("Type (Choices are: alert-success, alert-yellow, alert-info, alert-danger, alert-warning)", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[alert type="' + alerttype + '"]' + selected + '[/alert]';
        } else {
            content = '[alert type="' + alerttype + '"][/alert]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Labels':
        var labeltype = prompt("Type (Choices are: grey, green, orange, red, blue, black)", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[label type="' + labeltype + '"]' + selected + '[/label]';
        } else {
            content = '[label type="' + labeltype + '"][/label]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Badges':
        var badgetype = prompt("Type (Choices are: grey, green, orange, red, blue, black)", "");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[badge type="' + badgetype + '"]' + selected + '[/badge]';
        } else {
            content = '[badge type="' + badgetype + '"][/badge]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Text Highlight':
        var heightlightcolor = prompt("Text Colour (Please use the hex colour charts!)", "#ffffff");
        var heightlightbgcolor = prompt("Background Colour (Please use the hex colour charts!)", "#4aaaa5");
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[highlight color="' + heightlightcolor + '" bgcolor="' + heightlightbgcolor + '"]' + selected + '[/highlight]';
        } else {
            content = '[highlight color="' + heightlightcolor + '" bgcolor="' + heightlightbgcolor + '"][/highlight]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Small Text':
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[small]' + selected + '[/small]';
        } else {
            content = '[small][/small]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Code Tags':
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[code]' + selected + '[/code]';
        } else {
            content = '[code][/code]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Pre Tags':
        selected = tinyMCE.activeEditor.selection.getContent();
        if (selected) {
            //If text is selected when button is clicked
            //Wrap shortcode around it.
            content = '[pre]' + selected + '[/pre]';
        } else {
            content = '[pre][/pre]';
        }
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'HR Tag':
        content = '[hr]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;

    case 'Clear Fix':
        content = '[clear]';
        tinymce.execCommand('mceInsertContent', false, content);
        break;
    }
}

I also got rid of all those unnecessary empty lines. It may contain some syntax errors, but I'm sure you can fix these yourself.

This shouldn't break your code, it's basically the same as your if statements but doesn't need to see the variable name and == or === operator every time.

Broxzier
  • 2,909
  • 17
  • 36
1

To start:

For future reference, please be sure to follow the Stack Overflow guidelines on question asking. Not because we (the community) are stuck up or want to make it hard for people, but because it helps us help you. Throwing a bunch of code at us and then basically saying "Fix this!" is akin to walking into a doctor's office an saying "Make me whole!"

We just can't help you without the details, and the more specific you can be while describing your problem, the better.

That being said, in my head I tried to cut the cruff and focus on one, specific, underlying issue that I want to address because it's not obvious to someone just learning javascript:

The biggest issues look like the == should be === but when I do this, they stop working.

I took some creative liberty and translated that into:

Why are my equality checks failing when I change them to '===' ?

In javascript, there are two different comparison operators for determining equality/identity.

They are the identity operator:

===

and the equality operator:

==

They behave very differently. The equality operator does type coercion, which can cause interesting, non-desired behavior, whereas the identity operator requires the operands to be of the same type as a prerequisite. One place where this can happen a lot is with strings vs. string objects.

Coming from a different background, or being new to programming, you might think that:

var a = "foo";
var b = new String("foo");

do the same thing. Nope. Not in Javascript. a is of type string and b is of type object. Why does this matter, you ask? Consider the following examples:

a == "foo"  // 1. evaluates to true
a === "foo" // 2. evaluates to true because `a` and "foo" are both of the same type "string"
b == "foo" //  2. evaluates to true because b is coerced from type Object to type String and its value is then compared to "foo" 
b === "foo"// 3. evaluates to false because b is type Object and "foo" is type String

So what this boils down to for you is that determining equality and determining identify in Javascript are two entirely different things. But, in general, you should stick to using === to check for both equality & identity. It makes your code more reliable and predictable, and is just generally a good idea. There are very few cases when you want something to be true using == but be false using ===. Especially when you're just learning.

I have no background in tinymce, so I have no idea what type the p parameter has or n or any other for that matter, but one stab in the dark would be that p is actually an String Object so when you compare using the equality operator ==, it is coerced and evaluates to true, and when you change it to the identify operator ===, it fails of course. My first suggestion to you would be to change all of your equality operators == to identity operators === and try calling .valueOf() on p which will return the String value of the String Object, if that is indeed the case. So, something like this:

if(p.valueOf() === 'Accordions'){

    content =  "[accordion_wrap]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[accordions title=\"Title Goes Here\"]This is where some content goes...[/accordions]<br>[/accordion_wrap]";

    tinymce.execCommand('mceInsertContent', false, content);

 } // end of shortcode

But you really should educate yourself further on == vs. ===.

There have been numerous questions on SO about this, and there are many resources out there on the interwebs that explain this in great detail better than I ever could, so I'm just going to list a few here:

Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?

Comparison Operators - JavaScript | MDN

Equality Operators (JavaScript: The Definitive Guide, 4th Edition)

Well, thats all I've got for you on the matter. I hope it helps. If you have any questions pertaining to what I've written here, feel free to to comment & I'll be sure to get back to you.

Happy Coding!

Community
  • 1
  • 1
Alex
  • 64,178
  • 48
  • 151
  • 180
  • Thank you so much for explaining it for me. This is all I wanted, I did not want someone to code it for me, just a little help to understand it. I am new to this and need help like this, which I thank you for :), comments like cept0 was just un called for, I would not criticise someone who is only learning, very un professional and just shows what a nice person he/she is. Thank you @Alex for explaining in detail :) – Robert Aug 06 '13 at 15:34