Author Topic: New WebsiteBaker Backend – we modernize WB :-)  (Read 24989 times)

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1186
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #100 on: January 18, 2016, 03:19:18 PM »
I noticed some small bugs in the latest 0.34 version. Much of the links in the Addon section didn't work like the Advanced, Templates, Modules and Languages buttons; once clicked you ended up on the front-end.

Reason was some overkill in coding in some .htt template files which I deleted. I kept the same 0.3.4 version since it were just minor bugs but you can download the package again a little higher up: http://forum.WebsiteBaker.org/index.php/topic,27854.msg202227.html#msg202227.

Just upgrade and all things should work now.
...:: Bake the Unbakable ::...

Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #101 on: February 09, 2016, 07:32:08 PM »
I have problem with this super theme and the editor.

The problem is 100% like this:

https://www.drupal.org/node/2303091


Any help would be welcome

TL;DR

Before save, correct one:

Code: [Select]
<a href="http://example.com">
     <div>
         <p>Some text</p>
     </div>
</a>


After save, sucks :
Code: [Select]
<a href="http://example.com"></a>
    <div>
        <p><a href="http://example.com">Some text</a></p>
    </div>
<a href="http://example.com"></a>

Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #102 on: February 09, 2016, 07:55:34 PM »
It says that i shoud add into config file:
  config.allowedConte nt = true;

but where is it located ? CK-editor config file?

TY

Offline jacobi22

  • Posts: 5141
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #103 on: February 09, 2016, 07:58:33 PM »
Quote
but where is it located ? CK-editor config file?

modules / ckeditor / wbconfig / wb_ckconfig.js
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!

Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #104 on: February 11, 2016, 10:09:57 AM »
Thanks!


New big problem!

1. Customer inserts an image. Site is responsive. Responsive images should have class img-responsive automaticly.
(can do this with jquery to front end, but that's a bad solution)
How can add that class in to every image at inserting point ? in to the advanced-tab's classes field.

2. Customer inserts an image and makes a colorbox link from it so that user can zoom the image (almost aways the case)
Customer have to remember to add colorbox-class in to the link classes. I mean type it in there. No customer will remember what to type and where. No one!

When using old CKE-editor it was easy to edit the .html -template and add javascript into it.
But now the CK-editor is a big abstract pile of mess. Unable to modify anything.
This was the old good way:
http://snag.gy/TnRls.jpg


Please help, how to fix this ?

Offline jacobi22

  • Posts: 5141
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #105 on: February 11, 2016, 12:53:55 PM »
maybe, it helps, if you use the search for a problem...    :roll: :roll:

again... the ckeditor is a third party program, comes with all the plugins from the ckeditor-group and this group means: a relation-attribute is not needed.
Luisehahne build a own plugin in 2011 (?), call it "relation", was a part of the old ckeditor versions 0.7.2 and maybe some others with CKE 3.x
but this plugin doesnt work in CKE 4.x
we start to rebuild this plugin, but there are some problems with the indification of the correct field "link" if i want to remove a exist relation input.

the plugin comes, but at the moment, the SP6 is on the top of the to-do-list
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!

Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #106 on: February 15, 2016, 07:33:10 PM »
I made this with the help of one long day googgeling and i have no idea what i'm doing :D
it works btw, but not yet purrfect

Edit the file
modules\ckeditor\wb_config\wb_ckconfig.js

and at the end of the file, it reads now like this:

Code: [Select]
CKEDITOR.on( 'dialogDefinition', function( ev )
    {
        // Take the dialog name and its definition from the event data.
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
        if ( dialogName == 'image' )
        {
            var linkTab = dialogDefinition.getContents( 'info' );
            var link = linkTab.get( 'txtUrl' );

            link['onChange'] = function(evt){
                var dialog = CKEDITOR.dialog.getCurrent();
                dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
            }

            var infoTab1 = dialogDefinition.getContents( 'advanced' );
            var cssField = infoTab1.get( 'txtGenClass' ); //CSS Classes
            //var cssField = infoTab1.get( 'txtdlgGenStyle' ); //this field is for the direct css, not for classes
            cssField['default'] = 'img-responsive';

        }
        // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
        if ( dialogName == 'wblink' )
        {
            // Get a reference to the "Link Info" tab.
            var infoTab = dialogDefinition.getContents( 'info' );
            // Set the default value for the URL field.
            var urlField = infoTab.get( 'url' );
            urlField['default'] = 'www.example.com';

            //http://stackoverflow.com/questions/14827629/ckeditor-colorbox-integration
            /// TODO: nothing here works to get the url. Colorbox should not come for if the link is not to image-file
            ///var urlFieldVal = urlField.getValue();
            ///var dialog = CKEDITOR.dialog.getCurrent();
            ///var urlFieldVal = dialog.getContentElement('info', 'txtUrl').getValue();
            ///if(urlFieldVal.indexOf(".jpg") > 0 || urlFieldVal.indexOf(".png") > 0) {
                //if link is to image -- didnt work
                var infoTab2 = dialogDefinition.getContents( 'advanced' );
                var cssField = infoTab2.get( 'advCSSClasses' );
                cssField['default'] = 'colorbox';
            ///}
   
        }


    // Ends self closing tags the HTML4 way, like <br>.


    });

And it gives you:
- image class: img-responsive
- link class: colorbox (but you have to go and open the link modal also and switch to the tab and then ok to save it. i think...)

Hope you can put this in the release version if you find it working and useful.



Offline jacobi22

  • Posts: 5141
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #107 on: February 15, 2016, 08:56:13 PM »
we work on a "special" wb-plugin to set additional picture infos like relation-attribute, a css-class and a link-title in the link-dialog.
its also possible with this plugin, to set default values in the advanced tab like your posting.
this plugin is a part from the next ckeditor-version 4.5.6, coming here in the next days

P.S.: i'm not sure, that its good for all the users to set a default class btw default value for a field in the link- or advanced tab, my private idea is a select box with a empty default value and some standard values like colorbox etc.
But i'm sure, in the next week comes another user and need a default == fancybox or something like this

maybe a readme with some nstructions to change the defaults is a good solution.

P.S.: your code makes a conflict with the actual setting in wb_ckconfig, that delivered image-width & height without px - see here
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!

Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #108 on: February 17, 2016, 10:36:41 AM »
Thank you for that - you are doing a great work!
I don't get the ck-editor coding, just had to make a quick fix, im already late for chedule.

Today im putting some content in the site (alots of it) and it really bugs me that there is so much empty space on top of the wysiwyg-area. So i tighten those up little bit.
Please consider to pull this  (or what ever the word is to put it in the main release)
(sorry i might modified this already before..)


here is the compare:
http://snag.gy/7aN8N.jpg

Code: [Select]
Editor area moved upwards so there is more space!

------------------- templates/advancedThemeWbFlat/theme.css -------------------
index f028918..b856a42 100644
@@ -552,7 +552,7 @@ body {
 #headerarea {
   position: fixed;
   width: 100%;
-  height: 72px;
+  height: 41px;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: 16px;
@@ -606,7 +606,7 @@ a#frontendtitel:hover {
 
 #pagetopmenu {
   position: fixed;
-  top: 72px;
+  top: 41px;
   width: 100%;
   height: 40px;
   padding-left: 395px;
@@ -650,7 +650,7 @@ a#frontendtitel:hover {
 
 #sidebararea_togglebutton {
   position: absolute;
-  right: -46px;
+  right: -32px;
   top: 112px;
   display: inline-block;
   text-align: center;
@@ -665,11 +665,11 @@ a#frontendtitel:hover {
   content: "";
   font-family: FontAwesome;
   display: block;
-  width: 45px;
+  width: 32px;
   position: relative;
   text-align: center;
-  padding: 10px;
-  font-size: 26px;
+  padding: 5px;
+  font-size: 18px;
 }
 
 #mainarea {
@@ -678,7 +678,7 @@ a#frontendtitel:hover {
   padding-left: 300px;
   /* leave left area free --> left side bar */
   padding-right: 64px;
-  padding-top: 196px;
+  padding-top: 100px;
   padding-bottom: 73px;
   z-index: 10;
 }
@@ -1688,7 +1688,7 @@ ul li.button_modules_advanced a:hover {
   display: block;
   position: fixed;
   right: 0;
-  top: -478px;
+  top: -509px;
   width: 600px;
   height: 590px;
   padding-top: 140px;
@@ -2344,4 +2344,8 @@ position: relative;
   color: #303641;
   left: 0;
   top: 25px;
+}
+
+.content .block-outer{
+margin-top: -38px
 }


Offline noname8

  • Posts: 134
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #109 on: February 19, 2016, 08:34:02 PM »
Sorry my colorbox class adding code was s***.
It added colorbox to every link.
bbbbbuuuuut now i got it to work, asking for colorbox and only if the link is pointing to a .jpg .gif or .png

you still have to open the link tab and advanced tab from there..but is enough for me now.

Code: [Select]



CKEDITOR.on( 'dialogDefinition', function( ev )
    {
        // Take the dialog name and its definition from the event data.
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
        if ( dialogName == 'image' )
        {
            var linkTab = dialogDefinition.getContents( 'info' );
            var link = linkTab.get( 'txtUrl' );

            link['onChange'] = function(evt){
                var dialog = CKEDITOR.dialog.getCurrent();
                dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
            }

            var infoTab1 = dialogDefinition.getContents( 'advanced' );
            var cssField = infoTab1.get( 'txtGenClass' ); //CSS Classes
            //var cssField = infoTab1.get( 'txtdlgGenStyle' ); //this is the direct css styles input
            cssField['default'] = 'img-responsive';

        }
        // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
        if ( dialogName == 'wblink' )
        {
            // Get a reference to the "Link Info" tab.
            var infoTab = dialogDefinition.getContents( 'info' );
            // Set the default value for the URL field.
            var urlField = infoTab.get( 'url' );
           

             urlField['default'] = 'www.example.com';

             var dialog = dialogDefinition.dialog;//works, gets the main dialog object

var infoTab2 = dialogDefinition.getContents( 'advanced' );
         var cssField = infoTab2.get( 'advCSSClasses' );

             dialog.on('selectPage', function (ee) {
              if(ee['data']['page'] =='advanced') {
             
            var dialogx = CKEDITOR.dialog.getCurrent();
            //try to get the url
var urlValueNow=dialogx.getContentElement('info', 'url').getValue();
if(urlValueNow != 'undefined') {
if(urlValueNow.toLowerCase().indexOf(".jpg") > 0 || urlValueNow.toLowerCase().indexOf(".png") > 0 || urlValueNow.toLowerCase().indexOf(".gif") > 0) {
//is linkg to image
var valueNow=dialogx.getContentElement('advanced', 'advCSSClasses').getValue();
if(valueNow == '') {
var confirmx=confirm('Do you want the link to open in colorbox ?');
if(confirmx) {
dialogx.getContentElement('advanced', 'advCSSClasses').setValue('colorbox');
// cssField['default'] = 'colorbox'; //no need for default text at this point
}
}
}
//url is jpg
}
//url undefined



             
              }
              //when the tab is changed

             });
             //dialoog.on

     //http://stackoverflow.com/questions/14827629/ckeditor-colorbox-integration
           
       
        }


    });



Offline jacobi22

  • Posts: 5141
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #110 on: February 20, 2016, 12:52:11 AM »
or you use the new and latest version of the ckeditor module  ;-)
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!